2000年のホームページってこんな感じ
当時中学生だった私が家で見つけた「牛飼いと作ろうホームページ」だとこんな感じだった記憶。
<a>要素の中に<img>要素を入れる
<body>
<p>戻るボタンは<a href="#"><img src="img/navigationj_back.png"></a>これ</p>
</body>
<input type="submit">を使う
これなんかもうただのボタンでありコレだけだと何も意味を成さない。
<body>
<h1>ボタンをつけたい</h1>
<input type="submit" value="ボタン">
</body>
いまどきのボタンってこんな感じ
例えばこの「プロフィールを編集する」ボタン。
開発者ツールで覗き込むとこんな感じ。画像じゃない！
STEP1. ただのリンクを作る
<body>
<h1>ボタンをつけたい</h1>
<a href="#">イケてるボタン</a>
</body>
STEP2. クラス名を付与する＆CSSファイルを関連付ける
<head>
<meta charset="utf-8">
<title>ボタンの幅とか変えたい</title>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<h1>ボタンをつけたい</h1>
<a href="#" class="btn">イケてるボタン</a>
</body>
見た目に変化なし
STEP3. CSSでアゲていく
フォルダ構成
modern_web\
|`sample.html
|`img\
| `blue.png
`css\
`stylesheet.css
sample.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ボタンの幅とか変えたい</title>
<link rel="stylesheet" href="css/stylesheet.css">
</head>
<body>
<h1>ボタンをつけたい</h1>
<a href="#" class="btn">イケてるボタン</a>
</body>
</html>
css/stylesheet.css
.btn {
display: inline-block;
width: 400px;
padding: 20px 30px;
opacity: 0.7;
font-size: 30px;
letter-spacing: 5px;
color: white;
background-color: darkgreen;
text-decoration: none;
text-align: center;
border-radius: 10px;
}
.btn:hover {
opacity: 1;
}
body {
background-image: url("../img/blue.png");
background-size: cover;
background-color: rgba(255,255,255,0.5);
background-blend-mode: lighten;
}
blue.pngは適当な画像を指定。
マウスオーバをするとボタンの色(透過率)が変わる
細かいレシピ
いきなりいろいろ突っ込んだので順番に。
.btn
classにbtnを指定している箇所に以下を適用
| パラメータ | 値 | 解説 |
|---|---|---|
| display | inline-block |
<a>をinline-block要素にする。これがないと高さや幅を変えることができない(inline)。逆にblockにしてしまうと横に並べるのができない(floatで出来なくはない？) |
| width | pxで指定 | ボタンの幅を指定。無いと文字列の幅に従ってしまうので、いくつかボタンを並べた時に統一感がなくなってしまう |
| padding | pxで指定。 1個だけ書いた場合は上下左右に適用。 2個スペース区切りで書いた場合は"上下", "左右"に適用。4個スペース区切りで書いた場合は"上","右","下","左"に適用。時計回り。 |
余白を追加。無いとボタンの縁ギリギリに文字が配置される |
| opacity | 歩合(0.0～1.0) | 不透明率。0.7だと70%の濃さになり、背景画像が透けて見える |
| font-size | pxで指定 | 文字の大きさ |
| letter-spacing | pxで指定 | 文字の間隔。ちょっと広めになる |
| color | RGBコードか色名で指定 | 文字の色を指定 |
| background-color | RGBコードか色名で指定 | 背景色を指定 |
| text-decoration | none | 指定しないとリンクと同じく下線がひかれる |
| text-align | center | 文字をエリア内中央に配置 |
| border-radius | pxで指定 | ボタンの角を指定した大きさの円が置かれたように丸く削る |
.btn:hover
classにbtnを指定している箇所へマウスオーバされた際に指定したパラメータで.btnの値を上書き。
今回はopacity = 不透明度を1にすることで透過を無くしている(色が変わったわけではない)
body
<body>に以下を適用
| パラメータ | 値 | 解説 |
|---|---|---|
| background-image | url("xxx") | 背景画像を指定。相対パスはこのcssファイルからの位置であることに注意。 |
| background-color | RGBAで不透明率も指定 | イメージとは別に背景色を指定。これだけだと役に立たない？ |
| background-blend-mode | lighten | 背景画像と背景色を混ぜっ子する方法。lightenはおそらく明度でMIX |
今後の課題
こういったパラメータがものすごいたくさんある。
すべてを記憶する必要はないが、触っておけば「あ、こんなのあったな」と思い出せるので、一度全部網羅しておきたい。
background-blend-modeなんかはもう感覚掴むのが大変そう。