15日目。HTML&CSS初級編のコーディングをやってみました。

プロゲートもだいぶ進んできました！

今日はHTML&CSS初級編のコーディングにチャレンジ。

まずは初心者マークの「ようこそ」を確認。
仕様書にしたがって見本と同じホームページを作る、というものです。
これができると、デザインしたページをホームページとして完成させることができるってわけですね！
課題は一度やったページなので簡単簡単・・・とおもったら、あれれ？
何が何だかわからないっ！

言われた通りに手取り足取り進めるのと一味違うって感じです。
いったん解説ページにもどって説明書をよく読みます。

検証ツール（デベロッパーモード）の使い方

ふむふむ・・・Chromeの「検証」を使うんですね。
カーソルを合わせるだけで、コードと画面が一対一対応しているところがわかる！
画面を見ながら簡単に見た目を変更できる！
画面と一対一対応でCSSがわかる！コードの入れ子構造がわかる！
状態変化がわかる！
すごいツールです。ってかこれ。ソースをコピペすれば完成するじゃん。

いやいやそれじゃつまらないので、手討ちにしてくれましょう。

「検証」で開くとコードの文字がちっちゃくて見にくいのでどうにかする方法を探しました。

Chromeデベロッパーツールの文字サイズ拡大縮小・リセットする方法

デベロッパーツールの文字サイズ拡大縮小
* 拡大：command + ^
* 縮小：command + -
* リセット：command + 0
拡大はプラスじゃなくて右上の ~ キーだった。shift も使わない。なぜショートカットキーが異なるのかは分からないが、これを知らずハマっていた

ありがたや。どうにかなりました。
では早速！

ヘッダーを作ろう

10分で完成。ぴったりその通りにできているはずなんだけど、何回判定してもヘッダーリストの位置が違うってでる。何回みても数字はあっているはず。違いがさっぱりわからない。試しに見本のコードをコピペしたらこれは通った。何が違っていたんだろう。（30分）

トップ部分を作ろう

わーっと書いて、でも赤文字が赤くならなかったり，h2の文字が大きくならなかったりでつまずく。よく見たらタグが閉じていなかったり、一文字間違っていたり・・・汗 （15分）

コンテンツ部分を作ろう

①<h1>と<h2>はタグの外で<div class=…>でクラスを定義したのに<h3 class=…>とここはタグの中でクラスを定義。この違いがわからない。とりあえずコーディングする。
②イメージを４つならべたいのに、どうしても３つしか並ばず。Paddingを見直したら並びました！
(15分）

お問い合わせフォームをつくろう

①フォームの線、ボタンの背景の設定がわからず四苦八苦。
②何回やっても高さがあわない！と思ったら