レスポンシブウェブデザインとは
レスポンシブウェブデザインとは、スマートフォン用に作られたwebページではなく、パソコン用のwebページを、cssによりスマートフォンの画面サイズに合わせたレイアウトに変え、パソコン、スマートフォン、各端末の違いに関わらず、webページのレイアウトを崩さないようにする、またはそのデザインを取り入れたwebページのことを言う。基本は、各端末の画面サイズに合わせ、cssで各端末ごとに横幅を指定すること。
レスポンシブ・ウェブデザインでなくとも、スマートフォンはwebページを表示可能だが、どうしても画面サイズが、小さくなりすぎ、文字、画像の視認性が著しく低下、それに伴う画面のズーム等、操作の煩雑さも加わる。
このような問題、欠点を解消するのに、レスポンシブウェブデザインは存在する。
CSS3で追加されたMedia Queries
cssファイルに、@media screenからはじまる、cssを実装することで、レスポンシブウェブデザインは完了する。@media screen and (min-width: 900px) {
div.menu { width: 300px; float: left; }
}
その端末の表示幅が900px以上の時に適用するcssスタイル 。主にパソコン等、表示幅が広い時には、div.menuの枠組みを300pxごとに横並べにするcssの意。
@media screen and (max-width: 899px) {
div.menu { width: 100%; }
}
その端末の表示幅が900px未満の時に適用するcssスタイル。スマートフォン等、表示幅がせまい時には、div.menuを、縦並びにするcssの意。
@media screen の効果を発揮するには、htmlの<head>～</head>にメタタグの記述を加えなければならない。
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
viewportの設定は、多様な記述があるが、もっとも一般的な記述を掲載している。
さらにcssファイルを表示幅(端末と置き換えることも可)ごとに変えることも、簡素に実装できる。
htmlに、適用cssファイルを記入するだけで可能となる。
<link href="smart.css" rel="stylesheet" type="text/css"
media="screen and (min-width: 0px) and (max-width: 480px)" >
<link href="tablet.css" rel="stylesheet" type="text/css"
media="screen and (min-width: 481px) and (max-width: 900px)" >
<link href="pc.css" rel="stylesheet" type="text/css"
media="screen and (min-width: 901px)" >
smartはスマートフォン、tabletはタブレット、pcはパソコンの意。
paddingやmarginを使っての余白、スペースの細やかな調整は必要となるが、一定以上のhtmlとcssの知識があれば問題なく実装できるはずだ。
ブログのレスポンシブウェブデザイン
ブログでは、レスポンシブウェブデザインを採用したテンプレートにより、極、簡素に実装できる。ブログサービスによっては、わざわざ、レスポンシブウェブデザインを採用しなくとも、スマートフォン用のページが自動生成されるブログサービスもある。
ちなみに私のブログもBloggerで運用しているが、外部のFreeテンプレートを利用して、レスポンシブウェブデザインを実装している。
http://blogtemplate4u.com/
