生涯、学習していきたい

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

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

ドットインストールさんでウェブサイトづくりを学んでいきましょう。

今日は、「実践!ウェブサイトを作ろう」の#07から#09を学習します。

f:id:ponnkichi:20180323211827p:plain

 

 #07 FontAwesomeを導入しよう

「実践!ウェブサイトを作ろう」では、このようなサイトを作っています。

f:id:ponnkichi:20180320083456p:plain

今回注目したいのは、左下の「詳細を見る」のボタン。

こんなアイコンを作って見ましょう。

Font Awesomeというアイコンフォントを使います。

Font Awesomeと検索して、サイトを開きます。

f:id:ponnkichi:20180322082726p:plain

「ダウンロード」ボタンをクリックして、

f:id:ponnkichi:20180322082906p:plain

下のほうにあるダウンロードボタンを押します。

 

f:id:ponnkichi:20180322082947p:plain

左下に出ている、ダウンロードしたものをクリックすると

色々なファイルが開きます。

これをこぴーしていきましょう。

f:id:ponnkichi:20180322083041p:plain

フォントフォルダをクリックして、コマンド+Cでコピーします。

f:id:ponnkichi:20180322083126p:plain

その後、「Mysite」にペーストします。

これでフォントがコピーできました。

 

次はCSS版です。

通常版と圧縮版があるのですが、

f:id:ponnkichi:20180322083230p:plain

「mini」となっている、圧縮版のほうを同じように「Mysite」にコピペします。

「Mysite」のcssフォルダーの中に

f:id:ponnkichi:20180322083323p:plain

 このようにペーストしましょう。

 

それでは、FontAwesomeをHTMLに書き込んでいきましょう。

noemalize.cssの下あたりに書き入れます。

 

head内に

f:id:ponnkichi:20180322083622p:plain

<link rel="stylesheet" href="css/normalize.css">

<link rel="stylesheet" href="css/font-awesome.min.css">

<link rel="stylesheet" href="css/styles.css">

<link rel="icon" href="favicon".ico>

 

入りました!

アイコンをつけたいので、FontAwesomeのサイトで検索してみましょう。

f:id:ponnkichi:20180322083913p:plain

サイトのこのページの、「icons」と書いてあるところをクリックします。

小さいですが、指を指しているところです。

 

f:id:ponnkichi:20180322084005p:plain

このページが出るので、検索してみましょう。

f:id:ponnkichi:20180322084040p:plain

「link」と入力して検索すると…

f:id:ponnkichi:20180322084113p:plain

お目当のアイコンがありました!

これをクリックするとコードが出るので、

f:id:ponnkichi:20180322084154p:plain

それをそのままコピーして貼り付ければOKなのです。

 

f:id:ponnkichi:20180322084226p:plain

ボタンのところにペーストします。

<a class="btn"href="#">詳細を見る<i class="fa fa-external-link"aria-hidden="true"></i></a>

 「詳細を見る」の横のところに、赤字のアイコンを入れてみました。

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

f:id:ponnkichi:20180322084503p:plain

画像は小さいですが、出ました!ばっちりですね。

このようにしてアイコンを入れます。

 

#08 トップ画像を配置しよう

ヘッダーの中でまだやっていないのは、

f:id:ponnkichi:20180320083456p:plain

この、右側の画像の部分ですね。ここに画像を配置していきましょう。

<img src="img/top.png">

 幅と高さも指定します。

<img src="img/top.png"width="480"height="270">

 そして、alt属性も書いておきます。

<img src="img/top.png"width="480"height="270"alt="Atomエディタ">

 

 

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

alt属性については、HTML入門編の#15でも学習しています。

ponnkichi.hatenablog.com

 

 

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

 

画像を配置する場所は、containerの右下になります。

positionプロパティを使って配置をしましょう。

f:id:ponnkichi:20180323101740p:plain

header.container{

width/820px;

margin:0 auto;

height:320px;

padding-top:10px;

position:relative;

}

 まずは、containerのpositionをrelativeにして、

 

f:id:ponnkichi:20180323101946p:plain

header img{

position:absolute;

right:0;

bottom:0;

}

 

その次はimgの指定です。

positionをabsoluteにして、

画像は右下に配置したいのでrightが0、bottomも0にします。

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

f:id:ponnkichi:20180323102121p:plain

うまく配置ができました。

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

positionプロパティについては、CSS入門編の#20でも学習しています。

ponnkichi.hatenablog.com

画像に影をつける

次に、画像に影をつけます。

他の画像にも影をつけたいので、css のcommonのところに書いていきましょう。

img.shadow{

box-shadow:0 0 10px rgba(0 0 0 0.3);

}

 x軸のズレが0、y軸のズレが0、ぼかしは10pxで

色は黒を透明にした感じです。

 

ここまでできたら、次はHTMLの「img」にshadow クラスをつけます。

<img src="img/top.png"width="480"height="270"alt="Atomエディタ"class="shadow">

 

 

f:id:ponnkichi:20180323102845p:plain

画像に少し影が入りました!

見やすくなりますね。

 

しかし、下画像の下のほうに影がはみ出してしまっています。

(あまりよくわからないですが…💦)

下の影のはみ出しをとるには、

ヘッダーのcontainerの中に

「overflow:hidden」をつけると、はみ出した部分はカットしてくれます。

f:id:ponnkichi:20180323103002p:plain

header.container{

width/820px;

margin:0 auto;

height:320px;

padding-top:10px;

position:relative;

overflow:hidden;

}

 

f:id:ponnkichi:20180323103128p:plain

下部分の影のはみ出しがなくなり、スッキリしました!

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

box-shadowに関しては、CSS3の#14でも学習しています。

ponnkichi.hatenablog.com

また、overflow:hiddenに関しては

CSSレイアウト入門の#07でも学習しています。

ponnkichi.hatenablog.com

 

#09 sectionのマークアップをしよう

さて、ヘッダーを作り終えたので次はメインの部分です。

ここからは、

タイトルと中身が繰り返し出てくる感じになっています。

f:id:ponnkichi:20180323103646p:plain

タイトルがあって中身があって。

f:id:ponnkichi:20180323103658p:plain

タイトルと中身があって。

f:id:ponnkichi:20180323103711p:plain

タイトルと中身があって。

中身がみんな「すごいよ。」でかわいいですね(笑)

大枠を作る

たくさん項目があるので、sectionで大枠を作っていきましょう。

f:id:ponnkichi:20180323103829p:plain

<section class="">

  <h2></h2>

  <div class="container">

  </div>

</section>

 クラスとh2、containerを配置します。

そしてそれを3つ作ります。

 

では、一番上のセクションを作りましょう。

f:id:ponnkichi:20180323103646p:plain

これですね。

section class="features">

  <h2>Dotinstall Paneの特徴</h2>

  <div class="container">

  </div>

</section>

 

二つ目は、ユーザーの声なので

f:id:ponnkichi:20180323103711p:plain

<section class="voices">

  <h2>利用者の声</h2>

  <div class="container">

  </div>

</section>

とします。

 

最後は、行動を促すアクションなので

<section class="call-to-action">

  <h2>Dotinstall Paneを使おう</h2>

  <div class="container">

  </div>

</section>

とします。

 

大枠を3つ作ったら、スタイルをあてていきます。 

 スタイルをあてる

commonのところに書いていきます。

どのセクションにも余白があるので、

section{

padding:90px 0;

}

 上下に90pxの余白がつきました。

 

そして、交互に背景色を変えるので

nth-childを使ってbackgroundの指定をします。

section:nth-child(odd){

background:#f8f8f8;

}

 ブラウザを確認してみると、

f:id:ponnkichi:20180323104824p:plain

odd(奇数番号のもの)に薄いグレーの背景色がつきました。

 

また、まだ中身はないのですがcontainerのスタイルもつけていきましょう。

section .container{

width:820px;

margin: 0 auto;

}

 sectionの中のcontainerに指定をします。

幅が820pxの中央揃えになりました。

 

 

ここで保存をして、続きは次回です♪

 

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

私がもう忘れてしまったnth-childについては

CSS3の#06で学習しています。

ふ、復習しなきゃ…。

ponnkichi.hatenablog.com

復習して、今回何をしたのか理解しようと思います(白目)