HTMLとCSSの基礎について【オンライン】2025.4.29

HTMLでの記述

インライン要素

インライン要素とは、HTMLやCSSにおいて、テキストの一部として表示される要素のことで、他の要素やテキストと一緒に横に並んで表示される
ブロック要素とは違い、自動的に改行されず、その内容の長さに合わせて幅がとられる

HTML：テキストの意味

L2.7.1 a 要素（リンク）
<a href=”リンク先URL” target=”リンク先を開く環境” rel=”リンク先との関係”> リンクコンテンツ </a>
リンクコンテンツに対してリンク（ハイパーリンク）を定義します。a は anchor を短縮したものです。リンクコンテンツには、テキストだけでなく画像などを指定することもできます。
HTML例
<a href=”URL”>通常のリンク先</a>
<a href=”URL” target=”_blank”>リンク先を新しタブまたは新しいウィンドウで開く</a>
<a href=”URL” target=”_blank” rel=”noopner noreferrer”>
信頼できないリンク先を新しタブまたは新しいウィンドウで開く
</a>
<a href=”#id名”>自ページ内の id 名へのリンク</a>
<a href=”mailto:test@sample.com”>メールアドレスへのリンク</a>
<a href=”tel:03-0000-0000″>電話番号へのリンク</a>

L2.7.2 em 要素（強調）
 強調コンテンツ 
HTML例
前後の文章 強調する文字列 前後の文章

L2.7.3 strong 要素（重要情報）
 重要情報コンテンツ 
HTML例
前後の文章 重要な文字列 前後の文章

L2.7.4 small 要素（付帯注釈）
 付帯注釈コンテンツ 
主要なコンテンツに付随する短いコメントや保尊を定義します。免責事項や著作権表記、注意事項、警告文などを示します。数行に渡る文章や、それ自体が主体となる文章には適しません。
HTML例
<article>
<h1>牛丼価格</h1>
<ul>
<li>並盛り ¥400 (税込み)</li>
<li>大盛り ¥500 (税込み)</li>
</ul>
</article>
<footer>
© 2024 Gyuudon-ya.Co.,Ltd.
</footer>

L2.7.18 i 要素（慣用句・特定用語）
 慣用句・特定用語コンテンツ 
慣用句や特定用語などで前後の言葉と区別したい用語を定義します。例えば、技術的な専門用語、学術的な言葉、あるいは誰かが言ったことわざや慣用句などです。
HTML例
Webサイトは、HTML を使用して ハイパーリンク を設定します。

L2.7.19 b 要素（太字）
 太字コンテンツ 
文章の中で意味的な重要性を与えずに注目してほしい箇所を定義します。言葉の意味を強調したり重要性を伝えるために使用してはいけません。協調したい場合は em 要素、重要性や緊急度を表す場合は strong 要素を使用してください。
HTML例
前後の文章 注目してほしい箇所 前後の文章

L2.7.27 span 要素（インライン要素の範囲）（特定の範囲をグループ化）
 インライン要素の範囲コンテンツ 
汎用的なインラインレベルのコンテナを定義します。これ自体はコンテンツに対する意味の持たせるものではありませんが特定の範囲をまとめてスタイルシート（CSS）を適用したい場合などに使用します。
HTML例
前後の文字列 特定の文字列 前後の文字列

L2.7.28 br 要素（改行）
 
文章の中の改行位置を定義します。一つの段落の中で改行を行いたい場合に使用します。
HTML例
東京都千代田区1-1-1 TEL：03-0000-0000 Mail：abc@sample.com

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

L2.9.2 img 要素（画像）
<img src=”画像ファイルのパス” 　→　表示する画像ファイルのパスを指定、必須
alt=”代替テキスト” 　→　表示する画像ファイルの代替テキストを指定
　　　　　　　　　　　　　　　なんらかの原因で画像が表示できない場合に代わりに表示する文字列
width=”横方向ピクセル値” 　→　画像の横方向の単位なしのピクセル値を指定
height=”縦方向ピクセル値” 　→　画像の縦方向の単位なしのピクセル値を指定
loading=”画像の読み込み方”
decoding=”画像デコード時のヒント”
srcset=”画像選択リスト”
sizes=”画像サイズリスト”>
HTML例
<img src=”images/sample1.jpg” alt=”Sample Image” width=”600″ height=”400″>

L2.9.3 iframe 要素（インラインフレーム）
<iframe src=”インラインフレーム表示ファイルのパス”
width=”横方向ピクセル値”
height=”縦方向ピクセル値”
srcdoc=”インラインフレームに表示するHTML”
name=”インラインフレームの名前”>
iframe要素が未サポート時の代替テキスト </iframe>
ページの中にインラインフレームの作成を定義します。インラインフレームとは、表示しているページの中に別のページを埋め込むための機能です。
※ホームページの中にgoole mapを埋め込む　など

特殊文字について・・・©（コピーライト）は【&copy】に書き換えなくてはいけない。<>など記号をそのまま入力してしまうと、ブラウザがコードだと勘違いして正常に表示されないことがあるため、文字の置き換えを行う必要がある。

CSSとの紐付け

名前を付ける作業
id属性・・・ひとつのidはページ内で1度しか使えない。また、1要素に複数のidはつけられない。ページ内リンクができる。
class属性・・・ひとつのページ内で同じclassをいくつでも使える。また1要素に複数のclassをつけて良い。

CSS の基本構造

CSS の構造（HTMLファイルとは別に記述する場合）

CSSファイルをHTML ファイルと別ファイルで記述した時は、HTML ファイルの head タグ内（<head>～</head>の間）に以下の記述を行い CSS ファイルの取り込みを行います。

<link href="CSS ファイルのパス名" rel="stylesheet" type="text/css">

コメントアウトとは

ソースコード内にコメントを書き残す方法を「コメントアウト」と言います。コメントアウトで書いた文字は、コードには反映されないのでブラウザ上でも表示されません。

そのため、自分用のメモとして利用したり、仕事間での共有事項を記入しておくなど便利に活用できます。

/* 書きたいコメント */

CSS セレクタの記載

CSSセレクタとは、CSSルールをどのHTML要素に適用するかを指示する、CSSの重要な構成要素です。セレクタは、HTML要素、クラス、IDなど、様々な方法で要素を指定し、スタイルを適用する際のターゲットを決定します。

L3.4.1 全称セレクタ（*）
* { プロパティ: 値; }
アスタリスク（*）を指定すると、すべての要素に適用するスタイルを指定できます。
使用例
* { color: red; }
p * { color: red; }

L3.4.2 型セレクタ
要素名 { プロパティ: 値; }
HTML の要素名（タグ名）を指定すると、その要素名に合致する要素に適用するスタイルを指定できます。
使用例
h1 { font-size: 140%; }
p { color: red; }

L3.4.3 id セレクタ（#）
#id名 { プロパティ: 値; }
ハッシュ（#）を付けて id 名を指定すると、その id 名に合致する要素に適用するスタイルを指定できます。
使用例
#box1 { font-size: 140%; }
div#box2 { color: red; }

L3.4.4 class セレクタ（.）
.class名 { プロパティ: 値; }
ピリオド（.）を付けて class 名を指定すると、その class 名に合致する要素に適用するスタイルを指定できます。
使用例
.text1 { font-size: 140%; }
p.text2 { color: red; }

L3.4.5 子孫結合子セレクタ
セレクタセレクタ { プロパティ: 値; }
複数のセレクタをスペースで区切って指定すると、ある要素の配下にある要素にスタイルを指定できます。
例えばフッターの中のだけ変更したいとき。子・孫まですべてに反映される。
（　footer p{color:red;}　）

L3.4.6 子結合子セレクタ（>）
セレクタ > セレクタ { プロパティ: 値; }
セレクタを大なり（>）で区切って指定すると、ある要素の直下にある要素にスタイルを指定できます。
子だけ変更したいとき。
（　footer>p{color:red;}　）

L3.4.7 隣接兄弟結合子セレクタ（+）
セレクタ + セレクタ { プロパティ: 値; }
セレクタをプラス（+）で区切って指定すると、ある要素に隣接している要素にスタイルを指定できます。
セレクタ{プロパティ:値;}