HTML+CSSの、ブロックを横並びでコーディングする一例を挙げる。
Contents
ブロックを4つ横並び
float: leftを指定
単純に横並びにさせたいのみなら、cssで float: left を指定する。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="sideBySide.css" /> </head> <body> <div class="boxA"> <div class="box1"> dice1 </div> <div class="box2"> dice2 </div> <div class="box3"> dice3 </div> <div class="box4"> dice4 </div> </div> </body> </html> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.boxA { color: white; } .box1 { height: 100px; width: 100px; background-color: blue; float: left; } .box2 { height: 100px; width: 100px; background-color: cyan; float: left; } .box3 { height: 100px; width: 100px; background-color: black; float: left; } .box4 { height: 100px; width: 100px; background-color: pink; float: left; } |
動作お試し
https://jsfiddle.net/dice_record/n1w8y4oh/13/
ブロックを一部を横並び
float: leftを指定しつつ、クリアフィックス
クリアフィックス(clearfix)というテクニックを用いる。
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="someBlocksSideBySide.css" /> </head> <body> <div class="box1"> dice1 </div> <div class="boxA"> <div class="box2"> dice2 </div> <div class="box3"> dice3 </div> </div> <div class="box4"> dice4 </div> </body> </html> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.box1 { height: 100px; width: 100%; background-color: blue; } .boxA:after { content: ""; display: block; clear: both; } .box2 { height: 100px; width: 50%; background-color: cyan; float: left; } .box3 { height: 100px; width: 50%; background-color: ghostwhite; float: left; } .box4 { height: 100px; width: 100%; background-color: pink; } |
動作お試し
https://jsfiddle.net/dice_record/n1w8y4oh/26/
参照
『HTML5&CSS3デザインブック』
MDN web docs
コンテンツ分割要素 – HTML: HyperText Markup Language | MDN
以上。