Author
R.U.I(ルイ)
ガジェットブロガー
ECサイト運営会社でWEBエンジニア&マーケター・WEBコーダーとして日々従事しており、会社ではWindows、お家ではMacの両刀遣い。iPad Proは毎日持ち歩いています。PCデスク周りを快適にすることやWEBデザインが好き。ガジェットやモノで生活に刺激を与えたいという想いで人におすすめしたいモノの紹介記事を軸にブログ運営をしているガジェットブロガーです。写真撮影が趣味になりました。
ルイログをGoogleニュースで読む
この記事の目次
CATEGORY

2次元のルイ

ブログやるなら SWELL × ConoHa WING がおすすめ!ルイログはこの構成で運営しています

ルイログ愛用ブログテーマSWELL

今選ぶBESTサーバー ConoHa WING

ルイログも愛用中!

YouTubeチャンネル開設しました!
ステマ規制への対応と記事内広告について

本サイト内のコンテンツはルイログが独自に制作しています。 メーカー等から商品提供を受けることもありますが、その場合は記事内にPR表記と提供を受けている旨を明記しています。 また、コンテンツの内容や評価に関する決定にも一切関与されていません。 アフィリエイトプログラムにより記事内で紹介する商品を購入することで当サイトに売り上げの一部が還元されることがあります。 詳しくはサイト運営ポリシーをご覧ください。

【コピペで簡単】cssで画面いっぱいに画像を魅せる方法。スマホもPCも大きな画像を見せたい!

cssで画面いっぱいに画像を魅せる方法。スマホもPCも大きな画像で魅せる

WEBデザインのトレンドというのはコロコロと真新しくなっていくものですが、そのトレンドの一つとしてファーストビューに大きく画面いっぱいに画像を表示させて魅せるデザインがあります。

インパクトが大きく、綺麗な画像でアプローチできればユーザーの心もキャッチしやすい。

そんなデザイン CSS をコピペで簡単に実装できる方法を紹介します。

PCもスマホもタブレットも、全ての端末で画像を全画面表示させることができます。

もくじ
この記事の著者
R.U.I

ガジェットブロガー

R.U.I ルイ

詳しいプロフィール

プロフィール

ガジェットやモノで生活に刺激を「ルイログ」。当サイトではAppleデバイスやその周辺機器、使えるソフト・アプリ、さまざまなガジェットや生活家電・モノをレビューしています。他にもWEBをデザインのコピペで簡単に使えるコードを紹介したりも。WEBエンジニアの方やPCが趣味・PCを使って仕事をしている方にとって役立つ情報を発信しています。カメラ・写真が好きなのでレビュー商品も写真を多め撮影し掲載することでより商品の魅力や細かいが伝わるよう心がけています。 プロフィール詳細やレビューガイドライン

CSSで画面いっぱいに画像を魅せる方法 | スマホもPCも大きな画像で魅せる

まず画像はimgタグで表示させるのではなく、背景画像として表示させます

使う CSS はたったこれだけ!

.header-bg {
  background-image: url("画像URL");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
}

backgroundは省略した書き方(ショートハンド)も使えるので、私はいつもショートハンドで記述しています。

こんな感じ。

.header-bg {
  background: url("画像URL") center center / cover no-repeat fixed;
  height: 100vh;
}

background系4行だったのが1行で書けます!スッキリだし便利便利。

PCでの見え方

cssで画面いっぱいに画像を魅せる方法。PCでの見え方

スマホでの見え方

cssで画面いっぱいに画像を魅せる方法。スマホでの見え方

Photo:バリ島の海辺にてホースライディングを楽しむルイログの人

CSSの記述でのポイントは2つ

1つ目は「background-size: cover;」によって背景画像を画面いっぱいに広げます。

background-sizeを数値で指定するのではなく「cover」とすることにより画面いっぱいに見えるようになります。

2つ目は「height: 100vh;」によって「ディスプレイの高さ」を100%で見せます。

heightを「100vh」とすることによって「ディスプレイの高さ100%」という意味となります。

この2つのポイントの組み合わせにより、「高さはディスプレイの最大値」「画像を画面いっぱい(背景全て)に広げて表示する」ということが実現できます。

CSSで画面いっぱいに画像を魅せる方法の注意点

1枚の写真を全てのデバイスで画面いっぱいにする方法となるので、デフォルト設定だとスマホ表示のときに写真の左右がカットされることになります。

なので、デフォルト設定で利用する場合スマホで見せたい写真の部分をど真ん中に配置する必要があります。

そうじゃない場合・・・上記の例写真だと、見せたい箇所が右の方にあるので、「background-position」で調整をしました。

スマホで見せたい箇所を完全に右端に配置した場合、

background-position:right;

で良いのだけれど、なかなか完全に端っこへの配置だとPCやタブレットのときに見栄えが良くないので、写真の構図としても少しはスペースを持ちたいところ。

そこで今回の例に使った写真で実際に使ったCSSは、

@media screen and (max-width:1600px) {.header-bg{background-position-x:93%;}

という形にしました。

画面サイズが1600px以下のとき、背景の横配置を左から93%の位置にする。

というものです。

この写真だと、この位置がベストになりました。

写真自体のサイズは横2700px * 縦1500pxです。

全ての端末で1つの写真を画面いっぱいに綺麗に魅せるということになるので、写真の編集や配置の微調整は必須になってくるかと思います。

CSSで画面いっぱいに画像を魅せる方法についてまとめ

cssで画面いっぱいに画像を魅せる方法。スマホもPCも大きな画像で魅せる

CSSは本当奥が深い。

色々組み合わせて、ワクワクするWEBデザインをしたいですね。

このWEBデザインはファーストビューの時点で画面いっぱいに画像が表示されるので、下にスクロールすることができるということを伝えるのも良さそうです。

下にスクロールするためのボタンを配置しておいたりとか。

写真を大々的に見せたいサイトで重宝するテクニックになりますね。

コピペで簡単に実装できるので、是非利用してみてください。

 

良きWEBデザインをっ!

▷WEBデザインカテゴリをチェック

cssで画面いっぱいに画像を魅せる方法。スマホもPCも大きな画像で魅せる

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
もくじ