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

未分類

-2025/10/18のアジェンダ-

1限目
学科 HTML/CSS基礎③
HTMLとCSSを記述するための基本事項

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

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

4限目
学科 HTML/CSS基礎③
Chrome検証ツールについて

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

本日のテーマ

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

HTMLとCSSの基礎について

【まとめサイト】

【動画】

画像の取り扱いについて

<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属性が使用されます。

参考サイト

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;
}

・インライン
・インラインブロック
・ブロック
・CSSセレクタの得点　・反映されるのは得点の加算による。
・CSSのバックグラウンドとimg(HTML)違い
・セレクタの記載方法（classセレクタ（複数作ることができる）・idセレクタ（１つだけ作ることができる）など）
・リセットCSSの読み込み
・Chromeの検証ツール

今日は自習時間に昨日のHTMLの課題の続きをしてみた。

初めてVSCを操作した。
Terapadの操作を先日していたのでスムーズに行うことができた。
先日のできたデータは画像が消えてしまっているものができてしまったので、
今日は画像もしっかり見えるものができた。
成功体験が小さくても増えるとモチベーションにも繋がった。

完成作品