ホームページ制作講座

ホームページ制作のHTMLやCSS、JavascriptやDTDとかDreamweaverなどWEB制作について

CSS heightとwidthプロパティのvh/vw/vmin/vmaxの知識

CSS heightとwidthプロパティのvh/vw/vmin/vmaxに関係のある知識が必要な場合は、サーチ検索では下の関連キーワードで検索してもよいでしょう。


CSS heightとwidthプロパティのvh/vw/vmin/vmaxについてより理解を深めるための検索キーワードの組み合わせには、
CSS VH Support
CSS VH Unit
CSS Rem
VH Unit
CSS em Unit
CSS Height Units
Font Size Rem
CSS View Height
など。


基礎知識として、vはviewportの意味で、PCではブラウザ領域、スマホなどでは表示領域を差し、vhやvwで指定した場合は、viewportを基準にサイズを指定するです。

別の知識としては、相対的にサイズを指定するため、パーセント指定とおなじ種類になりますが、パーセンテージはコンテナ要素や親の要素を指定を継承し、スクロールバー幅なども含まれるため、指定する意図は異なり、少し古いブラウザだと対応されていなかったりバグが発生する可能性もあるである。特徴としては、vwとvhはそれぞれの表示領域の100分の1値、vminとvmaxはそれぞれ表示領域の値の小さい方、大きい方の値に対しての100分の1値となるというところにあります。


分類としてはプロパティおよびCSSにカテゴライズされる。

OGPとは


OGPに関する知識が必要な場合は、サーチ検索では下の関連キーワードで検索してもよいでしょう。

 
OGPについてより理解を深めるための検索キーワードの組み合わせには、
ogp 測定器
ogp 画像 サイズ
Facebook ogp
Twitter ogp
WordPress ogp
ogp 画像測定器
ogp スマートスコープ
ogp なっとう
HTML5 ogp
ogp プラグイン

など。

 
別の知識としては、主なSNSではFacebookTwittermixiなどに対してmetaタグの記述でページの情報を構造化して伝えることができるである。特徴としては、OGPの利点としては、SNSなどでシェアした際にURL以外にアイキャッチ画像やページタイトル、概要などを指定して表示できるところにあるというところである。

 
分類としてはSNSおよびシステムファイルにカテゴライズされる。

パララックスサイトの致命的な問題点

何年か前から、爆発的ではないものの、緩やかに見ることが多い縦型動的視差効果のサイト、いわゆる”パララックス”なサイト。

 

こういったWebサイトについては、実はフルフラッシュサイトを結構見かけたときと似たような印象があります。

 

端的にわかりやすくいうと、

 

”情報がちっとも入ってこない、ユーザ置き去りの自己満サイト”

 

です。

そもそも動きが気になっちゃって、脳が次の動きをとらえることに必死になってしまう気がします。

 

www.tifana.com

 

上記ではとてもやわらかく、パララックスなサイトの利点とデメリットを述べていますが、どちらかといえばWebサイトとしてのデメリットがいくつも列挙されています。

 

要約すると、手間(コスト)がかかる上に管理しずらく、設計と改修が面倒で重たいサイトになりやすいく、売り上げにつながりにくい上にスマホでは意味をなさない。

 

どうです、フラッシュサイトのディスが多くなっていた時と似ていませんか、致命的な問題点が。

 

 ちなみに、ウィンドウ高さが半分ぐらいのときには視差効果がちゃんと動かず、情報が正常に掲載されない致命的なパララックスサイトもありました。