-
【CSS】要素を中央に寄せるテクニック6選 場面によって使い分けよう
要素を中央に寄せることは頻繁にあります。 やり方もケースバイケースです。 今回の記事では、要素を中央に寄せるためのテクニックをまとめてみました。 一元的な記事ですので、状況に応じて参考に ...
-
【CSS】ヘッダー作成でよく使うCSSとよくあるエラーのまとめ記事
ヘッダーに関する記事が増えてきたので、まとめ記事を作ってみました。 よく使うCSSや初心者がよくつまづくエラーを一挙に紹介します。 ヘッダーの作成はある程度パターンが決まっておりますので ...
-
【flex】ヘッダーのロゴとナビゲーションの高さを中央でそろえる方法
今回のテーマは flex です。 ヘッダーにおいて、ロゴとナビゲーションの高さを中央でそろえる方法を紹介します。 ロゴが左にあって、右側にナビゲーションがある。 というのはヘッダーのよくあるパターンで ...
-
【flex】縦に並べた要素を中央でそろえるには align-items: center です
プログラミングを勉強中のみなさん、こんにちは！ 今回は、flex-direction:column; で要素を縦並びにして、中央でそろえる方法を紹介します。 目次 flex-direction中央でそ ...
-
【flex】高さを揃えないで要素を並べるにはalign-items
今回は、flexを使うときの便利なテクニック、「align-items」を紹介します。 以前私がハマってしまったのが、高さが異なる要素を並べたとき、自動で高さがそろってしまったことです。 高さはバラバ ...
-
display:flexで並べた要素間の余白設定はgapが便利
プログラミングを勉強中のみなさん、こんにちは！ 今回は、flexの余白設定で使える「gap」について紹介します。 余白というと、margin や padding などを思い ...
-
【flex】レスポンシブデザインで要素の並び順や幅の指定を自由自在に
2024/4/4 flex, レスポンシブデザイン, 順番
今回はflexを使用したレスポンシブデザインのよくあるパターンを紹介します。 この記事でわかること ２カラム（PC）から１カラム（スマホ）に変更する ２カラムから１カラムに変更するとき、要素の順番を逆 ...
-
【CSS】画像を均等幅で横並びにする方法をわかりやすく解説します
今回は、複数の画像を均等幅で横並びにする方法をご紹介します。 画像でもブロック要素でも、横並びにするときは「flex」を使いますね。 画像を並べたはいいが、画像が原寸で表示され、ブラウザからはみ出てし ...