本日のテーマ

HTMLとCSSを結び付けていきましょう。

HTML:テキストの意味

・a要素（ハイパーリンク）・em要素（強調）・strong（強い重要性）

・smai要素（免責・警告・著作権など）・i要素（他と区別されるテキスト・（思考・専門用語等）・b要素（他と区別されるテキスト（キーワード・製品名等）・span要素（特定の範囲をグループ化）・br要素（改行）

HTML:コンテンツの埋め込み

・ing要素（画像）・iframe要素（インラインフレーム）

CSSと紐付けについて

HTMLのタグとCSSの紐付を行うためにid属性とclass属性が使用されます。

特殊文字について

HTMLのコードを記述する時にと区別な書き方をする必要のある文字があります。

CSSの基本構想について

・HTMLファイルとは別に記述する場合

・HTMLファイルに記述する場合

・HTMLタグにインラインで記述する場合

CSSの：セレクタの記載方法

・全称セレクタ・型セレクタ・idセレクタ・（#）classセレクタ（.）・子結合子セレクタ・子結合セレクタ（>）・隣接兄弟結合子セレクタ（+）・一般兄弟結合子セレクタ（～）

CSS:：幅・高さの単位

・px（ピクセル値）・%（要素の割合（百分率））・em（要素の割合）・rem（ルート）・vw（画面の表示幅の割合）・vh（画面の高さの割合）・calc関数（値の計算）

CSS:色の指定方法

・カラーネーム・#rgb（ハッシュ（＃）で始まる16進数3桁）・#rrggbb（ハッシュ（#）で始まる16進数6桁）・＃rrggbbaa（ハッシュ（＃）で始まる16進数8桁）・rgb（r,g,b）（rgb関数）raba（r,g,b,a）（rgba関数）・hsl（h,s,l）（hsl関数）・hsla（h,s,l,a）（hsla関数）・線形グラデーション（linear-gradinet関数）・放射グラデーション（radial-gradient関数）

学科 HTML/CSS基礎③【オンライン】

-本日のアジェンダ-

1限目
学科 HTML/CSS基礎③
テキストの意味と画像について

2限目
学科 HTML/CSS基礎③
CSSの基本構造について

3限目
学科 HTML/CSS基礎③
CSSの基本構造について

4限目
学科 HTML/CSS基礎③
Webページ制作実践

5限目
学科 HTML/CSS基礎③
本日の講義のまとめ

本日のテーマ

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属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

参考サイト

ワンポイントアドバイス

Webサイトを重くする（表示スピードの低下）の大きな原因の一つは画像サイズです。WebサイトにUPする画像はPhotoshopやIllustratorでしっかりと画像の最適化をしてUPしましょう。

CSSとの紐付けについて

HTMLのタグとCSSの紐付けを行うためにid属性とclass属性が使用されます。

参考サイト

特殊文字について

HTMLのコードを記述する時に特別な書き方をする必要のある文字があります。

参考サイト

CSSの基本構造について

  • HTML ファイルとは別に記述する場合
  • HTML ファイル内に記述する場合
  • HTML タグにインラインで記述する場合

CSS：セレクタの記載方法

  • 全称セレクタ
  • 型セレクタ
  •  id セレクタ（#）
  • class セレクタ（.）
  • 子孫結合子セレクタ
  • 子結合子セレクタ（>）
  • 隣接兄弟結合子セレクタ（+）
  • 一般兄弟結合子セレクタ（~）

CSS：幅・高さの単位

  • px（ピクセル値）
  • %（要素の割合（百分率））
  • em（要素の割合）
  • rem（ルート要素の割合）
  • vw（画面の表示幅の割合）
  • vh（画面の高さの割合）
  • calc 関数（値の計算）

CSS：色の指定方法

  • カラーネーム
  • #rgb（ハッシュ（#）で始まる 16 進数 3 桁）
  • #rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
  • #rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
  • rgb(r,g,b)（rgb 関数）
  • rgba(r,g,b,a)（rgba 関数）
  • hsl(h,s,l)（hsl関数）
  • hsla(h,s,l,a)（hsla関数）
  • 線形グラデーション（linear-gradient 関数）
  • 放射グラデーション（radial-gradient 関数）

本日の課題

本日学んだ内容を復習して整理しておきましょう。
WordPressの投稿ページに学んだことをまとめておくと良いです。