ボタンの作成

ボタンの作成方法についての説明です。

「flex-flow」を用いて、ボタンの作成と配置ができます。次の2種類を覚えておくと良いでしょう。

「flex-flow: row nowrap」
row 左から右へ、nowrap 折り返しなし

「flex-flow: row wrap」
row 左から右へ、wrap 折り返しあり

◆CSSとHTMLの書き方

ボタンを表示させるために以下の項目をCSSとHTML内に記述します。

「display: -webkit-flex」「display: flex」
flex-flow のCSSはブラウザごとに対応状況が異なるため、「.button」のCSSにこれら2つを記述してどのブラウザでもボタンが表示されるようにします。

「list-style-type: none」
ulタグでのリスト表示を無効にします。

「display: block」
「.button a」のCSSに記述してリンク部分をボタンで表示させます。

「flex-basis: 50%」
横一列を100%としたときの、ボタン1つあたりの大きさの比率を指定します。

《例》

.button {
display: -webkit-flex;
display: flex;
list-style-type: none;
width: 100%;
margin: 0;
padding: 0
}

.button a {
display: block;
margin: 3px;
padding: 7px;
font-size: 12px;
background-color: skyblue;
color: white;
text-align: center
}
<p>flex-flow: row nowrap</p>
<ul class="button" style="flex-flow:row nowrap">
<li style="flex-basis:50%"><a href="#">1</a></li>
<li style="flex-basis:50%"><a href="#">2</a></li>
<li style="flex-basis:50%"><a href="#">3</a></li>
<li style="flex-basis:50%"><a href="#">4</a></li>
<li style="flex-basis:50%"><a href="#">5</a></li>
</ul>

<p>flex-flow: row wrap</p>
<ul class="button" style="flex-flow:row wrap">
<li style="flex-basis:50%"><a href="#">1</a></li>
<li style="flex-basis:50%"><a href="#">2</a></li>
<li style="flex-basis:50%"><a href="#">3</a></li>
<li style="flex-basis:50%"><a href="#">4</a></li>
</ul>

《表示結果》

flex-flow: row nowrap(flex-basis の値に関係なく横一列に収まるよう配置されます)

flex-flow: row wrap(flex-basis の値が100%になった地点で折り返します)

flex-flow: row wrap(flex-basis: 25% に変更した場合)

flex-flow: row wrap(flex-basis: 33.3% に変更した場合)

>>CSS講座メニューへ戻る