【HTML】ブロック横並び【CSS】

HTML＋CSSの、ブロックを横並びでコーディングする一例を挙げる。

Contents

ブロックを4つ横並び
ブロックを一部を横並び
参照
- 『ＨＴＭＬ５＆ＣＳＳ３デザインブック』
- MDN web docs

ブロックを4つ横並び

float: leftを指定

単純に横並びにさせたいのみなら、cssで float: left を指定する。

例として挙げるのは、classを4つ作り、4つ四角い箱を横に並べたシンプルなもの。heightやwidthの値、floatの有無や変更による表示の変更も挙動の参考になる。

HTML

<!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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

dice1

</div>

dice2

</div>

dice3

</div>

dice4

</div>

</body>

</html>

CSS

.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;
}

.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)というテクニックを用いる。

clearfix＝フローティングボックスが後続のボックスのレイアウトに影響を及ぼさないようにする為のテクニック。

HTML

<!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>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

dice1

</div>

dice2

</div>

dice3

</div>

dice4

</div>

</body>

</html>

CSS

.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;
}