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