注目のストーリー
Web制作
新卒0年目で部長になった話。～Part6～
入社して3カ月、地道に研修を進めているのですが、実務を想定して様々なことに挑戦させていただいています！ ウェブの基礎的な知識のインプットだけでなく、実際にいくつかアプリを制作して、最近はこだわりkintoneのプラグイン開発までさせていただきやりがいのある毎日を過ごしています。 そんな私の、去年のお話です。ある日、PR部長から突然の呼び出しが……PR部長からの呼び出し。いつものように出社したある日、突然、PR部長のガッシュさんから「1時間ほど少し相談を！」と呼び出しを受けました。 詳細はわからなかったので、不安を抱えつつ会議室へ…… 刹那、ざきに電流走る…！「次期PR部長をお任せできたら...
【Panzoom】ピンチインピンチアウトで拡大縮小を実装
先日手がけたサイトにて「スマートフォンレイアウト時は地図をピンチインピンチアウトで拡大縮小してほしい」という要望をいただき実装したので使用したパッケージのお話をしようと思います。Panzoomパッケージ割と直球そのままなパッケージ名ですが、panのほうが移動、zoomが拡大縮小ですね。撮影用語でカメラ位置を固定し水平に振るカメラワークをパンといいますが、そのパンです。公式サンプルサイトhttps://timmywil.com/panzoom/demo/サンプルサイト右上アイコンからGitHubのリポジトリにもアクセスできます。これから記載する導入方法もリポジトリのreadmeに書かれてい...
【Swiper】流れ続けるモーダルスライダー〜矢印操作とモーダル開閉制御〜
さて、Swiperで無限に流れ続けるモーダルスライダーを作りたい！でも・・・モーダルを開いたらスライダーが止まってほしい・・・！しかも！閉じたあとに“どこにいたっけ？”ってならずに、ちゃんと開いた場所から再開したい！さらに！！見たいコンテンツの位置にスムーズに移動できたら最高！そんな理想のスライダーを実装してみましたDEMOさっそく完成版はこちらです。※Swiperの基本的な実装方法については省略します。本記事では、無限ループ＋モーダル連携にフォーカスして解説します※本記事では簡易的なモーダルを使用しています。必要に応じて、デザインや挙動を自由にカスタマイズしてください！コードの説明基本...
JavaScriptで左から順番にフェードインさせる方法
画像やリスト、カードの表示などで使えるかなと思います。調べると似たような記事もありますが、こちらはメインのフェードインにkeyframesを使用していないため、keyframesを別途付けたい場合におすすめです今回は真ん中のロージーにkeyframesを当ててみました。では先にコードをどうぞ！JS・CSSを順番に解説していきますJSの解説補足CSSの解説最後にところでJSの解説document.addEventListener('DOMContentLoaded', function() { //クラス名がfadeinの要素をすべて取得して変数に格納 var fadein = doc...
【Swiper】サムネイルのマウスホバーとスライダーを連動させてみた
さて今回は、メインのスライダーとサムネイルがあるデザインで、サムネイルをホバーするとメインのスライドが切り替わるようにします。swiperのメソッドを使用してシンプルに実装できるので、是非使ってみてください！基本の連動するスライダーを作成まずは基本となるスライダーを作成します。この状態では、クリックで連動します。thumbsでサムネイルにしたいスライダーのインスタンス名thumbnailSwiperを指定すると、2つのスライダーが連動するようになります。thumbs: { swiper: thumbnailSwiper}メインスライダーのコードをサムネイルにしたいスライダーの前に書くと...
内定者。ただいまアルバイト中。
今回はアルバイトでの感想をつらつら並べます。ゆっくり見ていってください～インターンシップの経験バイトの話！とありますが、まずはインターンのお話を少し。昨年の夏頃、1週間インターンとしてお世話になりました。マークアップの課題を頂いて、それに取り組みながらロジカルでの業務を体験しました。課題は先輩方のサポートのもとで取り組んだのですが、学ぶことが多くて……私はもともと個人的に学習していたのですが、実務での実装で気を付けるべきことについてしっかりとレクチャーしていただき、その後のコーディングにめちゃめちゃ役立っています。見やすいコード、わかりやすい設計を心掛けてはいたのですが、まだまだ甘かった...
GSAPでスナップする横スクロールを作ってみた！
こういうのでもスクロールするのが面倒だったり、自分の知りたい情報が画面に収まらない！などちょっとストレスに感じる人もいるかと思います。そこで、少しのスクロールでスナップするようにできる横スクロールを作成します！完成したコードまず基本となる縦スクロールすると横にスクロールされるを作成する必要があるのですが・・・・それを簡単に叶えてくれるのがGSAPです。JavaScriptライブラリで複雑なアニメーションも簡単に実装することができます。そんなGSAPを使用して作ったのがこちらです。GSAPについてライセンスGSAPは２つのライセンスがありStandard(標準ライセンス):無料Busine...
z-indexが効かない！？そんな時はスタックコンテキストに注目してみよう！
今回の記事では、僕が学習を始めて間もないころに苦戦した『z-indexとスタックコンテキスト』についてピックアップしました。（嫌な記憶を呼び起こしながら・・・）それでは本題に入ります！CSSにおいて、z-indexの値で要素の重ね順を操作すると思いますが、スタックコンテキストの罠にかかると、うまく制御できない事態に陥ってしまいます。そもそもスタックコンテキストとは？重ね合わせコンテキスト (Stacking context) は、ビューポートまたはウェブページに面していると想定されるユーザーに対する仮想的な Z 軸に沿って並べられた HTML 要素の三次元の概念化です。 HTML 要素は...
追従の実装はposition:stickyが便利！
そんな皆様お馴染みのpositionとは、要素の位置を決める際に使用するCSSプロパティです。要素を重ねたり固定したり、より自由な配置が可能になりますよね。ありがとうposition🎌そんなハイスペックpositionには、下記のような5つの値を指定できます。私はこれを見て思ったんです。sticky・・・？上の4つは普段から大変お世話になっているのですが、stickyは初めましてだったのです💨調べてみると、何やらすご～く便利だそうで。名前もかわいいし🤗ということで今回は、position:stickyについて私が学んだことを書いていこうと思います！position:stickyとはなんぞ...
clip-pathで多角形を作ろう！
ということで、今回はclip-pathプロパティを用いて、多角形をCSSで簡単に作る方法をご紹介したいと思います！最後には上記のような矢印背景の作り方もご紹介していますので、是非最後までご覧ください！■そもそもclip-pathとは？clip-pathプロパティを使用すると、要素や画像をクリッピングして（切り抜いて）表示させることが出来ます。clip-pathプロパティでクリッピング領域を設定すると、クリッピング領域の内部の部分は表示され、外部の部分は非表示になります。参考：clip-path – CSS: カスケーディングスタイルシート | MDNIllustratorやPhotosh...
リストを縦並びで折り返すのはCSSのgridで解決
・list01 ・list02・list03 ・list04・list05リストを2列で並べるときはflexを使用することが多いと思いますがこのような順序になります。・list01 ・list04・list02 ・list05・list03今回はこのように縦並びにします。【PC】liタグを縦並びに2列で並べる【SP】liタグを縦並びに1列で並べるさらに、PCとSPでの表示はこうしたいのです💪これが結構悩みどころです。。。今回は、これまでよく使っていた方法と、gridを使って縦並びにする方法をご紹介します。方法1 flex.list { display: flex; flex-wr...
Spaces
