ドットインストールでCSSレイアウト入門 #01~#03
今日から、ドットンストールさんで
「CSSレイアウト入門」を学び始めます。楽しみですね！
ドットインストールの今後のレッスンはこんな感じです。
順番に、全部やっていこうという計画です✨楽しみです！
今回からは、「CSSレイアウト入門」。
HTML5と、CSS3を使った学習になります。
こちらを学ぶのに必要な基礎知識は以下の通り。
あれ…Chrome Developer Toolsをやったことないけれど、大丈夫かな？
ドキドキしつつ、そのまま進む次第。（進むんかい）
#01 CSSでレイアウトを組み上げよう
#01では、このレッスンの概要、必要となる知識、必要なツール、そしてひながたファイルを作るところまで学習します。
概要
今までhtmlやcss、css3を学んできましたが、
「さあ、じゃあ自分でサイトを作ってね」と言われると困る人が多いと思います。
というか、これは私です。
なので、今回の全15回のレッスンで、自分でレイアウトを組めるようにしていきましょうということです。
いよいよ自分でサイトが作られるように…。ゴクリ。
必要となる知識
必要となる知識は、今まで学んできたHTML5、CSS/CSS３です。
ブログ記事や、ドットインストールさんの動画を見返しながらやっていきましょう。
必要となるツール
必要となるのは以下の通りです。
今までの学習でおなじみのツールですね。
ひながたファイルを作る
さあ、いよいよやっていきましょう。
htmlを書いていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>CSS Layout Practice</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello</h1>
<p>World</p>
</body>
</html>
こんな感じですね。
cssのページも作っておきます。
何回も書いているためか、少しずつこのあたりを書くのが早くなってきたような気がします。
そろそろ全部すらすらと書けるようになりたいところですね。
#02 reset.css、normalize.cssを使おう
実際にレイアウトを組み上げていく前に、準備が必要です。
先ほどのhtmlに書いたこれ。
<h1>Hello</h1>
<p>World</p>
ブラウザで見ると、このようになっています。
h1タグで囲まれた文字が大きくなり、行間もあいているのがわかります。
実は、私たちが使っているブラウザには標準で組み込まれているスタイルシートがあります。
この、ブラウザに組み込まれているスタイルシートを
User Agent Stylesheetといいます。
これは、ブラウザ各社が独自で定めているので、違うブラウザで見ると、違う見た目になってしまうことが起こります。
Chomeで見た時とインターネットエクスプローラーで見た時の見た目が違うというようなことですね。
そこで、どのブラウザでも同じように見えるようにするためには以下の方法があります。
現在の主流は、reset.cssとnormalize.cssを使う方法だそうです。
reset.css
これは、すべてのスタイルを無効化するものなので、
全てのスタイルを１から自分でつけていくことになります。
先ほどの例で言えば、h1だから太字になるとか余白があくとかはない、ということです。
導入方法
html5doctorのサイトで配布されている物を使うのが主流です。
このサイトからコードをひっぱってきます。
コードをコピーして、そのコードで新しくファイルを作ります。
実際に読み込んでみよう
head内のスタイルシートのところに書き入れます。
自分のスタイルシートよりも先に読み込む必要があるので、上になるように書きます。
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="styles.css">
さあ、さっきのHello Worldをブラウザで見てみましょう。
ちっちゃい！
h1も見事にちっちゃいし（太字にはなっているね！）
余白も何もありません。
resetの力、おそるべしです。
noemalize.css
こちらは、User Agent Stylesheetのいいところを考慮し、必要なところを残した形になります。
導入方法
そのまま、「normalize css」で検索をします。
このサイトでダウンロードボタンを押します。
そうすると、ソースが出てくるので、そのままコピーをして新しくファイルを作ります。
実際に読み込んでみよう
head内のスタイルシートのところに書き入れます。
先ほどと同じように、上になるように書きます。
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="styles.css">
さあ、さっきのHello Worldをブラウザで見てみましょう。
おお！h1の文字は大きい！
ブラウザの余白などは消えていますが、文字の大きさや太さなどは残っているのが確認できました。
どこまで自分で行いたいかは好みなのですが、
今回ドットインストールさんでは後者の「normalize.css」の方を使っていくということです。
#03 Developer Toolsを使ってみよう
「あ！これ、
『cssレイアウト入門』を学ぶ前に
知っておこうと書かれていたものだね！」
#03でやってくれるとはありがたい。
事前に学習しておくべきかどうか迷っていたんですよね。
（そして事前に学習しないことに決定した瞬間であった）
Developer Toolsは、ブラウザが解釈しているHTML,CSSを確認するためのものです。
これを使うと、
どの要素にどのようなスタイルがあてられているかを確認することができます。
を押せば、起動することができます。
先ほどのHello Worldのページを開いてみると、このような画面が出てきます。
下のほうに、いろいろと出てきますね。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
ちなみに、Chrome だけでなくFirefoxでも同じように開けるそうなのですが
私が現在使っているSafariではできませんでした（Mac）。
開き方を教えてくださっているページを発見いたしましたので参考にさせていただきました！感謝！
Safariのwebインスペクタなど開発者ツールの出し方 – webdev
ちなみに、私のパソコンでは
「開発」→「Webインスペクタを表示」で出てきます。
小さいのでざっとご紹介になってしまうのですが、
2018年3月6日の記事はこのように表示されました。
下のほうに、出てきていますね！
余談おわり。
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
さて、Chromeの話に戻ります。
下のほうに、コンソールキーが出ているのですが、
Escキーを押すと消えます。
おお！大きくなりました！
Developer Toolsの消し方は、右上のばつ印をクリックします。
また、気になる要素を見たい時には
要素をアクティブにして、右クリックをします。
そして、「要素の検証」を選択すると
同じように起動することができます。
Developer Toolsは、色々な使い方があるのですが
CSSを編集しているときによく使うのが
「Elements」です。
ここを見ると、
ブラウザが解釈しているhtmlの要素と、
それに当てられているCSSを見ることができます。
上が、noemalize.cssで当てられているスタイル。
下が、user agent stylesheetで当てられているスタイルです。
user agent stylesheet、最初からいろんなスタイルがたくさん当てられていますね。
何か、自分の想定と違うことが起きた場合には、
こちらで確認することができます。便利ですね。
詳しく知りたい場合には、
こちら（全10回）で学習してみるといいですね。
Chrome Develpper Tools 入門（全10回）
え？私…？
このままCSSレイアウトを進んでいきたいと思います（キリッ）。
