-本日のアジェンダ-
1限目
学科 HTML/CSS基礎③
テキストの意味と画像について
2限目
学科 HTML/CSS基礎③
CSSの基本構造について
3限目
学科 HTML/CSS基礎③
CSSの基本構造について
4限目
学科 HTML/CSS基礎③
Webページ制作実践
5限目
学科 HTML/CSS基礎③
本日の講義のまとめ
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：なし
【注記】
・新カリキュラム用に修正（2024/8/14：大浜）
本日のテーマ
HTMLとCSSを結び付けていきましょう
HTMLとCSSの基礎について
【まとめサイト】
- HTMLとCSSの基礎をまとめたサイト
https://samplesdl.me/training_html-css/
【動画】
- HTMLとCSSを記述するための基本事項
https://youtu.be/nMAIaffLF4s（11分49秒）
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の投稿ページに学んだことをまとめておくと良いです。