このサイトについて

レスポンシブWebデザイン


 本校のホームページは,「レスポンシブWebデザイン」という制作手法を使って作られています。


【レスポンシブWebデザイン】とは

 PC,タブレット,スマートフォンといった画面サイズの異なる各デバイスに対して,PCではPCに,タブレットではタブレットに,そしてスマートフォンではスマートフォンに最適化されたレイアウトで表示するサイトを実現するための制作手法の1つです。米国のデザイナーである Ethan Marcotte氏が考案し,2010年5月に発表したのがはじまりです。

 「レスポンシブWebデザイン」の最大の特徴は以下の2点です。

◎ 画面サイズ(横幅)を基準にして,異なるレイアウトの切り替えを行う。

◎ 各デバイスに最適化されたレイアウトを,1つのHTMLで実現できる。

 「レスポンシブWebデザイン」で制作されたページは,PC,タブレット,スマートフォンといったデバイスの画面の横幅の違いにより,また,PCにおいてはブラウザのウインドウの横幅を変更することにより,自動的にレイアウトが変わり,各デバイスに最適化された画面を表示します。
 同じタブレット,スマートフォンでも,縦位置で見る時と横位置で見る時とでは,レイアウトが変わる場合があります。

 「レスポンシブWebデザイン」では,横方向へのスクロールは必要ありません。従って基本的には横方向のスクロールバーは表示されません。

表示をシュミレータで見る

※ このシュミレータは,PCでタブレットやスマートフォンの表示を確認するためのものです。


本校では

 近年,本校の保護者の間にもタブレットやスマートフォンが急速に普及してきました。
 本校では,保護者の皆様に生徒の日頃の活動の様子をパソコンだけでなく,タブレットやスマートフォンでもストレスなく手軽にご覧いただきたいと考えて,レスポンシブWebデザインのホームページにリニューアルしました。


対応ブラウザ

 このホームページは,現在W3Cにおいて策定中の「HTML5&CSS3」の規格によって作成されています。それは,現在の多くのタブレットやスマートフォン及びブラウザが,この最新の規格に準拠してきているからです。

 しかし,中にはこの規格に準拠していないデバイスも存在しています。
 特定の機種やブラウザ,あるいはブラウザのバージョンによっては,期待されるレイアウトに正しく表示されない場合もあります。特にバージョン8以前のIE(インターネット・エクスプローラー)では,レイアウトがくずれる場合があります。この点については,ご容赦いただきたいと思います。

可能な限り,ブラウザは最新のバージョンでご覧いただきたいと思います。


制作技術情報

 このホームページの制作においては,Adobeの次のページを参考にしています。
また,そこに掲載されているサンプルデータをベースにして制作しています。

可変グリッドレイアウトで実現するレスポンシブWebデザイン(前編)

可変グリッドレイアウトで実現するレスポンシブWebデザイン(後編)

pagetop