覚えておくこと！
文字コード
ワンポイントアドバイス！
文字コードは「ファイル」と「文章」の2つを変更しましょう。
文字コード
| 記述例 | 使い方 |
|---|---|
| <meta charset=”UTF-8″> | HTML文章に記述 |
| @charset “utf-8”; | CSSファイルに記述 |
TeraPadの文字コードの変更
ファイル → 文字コード指定再読込 → 「Shift_JIS」「EUC-JP」「UTF-8」等に変更
コメントアウト
ワンポイントアドバイス！
後で見た時に思い出せるようにコメントを記述しておきましょう。
コメントアウト
| 記述例 | 使い方 |
|---|---|
| <!– 〇〇〇〇〇 –> | HTML文章に記述 |
| /* 〇〇〇〇〇 */ | CSSファイルに記述 |
パス
ワンポイントアドバイス！
ややこしくならないようにシンプルにしてみましょう。
パス
| 記述例 | 使い方 |
|---|---|
| <img src=”images/sample_img001.jpg” alt=””> | 画像「img」 |
| <a href=”index.html” >リンク</a> | リンク「a」 |
| <link href=”style.css” rel=”stylesheet”> | 外部スタイルシート「link」 |
| background-image:url(“images/home_bg01.gif”); | 背景画像「background」「background-image」 |
| 記述例 | 使い方 |
|---|---|
| sample_img001.jpg | 同じ階層（フォルダ）にあるファイルのパス |
| ./sample_img001.jpg | 同じ階層（フォルダ）にあるファイルのパス |
| images/sample_img001.jpg | images（フォルダ）の中にあるファイルのパス |
| ../sample_img001.jpg | 現在の階層（フォルダ）の外にあるファイルのパス |
| /sample_img001.jpg | サイトルート相対パス ※ドメインのトップからのファイルのパス |
画像
ワンポイントアドバイス！
「img」はマークアップで意味を持ち、「background」は装飾として使いましょう。
画像
| 記述例 | 使い方 |
|---|---|
| <img src=”images/sample_img001.jpg” alt=”” width=”400″ height=”300″> | 画像「img」は alt=””(必須) width=”400″(推奨) height=”300″(推奨) ※pxの単位は省略可 |
| 記述例 | 使い方 |
|---|---|
| background-image:url(“images/sample_img001.jpg”); | 背景画像「background」「background-image」 |
| background-size:400px; | 背景の画像サイズ ※pxの単位は省略不可 |
| background-color | 背景色を指定する |
|---|---|
| background-attachment | 背景画像の固定・移動を指定する |
| background-image | 背景画像を指定する |
| background-repeat | 背景イメージの繰り返し方法を指定する |
| background-position | 背景イメージの位置を指定する |
| background | background-color background-attachment background-image background-repeat background-position 背景のプロパティを一括で指定※順番の指定はなし |
| background-size | 背景画像のサイズを指定する |
表示ルール
ワンポイントアドバイス！
まずはブロックレベルとインラインを把握しておきましょう。
表示ルール
| 記述例 | 使い方 |
|---|---|
| display:block; | p、div、ul、h1～h6などのタグの初期値 |
| display:inline; | a、span、omgなどのタグの初期値 |
| display:inline-block; | 並びはinline、中身はblock |
| display:none; | 非表示 |
セレクタの得点
ワンポイントアドバイス！
セレクタの得点方法を把握して確実にCSSを有効にしましょう。
セレクタの得点
| CSSセレクタの優先順位の計算方法 | 得点 | 例 |
|---|---|---|
| 全称セレクタ | 0 | * すべての要素に適用 |
| 要素名 | 1 | h1 p div span table など |
| 擬似要素 | 1 | :after など |
| 擬似クラス | 10 | :hover など |
| class | 10 | .main-text |
| id | 100 | #header |
| style属性 | 1000 | <div style=”font-size:140%;”> |
| !important | 合わせて使用したプロパティを最優先 | font-size:140%!important; |
| セレクタの例 | 得点 |
|---|---|
| div#main p | 102点 |
| #main p.main-text | 111点 |
| div#main p.main-text | 112点 |
| div#main main p.main-text | 113点 |
学科 HTML/CSS基礎③【オンライン】
-本日のアジェンダ-
1限1限目
学科 HTML/CSS基礎③
HTMLとCSSを記述するための基本事項
2限目
学科 HTML/CSS基礎③
CSSの基本構造について
3限目
学科 HTML/CSS基礎③
CSSの基本構造について
4限目
学科 HTML/CSS基礎③
Chrome検証ツールについて
5限目
学科 HTML/CSS基礎③
本日の講義のまとめ
本日のテーマ
HTMLとCSSを結び付けていきましょう
CSSの基本構造について
- HTML ファイルとは別に記述する場合
- HTML ファイル内に記述する場合
- HTML タグにインラインで記述する場合
セレクタ {
プロパティ: 値;
プロパティ: 値;
・
}
（例）
【HTML】
<p class=”abc”>文字列１</p>
<p class=”def”>文字列２</p>
【CSS】
p.abc {
color: white;
background: red;
}
p.def {
color: yellow;
background: blue;
}