フロントエンジニアによるカンニングペーパー。baseタグ。
あなたはbaseタグを使いこなせていますか？
正直なところ、私はbaseタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『baseタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
baseタグとは
baseタグは、文書内におけるすべての相対パスの基準URLを指定します。
一つの文書に一つだけ、headタグ内に配置できます。
headタグについては、以下の記事にて解説しています。
<作成中>
baseタグの属性
記事を公開した時点での、
実験的導入、非標準、非推奨、廃止属性は記載しておりません。
href
相対パスの基準URLを指定します。
例）
<!DOCTYPE html> <html> <head> <base href="https://sample.com/"> </head> <body> <p>aタグを押下すると、
<a href="sample.html">
https://sample.com/sample.html
</a>にアクセスします。
</p> </body> </html>
target
リンク先をどのように開くのかを指定します。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<base href="https://sample.com/" target="_blank">
以上の属性以外にも、グローバル属性を指定することもできます。
まとめ
今回は『baseタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
フロントエンジニアによるカンニングペーパー。bタグ。
あなたはbタグを使いこなせていますか？
正直なところ、私はbタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『bタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
bタグとは
bタグは、文書内のキーワードや製品名など、他と区別したいテキストを表します。
例）
<p> 当店の水は、<b>セルフサービス</b>です。 </p>
ただし、その箇所が重要であるという意味や強調する役割はなく、
他の要素が持つ意味合いと合わない時の、最終手段として使用してください。
また、<b>～</b>の中に記述された文字は太字で表示されますが、
太字装飾の為には使用せず、太字装飾はfont-weightプロパティを使用しましょう。
font-weightプロパティについては、以下の記事にて解説しています。
<作成中>
bタグの属性
グローバル属性のみ、指定することができます。
まとめ
今回は『bタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
フロントエンジニアによるカンニングペーパー。bから始まるHTMLタグ一覧。
あなたはbから始まるHTMLタグを全て覚えていますか？
正直なところ、私は覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『bから始まるHTMLタグ一覧』というカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
bから始まるHTMLタグ一覧
記事を公開した時点での、
実験的導入、非標準、非推奨、廃止タグは記載しておりません。
<b>
他と区別したいテキストを表す。
<base>
相対パスの基準URLを指定する。
まとめ
今回は『bから始まるHTMLタグ一覧』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
フロントエンジニアによるカンニングペーパー。audioタグ。
あなたはaudioタグを使いこなせていますか？
正直なところ、私はaudioタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『audioタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
audioタグとは
audioタグは、埋め込む音声コンテンツを指定します。
audioタグがサポートされていない環境では、
<audio>～</audio>の中に記載したメッセージを表示させることができます。
例）
<audio src="sample/sample.ogg" controls> <p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p> </audio>
audioタグの属性
記事を公開した時点での、
実験的導入、非標準、非推奨、廃止属性は記載しておりません。
autoplay
指定された場合、再生可能な状態になった時点で、音声を自動再生させます。
例）
<audio src="sample/sample.ogg" autoplay></audio>
ただし、音声を自動再生することは、
ユーザーにとって不快な体験になる可能性もあるため注意が必要です。
controls
再生・一時停止・音量・再生シークの、
各機能を制御するコントロール（インターフェース）を表示します。
例）
<audio src="sample/sample.ogg" controls></audio>
crossorigin
音声ファイル取得の際に、CORSを使用するかを示します。
例）
<audio src="sample/sample.ogg" crossorigin="anonymous"></audio>
CORS及び、crossoriginの値については、以下サイトをご確認ください。
loop
指定された場合、ループ再生されます。
例）
<audio src="sample/sample.ogg" loop></audio>
muted
指定された場合、音声の初期状態を消音にします。
例）
<audio src="sample/sample.ogg" muted></audio>
preload
ページを読み込む際、音声コンテンツの読み込み方法をブラウザに示します。
autoplayを指定している場合、preloadの値に関わらず、
ページ読み込みと同じタイミングで読み込みが開始されます。
指定できる値に関しては、文末の 参考文献・記事 をご確認ください。
例）
<audio src="sample/sample.ogg" preload="auto"></audio>
src
再生する音声コンテンツを指定します。
例）
<audio src="sample/sample.ogg"></audio>
以上の属性以外にも、グローバル属性を指定することもできます。
sourceタグを持つaudioタグ
audioタグは自身のsrc属性ではなく、
sourceタグを使用し、音声コンテンツを指定することができます。
sourceタグを使用することで、以下のようなメリットがあります。
-
複数の音声コンテンツを指定でき、ブラウザは最初に指定されたsourceタグから順に読み込み、再生可能な音声コンテンツを再生する
- type属性に音声コンテンツのMIMEを指定することで、ブラウザにその音声コンテンツを再生できるかどうかを示すことができ、再生できない場合に時間を浪費しない
例）
<audio controls> <source src="sample.opus" type="audio/ogg; codecs=opus" /> <source src="sample.ogg" type="audio/ogg; codecs=vorbis" /> <source src="sample.mp3" type="audio/mpeg" /> </audio>
sourceタグについては、以下の記事にて解説しています。
<作成中>
アクセシビリティ
audioタグにおいて、推奨されているアクセシビリティを紹介します。
台詞のある音声には、字幕と文字化情報を提供する
コンテンツを理解するのに時間が掛かる人や、
聴力を失った人に対し、音声の内容を理解するために役立ちます。
videoタグで再生し、字幕を表示させるもの一つの対応策です。
videoタグについては、以下の記事にて解説しています。
<作成中>
閲覧者向けのフォールバック（縮退運用）を提供する
audioタグに対応していないブラウザに役立ちます。
直接ダウンロードするリンクなどを提供しましょう。
例）
<audio controls> <source src="sample.mp3" type="audio/mpeg" /> <source src="sample.ogg" type="audio/ogg" /> <!-- 再生できない場合の表示 --> <p> <a href="sample.mp3">MP3</a> または、 <a href="sample.ogg">OGG</a> の音声コンテンツをダウンロードしてください。 </p> </audio>
まとめ
今回は『audioタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
参考文献・記事
フロントエンジニアによるカンニングペーパー。asideタグ。
あなたはasideタグを使いこなせていますか？
正直なところ、私はasideタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『asideタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
asideタグとは
asideタグは<aside>～</aside>で囲まれる箇所が、
ウェブページ内における余談・補足情報の構成物であることを表します。
余談・補足情報とは、
本文と関連してはいるけれど、区別して掲載するべき内容のことです。
図の一部に線を引いて機能などを説明するコールアウトや、
ブログ記事のサイドバー、広告枠などに使用されることが多いです。
例）
<p>サンショウウオは、トカゲのような外観を持つ両生類のグループです。</p> <aside> <p>ザラザラした肌のイモリは致命的な神経毒で身を守ります。</p> </aside> <p>ほとんどのサンショウウオは夜行性で、虫などを狩ります。</p>
注意点としてasideタグは、本文から外れる余談・補足情報なため、
本文の一部となる文章中の括弧書きに対して、使用することは推奨されていません。
asideタグの属性
グローバル属性のみ、指定することができます。
まとめ
今回は『asideタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
フロントエンジニアによるカンニングペーパー。articleタグ。
あなたはarticleタグを使いこなせていますか？
正直なところ、私はarticleタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『articleタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
articleタグとは
articleタグは、内容が単体で完結する構成物であることを表します。
フォーラムの投稿、雑誌や新聞などの記事、商品カード、
ユーザーが投稿したコメント、その他の独立したコンテンツの項目が含まれます。
また原則として、articleタグにarticleタグを入れ子にして使用する場合、
内側のarticleタグの内容は、外側のarticleタグの内容に関連している内容にします。
ブログ記事の中のコメントのように、
そのコメントが、そのブログ記事に対してであることを表します。
例）
<article> <h2>今日の一言</h2> <p>ブログを書いたよ</p> <article> <h2>コメント</h2> <p>頑張ったね！</p> </article> </article>
注意点として、articleタグは子要素に、
h1-h6タグ（見出し）を含むなどして、識別できるようにすることが推奨されています。
articleタグの属性
グローバル属性のみ、指定することができます。
まとめ
今回は『articleタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
フロントエンジニアによるカンニングペーパー。areaタグ。
あなたはareaタグを使いこなせていますか？
正直なところ、私はareaタグの全てを覚えていません。
今このブログを読んでいるあなたも、感じているとは思いますが、
エンジニアという職業、覚えることが多すぎて頭がいくつあっても足りません。
もはや、覚える量の多さに絶望します。
ならばいつでも見返せるカンニングペーパーを作ろう！
ということで、『areaタグ』についてのカンニングペーパーを作成しました。
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
この記事の具体的な内容としては、以下の目次をご確認ください。
areaタグとは
areaタグは、mapタグの中に配置し、
イメージマップのハイパーリンク領域を指定します。
1つの画像に複数のリンクを設定する、
クライアントサイドイメージマップを設定するためのタグです。
画像上の幾何学的な領域を、ハイパーリンクと関連付けすることができます。
areaタグの属性
記事を公開した時点での、
実験的導入、非標準、非推奨、廃止属性は記載しておりません。
alt
ハイパーリンクのテキストを指定します。
画像を表示しないブラウザーが、代わりに表示するテキスト文字列です。
代替テキストを表示しない場合に、
画像が提供する選択肢と同じものを、ユーザーに与えるような表現にすべきです。
また、alt属性は、href属性が使用されている場合のみ指定します。
例）
<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
href属性を指定する場合は、alt属性も指定しましょう。
例）
<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">
media
リンク先の文書や読み込む外部リソースが、
PCやテレビ等の、どのメディア（デバイス）に適用するのかを指定します。
例）
<area shape="rect" coords="5,130,200,250" href="sample.html" alt="サンプルファイル" media="print">
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
ハイパーリンク領域の形状を指定します。
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">
以上の属性以外にも、グローバル属性を指定することもできます。
mapタグとの組み合わせ
areaタグは、mapタグの中に配置します。
例）
<img src="画像のURL" usemap="#マップ名" alt="代替テキスト"> <map name="usemapのマップ名"> <area shape="形状" coords="座標" href="リンク先のURL" alt="代替テキスト"> </map>
詳しくは、以下のmapタグの記事にて解説しています。
<作成中>
まとめ
今回は『areaタグ』をテーマに、
いつでも見返せるカンニングペーパーを作成しました。
エンジニアという職業、覚えることが多すぎます。
自分の知識・経験を見返せるカンニングーペーパーは、
そんな業界にいる自分において、これからも役に立ってくれそうです！
ぜひ、あなたのカンニングペーパーとしてもお役立てください。
参考文献・記事
