HTML の基本
〇見出し
h1~h6 (hはheading)
h1は最上位の見出し サイトのタイトル ウェブページにつき1つ
〇段落
「p」paragraph 段落 一つの段落であることを示し、前後に改行が入る
〇箇条書き
「ol」順序ありリスト 先頭に数字が入る
1 手順
2 手順
3 手順
「ul」順序なしリスト 先頭に・が入る ナビゲーションでよく使う
・材料
・材料
・材料
ul ol 要素はli要素は2つでセット 単独で使用はできない
ul ol 直下には li要素しか入れられない ただし li要素の中に入れ子することは可能
〇記述リスト
<dl>
<dt> タイトル </dt>
<dd> 説明 </dd>
<dt> タイトル </dt>
<dd> 説明 </dd>
</dl>
項目とその説明がワンセットになったリスト構造 dl で囲み 項目を dt その説明を dd でマークアップする
div 意味を持ってないブロック要素
span 意味をもってないインライン要素
br 改行に使う 終了タグはない
storong 太字になる 強調する コンピュータに分かりやすくする
small コピーライトのときに使う
img 画像を挿入する ファイルパスの間違いに注意 htmlからみて同階層[./] 1つ上[../]
alt 画像が表示されなかったときなどにテキストを表示する SEO対策にもなる

id #とセット
target属性を「_blank」にすると新規ウィンドウでURLを開くことができる

パスの練習問題


Ctrl+Space 同じ階層のデータを開く 上の階層 ../
CSSの基本
〇CSSとは
HTML文書に装飾・レイアウトをほどこすための言語
- 文字組の整形
- 色の変更
- レイアウトの調整
- 要素の装飾
- 要素の変形
- アニメーション効果
- 特定の条件によって適用するスタイルを変更する機能(メディアクエリ)
CSSの記述方法
- インライン

- 内部参照 head内に

- 外部参照


〇CSSで使う単位
- px・・・ピクセル(画素)何個分
👉親要素が縮んでも変わらない - %・・・親要素の横幅を100%として自分を何%にするか
👉親要素を基準に可変 - em・・・親要素のフォントサイズの何倍にするか 行間や行頭で何文字分の指定で使う
親 ul {font-size: 16px ;}
子 li {font-size: 2em ;}・・・・・・32px - rem・・・ルート要素(HTML要素)のフォントサイズから何倍にするか フォントサイズの指定で使う
html {font-size: 10px ;}
li {font-size: 2rem ;}・・・・・20px