-本日のアジェンダ-
1限目
学科 HTML/CSS基礎④
CSSの記述方法について
2限目
学科 HTML/CSS基礎④
CSSの記述方法について
3限目
学科 HTML/CSS基礎④
Webページ制作実践
4限目
学科 HTML/CSS基礎④
Webページ制作実践
5限目
学科 HTML/CSS基礎④
本日の講義のまとめ
【講師用カリキュラム情報】
※このブロックは公開時は非表示になります。削除しないでください。
※講師用の情報（注記）を追記して頂いても大丈夫です。
ストーリー：とにかくグラフィックソフトを使うHTMLとCSSの理解
内容1：HTMLとCSSについて
内容2：HTMLとCSSについて
内容3：
課題：練習問題提出
【注記】
・新カリキュラム用に修正（2024/8/14：大浜）
本日のテーマ
CSSの記述を始めましょう
画像の取り扱いについて【復習】
<img>タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。
参考サイト
特殊文字について【復習】
HTMLのコードを記述する時に特別な書き方をする必要のある文字があります。
参考サイト
CSSの基本構造について【復習】
- HTML ファイルとは別に記述する場合
- HTML ファイル内に記述する場合
- HTML タグにインラインで記述する場合
リセットCSSついて
ブラウザは初期状態でタグ単位のデフォルトのスタイルシートを持っています。このデフォルトのスタイルシートの内容はブラウザによって異なるためブラウザ環境を変更すると意図しない表示になることがあります。このような現象を防ぐために使用するのがリセット CSS です。
リセット CSS は、ブラウザが持っているスタイルシートをリセット（クリア）するためのスタイルシートですがリセットする範囲はコーディングスタイルに依存するため、これが正解というリセット CSS は存在しません。各自のコーディングスタイルに合わせて適時変更してください。
Webページ制作実践②
実際にサンプルファイルを使用してWebページ制作の手順を確認していきましょう。
- テキスト分類タグについて
- コンテンツ埋め込みタグについて
- CSSとの紐付けについて
- セレクタの記載方法
【資料】
カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/
下記のファイルをダウンロードしましょう。
「chapter2.zip」
- 要素（タグ）の記述追加
- CSSファイル（style.css）の作成
- HTMLとCSSの紐付け
本日の課題
Webページ制作実践で作成したページのキャプチャを取得してWordPressの投稿ページに貼り付けを行いましょう。（出来たところまでで大丈夫です）