学科 HTML基礎④【オンライン】

-本日のアジェンダ-

1限目
学科 HTML基礎④
CSSの基本事項について

2限目
学科 HTML基礎④
練習問題の説明

3限目
学科 HTML基礎④
マークアップの練習

4限目
学科 HTML基礎④
練習問題の解説

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

本日のテーマ

レイアウトデザイン練習問題①(マークアップの練習)

CSSの基本構造について

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

セレクタの記載方法

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

幅・高さの単位

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

色の指定方法

  • カラーネーム
  • #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 関数)

練習問題:マークアップの練習

【資料】

カリキュラム資料 ダウンロード用サイト
https://cu-doc.deau-ac.com/

下記のファイルをダウンロードしましょう。
レイアウトデザイン 練習問題①.zip」 

【動画】

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。

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

-本日のアジェンダ-

1限目
学科 HTML基礎③
テキスト分類タグとコンテンツ埋め込みタグについて

2限目
学科 HTML基礎③
画像の取り扱いについて

3限目
学科 HTML基礎③
テーブルタグとフォームタグについて

4限目
学科 HTML基礎③
HTML・CSSの紐付けと特殊文字について

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

本日のテーマ

HTMLとCSS記述の基本事項を理解しましょう

【まとめサイト】

【動画】

テキスト分類タグについて

  • a 要素(ハイパーリンク)
  • em 要素(強調)
  • strong 要素(強い重要性)
  • small 要素(免責・警告・著作権など)
  • i 要素(声や心の中で思ったこと)
  • b 要素(キーワードや商品名など)
  • span 要素(ひとつの範囲)
  • br 要素(改行)

コンテンツ埋め込みタグについて

  • img 要素(画像)
  • iframe 要素(インラインフレーム)

画像の取り扱いについて

<img>タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定します。一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。 他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。
alt属性には、画像が利用できない環境向けのテキストを指定します。 HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

参考サイト

ワンポイントアドバイス

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

テーブルタグについて

<table>
  <caption>キャプション</caption>
  <tr><th>見出し</th><th>見出し</th></tr>
  <tr><td>データ</td><td>データ</td></tr>
  <tr><td>データ</td><td>データ</td></tr>
</table>

  • table要素(テーブルの範囲)
  • caption要素(表のキャプション)
  • tr要素(1行の範囲)
  • th要素(タグ見出し)
  • td要素(データ項目)

参考サイト

ワンポイントアドバイス

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

フォームタグについて

  • form 要素(フォーム)
  • label 要素(ラベル)
  • input 要素(インプット)
  • textarea 要素(テキストエリア)
  • select/option 要素(セレクト/オプション)
  • button 要素(ボタン)
  • fieldset/legend 要素(フィールドセット/レジェンド)

CSSとの紐付けについて

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

参考サイト

特殊文字について

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

参考サイト

本日の課題

本日学んだ内容を復習して整理しておきましょう。
ポートフォリオサイトの投稿ページ作成が出来る方は投稿ページにまとめておくと良いです。