広島県立世羅高等学校同窓会の活動と投稿記事の紹介サイトです

サイト情報Site Info

このサイトについて


 本同窓会のホームページは,「レスポンシブ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.37 を元にして作成しています。

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

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

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


pagetop