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

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

HTML5

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> カテゴリ ・セクショニングコンテンツ ・フローコンテンツ ・パルパブルコンテンツコンテンツモデル …

HTML5の基礎知識~メタデータその2~

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 メタデータ head要素内にメタデータコンテンツに属する要素を記載する。 meta要素 カテゴリ: メタデータコンテンツコンテンツモデル: なしコンテンツ属性: ・グローバル属性 ・name属性 — メタデータの…

HTML5の基礎知識~メタデータその1~

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 メタデータ head要素内にメタデータコンテンツに属する要素を記載する。 title要素 カテゴリ: メタデータコンテンツ コンテンツモデル: 空白文字以外のテキスト コンテンツ属性: グローバル属性 head要…

HTML5の基礎知識~全体構造~

素人が書く備忘録 基本的にはHTML 5.2を元に記載。 HTMLの全体構造について 基本は、 <html lang="ja"> <head> </head> <body> </body> </html> DOCTYPE宣言 DOCTYPE宣言については以下で。 chooringo.hatenablog.com html要素 カテゴリ:なし コンテンツモデル:head要素と続けてbody要素 コンテンツ属性:…

HTML5の基礎知識~グローバル属性~

素人が書く備忘録(基本的にはHTML5.2を元に記載。 グローバル属性 すべての要素に共通で指定できる属性。 accesskey 要素を実行またはフォーカスを当てるキーボードショートカットを指定する。印刷可能な文字を1つ指定可能。 class クラス名を指定。要素が属…

HTML5の基礎知識~コンテンツモデル(その他のカテゴリー)~

素人が書く備忘録 HTML5のカテゴリとコンテンツモデルについて(基本的にはHTML5.2を元に記載。)以下の前回記載したコンテンツモデルで定義されている7つのメインカテゴリのほかにも、 その他のカテゴリーがある。 chooringo.hatenablog.com その他のカテゴ…

HTML5の基礎知識~コンテンツモデルとカテゴリ~

素人が書く備忘録 HTML5のカテゴリとコンテンツモデルについて(基本的にはHTML5.2を元に記載。) 概要 HTML5より前のHTML/XHTMLは、インライン要素とブロック要素に分類されていたが、HTML5でこのような分類は廃止された。 ※CSSではこの分類は引き続き使われ…

HTML5の基礎知識~概要~

素人が書く備忘録 ひとまず、ざっくりと概要について。(基本的にはHTML5.2を元に記載。) セマンティクス HTML5以前は、人間にとって理解しやすいように設計はされてきたものの、マシン(検索エンジン等)にとっては明確ではなかった。 HTML5では、セマンティク…

HTML5の基礎知識~DOCTYPE宣言~

久しぶりに記事を書きます。 9年半ほどPHPエンジニアとして修行してきましたが、ざっくり言うとフロント側の開発に魅力を感じ転職しました。 ゼロスタートで頑張っていきたいです!!この前HTML5プロフェッショナル認定試験レベル1を合格できました! しか…