ホームページ、ページのカスタマイズなど、お客様のEC事業をレベルアップいたします。前回は、フルードグリッドの指定方法につきまして、サンプルコードを交え記載いたしました。レスポンシブウェブデザインの作製にパーセント指定、大事ですね。メディアクエリ・ビューポート・フルードグリッドこれでレスポンシブウェブデザインは、ほぼ完成と行きたい所ですが、ページ内の画像も画面サイズに合わせて拡大・縮小させる必要がございます。Imageといいます。フルードイメージとフルードグリッドを組み合わせると、画像を含むすべての要素を画面サイズに合わせて調整することができます。上記について記載していこうと思います...。フルードイメージの基本ページ内に配置されている画像に対して、CSSでフルードイメージの指定をおこなうと、画像の縦横比を保持したまま、画像を画面内に配置することができます。フルードイメージの指定方法は画像の配置方法によって異なります。画像以外のメディアに対して指定することも可能になっています。簡単なサンプルページを記載して、フルードイメージの動作を確認してみます。Design</small></footer></div></body></html>続いてCSSサンプルを記載します。ここでは上記のimg要素に対してフルードイメージの指定を記載します。100%;height:auto;}これでフルードイメージの指定は完了です。表示領域の幅に応じて画像が自動的に拡大・縮小します。今回はシンプルなHTMLですが、実際の制作現場ではimg要素の親要素が、もう少し複雑に存在することが多々ございます。今回はbody要素width:100%の内側でimg要素がwidth:100%となっていますが、figure要素が横2列(50%)だったりする場合などになります。ここまで、レスポンシブウェブデザインの基本につきまして5回にわたり記載いたしました。レスポンシブウェブデザインの基本しか記載していませんが、具体的にどのようにしてマルチデバイスに対応するか、おおよそ全体像は理解できたことと思います。具体的なデザイン方法につきましては、また別記事に記載したいと思いますが、ここでひとつだけレスポンシブウェブデザインの作成方法のコツを記載いたしますと、ページ作成だけではなく、JavaScriptやVBAなども同じことが言えますが、複雑になればなるほど、パーツごとに細分化してから作成する!これが最も重要なことと思います。今回はここまで...。お仕事のご依頼は↓コチラより...、それではまた次回...。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。