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をずらしている。