Viewportの単位「vh・vw」
「vh・vw」について
cssの値に指定できる単位は「px」や「%」以外に「vh・vw」があります。
この「vh・vw」単位は、ビューポートを基準としたものです。
ビューポート (Viewport)とは、ブラウザウィンドウの表示領域のことを指します。
この「vh・vw」の単位は、レスポンシブ対応のサイトを作成する際にとても便利です。
Viewportの1/100の値がそれぞれ1vw、1vhとなります。
つまり、100vwと100vhで画面サイズと同じサイズになるというわけです。
ブラウザの幅が1200px、高さが1000pxの場合は、幅10vw=120px、高さ10vh=100pxとなります。
例えば、「vh・vw」の単位を使うことで、フルスクリーンレイアウトのコーディングを簡易化できます。
下記は、メインタイトルを画面中央に配置したいときのコードの例になります。
親要素「＃content」セレクタに、height: 100vhを指定することで、ユーザーのブラウザサイズと同サイズの高さを持つコンテンツを表示させることができます。
▼html
<body>
<div id="content">
<h1>タイトルが入ります。</h1>
</div>
</body>
▼CSS
body {
width: 100%;
height: 200vh;
}
#content {
width: 100%;
height: 100vh;
position: relative;
background-color: #5fd27f;
}
#content h1{
width: 100%;
text-align: center;
position: absolute;
top: 50%;
left: 0;
color: #fff;
}
スクロールすることで、ビューポート以外の範囲が表示されます。
今回はレスポンシブサイトの制作時に便利な「vh・vw」を紹介しました。
これまでは、よく「%」を使っていましたが、親要素に絡んでいて、コードが複雑化したりとやっかいな面もありました。今後はフルスクリーンレイアウト以外でも、積極的に「vw・vh」を利用したいと思います。
WEBデザインの基本
WEBグラフィック作成の注意点
①webセーフカラーを使用する
作業中に使用しているカラーは必ずしも他ユーザーのブラウザで同
▼予防措置としての対策
・常にRGBカラーモードで作業を行なう
・WEBセーフカラーを使用する
②画質とファイルサイズのバランスをとる
ファイルサイズが小さいほどWEBサーバーでの画像の保存と転送を効率よく行なうことができ、ユーザー側でも画像を短時間でダウンロードができる。
レイアウトの４つの原則
①近接の原則
・近接とは関連する項目をグループ化させることをいいます。
下記画像「例１」では見出し、本文のテキスト、テキストに対する補足の説明文が配置されています。見出しのフォントサイズは大きく設定されていて、見出しと文章は、内容によっては紐づけて読み取ることはできると思いますが、※の補足がどちらの補足なのかがわかりにくいです。
「例２」では見出し１と見出し２の間隔をとりました。
こうすることで、上下二つのまとまりに見えるようになりました。
このように、位置関係を明確にするだけで、視覚的にも知覚的ににも認識しやすいレイアウトを作ることができます。
「例１」
「例２」
②整列の原則
整列とはページ上のものを意図的に配置することをいいます。
整列の目的は要素の「統一化」にあります。要素になにかしらのルールを決めることで、見やすいレイアウトになります。
例えば名刺のデザインを例に挙げてみます。かなり極端になりますが、企業名 (肩書)、名前、連絡先等の要素が上下左右自由に配置されていては、とても見ずらくなり、瞬時にどこの誰なのか頭に入りずらくなります。
これを企業名 (肩書)と名前をひとまとまりにし、連絡先は下部に離して配置することで、要素にまとまりができます。さらに要素を左揃えにすることで、見えない基準線があるように感じます。そのうえで左端に赤線を入れたり、文字の強弱をつけることで、より要素の「統一感」が生まれます。
③反復の原則
反復とはデザイン上の何らかの特徴を、デザイン全体を通して「繰り返す」ことをいいます。
上記②「近接の原則」例２の見出しや本文も、反復の原則に沿っていることになります。また、ヘッダーのアイコンやヘッダーナビゲーション、 同じ種類のボタン、同じ種類のアイコン等も同様です。
サイト全体のデザインに統一感を出すだけでなく、ユーザーがそのサイトに慣れることを促進させる効果もあります。
④対比の原則 (コントラスト)
対比(コントラスト)とは、近くにある要素がお互いに異なっているように見えることを指します。 上記②「整列の原則」は全体の統一化をさせていましたが、そこに対比を取り入れることで、 特定の要素を目立たせる効果があります。
▼対比を取り入れる際のポイント
・背景色や文字色を変更させる (色相、明度、彩度をうまく活用する)
・文字の大きさを変える
「例1」：見出しのテキストのサイズを大きくしています。
「例２」：上記「例1」に対し、さらに見出しの背景色をつけています。こちらのほうがメリハリがでます。
今回紹介した原則は、当たり前だと思う方も多いと思います。
けれども、WEB制作の経験が浅い方にとっては、日ごろから意識していないとなかなか業務の中で取り入れることができないと思います。
常にサイト全体のバランスや、統一感は大切にしたいですが、「対比の原則」を有効に活用し、見やすく使いやすいサイト制作を心がけていきたいです。
