CSS3について4

続、Dreamweaver CS6 の可変グリッドレイアウト（CSS3の Media Queries）んいついて
です。（レスプンシブデザイン）

img 要素に width, height 属性を付与すると比率がおかしくなるようです。
可変メディアでは、HTMLからメディアの高さおよび幅の属性を削除する必要が
あるという事です。

もし、width, height 属性を付与すると、以下のように画像の横幅が可変なのに対して、
縦の比率がおかしくなってしまいます。（上記画像）

自分が直接書いたものでなく、Dreamweaver の、[挿入] → [イメージ] からの
img要素の挿入や、アセット空の挿入ではこれらの属性は付与されません。
便利のような便利で無いような感じですが・・・・

しかしながら、CMSを使用しているケースなど、自動でこれらの属性が
付与されてしまうこともあります。その場合には、念のためにCSSの
 img 要素セレクタの箇所に「height: auto;」を追加しておくとこの現象を
抑えられるようです。


また、画面の小さいモバイル端末では「コンテンツを要約と集中」させること
が必要になってきます。

デスクトップのブラウザは画面が大きく、より多くのコンテンツや
情報を掲載できますが、画面の小さなモバイル端末ではコンテンツ量が
多すぎて見にくくなるなど、逆効果になることもあります。

「モバイルファースト」の考え方では、「コンテンツの要約と集中」が大切とされています。
小さな画面内でより強調して見せたいコンテンツ、より利用者が
求めているであろう情報を厳選するようにします。要は「引き算のデザイン」です。

大きい画面では、コンテンツは最大数で表示させるが、
小さい画面では、コンテンツ量を削減して厳選するということです。

それを、やるには、
「display: none」と「display: block」等を使い分けることで可能です。


.infomation { display: none; }

/* タブレットレイアウト : 481 px ～ 768 px。
モバイルレイアウトからスタイルを継承。 */

@media only screen and (min-width: 481px)
{ .infomation { display: block; }

これは、結構簡単です。
自分も既にトライしましたが、すぐに表示でできました。
便利で、使える記述法です。

それではまた、次回にて。