2016年11月20日(日)
CSS3のビューポートユニットでRWDを簡単に実現する方法
CSS3 の Values and Units モジュールという、CSSのプロパティに設定できる値や単位を定義している仕様の中から、以前に「calc()」を紹介したことがあります。今回は、「vw」と「vh」の紹介をしていきたいと思います。
ビューポートユニットとは？
「vw」と「vh」は、CSS Values and Units モジュールの中のViewport Units という項で紹介されています。ビューポートは、Webサイトを表示しているブラウザの表示領域のことを意味します。つまり、ビューポートユニットというのは、ブラウザの表示領域に対して、どのくらいの幅または高さにしたいか、ということを指定することができるものです。レスポンシブWebデザインが当然となっている現在ですが、％指定をしてもどうしても親要素のサイズに影響されて、思うようにいかないというケースも多々あるのではないかと思います。そんな時は、ぜひビューポートユニットを使ってみてください。
記述方法
記述のルールはとてもシンプルです。pxや%などでサイズを指定するのと同様に、vwやvhを使ってください。おそらく、すでに勘付いている方も多いと思いますが、vwはビューポートの横幅、vhはビューポートの高さを基準として、単位としてはビュー...
0
0
0
0author:
インターネット・アカデミー
https://www.internetacademy.jp/blog/ja/
インターネット・アカデミーは、日本初のWeb専門スクールです。母体がWeb制作会社のため、制作現場のノウハウが詰まったカリキュラムで、初心者からプロのWebデザイナー/Webディレクター/ITエンジニアを数多く輩出しています。
‹ PREV
2017年のWEBデザインのトレンドをまとめた「The Future of Webdesign: Trends 2017」
NEXT ›
WCAG 2.0やSection508を基準に任意のWebサイトのアクセシビリティチェックをしてくれる・「Tenon.io」
Ads
インターネット・アカデミーは、日本初のWeb専門スクールです。母体がWeb制作会社のため、制作現場のノウハウが詰まったカリキュラムで、初心者からプロのWebデザイナー/Webディレクター/ITエンジニアを数多く輩出しています。インターネット・アカデミーの記事『CSS3のビューポートユニットでRWDを簡単に実現する方法』についてまとめています。
この記事は特にレスポンシブ・CSS3について書かれており、 HTML+CSSコーディングのカテゴリーに分類されます。気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のインターネット・アカデミーで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとインターネット・アカデミーの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。
