フロントエンジニアによるカンニングペーパー。articleタグ。
あなたはarticleタグを使いこなせていますか？
正直なところ、私はarticleタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『articleタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
articleタグとは
articleタグは、内容が単体で完結する構成物であることを表します。
フォーラムの投稿、雑誌や新聞などの記事、商品カード、
ユーザーが投稿したコメント、その他の独立したコンテンツの項目が含まれます。
articleタグの子要素には、
見出し（h1 - h6タグ）を含むなど、識別できるようにすることが推奨されています。
また原則として、articleタグにarticleタグを入れ子にして使用する場合、
内側のarticleタグの内容は、外側のarticleタグの内容に関連している内容にします。
ブログ記事の中のコメントのように、
そのコメントが、そのブログ記事に対してであることを表します。
例）
<article> <h2>今日の一言</h2> <p>ブログを書いたよ</p> <article> <h2>コメント</h2> <p>頑張ったね！</p> </article> </article>
articleタグの属性
グローバル属性のみ、指定することができます。
addressタグとの併用
addressタグと併用することで、articleタグの連絡先情報を表すことができます。
<記事作成中>
timeタグとの併用
timeタグのdatetime属性を使用することで、articleタグの発行日時を表すことができます。
<記事作成中>
アクセシビリティ
aタグにおいて、推奨されているアクセシビリティを紹介します。
ARIAロール
一般的に、「article」として扱われます。
まとめ
今回は『articleタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
フロントエンジニアによるカンニングペーパー。areaタグ。
あなたはareaタグを使いこなせていますか？
正直なところ、私はareaタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『areaタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
areaタグとは
areaタグは、イメージマップのハイパーリンク領域を指定します。
イメージマップとは、座標で領域を指定して、
イメージマップを使用することで、
一枚の画像内に複数のハイパーリンク領域を設定することができます。
mapタグ内に配置します。
areaタグの属性
記事を公開した時点での、
実験的導入、非標準、非推奨、廃止属性は記載しておりません。
alt
画像が利用できない場合に使用する代替テキストを指定します。
代替テキストには、代替テキストを表示しない場合に、
画像が提供する選択肢と同じものをユーザーに与えるような表現にします。
href属性が使用されている場合のみ、alt属性を指定します。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル">
coords
ハイパーリンク領域の座標を指定します。
shape属性で "default" を指定している場合は、
画像全体がハイパーリンク領域となるため、coords属性は指定できません。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<area shape="circle" coords="130,136,60" href="sample.html" alt="サンプルファイル">
download
リンク先URLへの移動ではなく、
リンクされたファイルを、ダウンロードするようブラウザに示します。
download属性に値を指定することで、
ダウンロードする際のファイル名を指定することもできます。
例）
<area shape="circle" coords="130,136,60" href="sample.html" alt="サンプルファイル" download="sample-download.html">
href
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル">
hreflang
現在表示しているページと、リンク先のページで言語が異なる時に、
リンク先のページが、どの国の言語向けに作られているかを指定します。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル" hreflang="en">
ping
href属性が指定された、リンクをクリックした際に、
値に指定したURLに、POSTメソッドのリクエスト（PING）を送信します。
リンクが何回クリックされたのか等の、
サイト分析（トラッキング）に利用されることが多いです。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル" ping="sample.php">
rel
リンク先URLとの関係性を指定します。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル" rel="author">
shape
ハイパーリンク領域の形状を指定します。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<area shape="poly" coords="260,96,209,249,130,138" href="sample.html" alt="サンプルファイル">
target
リンク先をどのように開くのかを指定します。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル" target="_blank">
以上の属性以外にも、グローバル属性を指定することもできます。
アクセシビリティ
areaタグにおいて、推奨されているアクセシビリティを紹介します。
ARIAロール
一般的に、href属性がある場合は「link」として扱われます。
まとめ
今回は『areaタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
参考文献・記事
フロントエンジニアによるカンニングペーパー。addressタグ。
あなたはaddressタグを使いこなせていますか？
正直なところ、私はaddressタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『addressタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
addressタグとは
addressタグは、文書の作者への連絡先・問合せ先であることを表します。
<address>～</address>で囲まれる連絡先・問合せ先は、
あらゆる形の連絡先情報（住所、URL、SNSアカウント等）を含めることができます。
公開日など、連絡先以外の情報を含めないようにしましょう。
例）
<address> お問い合わせは、 <a href="mailto:sample@sample.com">サンプルセンターへご連絡ください</a>。<br/> 住所は下記の通りです。<br/> 東京都<br /> サンプル区<br/> サンプルビル1-1-1 </address>
addressタグで定義されるのは、最も近い祖先のarticleタグに関連する連絡先情報です。
articleタグがない場合には、bodyタグの連絡先情報として文書全体に適用されます。
addressタグの属性
グローバル属性のみ、指定することができます。
まとめ
今回は『addressタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
フロントエンジニアによるカンニングペーパー。abbrタグ。
あなたはabbrタグを使いこなせていますか？
正直なところ、私はabbrタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『abbrタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
abbrタグとは
abbrタグは、略語や頭字語であることを表します。
略語や頭字語を、<abbr>～</abbr>で囲むことで、
ブラウザーの種類によっては、要素の内容に点線の下線を引いてくれます。
必ずしもすべての略語に使用する必要はありませんが、以下に該当する場合に使用されることが多いです。
- 作者が略語の正式名称を提供したい場合
- 読者にとってなじみのない可能性が高い略語の場合
- 略語にスタイルシートを適用する際のフックとしたい場合
abbrタグの属性
グローバル属性のみ、指定することができます。
title
abbrタグにtitle属性を指定することで、
マウスカーソルを乗せた際に、ツールチップとして表示されることがあります。
略語や頭字語の正式名称を指定し、関係のない内容を指定しないようにしましょう。
例）
HTMLを勉強する。
<p> <abbr title="Hypertext Markup Language">HTML</abbr>を勉強する。 </p>
dfnタグとの併用
dfnタグと併用することで、より正式に略語を定義することができます。
<記事作成中>
アクセシビリティ
abbrタグにおいて、推奨されているアクセシビリティを紹介します。
略語や頭字語は、ページ内で最初に使われたときに説明する
ページ内で最初に使われたときに説明することは、
技術用語や業界用語が多い内容の場合に、読者が理解するのに役立ちます。
本文中で略語や頭字語を説明することが出来ない場合のみ、title属性を指定します。
まとめ
今回は『abbrタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
フロントエンジニアによるカンニングペーパー。aタグ。
あなたはaタグを使いこなせていますか？
正直なところ、私はaタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『aタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
aタグとは
aタグは、ハイパーリンクを指定します。
指定した場所同士をつなぐことで、
関連する情報同士を結び付け、情報間の移動手段を提供する重要なタグです。
Webページ内のテキストや画像などを、
<a>～</a>で囲むことで、ハイパーリンクの適用範囲を指定することができます。
ただし<a>～</a>の中に、他のリンクやフォームボタンなどの、
相互に作用する（インタラクティブな）内容を含めることはできません。
aタグの属性
記事を公開した時点での、
実験的導入、非標準、非推奨、廃止属性は記載しておりません。
download
リンク先URLへの移動ではなく、
リンクされたファイルを、ダウンロードするようブラウザーに示します。
download属性に値を指定することで、
ダウンロードする際のファイル名を指定することもできます。
例）
<a href="https://cdn-ak.f.st-hatena.com/images/fotolife/s/sugulog/20230326/20230326213643.png" download="thumbnail.png">
本記事サムネイルをダンロード
</a>
href
絶対パスや相対パスを指定し、リンク先URLを指定します。
また、href 属性が存在する場合、
<a> 要素にフォーカスがある状態で Enter キーを押すと起動します。
例）
<a href="https://sugulog.hatenadiary.jp/archive">
ブログ記事一覧に移動
</a>
電話番号、メールアドレス等を指定することもできます。
例）
<!-- 電話番号 --> <a href="tel:+1(800)000-0000">
電話で問い合わせ
</a>
<!-- メールアドレス --> <a href="mailto:sample@sample.org">
メールで問い合わせ
</a>
hreflang
現在表示しているページと、リンク先のページで言語が異なる時に、
リンク先のページが、どの国の言語向けに作られているかを指定します。
例）
<a href="https://sugulog.hatenadiary.jp/archive" hreflang="en">
英語向けページに移動
</a>
ping
href属性が指定された、リンクをクリックした際に、
値に指定したURLに、POSTメソッドのリクエスト（PING）を送信します。
リンクが何回クリックされたのか等の、
サイト分析（トラッキング）に利用されることが多いです。
例）
<a href="https://sugulog.hatenadiary.jp/archive" ping="sample.php">
PINGを送信
</a>
referrerpolicy
リンク先に移動する際に、
アクセス元のURL情報（リファラー）を、送信するかのポリシーを指定します。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<a href="https://sugulog.hatenadiary.jp/archive" referrerpolicy="origin">
参照元のオリジン情報のみ送信
</a>
rel
リンク先URLとの関係性を指定します。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<a href="https://sugulog.hatenadiary.jp/archive" rel="author">
リンク先URLは、現コンテンツ著者に関する追加情報を提供
</a>
target
リンク先をどのように開くのかを指定します。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<a href="https://sugulog.hatenadiary.jp/archive" target="_blank">
別ウィンドウで表示
</a>
type
リンク先の、ファイルの種類を表す情報（MIMEタイプ）を指定します。
例）
<a href="https://sugulog.hatenadiary.jp/archive" type=""text/html"">
リンク先はHTMLファイル
</a>
以上の属性以外にも、グローバル属性を指定することもできます。
アンカーリンク
WEBページを閲覧している時に、
クリックするとページ内の指定の場所へ移動できるリンクのことです。
以下のアンカーリンクの例は、
このブログで実際に利用している 参考文献・記事 のコードです。
例）
<!-- リンク側：href属性に「#リンク名」を指定する --> <a href="#参考文献・記事">
参考文献・記事
</a> <!-- 遷移側：遷移要素のid属性に対し、「リンク側で指定したリンク名」を指定する --> <p id="参考文献・記事">
参考文献・記事
</p>
また、href属性に "#top" や "#" を指定することで、
遷移側のid属性なしで、現在のページの先頭にリンクすることもできます。
アクセシビリティ
aタグにおいて、推奨されているアクセシビリティを紹介します。
ARIAロール
一般的に、href属性がある場合は「link」、それ以外は「generic」として扱われます。
リンクの内容は、リンクの行き先を示す
支援ソフトウェアには、ページ上のすべてのリンクを一覧表示するショートカットがあります。
文脈から外れたとしても、リンクの行き先を示すようにしましょう。
例）
<!-- NG：リンク先を示していない --> <p>
このブログの参考文献・記事については、
<a href="#参考文献・記事">こちら</a>
をご確認ください。
</p> <!-- OK：リンク先を示している --> <p>
このブログの
<a href="#参考文献・記事">参考文献・記事について</a>
、ご確認ください。
</p>
擬似的なボタンとして使用しない
不必要なhref属性を指定することは、予期しない動作を引き起こすことがあります。
また、支援技術（読み上げソフト等）に対して、誤った意味を伝えることもあります。
代わりにbuttonタグを使用しましょう。
リンクを起動したときに、何が起こるかを示す
リンクを新しいタブやウィンドウで開く、ダウンロードとして使用する場合は、
リンクを起動したときに、何が起こるかを示すようにしましょう。
読み上げソフト等で操作を行っている人や、
認知に問題がある人は、予期せぬ挙動に混乱する可能性があります。
例）
<a target="_blank" href="https://sugulog.hatenadiary.jp/archive"> すぐるのブログ記事一覧（新しいウィンドウで開きます） </a>
アイコンを使用する場合は、alt属性も指定する
リンクの動作を示すためのアイコンを使用する場合は、alt属性を使用しましょう。
例）
<a href="sample-report.ppt"> サンプルレポート（PowerPoint） <img alt="(PowerPointファイル)" src="ppt-sample-icon.png" /> </a>
44 × 44（CSSピクセル）以上の大きさを確保する
簡単に起動できるように、十分な大きさの領域を提供する必要があります。
運動制御に問題がある人や、
タッチパネルを使用している人など、さまざまな人に役立ちます。
ただし、以下の条件を満たす場合は例外とされます。
- 段落（散文コンテンツのテキストのみ）や文章の中のテキストリンク
-
サイズが小さい場合は、タップ領域と余白を含めて44pxでも構わない
リンクが互いに近接している場合は、間隔を置く
リンクとリンクが視覚的に近接している場合は、
リンクとリンクの間に、それらを隔てる間隔を置きましょう。
運動制御に問題がある人も含め、誤操作を防ぐことができます。
まとめ
今回は『aタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
参考文献・記事
フロントエンジニアによるカンニングペーパー。グローバル属性一覧。
あなたはグローバル属性を全て覚えていますか？
正直なところ、私は覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『グローバル属性一覧』というカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
グローバル属性一覧
全てのHTML要素で使用できますが、要素によっては効果がないこともあります。
また、記事を公開した時点での、
実験的導入、非標準、非推奨、廃止属性は記載しておりません。
<accesskey>
作成中。
まとめ
今回は『グローバル属性一覧』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
フロントエンジニアによるカンニングペーパー。aから始まるHTMLタグ一覧。
あなたはaから始まるHTMLタグを全て覚えていますか？
正直なところ、私は覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『aから始まるHTMLタグ一覧』というカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
aから始まるHTMLタグ一覧
記事を公開した時点での、
実験的導入、非標準、非推奨、廃止タグは記載しておりません。
<a>
ハイパーリンクを指定する。
<abbr>
略語や頭字語であることを表す。
<address>
連絡先情報を表す。
<area>
イメージマップ上のハイパーリンク領域を指定する。
<article>
内容が単体で完結する構成物であることを表す。
<aside>
余談・補足情報の構成物であることを表す。
<audio>
埋め込む音声コンテンツを指定する。
まとめ
今回は『aから始まるHTMLタグ一覧』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
