CSS / CSS3 and LESS で作る iPhone ボタン – Step 00 まずは基本となるマークアップとスタイルを!
『超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン』の Step 00.
まずは, ベースとなるマークアップとスタイルを書きましょう!
table of contents
サンプル & コード
サンプルです.
HTML コード
ベースとなる HTML コードです.
<h1>CSS / CSS3 and LESS で作る iPhone ボタン</h1> <div class="button-red">Red</div> <div class="button-yellow">Yellow</div> <div class="button-green">Green</div> <div class="button-cyan">Cyan</div> <div class="button-blue">Blue</div> <div class="button-purple">Purple</div> <div class="button-white">White</div> <div class="button-black">Black</div>
CSS(LESS) コード
ベースとなる CSS コードです.
// #! less /* * library */ #tm { } /* * main */ body { font-family: "Meiryo", "メイリオ", "ヒラギノ角ゴ Pro W3", sans-serif; } h1 { font-size: 16px; } div[class|=button] { //float: left; margin: 10px; }
解説
ベースとなる HTML
ここではボタンとなる要素を追加しています. class に button-{color} というクラス名をつけて それぞれに合った色のボタンを CSS でスタイルアップしていきます.
また, HTML はこれで完成です. これ以降の Step では HTML は一切いじりません.
ベースとなる CSS
font-family
に私お気に入りの ‘Meiryo’ or ‘ヒラギノ角ゴ’ を指定し,
それぞれのボタンの感覚を広げるために margin
に 10px
を指定しています.
次回は, ボタンスタイルを簡単に適応できるように mixins を定義します.
[…] Step 00 まずは基本となるマークアップとスタイルを! […]
[…] 前回は, ベースとなるマークアップとスタイルを書きました. このStepでは ボタンスタイルを簡単に適応できるように mixins を定義します. ここではまだ mixins は空なので見た目は変わりま […]