フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援
フリーランスのためのネットビジネス専門学校 ネットで独立開業を目指す人を応援

ブロック要素を横並びにするいくつかの方法

自分の知識の定着のため、毎日1記事書くことを目標にドンドン投稿していきます(謎宣言w)

今日は、意外と面倒臭いブロック要素の横並びの方法を知ってる限り紹介します。
これから新しく知るたびにここにupしていきます。

注意事項
・cssをリセットするため、"reset.css"というファイル名でcssをリセットしています。
・視覚的にわかりやすくするため、要素に背景色をつけてます。
・htmlの記述はbodyの中を記述していきます。

今回はこんな感じの縦並びの要素を横並びにしていきます。
_Users_kei_Desktop_test_test.html (3).png

test.html
<div class="disgri11">
    <h2>Hello</h2>
    <p>keisuke</p>
</div>

display:grid;を使う

これはかなり独特で、あまり他ではみたことがありませんが、僕はこのやり方でほとんど横並びにしています。

test.css
h2 {
    background-color: blue;
}
p {
    background-color: #fd00ff;
}
.disgri11 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
}

_Users_kei_Desktop_test_test.html (2).png

このように、display: grid;を使ってできました。
この方法でやるメリット
①要素の高さが隣り合った方の高い要素に自動で合わせられる
②要素の等分割が超簡単(1行でできる)

個人的には②のメリットがかなり良いですね!
デザインに統一感が出て、見栄えがよくなります。
しかも、1行変化させるだけでこんなこともできちゃうんです。
_Users_kei_Desktop_test_test.html (4).png

なんといっても超絶楽ですので、要素のループなんかの際には便利です!

float: left;を使用

こちらは王道のfloatです。
個人的にはあまり使いませんが、使用せざるをえない場面も多々あります。

test.css
h2 {
    background-color: blue;
    float: left;
}
p {
    background-color: #fd00ff;
    float: left;
}

_Users_kei_Desktop_test_test.html (5).png

floatを使うと、このように、要素が右から回り込むようにして横並びになります。

メリット
・左詰めで横並びにしてくれる

display:grid;の方と違って左詰めで横並びにしてくれるので、そういうデザインをする場合のみこれを使用しています。
でも、見ての通り、デザインに統一感がでないので、僕はあまり好まないです。

それと、floatした要素の次の要素にclear:both;をつけないと、エンドレスで回り込まれるのは少し厄介ですね。。。
気をつけるべきポイントです!

[紹介元] CSSタグが付けられた新着投稿 – Qiita ブロック要素を横並びにするいくつかの方法

コメント

記事に戻る

コメントを残す