メインビジュアルをブラウザ画面ぴったりになるように調整したい!

css

2022-06-23

パソコン、スマホ、タブレットでも
メインビジュアルが画面いっぱいになるように設定

パソコンだと存在感あるファーストビューでも、スマホだと横幅に合わせて小さくなってしまうことがありますよね。
画像の左右をカットして、スマホでも大きく印象的なメインビジュアルにしたいです。
今回は各ブラウザの高さに合わせて表示されるファーストビューについて調べてみました!

やりたいこと

・パソコン、スマホ、タブレットでも、画面に合わせてビジュアルのサイズを調整
・文字は画像で作らずコードで、画像の上に配置
・今回は1枚の画像を使用します。(PC用、スマホ用などサイズごとに作成しません)

パソコン表示例

スマホ表示例

オレンジの枠が画面サイズになるようなトリミングをめざしました!

サンプルページはこちらから

htmlコードを書く

下記は一例です。こんな風に書いてみました。

<section class="top-image">
<img src="./images/visual.jpg" alt="" width="1920" height="1440" class="top-image-main">
<p class="top-image-text"><span>ウエブ制作デザイン覚え書き</span>DESIGN <br>NOTES</p>
</section>

 

cssを書く(object-fitで、どのブラウザでも画面いっぱいにメインビジュアルを配置)

今回は画像をトリミングしてくれる「object-fit」を使用した一例です。

.top-image{
height:calc(100vh - 96px);/*ヘッダーの高さをマイナス。必要なければheight:100vhに。*/
position: relative;
overflow:hidden;
min-height: 400px;/*スマホ画面を横にした場合、文字が重ならないように*/
}
/*メイン画像の設定*/
.top-image-main{
min-width: 100%;
min-height: 100%;
object-fit: cover;
margin-top: -12%;/*画像のトリミング調整*/
}
/*上にのせるテキストの設定*/
.top-image-text{
color:#fff;
font-weight: bold;
position:absolute;
margin: auto;
top: 0;bottom:0px;left: 0;right: 0;
padding-left:8%;
display: flex;
align-content: center;
flex-wrap: wrap;
text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 30px, rgba(0, 0, 0, 0.1) -1px 1px 30px, rgba(0, 0, 0, 0.1) 1px -1px 30px, rgba(0, 0, 0, 0.1) -1px -1px 30px;
font-size:8em;
line-height: 1;}
/*小さいテキストの設定*/
.top-image-text span{
font-size:0.35em;display:block;width: 100%;margin-bottom:10px;
}
.top-image-text br{display:none;}/*はじめは改行させない*/

 

こちらはサイズごとの設定例です。

@media screen and (max-width: 1200px) {
  .top-image-text br{display:block;}/*改行*/
  .top-image-main{margin-top: 0;}/*画像のトリミング調整*/
}
@media screen and (max-width: 959px) {
  .top-image{height:calc(100vh - 200px);}/*このサイトの場合ヘッダーの高さが変わるため変更*/
  .top-image-text {font-size: 6em;}
}
@media screen and (max-width: 600px) {
  .top-image-main{object-position: right -100px top 50%;}/*画像のトリミング調整*/
  .top-image-text {font-size: 5em;}
  .top-image-text span{letter-spacing:0;font-size:0.3em;}
}
@media screen and (max-width: 374px) {
  .top-image-text {font-size: 4em;}
}

 

完成したらブラウザのデベロッパーツール等で様々な機種サイズに設定してチェックします。

object-fitをIEにも対応させたいときは…

IEの場合は「object-fit」が効きません。IEに対応させる場合「ofi.min.js」を読み込みます。
ofi.min.jsはこちらからダウンロードできます。

フッターに記述

例)
<script src="./js/ofi.min.js"></script>
<script>
  objectFitImages('.object-fit-main-image');
</script>

 

htmlの画像に上のクラスを追加

例)
<img src="./images/visual.jpg" alt="" width="1920" height="1440" class="object-fit-main-image">

 

cssに追加

例)
.object-fit-main-image{object-fit: cover;
font-family: 'object-fit: cover;';}

 

Edgeはobject-fit対応になったんですね、知りませんでした!よかったー!

-css

関連記事

cssのanimationを使ったGIFアニメのようなSVGのパラパラ漫画を作りたい!

CSSで作るレスポンシブ対応のスプライトアニメーション やりたいこと ・JavaScriptは使わず、cssのanimationを使った簡単なアニメーション ・レスポンシブ対応 ・拡大しても画質が変わ …

横並びのデザインをもっと自由に!フレックスボックスレイアウト

子要素のレイアウトを指定する ナビゲーションメニューやページネーション、並列のレイアウト等に欠かせないフレックスボックスレイアウトについてまとめてみました! 横の配置をデザインする「justify-c …

「ダークモード」対応の注意点と手順を知りたい!

Webサイトの「ダークモード」対応にチャレンジ! 「ダークモード」とは? パソコンやスマホ等のブラウザ画面に「ライトモード」と「ダークモード」があります。 明るい背景に暗色系の文字が「ライトモード」、 …

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは? 隣接セレクタ 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。 間接セレクタ 要素 …

カテゴリーごとにリンクの色を変えたい!属性セレクタを使ってCSSを設定しよう

classを付与しなくても属性値によってcssでスタイルをつけられる!お知らせのカテゴリーの色分けに便利! href属性、class属性、target属性、alt属性、src属性、type属性…これら …