ドットインストール：実践！ウェブサイトを作ろう#04~#06
ドットインストールさんというサイトで元気にプログラミング学習中です。
今日は「実践！ウェブサイトを作ろう」の#04~#06に挑戦してみましょう。
#04 ヘッダーのマークアップをしていこう
今回は、このヘッダー部分を作って行きます。難しそう！
左側にタイトルとボタン、右側に画像があります。
まずは、bodyにheaderタグを書きます。
<body>
<header>
</header>
</body>
ヘッダーの中身は中央揃えにしたいので、
divにcontainerをつけましょう。
<header>
<div class="container"></div>
</header>
あとで、このcontainerクラスを中央揃えにしていきます。
次は、タイトルです。pタグをつけましょう。
<div class="container">
<p>ドットインストールを見ながら<br>
コーディングができるAtomパッケージ</p>
</div>
<br>は改行という意味ですね。
次は、タイトルです。
「Dotinstall Pane」ですね。
<h1>Dotinstall Pane</h1>
その下はボタンですね。押したら別のページに飛ぶものなので、aタグにします。
<a href="#">詳細を見る</a>
(#は仮で入っています)
body部分をつなげるとこうなります。
<body>
<header>
<div class="container">
<p>ドットインストールを見ながら<br>
コーディングができるAtomパッケージ</p>
<h1>Dotinstall Pane</h1>
<a href="#">詳細を見る</a>
</div>
</header>
</body>
ブラウザで見てみましょう。
このようになっています。
これを、冒頭のようにきれいな見た目にしていくのですね。楽しみです！
#05 ヘッダーの背景を設定してみよう
さて、CSSに書き込んでヘッダーの背景を設定していきましょう。
まずは後でわかりやすいようにコメントをつけます。
/* header */
背景画像は、cssよりも１つ階層が上のフォルダに保存しているので
header{
background:url('../img/bg.png')
}
と書くそうです。
自分でサイトを作るとなったら、どこに画像を置いてあるかを指定しなくてはならないのですね。
ブログサービスを使っていると、このあたりは全ておまかせしている部分なので
しっかり覚えないといけないなあと思いつつ。
このようにすると、ブラウザではさっそく背景画像がつきました！
おお！冒頭の目標像に近づきましたね。すごい！
ただ、画面幅に対して画像が小さい場合には見た目に問題が出てきます。
Chromeではコマンド＋マイナスで縮小されるので、
画面幅を擬似的にすごく広くしてみましょう。
ああ…。画像が途中で切れて、連続して配置されちゃっていますね。
このような感じではなく、
画像の縦横比を保持しながら画面いっぱいに広げるには
background-size:coverがよく使われます。
header{
background:url('../img/bg.png')
background-size:cover;
}
このようにbackground-size:coverを足すと、
きれいになりました！
＊＊＊＊＊＊＊＊＊＊＊＊＊＊
background-sizeに関しては、CSS3の#10でも詳しく学習しています。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
さて、表示倍率を戻しましょう。
Chromeの場合には、コマンド＋０です。
戻りました。
では、次は全体を中央揃えにしましょう。
containerを中央揃えに指定します。
headerの中のcontainerなので、
header .container{
width:820px;
margin:o auto;
height:320px;
}
幅を820px、高さは320px。
中央揃えにするために、margin:0 autoとしました。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
margin:0 autoについては、
CSSレイアウト入門の#04でも軽く触れました。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
さて、このようにするとブラウザではこうなります。
ちなみに、今containerのmargin-topを設定していないのに、
上に余白ができてしまっていますね。ちょっと白い部分があります。
これは、いわゆる「marginの相殺」というものです。
pタグの「ドットインストールを見ながら…」の部分のmarginが表示されてしまっています。
直す方法はいろいろあるのですが、親要素をなんとかすればいいのです。
pタグの親要素のcontainerのpaddingをいじります。
header .container{
width:820px;
margin:o auto;
height:320px;
padding-top:10px;
}
containerのpadding-topを10pxにしてみました！
よかった！上の変な余白がなくなりました。
このテクニックは覚えておきたいですね。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
marginの相殺についてはCSS入門編の#13でも学習しています。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
#06 ヘッダーのスタイルを整えよう
では、左側の文字を白にしていきましょう。
pタグとh1タグの文字を白にします。
header h1,header p{
color:#fff
}
#fffは白ですね。
あと、「ドットインストールを見ながら…」の文字（pタグ）は
上に余白がありますよね。paddingをつけましょう。
header p{
padding-top:50px;
}
上に余白を、50pxとりました。
「Dotinstall Pane」(h1タグ)は大きめの文字なので、指定しましょう。
header h1{
font-size:34px;
margin-bottom:50px;
}
フォントサイズは34pxで、さらに下のボタンとの距離をとりたいので
margin-bottomを50pxとりました。
さて、どうなっているかな？
おお！いい感じです。着々と目標点に近づいていますね。
さて、次はボタンの設置です。
まずはHTMLのほうのaタグに、ボタンのクラスを足します。
最初はこうでした。
<a href="#">詳細を見る</a>
これに、ボタンのクラスをつけます。
<a class="btn" href="#">詳細を見る</a>
次はCSSでスタイルをあてます。
他のところでもボタンを使うと思いますので、コメントで
「/* common */」とした場所に書き込んでいきましょう。
.btn{
display:inline-block
width:290px;
line-height:45px;
background:#fff;
}
まずは、displayをインラインブロックにして幅と高さを持たせられるようにしましょう。
そして幅を290pxにします。
高さは、テキストを上下中央にしつつ高さを出したいのでline-heightを指定します。
高さは45pxとします。
そして、ボタンの背景色は白。
ブラウザで見ると、こうなっています。
うん、ボタンができましたね。
では、テキストを中央揃えに。
text-aline:senter;
文字色をオレンジに。
color:#f39800;
角もまるくなっていますよね。
border-radius:5px;
全部足すとこうですね。
.btn{
display:inline-block
width:290px;
line-height:45px;
background:#fff;
text-aline:senter;
color:#f39800;
border-radius:5px;
}
さっそくブラウザで見てみましょう！
うおっしゃーーー！（笑）
これ、もう左側完璧じゃないですか？
すごいすごい！
さらに、マウスオーバーしたときに色が変わるようにします。
まず通常時は透明度が0.9くらいにしておきます。
opacity:0.9;
さらに、ボタンに対してホバーしたときは
.btn:hover{
opacity:1;
}
不透明度をマックスに。
通常時は
うっすら透明で、マウスをあてると
真っ白に！
いい感じですね♪
実践編はなんて楽しいのでしょう！
次回もとっても楽しみです。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
#06の復習。
text-alineなど、文字に関するプロパティは
CSS入門編の#14で学習しました。
displayやinline-blockに関しては、CSS入門編の#18で学習しました。
line-heightに関しては、CSS入門編の#22で学習しました。
ひとつひとつ復習しつつ、使いながら覚えていくのがよさそうですね＾皿＾
