先回は、ホームページに画像を読み込む方法について解説いたしました。 今回はその続きとして、ページの特定の表示範囲の中に、よりきれいに画像を配置する方法を解説いたします。
ページの特定の部分に画像をうまく配置する方法
先回作成したように、レスポンシブWebデザインの場合、それぞれのカラムがブラウザの表示幅によってパーセントで変化していきます。 そのため、そのまま画像を張り付けただけでは、画像は縦横に引き伸ばされることになり、綺麗に表示されません。 もちろん単なるグラデーションの画像や、模様などの場合は問題ないと思いますが、写真の場合には縦横比が変化してしまうため、見栄えが悪くなります。
それで以下の記述をCSSに追加しましょう。
CSSに「object-fit: cover;」を設定する
これを設定することによって、画像自体のサイズを変更することなく指定の範囲の中でうまく表示されるようになります。
例えば以下のようにCSS内の画像のスタイルを指定する部分に記述することができます。
.header img{
width: 100%;
height: 300px;
object-fit: cover;
}これで、ブラウザの表示幅をいろいろ変化させてみましょう。 これまでとは異なり、画像自体が縦横に引き伸ばされるのではなく、画像が表示部分に合わせてうまくカバーするようになっていることと思います。
このままでも良いのですが、画面幅を大きくしたときに、もう少し画像の上のほうが焦点となるように調整したいと思います。
それが object-position: % %; を使用した方法です。
CSSに「object-position: % %;」を追記する
先ほどのCSSに以下のように追記します。
.header img{
width: 100%;
height: 300px;
object-fit: cover;
object-position: 50% 10%;
}これにより、画像のどのあたりを焦点とするかを調整できます。それはパーセントで記入し、1番目が左右の位置、2番目が上下の位置を意味しています。
例えば、object-position: 50% 10%; と書けば、これは、左右の位置は真ん中、上下の位置は上から10％の位置ということになります。
これを設定すると先ほどの表示は以下のように変化します。
これで、画面幅をいろいろ変化させても画像が上手に拡大縮小してくれるようになったはずです。
このパーセントの表記を変えることによって、自分の好きなように画像を表示させることができますので、ぜひ挑戦してみてください。
そして、これは特にレスポンシブWebデザインで多用される技術ですので、抑えておきましょう。
ここでもう一点解説しておきたいとことがあります。 それは、実は今取り上げた「object-fit」というコマンドは、なんと「Internet Explorer」では使えないのです！
試しに、今作成したものを「Internet Explorer」ブラウザで開いてみてください。画像が以前と同じように引き伸ばされうまく表示されていないことがわかると思います。
それで、この「object-fit」というコマンドを「Internet Explorer」でも使用できるようにする方法を以下に解説したいと思います。
「object-fit」コマンドを「Internet Explorer」でも使用できるようにする方法
１．「object-fit-images」ライブラリをダウンロードする
この上のサイトにアクセスして、緑色の「Clone or download」からダウンロードしてください。
そしてそのフォルダを開きましょう。
２．「ofi.js」ファイルをHTMLが保管されているフォルダにコピーする
このファイルは「dist」フォルダの中に格納されています。HTMLが保管されているフォルダに新たに「js」という名前のフォルダを作成し、その中に「ofi.js」ファイルを保管しましょう。
３．HTMLで「ofi.js」ファイルを呼び出し実行する
HTMLの</body>の直前、つまり<body>部分の一番最後に以下のコードを追記してスクリプトを読み込みましょう。
<script src="js/ofi.js"></script>
<script>
objectFitImages();
</script>
４．CSSの画像スタイルの部分に font-family: ‘object-fit: cover’; を追記する
ここで「font-family」が出てきたのを不思議に感じられるかもしれませんが、これ自体に重要な意味はありませんので、ここはコピペしましょう。
画像のスタイルを指定する部分にこれを追記すると以下のようになります。
.header img{
width: 100%;
height: 300px;
object-fit: cover;
object-position: 50% 10%;
font-family: 'object-fit: cover';
}
５．動作確認
これで、先ほどのページを再読み込みしてみましょう。
「Internet Explorer」でも以下のようにうまく表示できていれば正しくコードが記入できています。
６．補足（サンプルコード）
念のため、HTMLとCSSのサンプルとなるコードを以下に載せておきます。参考になさってください。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>はじめてのホームページ</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<img src="./img/topimage.jpg" alt="ページトップに表示される東京の夜景の写真">
</div>
<div class="main">
<div class="main-contents">
メインコンテンツ
</div>
<div class="right-navi">
右側のカラム
</div>
</div>
<div class="left-navi">
左側のカラム
</div>
<div class="footer">
ここにはフッターメニューが入ります
</div>
<script src="js/ofi.js"></script>
<script>
objectFitImages();
</script>
</body>
</html>CSS
body{
background-color: lightyellow;
}
.header {
height: 300px;
background-color: yellow;
}
.header img{
width: 100%;
height: 300px;
font-family: 'object-fit: cover';
object-fit: cover;
object-position: 50% 10%;
}
.footer{
height: 200px;
background: black;
color: #fff;
clear: both;
}
.main-contents, .left-navi, .right-navi {
height: 400px;
}
.main-contents {
background-color: red;
color: #fff;
float: left;
width: 80%;
}
.left-navi {
background-color: blue;
color: #fff;
width: 20%;
float: right;
}
.right-navi {
background-color: green;
color: #fff;
float: right;
width: 20%;
}
.main{
width: 80%;
float: right;
}
@media screen and (max-width: 600px){
.main, .left-navi,.main-contents, .right-navi{
width: 100%;
}
}
しかしながら…
確認したところ、「object-fit-images」ライブラリを使用しても「object-fit」は使用できるようになるものの、ズーム一を調整する「object-position: % %;」は動かないことがわかりました。
「object-position: % %;」のようにズームの焦点位置調整を「Internet Explorer」でも実行するためには、別の方法を取る必要がありそうです。
それで、次回は、根本的な解決策としてCSS側から画像を呼びだすという方法についてご紹介したいと思います。
まとめ
１．ホームページ上でうまく画像を表示させるためには、CSS側に「object-fit: cover;」と「object-position: 〇% 〇%;」を使用する。
２．「Internet Explorer」でも「object-fit: cover;」コマンドを使用するためには「object-fit-images」ライブラリを読み込む
でした。