ドットインストール：実践！ウェブサイトを作ろう#01~#03
ドットインストール、
今日からは「実践！ウェブサイトを作ろう」というレッスンに進みたいと思います。
今日は#01~#03を学習します。
#01 ウェブサイトを制作していこう！
完成版の確認
今回から作っていくwebサイトです。このような形のサイトを作っていきます。
かっこいいページですね！
一見しただけでは、どのように作るのか見当もつきません💦
今までの学習はなんだったのかと問い詰めたくなりますが、これから覚えていけばいいのです。
左右の幅いっぱいに画像があったり、
左右に画像を振り分け、テキストで紹介していくようなページを作ります。楽しみですね！
必要な知識
必要となる知識は、
HTML入門
CSS入門
CSS3
になります。
対応ブラウザ
今回のレッスンで使うブラウザは、Google Chromeの最新版です。
他のブラウザだったり、バージョンがちがう場合にはうまくいかないこともありますが
その場合は自分で対応しましょう！（ぎゃふん！）
作業用フォルダ
今回は、デスクトップに「Mysite」というフォルダを作り、
ファビコン用の画像、
imgフォルダに様々な画像を用意して作ります。
エディタは、いつものAtomを使います。
HTMLを書くよ
いつもの作業です！何度も書いているのでだいぶ覚えてきました！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Dotinstall Pane</title>
</head>
<body>
</body>
</html>
ここまで書いたら、保存します。
Macなら、コマンド＋Sですね。
デスクトップの「Mysite」に保存します。
index.htmlという名前をつけて、保存しました。
#02 normalize.cssとfaviconを導入しよう
ウェブサイトを作った時に、どうしてもブラウザが変わると見た目が変わってしまうという問題があります。
今回は、そのブラウザ間の差を吸収してくれる「normalize.css」を導入しましょう。
normalize.cssについては、
CSSレイアウト入門の#02でも学習しています。
normalize.css のページを開くと、
画面の下のほうにダウンロードボタンがあります。
これを右クリックして、「リンク先を別名で保存」します。
そして、「Mysite」のフォルダーの中に保存します。
保存したら、それを読み込ませたいのでHTMLのほうに書き加えます。
まずは、
これを書き加えます。
css/
というのは、「cssフォルダの中の」ということです。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<title>Dotinstall Pane</title>
</head>
<body>
</body>
</html>
ここに入りますね。
次は、ファビコンを設定しましょう。
シフト＋コマンド＋Dで上の行をコピーします。
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/normalize.css">
そして、rel属性をiconに、fref属性は「Mysite」に入っているのでfavicon.icoにします。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="icon" href="favicon.ico">
<title>Dotinstall Pane</title>
</head>
<body>
</body>
</html>
ブラウザで確認すると、
タイトルが「DOtinstall Pane」になっていて、
その横にちゃんとファビコンが設置されているのが確認できます。
まだ、bodyに何も書いていないので本文は空っぽですけれどね。
#03 styles.cssを作っていこう
さて、次はcssファイルを作っていきます。
コマンド+Nで、新しいタグを作ります。
そして、左はHTML、
右はCSSを表示するようにすると見やすくてわかりやすいです。
@charset"utf-8";
そして、共通の設定を書いていきましょう。
コメントで、「common」とすると、あとから見てもわかりやすいですね。
bodyは、
body{
font-size:14px;
font-family:Verdana,sans-serif;
color:#333;
}
フォントのサイズは14pxで。
書体はVerdana 、sans-serifで。
色は黒に近い感じです。
aタグは、テキストデコレーションをなくします。
このようにすることで、リンクに下線が表示されません。
a{
text-decoraton:none;
}
text-decoraton に関しては、
CSSレイアウト入門の#12でも学習しています。
pタグは、行間に余裕をもたせたいのでline-heightを2に設定してみましょう。
p{
line-height:2;
}
ここまでできたら、コマンド＋Sで保存します。
「Mysite」の中の「css」フォルダの中に
「styles.css」と名前をつけて保存をします。
そこまでできたら、
HTMLのほうに「styles.css」を読み込んでいきます。
先ほどnormalize.cssと書いた下に書いていきます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/styles.css">
<link rel="icon" href="favicon.ico">
<title>Dotinstall Pane</title>
</head>
<body>
</body>
</html>
ここまででstyles.cssの設定でした。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ちなみに、フォントについては
こちらのサイトを見せていただきました。ありがとうございます！
今回設定したフォント
「Verdana」は「ヴァーダナ」と読み
視認性のよさ、スリムさ、安定感を備えています。
「sans-serif」は「サンセリフ」ですね。
明朝体のような「うろこ」のない書体になります。
フォントの種類もいろいろと学びたいなあと思います！
