【JS】フェードインのアニメーションで要素を表示させる方法
今回は、フェードインのアニメーションで要素を表示させる方法を紹介します。 JavaScriptを使って実装します。 【JS】フェードインのアニメーションで要素を表示させる方法 完成形はこちら。 下にスクロールしていくと、…
headerのテンプレ
今回は個人的にこれから使いそうだと思ったheaderのテンプレを作りました。 仕事で使う機会があれば、是非コピペしてコーディングを効率化していこうと思います。 HTML <header class=”header”…
【Swiper】縦横比を保ったまま画像スライダーする方法
今回はSwiperのライブラリを使って、「縦横比を保ったまま画像スライダーする方法」を紹介します。 画像スライダーは実際の業務でも頻繁に使うので、WEB制作を行う人は是非マスターしましょう！ Swiperとは？ Swip…
【CSS】ネガティブマージンを使って要素をずらす方法
今回は「ネガティブマージンを使って要素をずらす方法」について紹介していきます。 ネガティブマージンを理解することで、レイアウトの幅が広がるので、是非参考にしてください！ ネガティブマージンとは？ marginは基本的に「…
【CSS】aタグをクリックできる範囲をheaderの高さと一緒にする方法
今回はCSSで「aタグをクリックできる範囲をheaderの高さと一緒にする方法」を紹介します。 aタグをクリック出来る範囲が大きい方が、ユーザーもクリックしやすくなります。 是非試してみてください！ 【CSS】aタグをク…
【CSS】円の中にテキストを表示する方法
今回は、「CSSで円の中にテキストを表示する方法」について。 テキストが1行の場合と2行の場合の2パターンについて紹介していきます。 【CSS】円の中にテキストを表示する方法 完成形はこちらです。 See the Pen…
【CSS】ニュースリストの作り方
仕事で「ニュースリスト」を実装したので、せっかくなのでメモに残しておくことにしました。 レスポンシブにも対応しているので、是非真似してコーディングしたりコピペしてみてください。 【CSS】ニュースリストの作り方 完成形は…
height100vhの背景画像を縦横比を維持してレスポンシブする方法
今回は、「height100vhの背景画像を縦横比を維持してレスポンシブする方法」について解説します！ 今回解説する方法を使うと、自動的に背景画像の縦横比を維持してくれるので、レスポンシブが楽になります。 コピペできるよ…