シリーズ
Progate無料版をやってみる【HTML & CSS 初級編】#1
第13章から
前回の続きになります。
ヘッダーの構造
・特記事項はないので即演習へ
・演習
プレビューも見本もなんでこんなにちっちゃいの？ｗ
→初期表示している画面のサイズが悪いかも。全画面にしたり縮めたりしていたらある程度大きくなった。
header-logoとheader-listのクラスを参照した意味は・・・？
ヘッダーのレイアウト
・横並びを実現するにはfloatプロパティ。ぐぐったら「浮く」ってでてきた・・・。
・演習
たしかに横並びに
ヘッダーの余白
・余白を作りたい場合はpadding。要素の外側にスペースが開くイメージ。内側らしいｗ
・演習
余白があるほうが見た目がいいですね。
フッターの構造
・CSSに「.header-list li」と定義することで、「クラス=header-listの下層のli要素に対して」という意味になる。JavaScriptで要素を取得するときに、よく上記のような要素を限定するセレクタ指定が出てきた
・演習
フッターのレイアウト
・左寄せと右寄せ→float leftとright
・演習
やばい、そろそろ写りきらない
メインのレイアウト
・文字列内の一部にCSSを適用させたい場合は<span>を使用するとのこと。意識したことなかったなぁ。お決まりなんでしょうか。
・ブロック要素とインライン要素。
ブロック要素 → div,h1,p
インライン要素 → span,a
・演習
コンテンツの構造
・演習
即演習。また、ソースが冗長になってきたため、一部しか結果載せません。
ボーダー
・罫線を引く。borderを使用する。
「border: 太さ 種類 色 」でいっぺんに定義できる。
paddingとmargin
・paddingはborderの内側。
・marginはborderの外側。
・HTMLのすべての要素にはborderがあり、それの内側がpaddingで外側がmarginとのこと。
→初めて知った・・・。
・演習
だんだん見た目が良くなってきた！
ホームページ等を自作するときに参考にできそう。
お問い合わせフォームのレイアウト
以下のようなフォームを作成する
・演習
淡々と進めます
お問い合わせフォームのレイアウト（2）
・入力するためのタグがでてくる。inputやtextarea等・・・。
・CSSはカンマ区切りで定義することで、それらに同じスタイルを適用できる。例：h1,p { color: red; }
・演習
ここまでだったらまだ全然できる・・・と思う。
あ、なんか初級編おわった。
総括
・業務である程度触っていたので、サクサクとは進められた。
・業務でフワフワと使用していた技術が、少しだけ理解が深まった。
→「すべてのHTML要素にはborderがあり、borderの内側がpaddingで外側がmarginである」は勉強になった！
・自分でHTMLのレイアウトを作成するときって何から手を付けて、どのタグを使用すればいいのかわからなかったが、本レッスンを参考にしていきたいと思う。
次回はHTML&CSSの中級編をやっていきたいと思います。
後から読み返してみて・・・
演習結果だけ貼っていると、超わかりにくいですね・・・
もし見てくれる方がいましたら、その時は自身もProgateをやりながらがいいかもしれません。