Embedded Files
marginやpaddingで１つ１つ図やテキストを配置することもできますが、ここではまとめてレイアウトする方法について説明します。
均等に割り付ける方法としてFlexboxがあります。
flexboxは配列を作ります。まずは普通に文字を並べるcssを書いてみました。#0bd(青)地に#fff(白)抜きの字を表示して、ギャプを10px(ピクセル)空けます。タイトル文字の色はID でcornflowerblue(矢車草の青)を指定してみました。
CSS (css_flexbox.css)
.item{
background: #0bd;
color: #fff;
margin: 10px;
padding: 10px;
}
#titlecolor{
color:cornflowerblue;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の初めてのHTML</title>
<link rel="stylesheet" href="css_flexbox.css"> </head>
</head>
<body>
<h2 id=titlecolor> flexboxを使わない場合</h2>
<div class="item">1つ目</div>
<div class="item">2つ目</div>
<div class="item">3つ目</div>
<div class="item">4つ目</div>
</body>
</html>
flex-flow: rowで横並び
flex-flow: rowで横並び
このCSSに以下のようにCSSを追加します
CSS
.item{
background: #0bd;
color: #fff;
margin: 10px;
padding: 10px;
}
#titlecolor{
color:cornflowerblue;
}
.container{
display: flex;
flex-flow: row;
}
（左のコードをコピーして利用できます )
flex-flow: columnで縦並びに
flex-flow: columnで縦並びに
（左のコードをコピーして利用できます )
flex-flow: row wrap; で横並びで折り返し
flex-flow: row wrap; で横並びで折り返し
次に、row wrapでいくつもの表示を並べて、ページの右端に来たら折り返して左端から下段に表示するようにします。htmlで表示を増やしました。 は空白のテキストを加えるコードです。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>私の初めてのHTML</title>
<link rel="stylesheet" href="ccs_flexbox2_wrap.css"> </head>
</head>
<body>
<h2 id=titlecolor> 8個の箱 display: flex; flex-flow: row で横ー格子状に</h2>
<div class="item container">
<div class="item">1つ目 </div>
<div class="item">2つ目 </div>
<div class="item">3つ目 </div>
<div class="item">4つ目 </div>
<div class="item">5つ目 </div>
<div class="item">6つ目 </div>
<div class="item">7つ目 </div>
<div class="item">8つ目 </div>
</div>
</body>
</html>
（左のコードをコピーして利用できます )
justify-spaceで空白を挿入
justify-spaceで空白を挿入
上では1つ目、２つ目の間にHTMLの空白コードを書きましたが、これをjustify-spaceで実現してみましょう。htmlから を削除しています。
この方法ではあくまでも均等に割り付けるようになっています。
割り付けを格子状に行うには以前紹介したgridを使うことも可能です。
alignで 縦方向のレイアウト
alignで 縦方向のレイアウト
さて、今度は縦のレイアウトもalignで変更してみましょう。今回はhight 100pxを併用して、縦配列をalign-content: stretch; で均等に並べてみます。「１つ目」「２つ目」などの要素が同じ大きさなので、縦の間隔が100pxに変更された以外あまり変わりませんが。
Page updated
Google Sites
Report abuse