生涯、学習していきたい

2018年はプログラミング学習に凝っています。

ドットインストール:実践!ウェブサイトを作ろう#04~#06

ドットインストールさんというサイトで元気にプログラミング学習中です。

今日は「実践!ウェブサイトを作ろう」の#04~#06に挑戦してみましょう。

 

f:id:ponnkichi:20180320190518p:plain

 

 

#04 ヘッダーのマークアップをしていこう

今回は、このヘッダー部分を作って行きます。難しそう! 

f:id:ponnkichi:20180320083456p:plain

左側にタイトルとボタン、右側に画像があります。

まずは、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> 

ブラウザで見てみましょう。

f:id:ponnkichi:20180320084808p:plain

このようになっています。

これを、冒頭のようにきれいな見た目にしていくのですね。楽しみです!

#05 ヘッダーの背景を設定してみよう

さて、CSSに書き込んでヘッダーの背景を設定していきましょう。

 

f:id:ponnkichi:20180320085009p:plain

まずは後でわかりやすいようにコメントをつけます。

/* header */

 背景画像は、cssよりも1つ階層が上のフォルダに保存しているので

header{

background:url('../img/bg.png')

}

 と書くそうです。

 

自分でサイトを作るとなったら、どこに画像を置いてあるかを指定しなくてはならないのですね。

ブログサービスを使っていると、このあたりは全ておまかせしている部分なので

しっかり覚えないといけないなあと思いつつ。

 

このようにすると、ブラウザではさっそく背景画像がつきました!

f:id:ponnkichi:20180320085254p:plain

おお!冒頭の目標像に近づきましたね。すごい!

 

ただ、画面幅に対して画像が小さい場合には見た目に問題が出てきます。

Chromeではコマンド+マイナスで縮小されるので、

画面幅を擬似的にすごく広くしてみましょう。

f:id:ponnkichi:20180320085506p:plain

ああ…。画像が途中で切れて、連続して配置されちゃっていますね。

このような感じではなく、

画像の縦横比を保持しながら画面いっぱいに広げるには

background-size:coverがよく使われます。

header{

background:url('../img/bg.png')

background-size:cover;

}

 このようにbackground-size:coverを足すと、

f:id:ponnkichi:20180320085722p:plain

きれいになりました!

 

**************

background-sizeに関しては、CSS3の#10でも詳しく学習しています。

ponnkichi.hatenablog.com

***************

 

さて、表示倍率を戻しましょう。

Chromeの場合には、コマンド+0です。

f:id:ponnkichi:20180320085910p:plain

戻りました。

 

では、次は全体を中央揃えにしましょう。

containerを中央揃えに指定します。

headerの中のcontainerなので、

header .container{

width:820px;

margin:o auto;

height:320px;

}

幅を820px、高さは320px。

中央揃えにするために、margin:0 autoとしました。

 

***************

margin:0 autoについては、

CSSレイアウト入門の#04でも軽く触れました。

ponnkichi.hatenablog.com

 

*****************

 

 

さて、このようにするとブラウザではこうなります。

f:id:ponnkichi:20180320090453p:plain

ちなみに、今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にしてみました!

f:id:ponnkichi:20180320091247p:plain

よかった!上の変な余白がなくなりました。

このテクニックは覚えておきたいですね。

 

 

******************

marginの相殺についてはCSS入門編の#13でも学習しています。

ponnkichi.hatenablog.com

*********************

 

#06 ヘッダーのスタイルを整えよう

f:id:ponnkichi:20180320083456p:plain

では、左側の文字を白にしていきましょう。

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とりました。

 

さて、どうなっているかな?

f:id:ponnkichi:20180320110317p:plain

おお!いい感じです。着々と目標点に近づいていますね。

 

さて、次はボタンの設置です。

まずは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とします。

そして、ボタンの背景色は白。

 

ブラウザで見ると、こうなっています。

f:id:ponnkichi:20180320111027p:plain

うん、ボタンができましたね。

 

では、テキストを中央揃えに。

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;

}

 さっそくブラウザで見てみましょう!

f:id:ponnkichi:20180320111325p:plain

うおっしゃーーー!(笑)

これ、もう左側完璧じゃないですか?

すごいすごい!

 

さらに、マウスオーバーしたときに色が変わるようにします。

まず通常時は透明度が0.9くらいにしておきます。

opacity:0.9;

 

さらに、ボタンに対してホバーしたときは

.btn:hover{

opacity:1;

}

 不透明度をマックスに。

通常時は

f:id:ponnkichi:20180320111643p:plain

うっすら透明で、マウスをあてると

f:id:ponnkichi:20180320111655p:plain

真っ白に!

いい感じですね♪

 

実践編はなんて楽しいのでしょう!

次回もとっても楽しみです。

 

********************

#06の復習。

text-alineなど、文字に関するプロパティは

CSS入門編の#14で学習しました。

ponnkichi.hatenablog.com

 

displayやinline-blockに関しては、CSS入門編の#18で学習しました。

ponnkichi.hatenablog.com

line-heightに関しては、CSS入門編の#22で学習しました。

ponnkichi.hatenablog.com

 

ひとつひとつ復習しつつ、使いながら覚えていくのがよさそうですね^皿^