CSS

デバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。


こんにちは、mayukouです。本日は、最近よく目にするヒーローヘッダーの全画面表示の方法をご紹介します。この方法があれば、デバイスに合わせて、タブレットやスマートフォン、パソコンに合わせて、全画面表示することができます。

スポンサードリンク

全画面表示する方法

CSSを使います。ヒーローヘッダーとなるタグに対し、以下のようなCSSを当ててあげましょう。

以上でOKです。
高さを100vhと設定します。横幅は、100%とします。

vhとは?

ビューポートは、画面サイズに合わせたパーセント表示となります。
つまり100vhとあれば、画面に対して100%表示するという設定になります。
高さを100%と表示した場合、.heroタグの親要素に対しての割合になります。

実際に使用しているサイト

私が製作したイラストレーターさんのサイトもこの方法を使用しています。

最後に

いかがでしたか?とてもシンプルなCSSコードで全画面に表示することができます。
ぜひ試してみてください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    モバイルフレンドリーなwebデザインするときにおすすめなツールまとめ

    みなさんこんにちは、mayukouです。今回は、スマホサイトやレス…

  2. illustration

    簡単!Illustratorでキラキラ星を作る方法

    みなさんこんにちは。mayukouです。だいぶ秋らしくなってきまし…

  3. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法

    みなさんこんにちは、mayukouです。ランディングページやネットシ…

  4. Web Design

    スキルアップ!Webデザイナーになるための勉強をしたい人にオススメ書籍まとめ

    みなさんこんにちは、mayukouです。webの業界は、日々進歩して…

  5. Web Design

    webデザインのトレンドと取り入れよう!デザインの参考になるwebリソース 〜海外編〜

    みなさんこんにちは、mayukouです。あっという間に土曜の半日が…

  6. jQuery

    横幅いっぱいに表示可能なスライダーのjQueryプラグイン 「Skippr」が便利!

    みなさんこんにちは。11月に入り寒くなりましたね。今年もあと2ヶ月と…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

[mc4wp_form id=”2540″]

最近の記事

instagramもやっています

This error message is only visible to WordPress admins

Error: No connected account.

Please go to the Instagram Feed settings page to connect an account.

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Photoshop

    あっという間に!Photoshopのブラシで写真を手描き風にする方法
  2. お仕事紹介

    【お仕事紹介】学生向けアンケートパンフレット作りました
  3. デザイン

    Adobe CCを導入しました。使ってみて感じたメリットとデメリットとは?
  4. Illustrator

    メリハリがつく!Illustratorでドロップキャップを作る方法
  5. Photoshop

    画像からフォントを探してくれる!Photoshopのマッチフォントが素敵。
PAGE TOP