HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLで状況に応じた画像URLを指定する方法｜srcset属性の使い方を解説

HTMLでさまざまな状況に応じて使用する画像のURLを指定するには、srcset属性を使用します。この属性を活用すると、デバイスや画面サイズに合わせて最適な画像を表示できるため、レスポンシブWebデザインの実現に非常に便利です。

実装例

以下のコードでは、<picture>要素と<source>要素を組み合わせて、ブラウザの幅に応じて異なる画像を読み込んでいます。
ブラウザのウィンドウサイズを変更すると、条件に応じて表示される画像が切り替わる様子を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width=device-width, initial-scale = 1.0">
   </head>
   <body>
      <picture>
         <source media = "(min-width: 550px)" srcset = "https://www.tutorialspoint.com/assets/videotutorials/courses/3d_animation_online_training/380_course_211_image.jpg">
         <source media = "(min-width: 400px)" srcset = "https://www.tutorialspoint.com/assets/videotutorials/courses/html_online_training/380_course_216_image.jpg">
         <img src = "https://www.tutorialspoint.com/videotutorials/images/tutorial_library_home.jpg" alt = "Tutorials Library" style = "width:auto;">
      </picture>
   </body>
</html>

コードのポイント

  • media属性：画像を切り替える条件（画面幅など）をメディアクエリで指定します。
  • srcset属性：条件に一致した場合に読み込む画像のURLを指定します。
  • img要素：どの条件にも一致しなかった場合のフォールバック（代替）画像として機能します。alt属性による代替テキストの設定もここで行います。

上記の例では、画面幅が550px以上のときは3Dアニメーションの画像、400px以上550px未満のときはHTML関連の画像、それ以外の場合はチュートリアルライブラリの画像がそれぞれ表示されます。このように<picture>要素を活用することで、ユーザーの閲覧環境に応じた柔軟な画像出し分けが可能になります。

  1. HTMLでURL入力タイプ（type="url"）を使用する方法を解説

    URL入力タイプとは？HTMLでURLを入力するフィールドを作成するには、<input type=url>を使用します。この入力タイプを指定することで、ユーザーはWebサイトのアドレスを簡単に入力できるようになります。特にスマートフォンやタブレットでは、URL入力に適したキーボード（「/」や「.com」などのキーを含む）が自動的に表示されるため、入力の手間を大幅に減らせます。ブラウザによる自動検証機能多くのモダンブラウザでは、URL入力タイプに入力された値が自動的に検証されます。例えば、URLの形式が不正な場合（「.com」などのドメイン部分が抜けている場合など）にフォームを送信し

  2. HTMLのrequired属性とは？フォームの必須入力チェックを実装する方法

    HTMLのrequired属性は、フォーム送信前にその要素（フィールド）への入力が必須であることを指定するための属性です。この属性が設定されたフィールドが空のまま送信ボタンがクリックされると、ブラウザは自動的に「このフィールドに入力してください（Please fill out this field）」というエラーメッセージを表示し、フォームの送信は失敗します。 JavaScriptを使わずに、HTMLだけで簡単なバリデーション（入力チェック）を実現できるのが大きな特徴です。 required属性を使用できる要素 required属性は、以下の3つのフォーム部品に対して使用できます。 <