HTML基礎③

2023.06.12

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

  • アンカータグ　a 要素　エータグ
    ハイパーリンクする範囲を指定
    <a href=”リンク先情報”>ハイパーリンク定義情報</a>
    外部サイトにリンク　targret=”_blank”をつけて新しいタブで開くようにする
    また、外部からの自サイトを操作回避のため　rel=”noopener noreferrer”　を同時に指定
  • em 要素
    強調する（アクセントを付ける）範囲をを指定
  • strong 要素
    強い重要性を示す範囲を指定
  • small 要素　
    免責・警告・著作権（コピーライト）などの注釈や細目する範囲を指定
  • i 要素
    声や心の中で思ったことなど、他と区別したい範囲を指定
  • b 要素
    キーワードや商品名など、他と区別したい範囲を指定
  • span 要素
    ひとつの範囲として定義する範囲を指定
  • br 要素
    改行する箇所を指定。終了タグなし

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

  • 画像　img 要素
    画像の埋め込み表示を指定。終了タグなし
    <img scr=”画像ファイル名” alt=”代替テキスト”>
    「代替テキスト」は、画像が表示できない時に画像の代わりに表示するテキストを指定
  • インラインフレーム　iframe 要素
    他のＷＥＢページを自分のＷＥＢページに貼る。
    <i frame src=”フレーム内に表示するURL” width=”フレーム幅” height=”フレームの高さ”
    title=”補足情報”>
    幅の初期値は 300、高さの初期値は 150

テーブルタグについて

テーブルとは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグ。
ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
スタイルシートで見た目を整えます。

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

  • テーブル　table要素
    テーブルの範囲を指定
  • タイトル　caption要素
    タイトルを指定
  • 1列　　tr要素
    1行の範囲を指定
  • 見出し　th要素
    タグ見出し項目を指定
  • データを定義　td要素
    データ項目を指定

※セルを横につなげる場合　colspan=”つなげたい数”
※セルを縦につなげる場合　rowspan=”つなげたい数”

テーブルとテーブルが重なるように表示　collapse
テーブルとテーブルの間をあけるように表示　separate
どのぐらいあけるのか？　bordre_spacing

フォームタグについて

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

CSS との紐付け

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

id属性

<要素名 id=”id 名”>コンテンツ</要素名>

1 つの Web ページ内では1箇所にしか同一の名前を付けれません。
CSS などで id 名を参照する時は、先頭に「ハッシュ（#）」を付与します。
id 名は、a タグ（アンカータグ）のリンク先として使用することもできます。

使用例　<p id=”text1″>サンプルテキスト</p>

class属性

<要素名 class=”class 名”>コンテンツ</要素名>

要素に対して class 名を付与。複数の箇所に同一の名前を付けれます。
class 名には複数の名前をスペースで区切って指定することができます。
CSS などで class 名を使用する時は、先頭にピリオド（.）を付与します。

使用例　<p class=”size1 color1″>サンプルテキスト</p>

特殊文字について

HTMLのコードを記述する時に特別な書き方をする必要のある文字があります。
他にもあるので、検索すると良い。

ダブルクォーテーション　” &quot;
アンパサンド　& &amp;
小なり　< &lt;
大なり　> &gt;
ノーブレークスペース　（スペース） &nbsp;
著作権記号(コピーライト)　© &copy;
登録商標　® &reg;

画像の取り扱いについて

基本的にスマホやデジカメで撮影した写真は大きすぎて、重くデータ容量の負担になるので
そのまま貼りつけず、Photoshopで加工してから貼りつけると良い。
表示したいサイズの２倍のサイズぐらいで加工するのが望ましい。

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

コメント

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