CSS3でスマホボタンを作る方法
2012/3/15更新
- TOP >
- スマホ対応HP作り方 >
- CSS3でボタンを作る方法
CSS3でボタンを作成
スマートフォンのタッチパネルに対応する為にリンクをボタン型にする方法です。
画像は使用せず「border」を使ってボタンに見えるように作成します。
HTML側の記述
<a class="btn" href=""/>ＢＵＴＴＯＮ</a>
CSS側の記述
.btn {
width: 80%;
margin: 0 auto;
padding: 10px 15px;
display: block;
font-size: 15px;
text-align: center;
background: #E4E4E4;
color: #000000;
border: 1px solid #CCCCCC;
}
btn
「btn」これは好きな文字を付けて構いません。「button」でも「botan」大丈夫ですが、HTML側でも必ず同じ文字に指定して下さい。
width
「width」は横幅を指定する記述です。ここではボタンの横幅を80％に指定しています。画面幅の最大値は100％です。
margin
「margin」は上下左右の外側の余白を指定する記述です。左右の指定を「auto」と指定することで中央寄せになります。
padding
「padding」は上下左右の内側の余白を指定する記述です。「padding: 10px 15px;」は上下の内側の余白が10px、左右の余白が15pxと指定しています。
display
「display」はブロックレベル・インラインレベル等の、要素の表示形式を指定する際に使用します。「display:block」と指定することで、ブロック要素として表示されるようになります。
font-size
「font-size」は文字の大きさを指定する記述です。
text-align
「text-align」は文字の位置を指定する記述です。「左寄せ：left」「中央寄せ：center」「右寄せ：right」
background
「background」は背景の色を指定する記述です。ここではボタンの背景色を指定しています。
color
「color」は文字の色を指定する記述です。
border
「border」は枠線を指定する記述です。ここでは一括で線の幅・種類・色を指定しています。「 線の幅：1px」「線の種類：solid」「線の色：#CCCCCC;」
アドバイス
初心者の為に「margin」「padding」についてのアドバイスを致します。
「margin」を例に挙げて説明すると「margin: 5px 10px;」と「margin: 5px 10px 5px 10px;」ではどちらも同じ数値を指定している事になります。
「margin」「padding」はそれぞれ時計回りに記述するようになっています。「margin: 5px 10px 15px 20px;」の場合、上が5px・右が10px・下が15px・左が20pxとなります。
逆に2つのみ指定した場合「margin: 5px 10px;」は上下が5px・左右が10pxとなります。
さらに1つのみを指定した場合「margin: 10px;」は上下左右が10pxとなります。