KYOTO 輿辺

• Instagram
• Facebook
• X

画像を使用する

ウェブサイトに画像を追加することで、視覚的な魅力を高め、ユーザーエンゲージメントを向上させることができます。

<div class="code-example">
    <h3>HTMLでの基本的な使用方法</h3>
    <pre><code><img src="images/example.jpg" alt="説明文" width="600" height="400"></code></pre>
</div>

<div class="tips">
    <h3>重要なポイント</h3>
    <ul>
        <li><strong>src属性:</strong> 画像ファイルのパスを指定します。</li>
        <li><strong>alt属性:</strong> 画像が表示されない場合や、スクリーンリーダーを使用しているユーザーのために、必ず説明文を入力してください。</li>
        <li><strong>レスポンシブ対応:</strong> CSSを使用して、画面サイズに応じて画像のサイズが自動調整されるように設定しましょう。</li>
    </ul>
</div>

<div class="css-example">
    <h3>CSSでのレスポンシブ設定例</h3>
    <pre><code>img {
max-width: 100%;
height: auto;
display: block;

}