検索

メディア

目次

  1. youtube動画
  2. 画像横幅100%
  3. 画像左寄せ内部デザイン
  4. 画像右寄せ内部デザイン
  5. iframe (map)
  6. video
  7. スクリーンショット（影付き画像）

youtube動画

変更箇所は、embed/5kah8d0256I
embed/ 以降の数字の部分のみ。

<div class="iframe-content"><iframe src="https://www.youtube.com/embed/5kah8d0256I" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe></div>
<p>変更箇所は、<strong>embed/5kah8d0256I</strong><br>
embed/ 以降の数字の部分のみ。</p>

画像横幅100%

デザイン規定

<p class="page-header"><img src="https://www.s-contigo.com/images/img/regulation/dum_03.jpg" alt="デザイン規定" width="1280" height="300"></p>

画像左寄せ内部デザイン

この画像の説明文

画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。画像のサイズはCSSによって制御されています。変更が必要な場合は、CSSを変更する必要があります。画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。

<div class="leftImg clearfix">
<div class="img"><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="この画像の説明文" width="371" height="278"></div>
<p>画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。画像のサイズはCSSによって制御されています。変更が必要な場合は、CSSを変更する必要があります。画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。</p>
</div>

画像右寄せ内部デザイン

この画像の説明文

画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。

<div class="rightImg clearfix">
<div class="img"><img src="https://www.s-contigo.com/images/img/regulation/dum_02.jpg" alt="この画像の説明文" width="371" height="278"></div>
<p>画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。画像を左寄せにするやり方です。文章が回り込むので注意をして下さい。また、タブレットサイズやスマートフォンサイズになると、写真の配置も変更になりますので、その表示方法についても確認をしたうえで、このスタイルを適用するようにしてください。</p>
</div>

iframe (map)

<div class="iframe-content"><iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13703.561911378798!2d139.52924467488197!3d35.85856060352935!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6018c2d96b2c6c47%3A0x94a32359b4e28959!2z44CSMzU0LTAwMjQg5Z-8546J55yM5a-M5aOr6KaL5biC6ba054Cs5p2x77yS5LiB55uu77yR77yU4oiS77yT!5e0!3m2!1sja!2sjp!4v1619651243751!5m2!1sja!2sjp" width="600" height="450"  loading="lazy"></iframe></div>

video

<video src="https://www.s-contigo.com/images/img/regulation/movie.mp4" autoplay="" muted="" loop="" controls=""></video>

スクリーンショット（影付き画像）

スクリーンショット
<div class="screenshot"><img src="https://www.s-contigo.com/images/img/regulation/dum_05.jpg" alt="スクリーンショット"  width="1280" height="550"></div>