基本知識 2026年7月2日

【HTML基礎講座第5回】画像の挿入とメディア：ビジュアルで伝えるimg・iframeタグ

HTML基礎講座全10回（第5回）

画像の挿入とメディア：ビジュアルで伝えるimg・iframeタグ

第5回では、Webサイトに欠かせない画像を表示する `` タグの記述方法と、YouTubeなどの外部サービスを埋め込む `` タグの使い方、レスポンシブデザインへの対応について学習します。 </p> </div> <div class="edu-card" style="background:#f8fafc !important; border:1px solid #e2e8f0 !important; padding:16px 20px !important; margin-bottom:30px !important; border-radius:12px !important;"><span style="font-size:12px !important; font-weight:700 !important; color:#64748b !important; display:block !important; margin-bottom:8px !important;">📌 講座ロードマップ一覧（クリックで移動）</span><div style="display:flex !important; flex-wrap:wrap !important; gap:8px !important; font-size:13px !important;"><a href="https://worker-fts.info/?p=8291" style="display:inline-block !important; padding:4px 10px !important; border-radius:6px !important; text-decoration:none !important; background:#f1f5f9 !important; color:#475569 !important; border:1px solid #cbd5e1 !important; font-weight:700 !important;">第1回</a><a href="https://worker-fts.info/?p=8292" style="display:inline-block !important; padding:4px 10px !important; border-radius:6px !important; text-decoration:none !important; background:#f1f5f9 !important; color:#475569 !important; border:1px solid #cbd5e1 !important; font-weight:700 !important;">第2回</a><a href="https://worker-fts.info/?p=8293" style="display:inline-block !important; padding:4px 10px !important; border-radius:6px !important; text-decoration:none !important; background:#f1f5f9 !important; color:#475569 !important; border:1px solid #cbd5e1 !important; font-weight:700 !important;">第3回</a><a href="https://worker-fts.info/?p=8294" style="display:inline-block !important; padding:4px 10px !important; border-radius:6px !important; text-decoration:none !important; background:#f1f5f9 !important; color:#475569 !important; border:1px solid #cbd5e1 !important; font-weight:700 !important;">第4回</a><a href="https://worker-fts.info/?p=8295" style="display:inline-block !important; padding:4px 10px !important; border-radius:6px !important; text-decoration:none !important; background:#3b82f6 !important; color:#ffffff !important; border:1px solid #3b82f6 !important; font-weight:700 !important;">第5回</a><a href="https://worker-fts.info/?p=8296" style="display:inline-block !important; padding:4px 10px !important; border-radius:6px !important; text-decoration:none !important; background:#f1f5f9 !important; color:#475569 !important; border:1px solid #cbd5e1 !important; font-weight:700 !important;">第6回</a><a href="https://worker-fts.info/?p=8297" style="display:inline-block !important; padding:4px 10px !important; border-radius:6px !important; text-decoration:none !important; background:#f1f5f9 !important; color:#475569 !important; border:1px solid #cbd5e1 !important; font-weight:700 !important;">第7回</a><a href="https://worker-fts.info/?p=8298" style="display:inline-block !important; padding:4px 10px !important; border-radius:6px !important; text-decoration:none !important; background:#f1f5f9 !important; color:#475569 !important; border:1px solid #cbd5e1 !important; font-weight:700 !important;">第8回</a><a href="https://worker-fts.info/?p=8299" style="display:inline-block !important; padding:4px 10px !important; border-radius:6px !important; text-decoration:none !important; background:#f1f5f9 !important; color:#475569 !important; border:1px solid #cbd5e1 !important; font-weight:700 !important;">第9回</a><a href="https://worker-fts.info/?p=8300" style="display:inline-block !important; padding:4px 10px !important; border-radius:6px !important; text-decoration:none !important; background:#f1f5f9 !important; color:#475569 !important; border:1px solid #cbd5e1 !important; font-weight:700 !important;">第10回</a></div></div>  <div class="edu-section"> <h2 class="edu-sec-title">1. imgタグの基本構文と「空要素」</h2> <p class="edu-paragraph"> Webサイトに写真やイラストを挿入する場合は、<span class="edu-highlight">img（Image）要素</span>を使用します。 </p> <p class="edu-paragraph"> imgタグは、終了タグ（</img>）を持たない「空要素（からようそ）」であり、コンテンツを挟み込むのではなく、タグ自体に画像ファイルの情報を属性として記述します。 </p> <div class="edu-code-wrapper"> <div class="edu-code-header"> <span class="edu-code-lang">HTMLコード</span> <button class="edu-copy-btn" id="edu-copy-btn-05-01" onclick="eduCopyCode('edu-code-05-01', 'edu-copy-btn-05-01')">コピー</button> </div> <pre class="edu-code-area" id="edu-code-05-01"><span class="edu-t-tag"><img</span> <span class="edu-t-attr">src</span>=<span class="edu-t-val">"images/photo.png"</span> <span class="edu-t-attr">alt</span>=<span class="edu-t-val">"青空と白い雲の風景写真"</span><span class="edu-t-tag">></span></pre> </div> <ul class="edu-paragraph" style="padding-left: 20px !important;"> <li style="margin-bottom: 8px !important;"><strong>src 属性 (Source):</strong> 読み込む画像ファイルのパス（絶対パスまたは相対パス）を指定します。</li> <li><strong>alt 属性 (Alternate text):</strong> 回線遅延などで画像が読み込めなかった場合や、視覚障害者向けの音声読み上げソフトが代わりに読み上げる「画像の説明テキスト」を指定します。</li> </ul> </div>  <div class="edu-section"> <h2 class="edu-sec-title">2. プロとして知っておくべきalt属性の書き方</h2> <p class="edu-paragraph"> alt属性は、単にSEOのためだけでなく、すべての人が情報にアクセスできる「Webアクセシビリティ」の観点から極めて重要です。 </p> <div class="edu-card"> <h3 class="edu-card-title">📝 alt属性の適切な書き分け</h3> <p class="edu-paragraph" style="margin-bottom: 12px !important;"> ・<strong>意味のある写真:</strong> その写真が何を表しているのか、具体的に書きましょう。<br> <em>（良い例: alt=”富士山頂から見た初日の出”、悪い例: alt=”日の出”）</em> </p> <p class="edu-paragraph" style="margin-bottom: 12px !important;"> ・<strong>装飾用の画像:</strong> 背景のアイコンや、デザイン上の単なる飾り罫線など、情報としての意味を持たない画像には、空のaltを指定します。<br> <em>（記述例: alt=”” と記述する。属性自体を省略すると、クローラーや読み上げソフトがファイル名を読み上げてしまいノイズになるため空にします）</em> </p> </div> </div>  <div class="edu-section"> <h2 class="edu-sec-title">3. レイアウト崩れを防ぐ width・height 属性とレスポンシブ</h2> <p class="edu-paragraph"> 画像を表示する際、`<img decoding="async" src="..." width="600" height="400">` のように画像の元のピクセル寸法をあらかじめHTMLに直接数値で指定することが強く推奨されます。 </p> <div class="edu-point-box"> <h4 class="edu-point-title">🚀 なぜ寸法値をHTMLに書くのか？ (CLS対策)</h4> <p class="edu-paragraph" style="font-size: 14px !important; margin: 0 !important;"> HTMLに寸法情報がないと、ブラウザは画像ファイルの読み込みが完了するまでその画像の大きさを知ることができず、ロード後にガクッとページコンテンツが押し下がる現象（レイアウトシフト）が発生します。これはユーザーに強いストレスを与え、SEOのスコア（Core Web VitalsのCLS）を下げる原因になります。HTML側にアスペクト比を伝えるために、必ず元の画像寸法を書きましょう。 </p> </div> <p class="edu-paragraph"> スマホなどの小さな画面で画像がはみ出すのを防ぐ（レスポンシブ対応）には、CSSに以下のように指定するのが現代のWeb制作の基本です。 </p> <div class="edu-code-wrapper" style="box-shadow: none !important; border: 1px solid #e2e8f0 !important; margin: 0 !important;"> <pre class="edu-code-area" style="font-size: 13px !important; padding: 12px 16px !important; background: #2d3748 !important; color: #fff !important;">img { max-width: 100%; height: auto; }</pre> </div> </div>  <div class="edu-section"> <h2 class="edu-sec-title">4. iframeタグによる外部メディアの埋め込み</h2> <p class="edu-paragraph"> YouTube動画やGoogleマップ、SNSの投稿などを外部サービスから自分のページ内に埋め込むには、<span class="edu-highlight">iframe（Inline Frame）要素</span>を使用します。 </p> <div class="edu-code-wrapper"> <div class="edu-code-header"> <span class="edu-code-lang">YouTube埋め込みのiframe例</span> <button class="edu-copy-btn" id="edu-copy-btn-05-02" onclick="eduCopyCode('edu-code-05-02', 'edu-copy-btn-05-02')">コピー</button> </div> <pre class="edu-code-area" id="edu-code-05-02"><span class="edu-t-tag"><iframe</span> <span class="edu-t-attr">src</span>=<span class="edu-t-val">"https://www.youtube.com/embed/XXXXXX"</span> <span class="edu-t-attr">width</span>=<span class="edu-t-val">"560"</span> <span class="edu-t-attr">height</span>=<span class="edu-t-val">"315"</span> <span class="edu-t-attr">allowfullscreen</span><span class="edu-t-tag">></span> <span class="edu-t-tag"></iframe></span></pre> </div> <p class="edu-paragraph"> iframeは別のWebサイトのウインドウを自ページの中に開く強力なタグです。通常、埋め込み対象のサービス（GoogleMapやYouTube）が提供する「埋め込みコード」をコピーしてそのまま貼り付けて使います。 </p> </div>  <div class="edu-exercise-box"> <div class="edu-exercise-header" style="cursor: default !important;"> <span>✍️ 第5回理解度チェック（問題）</span> </div> <div class="edu-exercise-content" style="display: block !important;"> <p class="edu-paragraph"> HTMLコード上で `<img src=”icon.png”>` と記述し、alt属性自体を省略してしまった場合、どのような問題が発生するでしょうか？ </p> <p style="font-size: 13px !important; color: #6b7280 !important; margin: 10px 0 0 0 !important; font-style: italic !important;"> ※この問題の解答と解説は、ページ最下部（まとめの前）に掲載しています。 </p> </div> </div> <script> // コピー機能 function eduCopyCode(codeId, btnId) { const codeArea = document.getElementById(codeId); const btn = document.getElementById(btnId); if (!codeArea || !btn) return; const textToCopy = codeArea.innerText; navigator.clipboard.writeText(textToCopy).then(() => { const originalText = btn.innerText; btn.innerText = 'コピー完了！'; btn.style.background = '#10b981'; btn.style.color = '#ffffff'; setTimeout(() => { btn.innerText = originalText; btn.style.background = 'rgba(255, 255, 255, 0.1)'; btn.style.color = '#e2e8f0'; }, 1500); }); } </script>  <div class="edu-section" style="margin-bottom: 0 !important;"> <h2 class="edu-sec-title">5. まとめと次回予告</h2> <p class="edu-paragraph"> 画像の適切な配置方法（altの指定、width/heightによるロード時挙動の最適化）と外部コンテンツの埋め込み方を習得しました。これにより、視覚的に訴求力のあるWebサイトを構築する準備が整いました。 </p> <p class="edu-paragraph"> 次回（第6回）は、<strong>「データの整理に必須のテーブル（表）の作成方法」</strong>をテーマに、複雑なセルの結合方法や表組みの書き方を徹底解説します！ </p> </div> </div> <div class="edu-card" style="background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important; border:1px solid #cbd5e1 !important; border-radius:16px !important; padding:24px !important; margin-top:40px !important;"><h4 style="margin:0 0 16px 0 !important; font-size:15px !important; font-weight:700 !important; color:#1e293b !important; text-align:center !important;">📖 HTMLの基礎を全10回でマスターする</h4><div style="display:flex !important; justify-content:space-between !important; align-items:center !important; margin-bottom:20px !important; gap:10px !important;"><a href="https://worker-fts.info/?p=8294" style="display:inline-block !important; background:#ffffff !important; border:1px solid #cbd5e1 !important; padding:8px 16px !important; border-radius:8px !important; text-decoration:none !important; color:#0f172a !important; font-size:13px !important; font-weight:700 !important; box-shadow:0 1px 2px rgba(0,0,0,0.05) !important;">◀ 前の回へ：第4回</a><a href="https://worker-fts.info/?p=8296" style="display:inline-block !important; background:#ffffff !important; border:1px solid #cbd5e1 !important; padding:8px 16px !important; border-radius:8px !important; text-decoration:none !important; color:#0f172a !important; font-size:13px !important; font-weight:700 !important; box-shadow:0 1px 2px rgba(0,0,0,0.05) !important;">次の回へ：第6回 ▶</a></div><div style="display:flex !important; flex-direction:column !important; gap:6px !important; font-size:13px !important;"><div style="display:flex !important; align-items:center !important; font-weight:normal !important; color:#64748b !important;"><span style="margin-right:8px !important;">○</span><a href="https://worker-fts.info/?p=8291" style="text-decoration:none !important; color:inherit !important;">第1回：HTMLとは？基本構造と最初のウェブページ作成</a></div><div style="display:flex !important; align-items:center !important; font-weight:normal !important; color:#64748b !important;"><span style="margin-right:8px !important;">○</span><a href="https://worker-fts.info/?p=8292" style="text-decoration:none !important; color:inherit !important;">第2回：見出しと段落：テキストを構造化して美しい文書を作る</a></div><div style="display:flex !important; align-items:center !important; font-weight:normal !important; color:#64748b !important;"><span style="margin-right:8px !important;">○</span><a href="https://worker-fts.info/?p=8293" style="text-decoration:none !important; color:inherit !important;">第3回：リストと箇条書き：情報をスッキリ整理して見せる技術</a></div><div style="display:flex !important; align-items:center !important; font-weight:normal !important; color:#64748b !important;"><span style="margin-right:8px !important;">○</span><a href="https://worker-fts.info/?p=8294" style="text-decoration:none !important; color:inherit !important;">第4回：リンクとナビゲーション：Webの世界を繋ぐアンカータグ</a></div><div style="display:flex !important; align-items:center !important; font-weight:bold !important; color:#3b82f6 !important;"><span style="margin-right:8px !important;">●</span><a href="https://worker-fts.info/?p=8295" style="text-decoration:none !important; color:inherit !important;">第5回：画像の挿入とメディア：ビジュアルで伝えるimg・iframeタグ</a></div><div style="display:flex !important; align-items:center !important; font-weight:normal !important; color:#64748b !important;"><span style="margin-right:8px !important;">○</span><a href="https://worker-fts.info/?p=8296" style="text-decoration:none !important; color:inherit !important;">第6回：テーブル（表）の作成：複雑なデータを整理するセルの結合</a></div><div style="display:flex !important; align-items:center !important; font-weight:normal !important; color:#64748b !important;"><span style="margin-right:8px !important;">○</span><a href="https://worker-fts.info/?p=8297" style="text-decoration:none !important; color:inherit !important;">第7回：入力フォームの基本：ユーザーとデータをやり取りする仕組み</a></div><div style="display:flex !important; align-items:center !important; font-weight:normal !important; color:#64748b !important;"><span style="margin-right:8px !important;">○</span><a href="https://worker-fts.info/?p=8298" style="text-decoration:none !important; color:inherit !important;">第8回：セマンティックHTMLとレイアウト：論理的で美しい文書構造を作る</a></div><div style="display:flex !important; align-items:center !important; font-weight:normal !important; color:#64748b !important;"><span style="margin-right:8px !important;">○</span><a href="https://worker-fts.info/?p=8299" style="text-decoration:none !important; color:inherit !important;">第9回：属性とメタデータ：HTMLの拡張とブラウザ向け設定</a></div><div style="display:flex !important; align-items:center !important; font-weight:normal !important; color:#64748b !important;"><span style="margin-right:8px !important;">○</span><a href="https://worker-fts.info/?p=8300" style="text-decoration:none !important; color:inherit !important;">第10回：実践！学んだすべてのタグを組み合わせて自己紹介サイトを完成させる</a></div></div></div>  <div class="edu-card" style="background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; margin-top: 40px !important;"> <h3 class="edu-card-title" style="color: #166534 !important; font-size: 16px !important;">🔑 第5回理解度チェックの解答と解説</h3> <p class="edu-paragraph" style="font-weight: 700; color: #15803d !important; margin-bottom: 8px !important;">【解説】</p> <p class="edu-paragraph" style="margin-bottom: 0 !important;"> 正解は「スクリーンリーダー（音声読み上げソフト）などが画像ファイルを認識した際、altの代わりに画像ファイル名（icon.png）をそのまま読み上げてしまう」です。ユーザーにとって意味のない文字列がノイズとなってしまうため、意味のない画像であっても `alt=””` と記述しておく必要があります。 </p> </div> </div> </div> </article> <div class="am-related-posts-section"> <h4 class="am-related-posts-title">関連記事</h4>  <div class="am-related-posts-list"> <article class="am-list-article"> <a href="https://worker-fts.info/%e3%80%90sql%e7%ac%ac10%e5%9b%9e%e3%80%91%e5%ae%9f%e8%b7%b5%ef%bc%81%e9%9b%86%e8%a8%88%e3%82%af%e3%82%a8%e3%83%aa%e3%82%92%e6%9b%b8%e3%81%84%e3%81%a6%e3%81%bf%e3%82%88%e3%81%86/" class="am-list-link"> <div class="am-list-content"> <div style="margin-bottom: 6px;"> <span class="am-list-cat">基本知識</span> </div> <h5 class="am-list-title">【SQL第10回】実践！集計クエリを書いてみよう</h5> <div class="am-list-excerpt"> SQL基礎講座全10回（第10回・最終回）【S... </div> <div class="am-list-footer"> <time datetime="2026-07-02T20:48:31+09:00">2026年7月2日</time> <span class="am-list-btn-text">続きを読む →</span> </div> </div> </a> </article> <article class="am-list-article"> <a href="https://worker-fts.info/%e3%80%90sql%e7%ac%ac6%e5%9b%9e%e3%80%91%e3%82%b0%e3%83%ab%e3%83%bc%e3%83%97%e5%8c%96%e3%81%a8%e9%9b%86%e8%a8%88%ef%bc%9agroup-by/" class="am-list-link"> <div class="am-list-content"> <div style="margin-bottom: 6px;"> <span class="am-list-cat">基本知識</span> </div> <h5 class="am-list-title">【SQL第6回】グループ化と集計：GROUP BY</h5> <div class="am-list-excerpt"> SQL基礎講座全10回（第6回）【SQL第6回... </div> <div class="am-list-footer"> <time datetime="2026-07-02T20:48:30+09:00">2026年7月2日</time> <span class="am-list-btn-text">続きを読む →</span> </div> </div> </a> </article> <article class="am-list-article"> <a href="https://worker-fts.info/%e3%80%90sql%e7%ac%ac7%e5%9b%9e%e3%80%91%e8%a4%87%e6%95%b0%e3%83%86%e3%83%bc%e3%83%96%e3%83%ab%e3%81%ae%e7%b5%90%e5%90%88%ef%bc%9ainner-join/" class="am-list-link"> <div class="am-list-content"> <div style="margin-bottom: 6px;"> <span class="am-list-cat">基本知識</span> </div> <h5 class="am-list-title">【SQL第7回】複数テーブルの結合：INNER JOIN</h5> <div class="am-list-excerpt"> SQL基礎講座全10回（第7回）【SQL第7回... </div> <div class="am-list-footer"> <time datetime="2026-07-02T20:48:30+09:00">2026年7月2日</time> <span class="am-list-btn-text">続きを読む →</span> </div> </div> </a> </article> <article class="am-list-article"> <a href="https://worker-fts.info/%e3%80%90sql%e7%ac%ac8%e5%9b%9e%e3%80%91%e5%a4%96%e9%83%a8%e7%b5%90%e5%90%88%e3%81%ae%e4%bb%95%e7%b5%84%e3%81%bf%ef%bc%9aleft-join/" class="am-list-link"> <div class="am-list-content"> <div style="margin-bottom: 6px;"> <span class="am-list-cat">基本知識</span> </div> <h5 class="am-list-title">【SQL第8回】外部結合の仕組み：LEFT JOIN</h5> <div class="am-list-excerpt"> SQL基礎講座全10回（第8回）【SQL第8回... </div> <div class="am-list-footer"> <time datetime="2026-07-02T20:48:30+09:00">2026年7月2日</time> <span class="am-list-btn-text">続きを読む →</span> </div> </div> </a> </article> </div> </div> <style> .am-related-posts-section { margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--am-border, #e2e8f0); } .am-related-posts-title { font-size: 20px; font-weight: 700; color: var(--am-text-primary, #0f172a); margin: 0 0 28px 0; position: relative; padding-left: 14px; letter-spacing: -0.01em; } .am-related-posts-title::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 4px; background: linear-gradient(to bottom, #8b5cf6, #a78bfa); /* パープルグラデーション */ border-radius: 4px; } .am-related-posts-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } @media (max-width: 640px) { .am-related-posts-grid { grid-template-columns: 1fr; gap: 16px; } } .am-related-post-card { background: var(--am-surface, #ffffff); border: 1px solid var(--am-border, #e2e8f0); border-radius: var(--am-radius-default, 16px); overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s; display: flex; flex-direction: column; } .am-related-post-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(139, 92, 246, 0.08); /* プレミアムな浮遊感 */ border-color: #a78bfa; } .am-related-post-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; } .am-related-post-thumb-wrapper { position: relative; padding-top: 56.25%; /* 16:9 黄金アスペクト比 */ background: #f1f5f9; overflow: hidden; } .am-related-post-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .am-related-post-card:hover .am-related-post-thumb { transform: scale(1.04); } .am-related-post-no-thumb { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #94a3b8; font-weight: 600; } .am-related-post-cat { position: absolute; top: 14px; left: 14px; background: rgba(15, 23, 42, 0.75); color: #ffffff; font-size: 10px; font-weight: 700; padding: 4px 10px; border-radius: 8px; backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); } .am-related-post-meta-body { padding: 20px; display: flex; flex-direction: column; flex-grow: 1; } .am-related-post-card-title { font-size: 15px; font-weight: 700; color: var(--am-text-primary, #0f172a); line-height: 1.5; margin: 0 0 10px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 1; } .am-related-post-date { font-size: 12px; color: var(--am-text-muted, #94a3b8); } .am-related-ad-card { display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 160px; background: rgba(139, 92, 246, 0.02); /* 薄い紫のトーン */ border: 1.5px dashed rgba(139, 92, 246, 0.25); border-radius: var(--am-radius-default, 16px); } /* ========================================== 追加スタイル: 独自ブロック「投稿記事一覧」風リスト型 ========================================== */ .am-related-posts-list { display: flex; flex-direction: column; gap: 16px; } .am-list-article { background: var(--am-surface, #ffffff); border: 1px solid var(--am-border, #e2e8f0); border-radius: var(--am-radius-default, 16px); overflow: hidden; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.01); transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s; } .am-list-article:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(139, 92, 246, 0.06); border-color: #a78bfa; } .am-list-link { display: flex; text-decoration: none; color: inherit; padding: 16px; gap: 20px; } @media (max-width: 640px) { .am-list-link { flex-direction: column; gap: 12px; } .am-list-thumbnail { width: 100% !important; height: 160px !important; } } .am-list-thumbnail { flex-shrink: 0; border-radius: 8px; overflow: hidden; background: #f1f5f9; } .am-list-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .am-list-article:hover .am-list-thumbnail img { transform: scale(1.03); } .am-list-content { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; } .am-list-cat { display: inline-block; background: rgba(139, 92, 246, 0.08); color: #8b5cf6; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 6px; width: fit-content; } .am-list-title { font-size: 15px; font-weight: 700; color: var(--am-text-primary, #0f172a); margin: 0 0 8px 0; line-height: 1.4; } .am-list-excerpt { font-size: 13px; color: var(--am-text-muted, #64748b); line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .am-list-footer { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--am-text-muted, #94a3b8); } .am-list-btn-text { font-weight: 600; color: #8b5cf6; } .am-list-ad-card { display: flex; align-items: center; justify-content: center; padding: 20px; min-height: 120px; background: rgba(139, 92, 246, 0.02); border: 1.5px dashed rgba(139, 92, 246, 0.25); border-radius: var(--am-radius-default, 16px); box-sizing: border-box; } /* ========================================== 追加スタイル: タイル埋め込み型 ========================================== */ .am-related-posts-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; } @media (max-width: 640px) { .am-related-posts-tiles { grid-template-columns: 1fr; gap: 16px; } } .am-related-post-tile { position: relative; border-radius: var(--am-radius-default, 16px); overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02); transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1); height: 200px; } .am-related-post-tile:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(139, 92, 246, 0.12); } .am-related-post-tile-link { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; text-decoration: none; position: relative; } .am-related-post-tile-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.85) 100%); z-index: 1; transition: background 0.25s ease; } .am-related-post-tile:hover .am-related-post-tile-overlay { background: linear-gradient(to bottom, rgba(15, 23, 42, 0.2) 0%, rgba(15, 23, 42, 0.9) 100%); } .am-related-post-tile-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 20px; z-index: 2; color: #ffffff; } .am-related-post-tile-cat { display: inline-block; background: #8b5cf6; color: #ffffff; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-bottom: 8px; } .am-related-post-tile-title { font-size: 15px; font-weight: 700; color: #ffffff !important; line-height: 1.4; margin: 0 0 6px 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .am-related-post-tile-date { font-size: 11px; color: rgba(255, 255, 255, 0.7); } .am-related-ad-tile { display: flex; align-items: center; justify-content: center; padding: 20px; height: 200px; background: rgba(139, 92, 246, 0.02); border: 1.5px dashed rgba(139, 92, 246, 0.25); border-radius: var(--am-radius-default, 16px); box-sizing: border-box; } </style> </main> </div> </main> <footer class="am-footer" role="contentinfo"> <div class="am-footer__inner">  <div class="am-footer__brand"> <a href="https://worker-fts.info/" class="am-footer__logo"> FTS/CREATORS </a> <p class="am-footer__desc"> AIマネジメント力を活かして金を稼ぐKAZUMAです。 </p> </div>  <div class="am-footer__grid">  <nav class="am-footer-nav" aria-label="フッターサブメニュー1"> <h4 class="am-footer-widget__title">サイト情報</h4> <ul id="menu-%e3%83%95%e3%83%83%e3%82%bf%e3%83%bc%e3%83%a1%e3%83%8b%e3%83%a5%e3%83%bc" class="am-footer-menu"><li id="menu-item-887" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-887"><a href="https://worker-fts.info/%e9%81%8b%e5%96%b6%e6%96%b9%e9%87%9d/">運営方針</a></li> <li id="menu-item-890" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-890"><a href="https://worker-fts.info/%e5%85%8d%e8%b2%ac%e4%ba%8b%e9%a0%85/">免責事項</a></li> <li id="menu-item-1197" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1197"><a href="https://worker-fts.info/specific/">特定商取引法に基づく表記</a></li> <li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-888"><a href="https://worker-fts.info/privacy-policy/">プライバシーポリシー</a></li> <li id="menu-item-889" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-889"><a href="https://worker-fts.info/%e3%82%b5%e3%82%a4%e3%83%88%e3%83%9e%e3%83%83%e3%83%97/">サイトマップ</a></li> <li id="menu-item-891" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-891"><a href="https://worker-fts.info/%e3%81%8a%e5%95%8f%e3%81%84%e5%90%88%e3%82%8f%e3%81%9b/">お問い合わせ</a></li> </ul> </nav> </div> </div> <div class="am-container"> <div class="am-footer__copy"> <p>© 2026 FTS/CREATORS. All Rights Reserved.</p> </div> </div> </footer>  <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/fts-maxx-theme/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="vk-swiper-script-js" src="https://worker-fts.info/wp-content/plugins/vk-blocks/vendor/vektor-inc/vk-swiper/src/assets/js/swiper-bundle.min.js?ver=11.0.2"></script> <script id="vk-blocks-slider-js" src="https://worker-fts.info/wp-content/plugins/vk-blocks/build/vk-slider.min.js?ver=1.83.0.1"></script> <script id="affilimax-main-js-extra"> var affilimaxData = {"ajax":"https://worker-fts.info/wp-admin/admin-ajax.php","nonce":"7d5fb4c4ec","siteUrl":"https://worker-fts.info","themeUri":"https://worker-fts.info/wp-content/themes/fts-maxx-theme"}; //# sourceURL=affilimax-main-js-extra </script> <script id="affilimax-main-js" src="https://worker-fts.info/wp-content/themes/fts-maxx-theme/assets/js/main.js?ver=16.29.19"></script> <script id="hcb-prism-js" src="https://worker-fts.info/wp-content/plugins/highlighting-code-block/assets/js/prism.js?ver=2.0.1"></script> <script id="clipboard-js" src="https://worker-fts.info/wp-includes/js/clipboard.min.js?ver=2.0.11"></script> <script id="hcb-script-js-extra"> var hcbVars = {"showCopyBtn":"1","copyBtnLabel":"\u30b3\u30fc\u30c9\u3092\u30af\u30ea\u30c3\u30d7\u30dc\u30fc\u30c9\u306b\u30b3\u30d4\u30fc\u3059\u308b"}; //# sourceURL=hcb-script-js-extra </script> <script id="hcb-script-js" src="https://worker-fts.info/wp-content/plugins/highlighting-code-block/build/js/hcb_script.js?ver=2.0.1"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://worker-fts.info/wp-includes/js/wp-emoji-release.min.js?ver=7.0"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://worker-fts.info/wp-includes/js/wp-emoji-loader.min.js </script> </body> </html>