前回は「2カラムレイアウト」の骨組みを作成した。今回はそこに画像を配置していく。最初に、画像配置後のページを実際に見ていただこう。
　
【2カラムレイアウトに画像配置後】
　
PCでウィンドウ幅を伸縮させてみれば分かるだろうが、レスポンシブWebデザインを構成する技術の一つである「フルードイメージ」で実装されている。今回は「メインエリア」の画像のスタイルを指定していく。下のそれぞれの画像のようにスマートフォン→タブレット→PCの順に作成していく。
　

【スマートフォン】

【タブレット】

【PC】

「フルードイメージ」最大幅を決め、センター揃えに

まずはスタイルシート「style-page.css」のスマートフォン向け（共通）スタイルの「メインエリアのスタイル」内に下記コードを足していく。メインエリアの画像スタイルの記述は全てのデバイスで共通となるため、「スマートフォン向け（共通）スタイル」にのみ記述してやればいい。それでは、ソース黒枠右上の「ソースを表示」からコピー。
　
「style-page.css」

#mainarea article img {
  width:100%;
  height:auto;
  max-width:540px;
  display: block;
  text-align: center;
  margin:20px auto;
}

以前に説明した「フルードイメージ」を理解していれば何ら問題はないはずだ。ポイントとしては「img要素」をセンター揃えにしているということ。このときに注意するのは、インライン要素の「img」をブロック要素にしていること。インライン要素のままだとセンター揃えにならないので注意してほしい。上に並んだ3つの画像の真ん中のタブレットでの表示を見てもらえば分かるだろう。このタブレット表示は、ウィンドウの横幅768pxでの表示となっている。メインエリアの画像スタイルには、PC向けレイアウト指定のメインエリアの最大幅と同じ「max-width:540px;」と指定しているので、画像が540px以上拡大することはない。最後にHTMLを記述。用意する画像は何でもよいので、トップページのスライドショーを作成するときに使用した画像を使う。メインエリアのテキスト内の適当な所に下記を記述。
　
「page.html」

ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。

<img src="images/topimage2.jpg" alt="ピックアップ">

ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。ここに投稿記事のテキストが入ります。

　
次回はサイドバーのピックアップ画像のスタイルを指定する。
　

Tweet