このサイトについてAbout this Site

レスポンシブ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(インターネット・エクスプローラー)では,レイアウトがくずれる場合があります。この点については,ご容赦いただきたいと思います。

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


 このホームページは,次のサイトの無料テンプレートの No.30 を元にして作成しています。

無料ホームページテンプレート.comのロゴ

 このテンプレートは,テンプレート最下部に「無料ホームページテンプレート.com」へのリンク(クレジット表記)を入れることで無料使用が認められていますが,シリアルキーを購入して,クレジット表記を外すことが可能です。

 本校では,「無料ホームページテンプレート.com 」よりシリアルキーを購入することにより,クレジット表記を外しています。このシリアルキーは,トップページに埋め込まれています。(画面には表示されません。)

pagetop pagetop