cssでのブロックの配置方法

1. 目的

Webページを作成するときにブロックを配置する方法をcss/htmlでどのように記述するかを記録する。

2 内容

作成したWebページ

上記を実現するコード

sample.html

<div id="large_block">
      <div class="float150">
      </div>

      <div class="float300">
      </div>
</div>

<div id="large_block">
      <div class="float150">
      </div>

      <div class="float300">
      </div>
</div>

sample.css

# large_block {
    width: 1000px;
    height: 200px;
    padding: 0px;
    margin: 10px;
    float :left; /* 左側を起点にする */
    border: solid 0.5px; /* 領域のボーダーラインの設定 */
}   

.float150 {
    height: 150px;              /* 高さ指定 */
    width: 150px;               /* 幅指定 */
    background-color: #FFF;     /* 背景色指定 */
    margin:  23px;              /* 周りの余白指定 */
    float:  left;   /* 回り込み指定(左から順番に配置していくということ) */
    border: solid 2px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
    padding: 0px;
}

.float300 {
    height: 150px;              /* 高さ指定 */
    width: 300px;               /* 幅指定 */
    background-color: #FFF;     /* 背景色指定 */
    margin:  23px;              /* 周りの余白指定*/
    float:  left;   /* 回り込み指定(左から順番に配置していくということ) */
    border: solid 2px #6091d3;/*線*/
    border-radius: 10px;/*角の丸み*/
    padding: 0px;
}