-本日のアジェンダ-
1限目
学科 HTML/CSS基礎③
テキストの意味と画像について
2限目
学科 HTML/CSS基礎③
CSSの基本構造について
3限目
学科 HTML/CSS基礎③
CSSの基本構造について
4限目
学科 HTML/CSS基礎③
Webページ制作実践
5限目
学科 HTML/CSS基礎③
本日の講義のまとめ
本日のテーマ
HTMLとCSSを結び付けていきましょう
HTML：テキストの意味
- a 要素（ハイパーリンク）
- em 要素（強調）
- strong 要素（強い重要性）
- small 要素（免責・警告・著作権など）
- i 要素（他と区別されるテキスト（思考・専門用語 等））
- b 要素（他と区別されるテキスト（キーワード・製品名 等））
- span 要素（特定の範囲をグループ化）
- br 要素（改行）
HTML：コンテンツの埋め込み
- img 要素（画像）
- iframe 要素（インラインフレーム）
画像の取り扱いについて
<img>タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。
アクセシビリティが高いとは：年齢や身体能力、環境に関わらず、あらゆる人が製品やサービスを容易に利用できる状態
alt属性：目が見えない方向けに
| 種類 | 拡張子 | 向いているもの | 特徴 | |
| JPG（JPEG）: | ビットマップ画像 | 「.jpg」「.jpeg」 | 写真 | 保存するたびに劣化 |
| PNG： | ビットマップ画像 | 「.png」 | 透過のある画像 | 保存を繰り返しても劣化しない |
| GIF： | ビットマップ画像 | 「.gif」 | アニメーション | 保存を繰り返しても劣化しない |
| SVG： | ベクター画像 | 「.svg」 | ロゴやアイコン | 拡大／縮小や、保存を繰り返しても劣化しない |
文字コード
| 記述例 | 使い方 |
|---|---|
| <meta charset=”UTF-8″> | HTML文章に記述 |
| @charset “utf-8”; | CSSファイルに記述 |
コメントアウト
| 記述例 | 使い方 |
|---|---|
| <!– 〇〇〇〇〇 –> | HTML文章に記述 （表示しない） |
| /* 〇〇〇〇〇 */ | CSSファイルに記述 （起動しない） |
パス
| 記述例 | 使い方 |
|---|---|
| http://samplesdl.me/training_html-css_190622_01/index.html | 絶対パス |
| index.html | 相対パス |
| 記述例 | 使い方 |
|---|---|
| <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 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セレクタの優先順位の計算方法 | 得点 | 例 |
|---|---|---|
| 全称セレクタ | 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点 |
コメント