CSS / CSS3 and LESS で作る iPhone ボタン – Step 00 まずは基本となるマークアップとスタイルを!

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

超簡単♪ CSS / CSS3 and LESS で作る iPhone ボタン』の Step 00.

まずは, ベースとなるマークアップとスタイルを書きましょう!

screenshot

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 ‘ヒラギノ角ゴ’ を指定し, それぞれのボタンの感覚を広げるために margin10px を指定しています.

up

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

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT