htmlのheadタグ内の記述例
<head>
<meta charset="UTF-8"> 文字コード
<meta name="viewport" content="width=device-width, initial-scale=1"> レスポンシブ対応
<title>ページのタイトル</title> ページタイトル
<meta name="description" content="ページ内容の説明文"> description 説明文
<link rel="stylesheet" href="CSSのファイルパス">
<script src="JavaScriptのファイルパス"></script> 外部ファイルの読み込み
</head>
Webページ全体のレイアウト
< body>タグの中身は、大まかに
< header> < main> < footer> 場合によって< aside>に切り分けることができる。
< header>タグ ページのヘッダーを示す。ロゴやグローバルナビゲーションなど。
< main>タグ ページのメインコンテンツのエリアを示す。1ページに1つまで使用可能
< aside>タグ 余談という意味。このページになくても差し支えない要素に使用。脚注や広告バナーなどに使用される。
< aside>の中に< main>を入れることはできない。
< footer>タグ サイトマップやコピーライト情報などを記述することが多い。
セレクタの種類
全称セレクタ
* { ;} すべての要素へ指定
要素セレクタ
p { ;} タグ名がセレクタとなるパターン
子孫セレクタ
article p { ;} 〇〇タグの中にある△△タグの様な親子関係を指定。半角スペースで表す
複数セレクタ
h1, h2 { ;} 複数のタグに同一のスタイルを指定するパターン 「,」カンマで区切る
class/id セレクタ
p .text { ;}
p #attention { ;}
タグに付与されているclassやidを指定してスタイルを適用させる方法。
classは「.」ドット
idは「#」シャープで表す
属性セレクタ
input [type="text"] { ;} タグに付与されている属性や属性値を指定して適用する方法
CSSの特性
CSSは上から順番に読み込まれていく。
なので、下の方に記述していくことで上書き(上書き特性)されていく。
この特性を利用して、CSSは上方に全体共通の指定を書く。
下の方に例外の部分などを上書きして指定していく。
全称セレクタなどは上方に記述する