Background Image

研修 ウェブサイト制作に役立つ実例 画像を並べる

研修 画像を並べてみましょう

研修1

  • 複数の画像を単純に、横に並べてみましょう
横150px縦180pxの画像 横150px縦180pxの画像 横150px縦180pxの画像 横150px縦180pxの画像

  • HTMLの例

<img src=”画像のurl” /> <img src=”画像のurl /”> <img src=”画像のurl /”> <img src=”画像のurl /”>



研修2

  • 要素にスタイル属性フロート(float)を指定して画像を並べる

  • HTML スタイルシートを利用した例

<div class=”clearfix”>
<div style=”float:left;”>
<img src=”画像のurl”/>
</div>
<div style=”float:left;”>
<img src=”画像のurl”/>
</div>
<div style=”float:left;”>
<img src=”画像のurl”/>
</div>
<div style=”float:left;”>
<img src=”画像のurl”/>
</div>
</div>



研修3

  • 要素にスタイル属性フロート(float)を指定して画像を並べる。
  • 画像に2pxの周辺余白をとる。

  • HTML スタイルシートを利用した例

<div class=”clearfix”>
<div style=”float:left; margin: 2px;”>
<img src=”画像のurl”/>
</div>
<div style=”float:left; margin: 2px;”>
<img src=”画像のurl”/>
</div>
<div style=”float:left; margin: 2px;”>
<img src=”画像のurl”/>
</div>
<div style=”float:left; margin: 2px;”>
<img src=”画像のurl”/>
</div>
</div>


研修4

  • 要素にスタイル属性フロート(float)を指定して画像を並べる。
  • 画像の周りに2pxの周辺余白をとる。
  • 画像の下部に、センター揃えで、8ポイントサイズの文字を入れる。

アクトディア

キャスト

パルス

レジア
  • HTML スタイルシートを利用した例

<div class=”clearfix”>
<div style=”float:left; margin: 2px; text-align:center; font-size:8pt;”>
<img src=”画像のurl” />
<span>アクトディア</span>
</div>
<div style=”float:left; margin: 2px; text-align:center; font-size:8pt;”>
<img src=”画像のurl” />
<span>キャスト</span>
</div>
<div style=”float:left; margin: 2px; text-align:center; font-size:8pt;”>
<img src=”画像のurl” />
<span>パルス</span>
</div>
<div style=”float:left; margin: 2px; text-align:center; font-size:8pt;”>
<img src=”画像のurl” />
<span>レジア</span>
</div>
</div>


研修5

 パソコンを使って表示してみましょう。4つの画像が横に並んでいますか?
 今度は、スマートフォンを使って表示してみましょう。はじめに、縦置きにしてみましょう。いくつかの画像が、横に並んで、残りは下部に逃がしていますね。
 今度は、横置きにしてみましょう。縦置きの時とは様子が変わっていると思います。
 ページの設計・作成・更新は、パソコン・スマートフォンの両方で表示を確認しながら行います。

 スタイルシート(stylesheet)を利用した例は、インラインスタイルを使用して説明しています。
 スタイルシートには、(1)インラインスタイル、(2)埋め込みスタイルシート、(3)外部スタイルシート、があります。
 ショッピングモールへ出店したとき、標準契約では(2)(3)が使えず困ることがあります。
 インラインスタイルは使えるケースがあるので、その際に思い出してください。


電話でのお申し込み・お見積・ご問い合わせは、電話:0852-24-3333、平日:午前8:30~午後17:45 島根県松江市《Webマーケティング専門店》文泉堂 お申し込み・ご相談・ご問い合わせ・お見積は、 電話: 0852-24-3333
Google Tag Manager