生涯、学習していきたい

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

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

ドットインストール、

今日からは「実践!ウェブサイトを作ろう」というレッスンに進みたいと思います。

今日は#01~#03を学習します。

 

f:id:ponnkichi:20180318080456p:plain

 

 #01 ウェブサイトを制作していこう!

完成版の確認

今回から作っていくwebサイトです。このような形のサイトを作っていきます。

f:id:ponnkichi:20180316203325p:plain

かっこいいページですね!

一見しただけでは、どのように作るのか見当もつきません💦

今までの学習はなんだったのかと問い詰めたくなりますが、これから覚えていけばいいのです。

 

左右の幅いっぱいに画像があったり、

左右に画像を振り分け、テキストで紹介していくようなページを作ります。楽しみですね!

必要な知識

必要となる知識は、

HTML入門

ponnkichi.hatenablog.com

CSS入門

ponnkichi.hatenablog.com

CSS3

ponnkichi.hatenablog.com

になります。

 

対応ブラウザ

今回のレッスンで使うブラウザは、Google Chromeの最新版です。

他のブラウザだったり、バージョンがちがう場合にはうまくいかないこともありますが

その場合は自分で対応しましょう!(ぎゃふん!)

作業用フォルダ

f:id:ponnkichi:20180316203908p:plain

今回は、デスクトップに「Mysite」というフォルダを作り、

ファビコン用の画像、

imgフォルダに様々な画像を用意して作ります。

 

エディタは、いつものAtomを使います。

HTMLを書くよ

いつもの作業です!何度も書いているのでだいぶ覚えてきました!

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>Dotinstall Pane</title>

    </head>

    <body>

    </body>

</html>

ここまで書いたら、保存します。

Macなら、コマンド+Sですね。

デスクトップの「Mysite」に保存します。

f:id:ponnkichi:20180316204420p:plain

index.htmlという名前をつけて、保存しました。

#02 normalize.cssfaviconを導入しよう

ウェブサイトを作った時に、どうしてもブラウザが変わると見た目が変わってしまうという問題があります。

今回は、そのブラウザ間の差を吸収してくれる「normalize.css」を導入しましょう。

 

normalize.cssについては、

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

ponnkichi.hatenablog.com

 

normalize.css のページを開くと、

画面の下のほうにダウンロードボタンがあります。

f:id:ponnkichi:20180318075250p:plain

これを右クリックして、「リンク先を別名で保存」します。

そして、「Mysite」のフォルダーの中に保存します。

f:id:ponnkichi:20180318075440p:plain

 

保存したら、それを読み込ませたいのでHTMLのほうに書き加えます。

まずは、

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

これを書き加えます。

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」になっていて、

その横にちゃんとファビコンが設置されているのが確認できます。

f:id:ponnkichi:20180318080144p:plain

まだ、bodyに何も書いていないので本文は空っぽですけれどね。

 

#03 styles.cssを作っていこう

さて、次はcssファイルを作っていきます。

コマンド+Nで、新しいタグを作ります。

f:id:ponnkichi:20180318080521p:plain

そして、左はHTML、

右はCSSを表示するようにすると見やすくてわかりやすいです。

f:id:ponnkichi:20180318105305p:plain

CSSのほうで、まずは文字コードを設定します。

@charset"utf-8";

 そして、共通の設定を書いていきましょう。

f:id:ponnkichi:20180318105552p:plain

コメントで、「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でも学習しています。

ponnkichi.hatenablog.com

pタグは、行間に余裕をもたせたいのでline-heightを2に設定してみましょう。

p{

line-height:2;

 ここまでできたら、コマンド+Sで保存します。

f:id:ponnkichi:20180318110325p:plain

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

「styles.css」と名前をつけて保存をします。

 

そこまでできたら、

HTMLのほうに「styles.css」を読み込んでいきます。

先ほどnormalize.cssと書いた下に書いていきます。

f:id:ponnkichi:20180318110513p:plain

cssフォルダの中のstyles.cssなので

href属性はcss/styles.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の設定でした。

 

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

 

ちなみに、フォントについては

こちらのサイトを見せていただきました。ありがとうございます!

wp.yat-net.com

 

今回設定したフォント

Verdana」は「ヴァーダナ」と読み

視認性のよさ、スリムさ、安定感を備えています。

 

 

「sans-serif」は「サンセリフ」ですね。

明朝体のような「うろこ」のない書体になります。

 

フォントの種類もいろいろと学びたいなあと思います!