『超簡単♪ 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;
}

up

解説

ベースとなる HTML

ここではボタンとなる要素を追加しています. class に button-{color} というクラス名をつけて それぞれに合った色のボタンを CSS でスタイルアップしていきます.

また, HTML はこれで完成です. これ以降の Step では HTML は一切いじりません.

ベースとなる CSS

font-family に私お気に入りの ‘Meiryo’ or ‘ヒラギノ角ゴ’ を指定し, それぞれのボタンの感覚を広げるために margin に 10px を指定しています.

up

次回は, ボタンスタイルを簡単に適応できるように mixins を定義します.