Webで遊ぼ!

Web制作を
遊び感覚で。

MENU BOX
Webで
遊ぼ!
OPEN

ホーム

 > 

 > 

要素の横並び+高さの位置調整(align-items, align-self)

要素の横並び+高さの位置調整(align-items, align-self)


前回の記事では要素を横並びにする方法をご紹介しましたが、その記事の中では紹介しきれなかったテクニックがまだまだあります。その中の一つが、今回ご紹介する「横並びにした上で、横並びに並べたアイテムの高さの位置を調整する」という方法です。横並びにしたいアイテムが全てピッタリ同じ高さではないという場合に役立つテクニックです。

縦方向の設定も可能です!

「HOME」や「ABOUT」など、各ページへのリンクメニューを横並びにする場合を思い浮かべてください。この場合、横並びにしたいアイテムの高さが異なってしまうということは考えづらいので、横並びにした上で高さを揃えるという必要はありません。前回の記事で紹介した横並びの配置テクニックだけでもなんとかなります。

では次に、写真とそのタイトル・説明文を横並びにする場合を思い浮かべてみてください。一言で済むような場合だと、文章のスペースは写真の大きさより小さくなるでしょうし、長文で解説が必要な場合は写真よりも大きなスペースが必要となります。
そういった場合、「横並びにした上で、さらに高さの位置調整が必要となる」ことが多いです。

こうした方が良いのか

こうした方が良いのか

こうした方が良いのか

というように、高さが違うというだけで色々なパターンが考えられます。

そこで今回紹介するのが、 要素を横並びにした上でアイテムの高さの位置を調整できるCSSです!

細かな位置調整はpositionプロパティを使っても行うことができましたが、基本的に、コンテンツの配置でpositionプロパティを使うのは最後の手段です。なぜかというと、子孫要素に与える影響が大きく、配置崩れを起こしてしまう原因になることもあるからです。(使わない方が良いとまで言いたいわけではないですが)

ともかく、display: flex; で横並びにしたアイテムの高さの位置を調整できるCSSが用意されているのですから、これを使わない手はありませんよね。
横並び配置(display: flex;)、横並びの位置指定(justify-content)、横並び+高さの位置調整(align-items,align-self)の3つをマスターすれば、フレックスボックスの基礎はバッチリですよ!


◆ align-items とは ◆

align-items(アラインアイテムズ)とは、display: flex; などで横並びにしたアイテムの高さの位置を一括で指定するCSSプロパティです。

display: flex;、justify-contentと同じく、横並びにしたい要素そのものではなく、親要素に設定します。

値も justify-content と似たようなキーワード値を取り、center、flex-start、flex-end…といったものがあります。

*align-itemsの構文*
■ セレクタ { align-items: center ; }

また、キーワード値は以下のようなものがあります。

*align-itemsのキーワード値と効果*

キーワード値効果
center中央に配置する
flex-start上に寄せる
flex-end下に寄せる
stretch一番縦に長いアイテムに引き伸ばして揃える。
heightが固定値で設定されていると無効

justify-contentの時もそうでしたが、言葉ではイメージしづらいものもあるので、実際にどのように配置されるか試して確認するのが一番良いと思います。
再び、display: flex; だけを設定して横並びにしたボックスと、それぞれの効果が適用されるボタンを用意しました。
配置がどう変わるか、対応するボタンを押して実験してみてくださいね!

box1
box2
改行1行
box3
改行2行
高さ調整
box4
改行
3行
高さ調整

heightで高さを固定値で設定すると「align-items: stretch」が効かなくなってしまうので、ここでは文章の行数(改行)によってアイテムの高さに差を出しています。heightを固定値で設定していても、centerなど他の値は有効です。
まぁ、height:100px; って固定してるのに、align-items: stretch; で引き伸ばされてしまったら、そっちの方が不都合ですからね。
align-items: stretch; が効かないなと思った時は、アイテムにheightが設定されていないかどうかを確認すると良いでしょう。

    POINT!
  1. ・align-items は、flex などで横並びにしたアイテムの高さの位置を一括指定できるプロパティ!
  2. ・align-items も justify-content と同じく、center や flex-start などのキーワード値で指定する!

◆ 1つのアイテムだけ高さの位置を調整したい場合 ◆

先ほどご紹介した方法(align-items)は、横並びにしたフレックスアイテムの縦方向の位置が全て一括で調整されるので便利ですが、一部のアイテムだけ位置を調整したいという場合も考えられます。
そんな時に役に立つのが、 「align-self」プロパティです!

align-itemsプロパティは、display: flex; を設定した親要素に記述しますが、align-selfプロパティは「調整を加えたい子要素(フレックスアイテム)」に設定します。

また、値は align-items とほとんど同じキーワード値をとります。

* align-self の構文*
■ セレクタ { align-self: center; }

それではサンプルコードと、切り替え機能付き表示結果を確認していきましょう!

    <div id="samplebigflexbox">
      <div class="sampleflex1">box1</div>
      <div class="sampleflex2">box2<br>改行1行</div>
      <div class="sampleflex3">box3<br>改行2行<br>高さ調整</div>
      <div class="sampleflex4">box4<br>改行<br>3行<br>高さ調整</div>
    </div>

      #samplebigflexbox {
        display: flex;
      }
      .sampleflex1 {
        background-color:skyblue;
        width:25%;
        align-self: center; /*フレックスアイテムに指定する*/
      }
      .sampleflex2 {
        background-color:lightgreen;
        width:25%;
      }
      .sampleflex3 {
        background-color:lightyellow;
        width: 25%;
      }
      .sampleflex4 {
        background-color:yellowgreen;
        width: 25%;
      }
box1
box2
改行1行
box3
改行2行
高さ調整
box4
改行
3行
高さ調整

フレックスアイテムの縦方向の位置調整が一括でまとめてされてしまうと困る場合は、このように個別に位置調整することで解決できます。
CSSに慣れないうちは、「位置調整=positionプロパティ」と考えてしまいがちなのですが、要素の配置・位置を調整する方法は色々あるので最善の方法を選択できるようになることが大切です!

    POINT!
  1. ・align-selfプロパティで、フレックスアイテムの縦方向の位置調整を個別にできる!
  2. ・align-selfプロパティは、親要素ではなく子要素(フレックスアイテム)に設定する!
  3. ・値はキーワード値をとり、align-itemsとほとんど同じ!

◆ ど真ん中に配置(flexの応用) ◆

前回の記事で、display: flex; と、justify-content: center; で、要素をバシッと中央配置できるテクニックを紹介しましたが、さらに今回紹介した align-items: center; を組み合わせることで、中央だけでなくど真ん中に配置することも可能です。

要するに、「横方向の中央」と「縦方向の中央」の両方を設定するということですね。
それでは早速、サンプルコードと表示結果を紹介しましょう。

    <div class="domannaka">
      <p>これをど真ん中に配置したい</p>
    </div>

      .domannaka {
        height: 100px;
        background-color: darkblue;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .domannaka p {
        font-size: 0.75rem;
        width: fit-content;
        background-color: lightyellow;
        padding:10px;
      }

これをど真ん中に配置したい

このように、横並びにしたいわけじゃない場合でも display: flex; とその配置調整プロパティである、justify-content、align-items は使い方次第で色々と応用ができます。
横方向への中央配置だけなら他にも色々方法がありますが(※詳しくは、「要素の中央配置の記事」をご覧ください)、縦方向にも中央に配置したい時は、このやり方を覚えておくと役に立ちますよ!

    POINT!
  1. ・display: flex; justify-content: center; align-items: center; を組み合わせることで、要素を横+縦の中央(ど真ん中)に配置できる!
  2. ・子要素(フレックスアイテム)が1つだけでも設定可能!

ワンポイントチェック

今回は、フレックスボックスの縦方向の位置調整CSSを紹介しましたが、活用のシチュエーションとして、大きさがバラバラな画像を並べて位置を調整するということはあまりありません。Webページを作成する際、画像を整列させるような場合は同じ大きさに揃えることが多いからです。
並べた画像の大きさがバラバラだと、デザイン的にもあまり見やすいとは言えませんからね。

フレックスボックスの縦方向の位置調整の必要が出るとしたら、多くは「大きさが一定の画像と、文章など大きさを一定に揃えられないフレックスアイテムを並べる場合」です。

例えばですが、画像の著作者や、補足的な説明を一言追加する程度であれば、

作者:ROWAIDO

と、このようにフレックスアイテムを align-items: flex-end; で下に揃えるとしっくりくる場合が多いです。

一方、画像の説明文など、ある程度まとまった文章を並べる場合は、センター揃えか上揃えの方が見やすくなります。(下の例を参照)

◀︎この画像は、「Webで遊ぼ!」というサイトのアイコンとして作成されました。
遊び心を出すため、子どもがクレヨンを使って落書きしたようなイメージとなっています。

align-itemsを上手に利用することで、大きさが異なるアイテムを並べる場合に一工夫加えたり、より見やすくレイアウトすることができるので、ぜひ活用してみてくださいね!

今回の動画で紹介したコード!

今回の解説動画で使用したコードを掲載しています。学習用としてご自由にコピペしてお使い下さい。(※スクロールできます)

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .flexbox {
        display: flex;
        align-items: center;
      }
      .flexchild {
        background-color: lightblue;
        margin:1rem;
      }
      .paretnt {
        width: 300px;
        height: 300px;
        background-color: lightgreen;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    </style>
  </head>
  <body>
    <div class="flexbox">
      <div class="flexchild">
        <p>あいう</p>
      </div>
      <div class="flexchild">
        <p>あいう<br>かきく</p>
      </div>
      <div class="flexchild">
        <p>あいう<br>かきく<br>さしす</p>
      </div>
      <div class="flexchild">
        <p>あいう<br>かきく<br>さしす<br>たちつ</p>
      </div>
    </div>
    
    <div class="paretnt">
      <p>どまんなかに配置</p>
    </div>
  </body>
</html>

« »

カテゴリーリンク

著者について- author profile -

ROYDOプロフィール写真
RO・Y・DO(rowaido)

モバイルアプリ(iOS・Android)ディベロッパー&デザイナー

これまでに、可読性の高いカラーパターンを自動で生成するアプリや、『第3火曜日』といった形式で通知をスケジュールできるアプリなどを制作。

サブでWebデザイン・フロントエンドエンジニアとしても活動しています。

📝ツール・言語:JavaScript/React Native/Kotlin/Android Studio/Swift/SwiftUI

🎓資格:基本情報技術者/ウェブデザイン技能検定3級

Twitterアイコン Instagramアイコン