Zenn
🔰

🔰忘れがちなCSSプロパティの備忘録

2024/02/28に公開
CSS
HTML
#
デザイン
#
基本
tech

概要

最近フロントエンドを触る機会が増え、かねてより関心のあったデザインの分野にも手を出したいなと考えており1からCSSを学びなおしています。

今までそこまでCSSを触る機会が無かったので感覚的に理解してしまっていたところを整理する目的で本記事を書くことにしました。
基本的な内容ばかりになるため、玄人の方向けの内容にはなっていないです。

頭で理解していても、時々頭がごちゃるので整理。

インラインボックス

テキスト行の中に含めることができるボックス。
幅と高さの調整は不可。
以下のようにインラインボックスであるspanに高さ・幅を指定してもサイズは適用されない。

span {
  background-color: #095cdc;
  width: 100px;
  height: 100px;
}

なお、サイズ指定はできないもののパディングや左右マージンは設定ができる。
※上下マージンは設定不可

フレックスボックスを使ったレイアウト

横並びにしたいブロック要素をさらに親となるブロック要素で囲む。
そのうえで、親のブロック要素にdisplay:flexを設定することで、子であるブロックボックスを横並びにできる。
フレックスボックスを使うメリットには以下があげられる。

  1. 高さの調整が簡単
  2. 順序の入れ替えが可能
  3. レスポンシブとの相性が良い
    他にも要素を横並びにする手段はある(float、inlin-blockなど)が、シンプルで使い勝手がよい。

横並びにするサンプル

    <div class="flex-parent">
      <div class="flex-child1">
        <p>child1</p>
      </div>
      <div class="flex-child2">
        <p>child2</p>
      </div>
    </div>

/* 親 */
.flex-parent {
  display: flex;
}

/* 子(わかりやすいようにwidth:50%を指定) */
.flex-child1 {
  background-color: #4682b4;
  width: 50%;
}

.flex-child2 {
  background-color: #b0c4de;
  width: 50%;
}

上記のコードによってこうなる。child1・2の親であるparentでflexを指定しているため横並びになっている。

横並びにしたボックス要素の順序を入れ替えてみる

左右の順序を入れ替えるには子要素にorderを指定するだけ。
★が追加したコード。

.flex-child1 {
  background-color: #4682b4;
  width: 50%;
  order: 2; ★
}

.flex-child2 {
  background-color: #b0c4de;
  width: 50%;
  order: 1; ★
}

以下のように並びが入れ替わる。

justify-contentを使う

justify-contentを使うとフレックスコンテナの水平方向の配置を指定できる。
例えば以下のようにjustify-content: space-betweenを指定すると、水平方向の両端に配置できる。（見づらかったので高さ指定を追加）

.flex-parent {
  display: flex;
  justify-content: space-between;
}

.flex-child1 {
  background-color: #4682b4;
  width: 20%;
  height:50px;
  order: 2;
}

.flex-child2 {
  background-color: #b0c4de;
  width: 20%;
  height:50px;
  order: 1;
}

↓のような感じ。

justify-content: endを指定したら通常右端にそろえることができる。

align-items

ここまで水平方向の調整手段を書いたが、垂直方向の調整はaligen-itemsを使う。
(orderプロパティが残っていたので削除)

.flex-parent {
  display: flex;
  border: 1px solid #095cdc;
  width: 500px;
  height: 100px;
  align-items: center;
}

.flex-child1 {
  background-color: #4682b4;
  width: 20%;
  height:50px;
}

.flex-child2 {
  background-color: #b0c4de;
  width: 20%;
  height:50px;
}

align-items: centerを使うとこんな感じで親のフレックスコンテナの中央に配置される。

他にも細かくプロパティが設定できるが、いったんはこのくらい。

まとめ

初歩の初歩って感じですが、レイアウトの基本に触れるのが恥ずかしいことに初めてなのでじっくり学んでいきます。
グリッドレイアウトに関連する内容もまとめたいので次回まとめる予定です。

学習にあたり読んだ書籍

いちばんよくわかるHTML5&CSS3デザインきちんと入門
プロの「引き出し」を増やす HTML+CSSコーディングの強化書

Discussion