CSSによるレイアウト

画像を可変レイアウトに対応する

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
画像を可変レイアウトに対応する方法について学びます。
講師:
09:46

字幕

このレッスンでは画像を 可変レイアウトに対応する 方法について学びます 可変レイアウトはテキストのように 自動的に再配置が行われる コンテンツに限り 問題なく動作します しかし画像やビデオのような 幅が固定されたリソースが配置されると 可変レイアウトはいくつかの制約を 持っていることに気づくでしょう ブラウザではサンプルファイルの fluid.htmlを開いています これで確認してみましょう レイアウトの中に画像がありますね 特に問題なく 表示されているように思います テキストも画像の周りに回り込んでいます ここでブラウザの ウィンドウサイズを変更した時に 何が起こるのかを見てみましょう コンテンツやカラムが変化しているのに対し この画像は一定の幅から変化をしていません そしてウィンドウサイズをかなり狭くしていくと 画像がサブカラムのテキストとも 被ってしまいます 可変レイアウトの中で固定幅の画像を使うと このようなレイアウトの崩壊が起こります この問題を解決するための方法を ご紹介しましょう エディタで同じhtmlを開き 下にスクロールして 107行目をご覧下さい ここにある画像が 先ほど見ていた画像です この画像のwidth属性 幅を448pxから 100%に変更してみます すると何が起こるでしょうか 固定幅ではなく パーセンテージに変更しました htmlを保存しブラウザに戻って リロードを押します 画像が歪んで カラム全体に引き延ばされました ここで2つのことに注目して下さい エディタに再度戻ります 1つ目は高さに固定値が指定された状態を 解除したい ということです もう1つは要素の幅 パディング マージンを計算する時に 親要素が関連してくることです ここで 幅は100%として指定するということは その親要素に対して 100%と指定していることになります そのためその画像が 適切な割合で表示されるには どれくらいの%にすればよいかを 見つける必要があります しかしそれを行うのは 容易ではありません 固定幅を指定する時のように 決められた値をしていすればよい というものではないからです そのためこの問題を解決する方法を お見せしましょう いったん書き換えた内容を 元に戻してから 画像のタグをコピーし その直後に貼付けます これを保存してブラウザをリロードすると 同じ画像が並んで表示されています これを使ってこの画像は 親要素つまりこのカラムの幅の 何%かを調べられます だいたい70 75 80%くらいでしょうか エディタに戻って2つ目の画像から hight属性 高さの指定を取り除き width属性 幅の値を変更します ここでは先ほど予想した 70%に変更しましょう 保存してブラウザに戻って 再度リロードします 画像が可変レイアウトになりましたが 元の画像に対して少し小さく見えます エディタに戻って 先ほどの値を少し調整しましょう 78%に変更し再度確認します 保存してブラウザに切り替えて リロードします 今度は少し大きく見えます さてここで避けたいのはこのように画像が 本来の大きさ実寸よりも 大きなサイズで表示されることです 本来のスケールよりも 大きく表示されると 画質が損なわれた状態に なってしまいます より適切なサイズを見つけることが 最前の道です エディタに戻り今度は74%に変更して保存 もう一度ブラウザで確認してみましょう ブラウザに戻ってリロードを押します 今度はほぼ同じサイズになりました これが画像をコピーして 適切なパーセンテージの値を 見つける方法です 再度エディタに戻り 不要になった固定幅の画像を削除します この状態で保存し ブラウザで念のため確認をすると 画像が可変レイアウトに対応できました ブラウザのウィンドウサイズを変更したとき 画像のサイズも それに伴って変わっていることが わかるはずです ただしこの手法には 画質が低下する可能性がある という欠点もあります 画像が縮小する点は問題ありません しかし大きな解像度 大きなウィンドウサイズで 確認をすると画像は本来の大きさよりも大きく 拡大されるはずです そのため少し大きめの画像で用意しておき 画質が損なわれないように 対応するという方法もあります さてここまで紹介してきた方法を使うと 画像以外の要素でもアスペクト比を変更せず 可変レイアウトに対応することができます 例えばビデオ要素やキャンバス要素でも 対応できます これらの要素 を可変レイアウトにする必要がある場合には 同様の手段を使えるのです しかし画像に限って言えば 可変レイアウトに対応する 別のレイアウトもあります エディタに戻り下にスクロールして 110行目を表示します 110行目には バナークラスというクラスが適用された 空のdiv要素があります あまりセマンティックな マークではありませんが レイアウトの中で サイズが可変する画像を配置する際 この方法を使うととても柔軟に対応できます CSSのコードまでスクロールし スタイルを追加しましょう すでにバナーセレクタが書かれています これに対してheightプロパティを使って 高さを250pxに設定します この高さはここに表示したい 画像の高さと同じ高さを設定します また画像はCSSのバックグラウンドイメージ つまり背景画像として表示します ここではバックグラウンドプロパティを使って imagesというフォルダの中にある philly_banner.jpegという画像を設定します 合わせてこのdiv要素が 画像の実寸よりも大きい場合に この背景画像がループされないように no-repeatを設定します 次にマージンを加えましょう マージンは上と下に2% これは画像の上下にスペースを加えることで テキストとの距離を維持するためのものです そして左右に0を設定します コードを保存しブラウザを開きます 再読み込みして下にスクロールしてみると 新しく追加された画像が表示されました 思い出していただきたいのは 画像に幅は指定していないことです これはデフォルトのdiv要素が 親要素の幅に合わせて表示されるためです そのためこの画像は カラム全体の幅に合わせて 表示されています 高さはCSSで指定した通りになっています ブラウザのサイズを変更すると div要素のサイズも 変化していることがわかります ただし画像自体はリサイズされません ここでは画像自体のサイズは変化せず 一部がトリミングされている状態です この手法を使う場合トリミングされても 問題のない装飾用の画像である 必要があります またこのように解像度によっては 画像の一部が欠けて表示されることを 知っておく必要があります 可変レイアウトの中で画像を使う時は 効果的にコンテンツを配置できるかどうか スケーリングによって 画質に影響がないかどうかなど 設計段階で様々なことを 考慮する必要があります このレッスンでは画像を可変レイアウトに 対応する方法について学びました

CSSによるレイアウト

このコースでは、大きく3種類に分かれたCSSによるレイアウトについて解説します。ピクセルパーフェクトなデザインを実現しやすい固定レイアウト、スクリーンやウィンドウのサイズ変更に対して変化する可変レイアウト、ユーザーの環境に応じて最適なレイアウトを提供できるレスポンシブレイアウトなどについて丁寧に説明します。

2時間40分 (20 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年04月13日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。