月: 2023年6月

学科 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 関数）

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

【資料】

ドロップボックスの資料をダウンロードしましょう。
資料 ＞ 【STEP3】Webページの理解 ＞ レイアウトデザイン 練習問題①
Webサイト制作のマークアップの練習資料です。

【動画】

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。

学科 HTML基礎③

-本日のアジェンダ-

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

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

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

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

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

本日のテーマ

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

【まとめサイト】

【動画】

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

  • a 要素（ハイパーリンク）
    ハイパーリンクする範囲を指定します。
  • em 要素（強調）
    強調する（アクセントを付ける）範囲をを指定します。
  • strong 要素（強い重要性）
    強い重要性を示す範囲を指定します。
  • small 要素（免責・警告・著作権など）
    免責・警告・著作権などの注釈や細目する範囲を指定します。
  • i 要素（声や心の中で思ったこと）
    声や心の中で思ったことなど、他と区別したい範囲を指定します。
  • b 要素（キーワードや商品名など）
    キーワードや商品名など、他と区別したい範囲を指定します。
  • span 要素（ひとつの範囲）
    ひとつの範囲として定義する範囲を指定します。
  • br 要素（改行）
    改行する箇所を指定します。本要素には、終了タグがありません。

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

  • img 要素（画像）
    画像の埋め込み表示を指定します。本要素には、終了タグがありません。
    img要素では、alt属性を使用して代替テキストを指定してください。「代替テキスト」は、画像が表示できない時に画像の代わりに表示するテキストを指定します。必須項目なので必ず指定してください。
  • iframe 要素（インラインフレーム）
    インラインフレーム内に「フレーム内に表示する URL」で指定した URL の内容を表示します。「補足情報」には表示する内容の補足的な情報を指定します。
    「フレームの幅」と「フレームの高さ」には、作成するフレームの大きさを指定します。幅の初期値は 300、高さの初期値は 150 です。

画像の取り扱いについて

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

参考サイト

ワンポイントアドバイス

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

テーブルタグについて

テーブルとは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。表の基本的な構造は<table>～</table>の中に<tr>～</tr>で表の横部分を指定し、その中に<th>～</th>や<td>～</td>で表題や縦軸を指定してセルを定義します。この時ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
<table>はしばし、レイアウトのために使用されることがあります。しかし本来の使用方法ではありませんので、レイアウトで同様の効果が欲しい場合はスタイルシートを利用するとよいでしょう。

<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行の範囲）
    1行の範囲を指定します。
  • th要素（タグ見出し）
    タグ見出し項目を指定します。
  • td要素（データ項目）
    データ項目を指定します。

参考サイト

ワンポイントアドバイス

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

フォームタグについて

  • form 要素（フォーム）
    入力フォームの作成を指定します。フォーム要素にフォームを構成するフォーム要素（部品）を配置します。
  • label 要素（ラベル）
    入力フォームのフォーム部品とラベルを関連付けます。一般的には、関連付けを行うことでラベルをクリックしてもフォーム部品をクリックしたのと同じ効果を出すことができます。
  • input 要素（インプット）
    テキスト入力欄やボタンなそのフォーム部品を作成します。本要素には、終了タグがありません。
  • textarea 要素（テキストエリア）
    複数行のテキスト入力ボックスを作成します。本要素には、終了タグがありません。
  • select/option 要素（セレクト／オプション）
    select 要素は、option 要素で指定されたリストからの選択ボックスを作成します。
  • button 要素（ボタン）
    ボタンを作成します。
  • fieldset/legend 要素（フィールドセット／レジェンド）
    fieldset 要素は、フォーム要素をグループ化します。legend 要素は、グループ化した要素群のキャプションを指定します。

CSSとの紐付けについて

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

参考サイト

特殊文字について

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

参考サイト

本日の課題

WordPressサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルは、投稿内容がわかるような記述にしましょう。