フロントエンジニアによるカンニングペーパー。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>
また、articleタグの中に配置される場合は、
直近のarticleタグの内容の、作者への連絡先・問合せ先を表します。
注意点として、文章中に出てくる全ての住所等に使用するのは誤りです。
直近のarticle、bodyタグの、連絡先・問合せ先を表すためのみに使用します。
また、連絡先・問合せ先以外の情報を含めてはいけません。
addressタグの属性
グローバル属性のみ、指定することができます。
まとめ
今回は『addressタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
フロントエンジニアによるカンニングペーパー。abbrタグ。
あなたはabbrタグを使いこなせていますか？
正直なところ、私はabbrタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『abbrタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
abbrタグとは
abbrタグは、略語や頭字語であることを表します。
略語や頭字語を、<abbr>～</abbr>で囲むことで、
ブラウザーの種類によっては、要素の内容に点線の下線を引いてくれます。
また、title属性を指定することで、ツールチップとして表示させることもできます。
abbrタグの属性
グローバル属性のみ、指定することができます。
title
title属性を指定することで、
マウスカーソルを乗せた際に、ツールチップとして表示させます。
略語や頭字語の正式名称や、説明以外の内容を指定することは推奨されていません。
関係のない説明を指定しないようにだけ、注意が必要です。
例）
HTMLを勉強する。
<p> <abbr title="Hypertext Markup Language">HTML</abbr>を勉強する。 </p>
アクセシビリティ
abbrタグにおいて、推奨されているアクセシビリティを紹介します。
略語や頭字語は、ページ内で最初に使われたときに説明する
ページ内で最初に使われたときに説明することは、
特に技術用語や業界用語が多い内容の場合に、読者が理解するのに役立ちます。
本文中で略語や頭字語を説明することが出来ない場合のみ、title属性を指定します。
まとめ
今回は『abbrタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
フロントエンジニアによるカンニングペーパー。グローバル属性一覧。
あなたはグローバル属性を全て覚えていますか？
正直なところ、私は覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『グローバル属性一覧』というカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
グローバル属性一覧
全てのHTML要素で使用できますが、要素によっては効果がないこともあります。
また、記事を公開した時点での、
実験的導入、非標準、非推奨、廃止属性は記載しておりません。
<accesskey>
作成中。
まとめ
今回は『グローバル属性一覧』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
フロントエンジニアによるカンニングペーパー。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>
media
リンク先の文書や読み込む外部リソースが、
PCやテレビ等の、どのメディア（デバイス）に適用するのかを指定します。
例）
<a href="https://sugulog.hatenadiary.jp/archive" media="print">
プリンタ印刷向けページに移動
</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タグにおいて、推奨されているアクセシビリティを紹介します。
擬似的なボタンとして使用しない
不必要なhref属性を指定することは、予期しない動作を引き起こすことがあります。
また、支援技術（読み上げソフト等）に対して、誤った意味を伝えることもあります。
代わりにbuttonタグを使用しましょう。
リンクの内容は、リンクの行き先を示す
文脈から外れたとしても、リンクの行き先を示すようにしましょう。
例）
<!-- NG：リンク先を示していない --> <p>
このブログの参考文献・記事については、
<a href="#参考文献・記事">こちら</a>
をご確認ください。
</p> <!-- OK：リンク先を示している --> <p>
このブログの
<a href="#参考文献・記事">参考文献・記事</a>
について、ご確認ください。
</p>
リンクを起動したときに、何が起こるかを示す
リンクを新しいタブやウィンドウで開く、ダウンロードとして使用する場合は、
リンクを起動したときに、何が起こるかを示すようにしましょう。
読み上げソフト等で操作を行っている人や、
認知に問題がある人は、予期せぬ挙動に混乱する可能性があります。
例）
<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タグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
参考文献・記事
フロントエンジニアによるカンニングペーパー。aから始まるHTMLタグ一覧。
あなたはaから始まるHTMLタグを全て覚えていますか？
正直なところ、私は覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『aから始まるHTMLタグ一覧』というカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
aから始まるHTMLタグ一覧
記事を公開した時点での、
実験的導入、非標準、非推奨、廃止タグは記載しておりません。
<a>
ハイパーリンクを指定する。
<abbr>
略語や頭字語であることを表す。
<address>
連絡先や問い合わせ先であることを表す。
<area>
イメージマップのハイパーリンク領域を指定する。
<article>
内容が単体で完結する構成物であることを表す。
<aside>
余談・補足情報の構成物であることを表す。
<audio>
埋め込む音声コンテンツを指定する。
まとめ
今回は『aから始まるHTMLタグ一覧』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
プライバシーポリシー
当ブログにおける個人情報の取扱いについて、
以下のとおりにプライバシーポリシーを定めます。
運営者情報
運営者：すぐる
ブログURL：記事一覧 - すぐるのブログ
お問い合わせ：ブログのコメントまで。
個人情報の利用目的
当ブログでは、Twitter等でのお問い合わせやコメントの際に、お名前（ハンドルネーム）・メールアドレス等の個人情報をご登録いただく場合があります。
これらの個人情報は、質問に対する回答や必要な情報をご連絡するために利用し、それ以外の目的では利用しません。
個人情報の第三者への開示
個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。
- 本人のご了解がある場合
- 法令等への協力のため、開示が必要となる場合
個人情報の開示・訂正・追加・削除・利用停止
個人情報の開示・訂正・追加・削除・利用停止をご希望の場合には、ご本人であることを確認したうえで、速やかに対応致します。
Cookieについて
当ブログでは、一部のコンテンツにおいてCookieを利用しています。
Cookieとは、webコンテンツへのアクセスに関する情報であり、お名前・メールアドレス・住所・電話番号は含まれません。
また、お使いのブラウザ設定からCookieを無効にすることが可能です。
広告の配信について
当サイトは第三者配信の広告サービス（Google Adsense）を利用しています。
広告配信事業者は、過去にアクセスしたサイトの情報に基づきユーザーの興味に応じた広告を表示するためにCookie（クッキー）を使用することがあります。
また、第三者がコンテンツおよび宣伝を提供し、訪問者から直接情報を収集し、訪問者のブラウザにCookie（クッキー）を設定したりこれを認識したりする場合があります。
なお、Cookie（クッキー）を無効にする設定およびGoogleアドセンスに関する詳細は「ポリシーと規約」にてご確認ください。
アクセス解析ツールについて
当ブログでは、Google Inc.が提供するアクセス解析ツール「Googleアナリティクス」を利用しています。
Googleアナリティクスは、トラフィックデータの収集のためにCookieを使用しています。このトラフィックデータは匿名で収集されており、個人を特定するものではありません。この機能はCookieを無効にすることで収集を拒否することが出来ます。
Googleアナリティクスの詳細は「Googleアナリティクス利用規約」をご覧ください。
当ブログへのコメントについて
当ブログでは、スパム・荒らしへの対応として、コメントの際に使用されたIPアドレスを記録しています。
これはブログの標準機能としてサポートされている機能で、スパム・荒らしへの対応以外にこのIPアドレスを使用することはありません。
また、以下の内容を含むコメントは運営者の裁量によって削除することがあります。
- 特定の自然人または法人を誹謗し、中傷するもの
- 極度にわいせつな内容を含むもの
- 禁制品の取引に関するものや、他者を害する行為の依頼など、法律によって禁止されている物品、行為の依頼や斡旋などに関するもの
- その他、公序良俗に反し、または管理人によって承認すべきでないと認められるもの
著作権について
当ブログで掲載している画像の著作権・肖像権等は各権利所有者に帰属します。権利を侵害する目的ではありません。
記事の内容や掲載画像等に問題がある場合、各権利所有者様本人が直接コメントでご連絡下さい。本人確認後、対応致します。
また、当ブログのコンテンツ（記事・画像・その他プログラム）について、許可なく転載することを禁じます。引用の際は、当ブログへのリンクを掲載するとともに、転載であることを明記してください。
免責事項
当ブログからリンクやバナーなどによって他のサイトに移動した場合、移動先サイトで提供される情報、サービス等について一切の責任を負いません。
当ブログのコンテンツについて、可能な限り正確な情報を掲載するよう努めていますが、誤情報が入り込んだり、情報が古くなっている場合があります。当ブログに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。
プライバシーポリシーの変更について
当ブログは、個人情報に関して適用される日本の法令を遵守するとともに、本ポリシーの内容を適宜見直しその改善に努めます。
修正された最新のプライバシーポリシーは常に本ページにて開示されます。
初出掲載：2021年1月1日
最終更新：2023年3月26日
