本校のホームページは,「レスポンシブWebデザイン」という制作手法で作られています。
■【レスポンシブWebデザイン】とは
ホームページの画面を,画面サイズの異なるパソコン,タブレット,スマートフォンといった各デバイスに対して,それぞれ読みやすいレイアウトで表示させるための制作手法です。米国のデザイナーである Ethan Marcotte氏が考案し,2010年5月に発表したのがはじまりです。
「レスポンシブWebデザイン」の最大の特徴は以下の2点です。
- ◎画面サイズ(横幅)を基準にして,異なるレイアウトの切り替えを行う。
- ◎各デバイスに最適化されたレイアウトを,1つのHTMLで実現できる。
一般的に,パソコン用に作られたホームページをスマートフォンなどの小さい画面で見ると,その一部分しか見られなかったり,全体を表示すると文字が小さくなったりします。
しかし,「レスポンシブWebデザイン」で制作されたホームページは,パソコン,タブレット,スマートフォンの画面の横幅に従って,自動的に,それぞれの画面で読みやすいレイアウトに変わります。したがって,文字が小さくて読みにくいといった問題点が解消されるという特長があります。
パソコンにおいては,ブラウザ(インターネット閲覧ソフト)のウインドウの横幅を広くしたり狭くしたりすることによりレイアウトが変わります。また,タブレット,スマートフォンでは,縦位置で見る時と横位置で見る時では,画面サイズ(横幅)が変わるため,レイアウトが変わる場合があります。
「レスポンシブWebデザイン」では,横方向へのスクロールは必要ありません。そのため,基本的にはパソコンにおいても,横方向のスクロールバーは表示されません。
もうひとつの特長としては,スマートフォン用のホームページも作る場合,従来はパソコン用,スマートフォン用と,別々にHTMLで作る必要がありましたが,「レスポンシブWebデザイン」では,1つのHTMLで両対応ができるため,制作や更新の手間が省けます。
表示をシュミレータで見る
- このシュミレータは,タブレットやスマートフォンの表示を,パソコンで確認するためのものです。
- 古いバージョンのブラウザ(インターネット閲覧ソフト)では,正しく表示されないことがあります。
■本校では
近年,従来の携帯電話に代わってタブレットやスマートフォンが急速に普及してきました。
本校では,学校の情報や生徒の日頃の活動の様子を,地域や保護者の皆様に,パソコンだけでなくタブレットやスマートフォンでもストレスなく手軽にご覧いただきたいと考えて,「レスポンシブWebデザイン」の手法を取り入れたホームページにリニューアルしました。
■制作情報
このホームページは,W3C(World Wide Web Consortium)において策定されている「HTML5」と「CSS3」の規格によって作成されています。特に「CSS3」を使うことによって,この「レスポンシブWebデザイン」は実現されています。
現在のタブレット,スマートフォン及びパソコンのブラウザは,この最新の規格に準拠していますが,一部の古いブラウザには準拠していないものも存在しています。
古いバージョンのブラウザでは,期待されるレイアウトに正しく表示されない場合があります。
例えば,IE(インターネット・エクスプローラー)のバージョン8以前では,レイアウトがくずれる場合があります。中身が読めないわけではありませんので,ご容赦いただきたいと思います。
ご覧になるときは,可能な限り最新のバージョンでご覧ください。
このホームページは,次のサイトの 無料HTMLテンプレート No.57 を元にして作成しています。