ドットインストール:実践!ウェブサイトを作ろう#07~#09
ドットインストールさんでウェブサイトづくりを学んでいきましょう。
今日は、「実践!ウェブサイトを作ろう」の#07から#09を学習します。
#07 FontAwesomeを導入しよう
「実践!ウェブサイトを作ろう」では、このようなサイトを作っています。
今回注目したいのは、左下の「詳細を見る」のボタン。
こんなアイコンを作って見ましょう。
Font Awesomeというアイコンフォントを使います。
Font Awesomeと検索して、サイトを開きます。
「ダウンロード」ボタンをクリックして、
下のほうにあるダウンロードボタンを押します。
左下に出ている、ダウンロードしたものをクリックすると
色々なファイルが開きます。
これをこぴーしていきましょう。
フォントフォルダをクリックして、コマンド+Cでコピーします。
その後、「Mysite」にペーストします。
これでフォントがコピーできました。
次はCSS版です。
通常版と圧縮版があるのですが、
「mini」となっている、圧縮版のほうを同じように「Mysite」にコピペします。
「Mysite」のcssフォルダーの中に
このようにペーストしましょう。
それでは、FontAwesomeをHTMLに書き込んでいきましょう。
noemalize.cssの下あたりに書き入れます。
head内に
<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のサイトで検索してみましょう。
サイトのこのページの、「icons」と書いてあるところをクリックします。
小さいですが、指を指しているところです。
このページが出るので、検索してみましょう。
「link」と入力して検索すると…
お目当のアイコンがありました!
これをクリックするとコードが出るので、
それをそのままコピーして貼り付ければOKなのです。
ボタンのところにペーストします。
<a class="btn"href="#">詳細を見る<i class="fa fa-external-link"aria-hidden="true"></i></a>
「詳細を見る」の横のところに、赤字のアイコンを入れてみました。
ブラウザで見てみましょう。
画像は小さいですが、出ました!ばっちりですね。
このようにしてアイコンを入れます。
#08 トップ画像を配置しよう
ヘッダーの中でまだやっていないのは、
この、右側の画像の部分ですね。ここに画像を配置していきましょう。
<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でも学習しています。
*********************
画像を配置する場所は、containerの右下になります。
positionプロパティを使って配置をしましょう。
header.container{
width/820px;
margin:0 auto;
height:320px;
padding-top:10px;
position:relative;
}
まずは、containerのpositionをrelativeにして、
header img{
position:absolute;
right:0;
bottom:0;
}
その次はimgの指定です。
positionをabsoluteにして、
画像は右下に配置したいのでrightが0、bottomも0にします。
ブラウザで確認して見ましょう。
うまく配置ができました。
*******************
positionプロパティについては、CSS入門編の#20でも学習しています。
画像に影をつける
次に、画像に影をつけます。
他の画像にも影をつけたいので、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">
画像に少し影が入りました!
見やすくなりますね。
しかし、下画像の下のほうに影がはみ出してしまっています。
(あまりよくわからないですが…💦)
下の影のはみ出しをとるには、
ヘッダーのcontainerの中に
「overflow:hidden」をつけると、はみ出した部分はカットしてくれます。
header.container{
width/820px;
margin:0 auto;
height:320px;
padding-top:10px;
position:relative;
overflow:hidden;
}
下部分の影のはみ出しがなくなり、スッキリしました!
*******************
box-shadowに関しては、CSS3の#14でも学習しています。
また、overflow:hiddenに関しては
CSSレイアウト入門の#07でも学習しています。
#09 sectionのマークアップをしよう
さて、ヘッダーを作り終えたので次はメインの部分です。
ここからは、
タイトルと中身が繰り返し出てくる感じになっています。
タイトルがあって中身があって。
タイトルと中身があって。
タイトルと中身があって。
中身がみんな「すごいよ。」でかわいいですね(笑)
大枠を作る
たくさん項目があるので、sectionで大枠を作っていきましょう。
<section class="">
<h2></h2>
<div class="container">
</div>
</section>
クラスとh2、containerを配置します。
そしてそれを3つ作ります。
では、一番上のセクションを作りましょう。
これですね。
section class="features">
<h2>Dotinstall Paneの特徴</h2>
<div class="container">
</div>
</section>
二つ目は、ユーザーの声なので
<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;
}
ブラウザを確認してみると、
odd(奇数番号のもの)に薄いグレーの背景色がつきました。
また、まだ中身はないのですがcontainerのスタイルもつけていきましょう。
section .container{
width:820px;
margin: 0 auto;
}
sectionの中のcontainerに指定をします。
幅が820pxの中央揃えになりました。
ここで保存をして、続きは次回です♪
******************
私がもう忘れてしまったnth-childについては
CSS3の#06で学習しています。
ふ、復習しなきゃ…。
復習して、今回何をしたのか理解しようと思います(白目)