HTML/CSS基礎⑥ CSS実践

講義内容

1限目
学科 HTML/CSS基礎⑥
CSSの記述方法について

2限目
学科 HTML/CSS基礎⑥
CSSの記述方法について

3限目
学科 HTML/CSS基礎⑥
Webページ制作実践

4限目
学科 HTML/CSS基礎⑥
Webページ制作実践

5限目
学科 HTML/CSS基礎⑥
本日の講義のまとめ

★HTMLワークフロー
1.フォルダ作成
2.HTMLの基本構文をコピペ、””要素の書き換え
3．cssフォルダ作成、この中にスタイルシート。imgフォルダも作成
4.ファビコンはimg下のfavicon.ico
5.bodyにヘッダー、メイン、フッダー記述

<div class="container">

で囲んでおくと便利
※閉じタグ忘れない
6．中身かいてく

★検証ツールでの編集
CSSのclass作成した後、検証ツールのStyleに直接記述できる※一番下のタブ

入力後、ファイル名をクリックして全選択してstyle.cssにペースト

container単位でのサイズ調整とかできるから入れとくと良い
コメント入れておくとUTF-8かどうかチェックの示準になる。
メニューの横並びはwidth: calc(100% / 4);とtextアライアンス=centerがおすすめ
※分母はメニューの個数

・フォントが正しく適応されない

正しくない箇所で検証ツールを起動、Computedの一番下に使われているフォントが確認できる。

・ヘッダーのアドレスが右揃えになっていない
以下コードの追記で解消

text-align: right;

・リストが一つ目以外レイアウトが崩れる
main section.access dl dtの記述に間違いがあった。emセレクタの理解が足りなくて起きたスペルミス。

×　margin: 0 lem 0 0;
〇　margin: 0 1em 0 0;

floatの回り込みの概念がよくわからない

floatは浮かせる処理なので本来ならfloatを記述したクラスのレイヤー下に文字が来るが、
下に来たクラスをmarginで右側にずらすことで横並びにしている。
幅8文字(em)＋空白1文字(em)＝9文字(em)、ddをずらしている。