Lesson 6. HTML/CSS

  • このエントリーをはてなブックマークに追加

3.3 head と body

head要素内には文書に関する「ヘッダー情報」を記述。ページタイトル、外部スタイルシートの場所、外部JavaScriptファイルの場所、文字エンコーディング情報、ページの概要

body要素には「本文」を記述

3.5 クラスとID

基本はclassで対応。idは一つのファイルで一回限り使用できるので例えばサイドバー、フッターのように文書内で唯一の要素に対してはid

3.6 ブロックレベル要素とインライン要素

ブロックレベル要素は高さ・幅を持ち、インライン要素は高さ・幅を持っていない

5.3 ブロックレベル要素

<div>, <section>, <header>, <footer>, <article>, <aside>, <nav>, <ul> 箇条書きリスト <li>と合わせて使用する(連番付きリストは<ol>), <h~>, <p>

6.2 CSSの記法

セレクタ {
プロパティ: 値;
}

6.3 基本のセレクタ

*{ } / p{ } / .red{ } →class / #logo{ } →id /

p.red{ } →クラス名がredのp要素

div p strong { } →div要素の中のp要素の中のstrong要素

6.4 リンクセレクタ

a:link { 
color: #0000ff;
}

linkの部分をa:visited/a:hoverに入れ替えると、それぞれ未訪問のリンク、訪問済みリンク、カーソルを合わせると色が変わるリンクになる。

6.6 CSSの優先順位

下に書かれたものほど優先

8.1 ボックスモデル

ボックス要素はデフォルトでは外側の要素(この場合はbody要素)に対して100%の幅で表示される。

外側の要素の大きさから逆算する。

要素が入れ子になっている時、外側の要素を「親要素」、内側の要素を「子要素」と呼武。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

Leave a Reply

*