macoblog

「ゲーム × プログラミング」で生きていく

MMORPGに人生捧げてみ?

【CSS】横並びにした要素を上揃いにする方法【一行追加でOK】

CSS プログラミング

横並びにした要素の縦列を揃えたい、そんな時はスタイルを1行追加するだけでOKです。

本記事では、CSS初心者や独学中の方向けに実際のコードを公開しながら解説しております。

CSSで横並びさせる時ってどうしていますか?

display:inline-blockを使うことも少なくないと思います。

ただ、縦のラインが揃わないんですよね、そんな時はこれを使いましょう。

スポンサードサーチ


vertical-alignを使う

縦を揃えたい、そんな時はvertical-alignを使えば簡単です。

例を見てみましょう、例えば下のようなリストがあったとします。

HTML

<ul class="lists">
  <li class="list">Aブロック<br>aチーム</li>
  <li class="list">Bブロック<br>bチーム<br>cチーム</li>
  <li class="list">Cブロック<br>dチーム<br>eチーム<br>fチーム</li>
</ul>

CSS

.list {
  display: inline-block;
}

表示はこんな感じになります。

vertical_alignを指定ない場合

下揃いになっているのがわかります、これを変えたい時にvertical-alignを使います。

vertical-alignの使い方【1行追加するだけ】

前述したスタイルに一行だけ追加するだけでOKです。

下記のように指定しましょう【上揃い】

CSS

.list {
  display: inline-block;
  vertical-align: top;
}

vertical-align: topを指定するだけでOK、すると。

vertical-alignにtopを指定した場合

見事に揃いましたね、ちなみに中央揃えにしたい場合は値をmiddleにすればOKです。

vertical-alignにmiddleを指定した場合

値を変えるだけで動作しますので、いろいろ試してみましょう。

終わりに

使える状況はいろいろあると思います。

例えばサイトのフッター付近にサイトマップを作ったりだとか。

簡単に使える分いろいろ応用できますので覚えておいて損はないと思います。

以上になります。

Twitterでも情報や経過を発信していますのでフォローよろしくお願いします。

不明点やアドバイスなどありましたら、コメントかTwitterからお願いします。