スキルテスト: HTML 画像
このスキルテストの目的は、あなたが画像と HTML への埋め込みを行う方法を理解しているかどうかを評価することです。
メモ: 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業することが便利な場合もあります。
行き詰まったら、助けを求めましょう。このページの最下部の評価またはさらなるヘルプの節をご覧ください。
課題 1
このタスクでは、いくつかのブルーベリーの単純な画像をページに埋め込んでいただきます。必要なことは次の通りです。
- 画像へのパスを適切な属性に追加して、ページに埋め込みましょう。画像は
blueberries.jpgという名前で、カレントフォルダー内のimagesというフォルダーに入っています。 - 画像を見ることができない人のために、適切な属性に代替テキストを追加して記述してください。
<img>要素に適切なwidthとheightを与え、正しい縦横比で表示されるようにし、ページ上に表示するための十分な空間を確保しましょう。画像の内在サイズは 615 × 419 ピクセルです。
下記のライブコードを更新して、完成例を再現してみてください。
自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。
課題 2
この課題では、すでに完全な形の画像が用意されていますが、画像にマウスを乗せたときに現れるツールチップを追加していただきたいと思います。ツールチップに適切な情報を入れましょう。
下記のライブコードを更新して、完成例を再現してみてください。
自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。
課題 3
この課題では、すでに完全な形の画像とキャプションのテキストが用意されています。ここで必要なのは、画像とキャプションを関連付ける要素を追加することです。
下記のライブコードを更新して、完成例を再現してみてください。
自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。
評価またはさらなるヘルプ
この例は、上記のインタラクティブエディターで練習することができます。
この作品を評価してほしい、行き詰まっているので相談に乗ってほしいという方は次のようにしてください。
- 作品をオンラインの共有可能なエディター、例えば CodePen、jsFiddle、Glitch に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。
- MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。
- 「HTML 画像、スキルテスト 1 のための評価希望」のような説明的なタイトル。
- すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
- 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
- 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。