質問: ### 一部にリンクを貼った画像をホームページのトップページに置きたいのですが、サイドに余白ができてしまいます。 **パソコン、スマートフォン、タブレットなどあらゆる端末で、余白ができないようにフルスクリーン表示させる方法を教えてください。**下にスクロールする分には構いません。 初心者なので、わからないことだらけで申し訳ないですがよろしくお願いします。 ``` ``` ``` p img { max-width: 100%; } ``` 完成イメージは「ホームページのトップページに画像が全画面表示される。」です。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/54b7604925295244907bc351e6e5cbdd.png)
回答: 「画像の一部にリンクを貼る」というものは「クリッカブルマップ」と呼ばれます。 画像をレスポンシブ化することは簡単ですが、クリッカブルマップをレスポンシブ化するには jQueryのプラグイン等を利用する必要があります。 ・クリッカブルマップをレスポンシブ対応する方法 ・イメージマップを使ってレスポンシブな画像内の好きな箇所にだけ、属性やクラスを与えたりする さて、クリッカブルマップの画像をレスポンシブ化することは上記のようにプラグインを使えばできるのですが、 さらにそれを「全画面表示」しようとすると難易度が一気に跳ね上がります。 まず「全画面表示」とはブラウザウィンドウを常に画像で覆う状態をキープする必要があります。 これ自体は背景画像使って`background-size: cover`を指定してやれば簡単に実現できますが、 背景画像にしてしまうとクリッカブルマップが使えません。 img要素を使って背景画像のbackground-size: coverと同じことをするには、img要素に対して`object-fit: cover`を指定する必要があるのですが、このプロパティはIE11で使えません。(※polyfillスクリプト使えば可) 更に何らかの方法で1つのimg画像をブラウザに対して全画面表示させたとして、 ブラウザウィンドウはサイズを自由に変えられますので、用意した画像の縦横比と異なる比率で 表示している時、必ず画像のどこかがマスクされて非表示となります。 その非表示エリアにクリッカブル領域があった場合、当然ですがそこはクリックできませんので 機能不全に陥ります。 ほんとうの意味での「全画面表示」ではなく、 単純に「ウィンドウの横幅いっぱいに広がる画像を配置して、高さは成り行き(場合によっては余白が出ても可)」でよければ 1. クリッカブルマップを指定する 2. img{width: 100%; height: auto;} 3. プラグインでクリッカブルマップをレスポンシブ化 の3ステップで実現可能かと思われます。 あ、ちなみにリセットCSS読み込んでる前提なので、読み込んでないなら`* {margin: 0; padding: 0;}`とでもして全ての要素から余分な余白を削除しておいてくださいね。