訓練35日目　学科 HTML/CSS基礎③

本日のアジェンダ

1限目
学科 HTML/CSS基礎③
テキストの意味と画像について

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

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

4限目
学科 HTML/CSS基礎③
Webページ制作実践

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

本日のテーマ

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

本日のレポート

HTML：テキストの意味

  • a 要素（ハイパーリンク）
    他のページやファイル、メールアドレスなどへのリンクを作るときに使います。
    <a href=”リンク先URL” target=”リンク先を開く環境” rel=”リンク先との関係”> リンクコンテンツ</a>
    　target=”_blank”：別タブでリンク先を表示させる
    　rel=”noopener noreferrer”：リンク先が信頼できない場合は指定する

  • em 要素（強調）
    テキストを意味的に強調するときに使います。規定値は斜体で表示されます。（フォントによる）
    <em>強調コンテンツ</em>

  • strong 要素（強い重要性）
    非常に重要な内容を表します。規定値は太字で表示されます。
    <strong>重要情報コンテンツ</strong>

  • small 要素（免責・警告・著作権など）
    小さな文字で補足情報や免責などを表します。規定値は一回り小さい文字サイズで表示されます。
    <small>付帯注釈コンテンツ</small>

  • i 要素（他と区別されるテキスト（思考・専門用語 等））
    思考、用語、外国語など、特別な意味を持つ語に使います。規定値は斜体で表示されます。（フォントによる）
    <i>慣用句・特定用語コンテンツ</i>

  • b 要素（他と区別されるテキスト（キーワード・製品名 等））
    見た目を目立たせるために太字にしますが、意味の強調はありません。
    <b>太字コンテンツ</b>

  • span 要素（特定の範囲をグループ化）
    汎用的なインラインレベルのコンテナを定義します。コンテンツに対する意味の持たせるものではありません。
    <span>インライン要素の範囲コンテンツ</span>

HTML：コンテンツの埋め込み

  • img 要素（画像）※空要素
    ページの中に画像の埋め込みを定義します。
    画像のパスは src 属性、表示できないときの代替テキストは alt 属性で指定します。
    alt はアクセシビリティのために必ず設定しましょう。

  • iframe 要素（インラインフレーム）
    ページの中にインラインフレームの作成を定義します。
    インラインフレームとは、表示しているページの中に別のページを埋め込むための機能です。

画像の取り扱いについて

タグは、画像を表示する際に使用し、必須属性のsrc属性で画像ファイルのURLを指定します。
一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。

他にも、ウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。

alt属性には、画像が利用できない環境向けのテキストを指定します。
HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

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

CSSについて

CSSの構造

CSSファイルをHTML ファイルと別ファイルで記述した時は、HTML ファイルの head タグ内（～の間）に
以下の記述を行い CSS ファイルの取り込みを行います。
<link href=”CSS ファイルのパス名” rel=”stylesheet” type=”text/css”>

【CSSファイルに記述】
文字コード宣言
@charaset”utf-8″;

スタイル指定はこの3つの組み合わせで成り立っています。
セレクタ{プロパティ:値;}

用語例説明
セレクタh1, .title, #mainスタイルを当てる対象
プロパティcolor, margin変更したいスタイルの種類
値blue, 10pxプロパティに設定する内容

CSS：セレクタの記載方法

  • 全称セレクタ（*）
    すべての要素に適用するスタイルを指定できます。

  • 型セレクタ
    HTML の要素名（hi,p等）を指定すると、その要素名に合致する要素に適用するスタイルを指定できます。

  • id セレクタ（#）
    ハッシュ（#）を付けて id 名を指定すると、その id 名に合致する要素に適用するスタイルを指定できます。
    ※CSSではあまり使用しない

  • class セレクタ（.）
    ピリオド（.）を付けて class 名を指定すると、その class 名に合致する要素に適用するスタイルを指定できます。
    ※ページ内リンクはclassでは作れない


  • 子孫結合子セレクタ
    複数のセレクタをスペースで区切って指定すると、ある要素の配下にある要素にスタイルを指定できます。
    ※子と孫…すべてに影響する

  • 子結合子セレクタ（>）
    セレクタを大なり（>）で区切って指定すると、ある要素の直下にある要素にスタイルを指定できます。
    ※子にだけ影響し、孫に影響しない

  • 隣接兄弟結合子セレクタ（+）
    セレクタをプラス（+）で区切って指定すると、ある要素に隣接している要素にスタイルを指定できます。
    ※あんまり使わない

  • 一般兄弟結合子セレクタ（~）
    セレクタにチルダ（~）で区切って指定すると、ある要素に後続している要素にスタイルを指定できます。
    ※あんまり使わない

CSS：色の指定方法

  • カラーネーム
    カラーネーム指定は、black、red、lime、blue などのカラーネームで指定します。

  • rgb（ハッシュ（#）で始まる 16 進数 3 桁）
    rgb 指定は、r が赤、g が緑、b が青を示します。それぞれの色の強さは 16 進数（0～f）で指定します。0 は無発色で、f は最大発色になります。

  • rrggbb（ハッシュ（#）で始まる 16 進数 6 桁）
    rrggbb 指定は、rr が赤、gg が緑、bb が青を示します。それぞれの色の強さを2桁の 16 進数で指定します。00 は無発色で、ff は最大発色になります。

  • rrggbbaa（ハッシュ（#）で始まる 16 進数 8 桁）
    rrggbbaa 指定は、rr が赤、gg が緑、bb が青、aa が透明度を示します。それぞれの色の強さを 2 桁の 16 進数で指定します。00 は無発色で、ff は最大発色になります。透明度は、00 は完全に透明、ff は完全に不透明になります。

  • rgb(r,g,b)（rgb 関数）
    rgb(r,g,b) 指定は、r が赤、g が緑、b が青を示します。

  • rgba(r,g,b,a)（rgba 関数）
    rgba(r,g,b,a) 指定は、r が赤、g が緑、b が青、a が透明度を示します。

  • hsl(h,s,l)（hsl関数）
    hsl(h,s,l) 指定は、h が色相（Hue）、s が彩度（Saturation）、l が輝度（Lightness）を示します。

  • hsla(h,s,l,a)（hsla関数）
    hsla(h,s,l,a) 指定は、h が色相（Hue）、s が彩度（Saturation）、l が輝度（Lightness）、a が透明度（Alpha）を示します。

CSS：幅・高さの単位

  • px（ピクセル値）
  • %（要素の割合（百分率））
    親要素のサイズに対する割合を百分率（%）で指定します。

  • em（要素の割合）エム関数
    親要素のサイズに対する割合（1em = 100%）を指定します。フォントサイズの単位として使用されます。
    ※2em=2倍

  • rem（ルート要素の割合）レム関数
    ルート（html タグ）のサイズに対する割合を指定します。フォントサイズの単位として使用されます。
    ※ルートのフォントサイズの初期値は「16px」 に設定されています。

  • vw（画面の表示幅の割合）
    画面の表示幅に対する割合（10vw = 画面幅の10%）を指定します。
    「width: 100vw;」と指定すると画面幅（スクロールバーを含む）と同じ大きさの領域が定義できます。

  • vh（画面の高さの割合）
    画面の高さに対する割合（10vh = 画面の高さの10%）を指定します。
    「height: 100vh;」と指定すると画面の高さ（スクロールバーを含む）と同じ大きさの領域が定義できます。

  • calc 関数（値の計算）カルク関数
    値を四則演算で計算します。
    ※演算子（+, -, *, /）の前後にスペースが必要

セレクタ得点表

CSSのセレクタ得点（Specificity）は、複数のスタイルが同じ要素に適用されるときに、「どのスタイルが優先されるか」を決めるルールです。

セレクタの種類得点例
style属性1000点<div style="color: red;">
idセレクタ100点#main
classセレクタ10点.title, [type="text"], :hover
要素セレクタ・擬要素1点div, h1, ::after
!important強制color: red !important;

その他（AIに聞いてみた）

HTMLにおける「要素」と「属性」の違い

要素が「器」で、属性がその器に貼る「ラベルや指示」のようなものです。

区分説明例
要素意味や構造を示す本体<a>, <p>, <div>
属性要素に付ける設定・追加情報href, id, class

特殊文字

HTMLの構文に使われる記号（例：<, >, &）などはそのまま書くと誤動作するため、HTMLで特定の記号や文字を正しく表示させたい場合は、「特殊文字（エンティティ）」を使います。

表示したい文字書き方（エンティティ）意味・用途
<&lt;「less than」小なり記号
>&gt;「greater than」大なり記号
&&amp;アンパサンド（&記号）
"&quot;ダブルクォート
'&apos;（または &#39;）シングルクォート
©&copy;著作権マーク
®&reg;登録商標マーク
¥&yen;円記号
 &nbsp;改行されないスペース（半角空白）

感想

今日は次回授業の予習を行った。
属性や要素が急にたくさん出てきて今はまだ混乱気味…
実際に自分で手を動かして少しずつ身に着けていきたい。

タイトルとURLをコピーしました