素人が書く備忘録 基本的にはHTML 5.2を元に記載。 フォーム関連 optgroup要素 option要素をグループ化してラベル付けができる。 <select> <optgroup label="ラーメン"> <option>醤油ラーメン</option> <option>味噌ラーメン</option> <option>塩ラーメン</option> </optgroup> <optgroup label="焼きそば"> <option>ソース焼きそば</option> <option>塩焼きそば</option> </optgroup> </select> chromeで表示したとき カテ…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 フォーム関連 button要素 formを送信するボタン(type:submit)、formをリセットするボタン(type:reset)、汎用ボタン(type:button)を作成できる。 <button type="submit">submitボタン</button> <button type="reset">resetボタン</button> <button type="button">汎用ボタン</button> chromeで表示したとき…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 フォーム関連 input要素 カテゴリ ・フローコンテンツ ・フレージングコンテンツ ・type属性がhiddenでなければ、インタラクティブコンテンツ ・type属性がhiddenでなければ、リスト要素、ラベル付け要素、…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 フォーム関連 <form action="" method="post"> <P> <label for="fravor">ラーメンの種類</label> <input id="fravor" type="text" name="ramenfravor"> </P> <P> <label>トッピング<input type="text" name="ramentopping"></label> </P> </form> chromeで表示したとき form要素 フォーム関連要素のコレクションを表す。カテゴリ ・フローコンテンツ ・パルパブ…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テーブル関連 <table> <thead> <tr> <th>メニュー</th> <th>プレーンドーナツ</th> <th>チョコドーナツ</th> </tr> </thead> <tbody> <tr> <th>値段</th> <td>100円</td> <td>120円</td> </tr> <tr> <th>カロリー</th> <td>380kcal</td> <td>390kcal</td> </tr> </tbody> <tfoot> <tr> <th>メニュー</th> <th>プレーンドーナツ</th> <th>チョコ…</th></tr></tfoot></table>

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テーブル関連 colgroup要素 テーブル内の1つ以上の列のグループを表す。 <table> <caption>とあるラーメン屋のメニュー</caption> <colgroup span="1"></colgroup> <colgroup span="3"></colgroup> <tr> <th>メニュー</th> <th id="shouyu">醤油ラーメン</th> <th id="miso">味噌ラーメン</th> <th id="sio">塩ラーメン</th> </tr> <tr> <th id="price">値段</th></tr></table>

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テーブル関連 <table> <tr> <th scope="row">メニュー</th> <th id="shouyu">醤油ラーメン</th> <th id="miso">味噌ラーメン</th> <th id="sio">塩ラーメン</th> </tr> <tr> <th id="price">値段</th> <td headers="shouyu price">800円</td> <td headers="miso price">850円</td> <td headers="sio price">800円</td> </tr> <…</table>

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テーブル関連 table要素 複数の特質を持つデータを表す。テーブルモデルを構成する。 子孫要素によって行、列、およびセルが指定される。行と列はグリッドを形成する。 テーブルをレイアウトとして使用する…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 Embedded Content関連 track要素 video要素やaudio要素に外部的なテキストリソースを指定する。 <video src="water.mp4" controls loop muted width="400" height="200"> <track kind="captions" src="track.vtt" srclang="ja"> <p><a href="water.mp4">ダウンロード</a></p> </video> カテゴリ ・なしコンテンツモデル ・なしコンテンツ属性 ・グローバル属性 ・ki…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 Embedded Content関連 video要素 動画(映像・映画)や、キャプション付きのオーディオデータを再生する。 video要素に未対応のブラウザなどのために、要素内容にその動画へのアクセス方法を明示したコンテン…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 Embedded Content関連 object要素 外部リソースを表す。 リソースの種類に応じて、画像や入れ子のブラウジングコンテキスト、プラグインを用いたコンテンツなどを表す。 Flashコンテンツを表示する際によく…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 Embedded Content関連 iframe要素 inline frameの略。 入れ子になったブラウジングコンテキスト(文書が表示される環境。ウィンドウやタブ)を表す。 <div>下に埋め込むよ1</div> <iframe src="iframe_nested.html" width="300" height="100" sandbox></iframe> <div>下に埋め込むよ2</div>

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 Embedded Content関連 picture要素 img要素と同様に候補画像を指定し、条件に合致した画像だけロードして表示する。 複数のsource要素とimg要素を含むコンテナ。 source要素に未対応ブラウザの場合はimg要…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 Embedded Content関連 img要素 画像またはそのフォールバックコンテンツ(外部リソースが使用できないときに使用するコンテンツ)を表す。カテゴリ ・フローコンテンツ ・フレージングコンテンツ ・エンベデ…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 edits関連 ドキュメントへの編集を表す。 ins要素 ドキュメントへの追加を表す。 暗黙の段落境界を越えて要素を配置してはいけない。 <ul> <li>とちおとめ</li> <li>あまおう</li> <li><ins datetime="2019-04-13 00:00Z">スカイベリー</ins></li> </ul> chromeで表示したとき カテゴリ …

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テキストレベルセマンティクス関連 テキストのマークアップに用いるタグ br要素 改行を表す。 詩や住所のように、実際にはコンテンツの一部である改行にのみ使用することができる。 段落内のテーマ別グルー…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テキストレベルセマンティクス関連 テキストのマークアップに用いるタグ bdi要素 Unicode双方向アルゴリズムの影響を受けないように、隔離するテキストの範囲を表す。 Unicode双方向アルゴリズムによって期…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テキストレベルセマンティクス関連 テキストのマークアップに用いるタグ b要素 文章の概要のキーワード、レビューの製品名、対話型テキスト駆動型ソフトウェアや記事のリードなどのような、特別に重要な意…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テキストレベルセマンティクス関連 テキストのマークアップに用いるタグ sup要素とsub要素 sub要素は下付き文字を表し、sup要素は上付き文字を表す。 特定の意味づけをする必要があるときのみ使用する。 <p><var>Y<var> </var></var></p>…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テキストレベルセマンティクス関連 テキストのマークアップに用いるタグ code要素 コンピュータコードを表す。 XML要素名やファイル名、コンピュータプログラム、その他コンピュータが認識する文字列が対象…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テキストレベルセマンティクス関連 テキストのマークアップに用いるタグ data要素 value属性値とともにマシンリーダブル(機械やコンピュータで読み取り可能な形式)な情報を表す。 value属性値は必須で、機…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テキストレベルセマンティクス関連 テキストのマークアップに用いるタグ <ruby>林<rt>りん</rt>檎<rt>ご</rt></ruby> 林りん檎ご <ruby><rb>林</rb><rt>りん</rt><rb>檎</rb><rt>ご</rt></ruby> 林りん檎ご <ruby><rb>林檎</rb><rtc><rt>りんご</rt></rtc><rtc><rt>apple</rt></rtc></ruby> ←FFで表示したとき。 <ruby>林檎<rp>(</rp><rt>りんご</rt><rp>)</rp></ruby>…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テキストレベルセマンティクス関連 テキストのマークアップに用いるタグ cite要素 クリエイティブ作品への参照を表す。 作品のタイトル、作者の名前（個人、人、組織）、URL参照、または省略形の参照を含め…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テキストレベルセマンティクス関連 テキストのマークアップに用いるタグ em要素 コンテンツの強調する。 その強調度合いは祖先要素の数によって決まる。強調する箇所によって文の意味が変わる。 <p>私は焼き</p>…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 テキストレベルセマンティクス関連 テキストのマークアップに用いるタグ a要素 a要素がhref属性を持っている場合、ハイパーリンクを表す。 a要素がhref属性を持っていない場合、プレースホルダーを表し、ta…

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 グルーピングコンテンツ関連 figure要素 自己完結型で、通常はメインフローから参照されるコンテンツを表す。 イラスト、図、写真、コードリストなどに注釈を付けることができる。 <p>コードを表示する</p> <figure> <figcaption>とり</figcaption></figure>…