チョコパイを240こ食べたエンジニア

PHPエンジニアをやった後、現在はフロントエンドエンジニアに・・。好物は『チョコパイと焼き鳥』。Twitterは@chooringo(ちょうりんご)

HTML5のフォーム関連~optgroup要素、option要素~

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

HTML5のフォーム関連~button要素、select要素、datalist要素~

素人が書く備忘録 基本的には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で表示したとき…

HTML5のフォーム関連~input要素~

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

HTML5のフォーム関連~form要素とlabel要素~

素人が書く備忘録 基本的には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要素 フォーム関連要素のコレクションを表す。カテゴリ ・フローコンテンツ ・パルパブ…

HTML5のテーブル系~thead要素とtbody要素とtfoot要素~

素人が書く備忘録 基本的には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>

HTML5のテーブル系~colgroup要素とcol要素~

素人が書く備忘録 基本的には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>

HTML5のテーブル系~tr要素とth要素とtd要素~

素人が書く備忘録 基本的には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>

HTML5のテーブル系~table要素とcaption要素~

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

HTML5のEmbedded Content~track要素とmap要素とarea要素~

素人が書く備忘録 基本的には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…

HTML5のEmbedded Content~video要素とaudio要素~

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

HTML5のEmbedded Content~object要素とparam要素~

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

HTML5のEmbedded Content~iframe要素とembed要素~

素人が書く備忘録 基本的には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>

HTML5のEmbedded Content~picture要素とsource要素~

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

HTML5のEmbedded Content~img要素~

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

HTML5のEdits~ins要素とdel要素~

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

HTML5のテキストレベルセマンティクス~br要素とwbr要素~

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

HTML5のテキストレベルセマンティクス~bdi要素とbdo要素とspan要素~

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

HTML5のテキストレベルセマンティクス~b要素とu要素とmark要素~

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

HTML5のテキストレベルセマンティクス~supとsubとi~

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

HTML5のテキストレベルセマンティクス~codeとvarとsampとkbd~

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

HTML5のテキストレベルセマンティクス~dataとtime~

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

HTML5のテキストレベルセマンティクス~ルビ関連~

素人が書く備忘録 基本的には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>…

HTML5のテキストレベルセマンティクス~その3~

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

HTML5のテキストレベルセマンティクス~その2~

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

HTML5のテキストレベルセマンティクス~その1~

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

HTML5のグルーピングコンテンツ~その3~

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

HTML5のグルーピングコンテンツ~その2~

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 グルーピングコンテンツ関連 ol要素 項目のリストを表し、順序付けられているものに使用する。 <p>好きな焼き鳥ランキング</p> <ol> <li>ねぎま</li> <li>ぼんじり</li> <li>軟骨</li> <li>皮(ぱりっぱりのやつ)</li> <li>かしら</li> </ol> カテゴリ ・フローコンテンツ …

HTML5のグルーピングコンテンツ~その1~

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 グルーピングコンテンツ関連 p要素 段落を表すタグ。p要素ごとに上下に余白が入る。 <p>汁なし担々麵がおいしすぎる件・・・</p> <p>醤油ラーメンがおいしすぎる件・・・</p> カテゴリ ・フローコンテンツ ・パルパブルコ…

HTML5のセクション~セクション関連のタグ~

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 セクション関連 以下のタグをセクショニングコンテンツ内で使用した場合、それらのセクション内の情報として認識され、 セクショニングコンテンツがないところで使用した場合、ドキュメント全体の情報とし…

HTML5のセクション~セクショニングコンテンツのタグ~

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 セクショニングコンテンツのタグ article要素 <article> <header> <h2>記事のタイトルだよん</h2> </header> <p>記事の内容だよんだよんだよん</p> </article> カテゴリ ・セクショニングコンテンツ ・フローコンテンツ ・パルパブルコンテンツコンテンツモデル …