基本の文字コード…文字化けさせないために記述/HTML文章とCSSファイルでは記述が違う
- HTML文章に記述<meta charset=”UTF-8″>
- CSSファイルに記述@charset “utf-8”;
- コメントアウト(HTML文章とCSSファイル内で画面には表示されないメモが出来る)
HTML文章 <!–〇〇〇〇〇 –>
CSSファイル /* 〇〇〇〇〇 */
テキスト分類タグ
テキスト分類タグとは…事前定義済みカテゴリまたはラベルを、文、パラグラフ、テキスト レポート、またはその他の非構造化テキスト形式に割り当てる処理のこと
a 要素（ハイパーリンク）
- ハイパーリンクする範囲を指定します。
別のウェブページ、ファイル、メールアドレス、同一ページ内の場所、または他の URL へのハイパーリンクを作成します。 - アンカーとは、リンクの出発点と到達点のことを示す
- a要素はid属性やname属性、href属性を設定することで出発点と到着点の両方を指定することができる
- #（ハッシュ）で紐づけ
- <a href=”リンク先情報”>ハイパーリンク定義情報</a>
- 外部サイトなどにリンクする時は「target=”_blank”」を付けることで新しいタブで開くことができます。
em 要素（強調）
- 強調したいテキストにに使う（斜めの文字になる）
- <em>強調定義情報</em>
i 要素（声や心の中で思ったこと）
- これも斜めの文字になる。em要素と似ている
<em><i>要素は、外来語、架空の登場人物の考え、用語の定義を表す文字列など、通常の文章から外れた文字列を表します。（書籍や映画などの作品名には、<cite>を使用してください。） - 全体の文書の中でここはフランス語ですよとか、心の中の気持ちを表すときに使う
- emとi要素は混ぜないように
- <i>声や心の中で思ったこと定義情報</i>
strong 要素（強い重要性）
- (警告など) 高い重大性や緊急性のある物事のためのもの
- <strong>強い重要性定義情報</strong>
b 要素（キーワードや商品名など）
- b要素とstrong要素の違いは、b要素は見た目を強調したいときに使います。
見た目が変わるだけで、意味としての強調はありません。
対して、strong要素は、意味を強調したいときに使用します - <b>キーワードや商品名など定義情報</b>
small 要素（免責・警告・著作権など）
- 免責・警告・著作権などの注釈や細目する範囲を指定します。
- <small>免責・警告・著作権など定義情報</small>
br 要素（改行）
- 改行する箇所を指定します
- ｐ要素（段落）とは混ぜるな危険
- 本要素には、終了タグがありません
- <br>
span 要素（ひとつの範囲）
- 指定した範囲にスタイルシートを適用したりすることができる
- <span>ひとつの範囲定義情報</span>
- 同じ意味を持つタグとして<div>がありますが、<div>はブロックレベル要素としてグループ化を行いますので、見出しや段落、リストなどとしてみなされ前後に改行が入ります。
<span>はインライン要素で文章の一部として利用されますので前後に改行は入りません。
u要素（アンダーライン）
- スペルミスとか、突っ込みを入れたいときに使う
せっかくなので、ドリームウィーバーでタグ打ち込んで見え方をスクショしました
コンテンツ埋め込みタグ
HTML文書に動画や音声などの他のリソースを埋め込んだり、他の言語で書かれたコンテンツを挿入したりするものです。
img 要素（画像）
- 代替えテキストは画像が表示されない時にテキストで表示になる。視覚障がい者の方が読み上げ機能使ったときにも役立つ
- <img src=”画像パス名” alt=”代替テキスト”>
iframe 要素（インラインフレーム）
- ページ内に他のページのコンテンツを表示させるフレームのこと（主にGooglemapとかYouTube）
- src属性に URI を指定することで、フレームの内容として表示させる文書を設定できます。
また、width属性やheight属性に数値を指定することで、フレームのサイズを設定することができます。 - 「フレームの幅」と「フレームの高さ」には、作成するフレームの大きさを指定します。幅の初期値は 300、高さの初期値は 150 です。
- <iframe src=”フレーム内に表示する URL” width=”フレームの幅” height=”フレームの高さ” title=”補足情報”>フレームが表示できない時のメッセージ</iframe>
- FCD9ED
テーブルタグ（表を示すための要素）
画像お借りしました 参考URL：https://webst8.com/blog/html-table/
- table要素（テーブルの範囲）
- caption タグ（表のキャプション（主題）を指定します。）
- tr タグ（1行の範囲を指定します。）
- th タグ（見出し項目を指定します。）
- td タグ（データ項目を指定します。）
- テーブルでレイアウトはあまりしない（CSSで行うが楽天はテーブルレイアウトしている）
今回は枠線入れたくて <table border=”1″>も
追加しています
フォームタグ
- 「FORM」とは、入力・送信フォームを作成する際に使用する要素です。
- <form>タグがひとつのフォームとなり、フォームの中に<input>タグ、<select>タグ、<textarea>タグなどのフォーム部品を配置してフォームを作ります。
CSS との紐付け
id 属性
- d属性はHTMLのタグに設定できる属性の一つです。属性とは要素に設定を付与することができるものです。
- 要素に対して id 名を付与します。1 つの Web ページ内では1箇所にしか同一の名前を付けれません。CSS などで id 名を参照する時は、先頭に「ハッシュ（#）」を付与します。id 名は、a タグ（アンカータグ）のリンク先として使用することもできます。
- id は、ページ内に同じid名を使うことができません。
- <要素名 id=”id 名”>コンテンツ</要素名>
- <div id=”id”></div>
<!– 同名のidはNG –>
<div id=”id”></div>
<!– id名が一つ目と違うのでOK –>
<div id=”id2″></div>
class 属性
- 要素に対して class 名を付与します。複数の箇所に同一の名前を付けれます。
- class 名には複数の名前をスペースで区切って指定することができます。
- CSS などで class 名を使用する時は、先頭にピリオド（.）を付与します。
