レスポンシブWebデザインの試作

レスポンシブWebデザインとは、様々な画面サイズで表示が可能なレイアウト・デザインということになる。以前のガラケー携帯と異なり、スマートフォン(以下、スマホ)ならパソコン(ＰＣ)サイトも見られなくはないが、最近ではモバイルファーストというくらい、スマホでより見やすい対応が当たり前になっている。

ちょうど２年後、ある学会の支部総会があるので、これを機にいまどきの参考書と他の学会総会のホームページを参考にしてレスポンシブな支部総会ホームページ(以下、支部総会ＨＰ)に挑戦することになった。

近年のWebデザインのトレンドは、画面内にたくさんの情報を盛り込んだ２カラムや３カラムからシンプルな１カラムレイアウトのサイトが多くなっているという。とはいえ、ＰＣはトップのタイトルに続いて左カラムにナビゲーションを置いて、右カラムがインフォメーションの２カラム。スマホではユーザビリティを考えて１カラムとした。また、目障りな飾りを捨てたシンプルなデザイン(フラットデザイン)を心掛けた。

参考書を見ながら試行錯誤して、やっとスマホで見やすく表示することができた。次にＰＣでは左カラムに固定したナビゲーションを、タブレットスマートフォンではドロップダウンする三本線のハンバーガーメニューとすべくjQueryのプラグインSlickNavをダウンロードした。だが解説通り実装しても表示されず。システム・エンジニア(ＳＥ)の次女に誤りを指摘してもらい、なんとか格好がついた。
	スマホ画面表示

支部総会ＨＰのタイトルバックは、「御輿渡御図」文久２年(1862)栃木県指定文化財である。これは日本東洋医学会関東甲信越支部栃木県部会幹事で塩谷医療史研究会の戸村氏を通して、所蔵する喜連川神社の了解を得た。支部総会ＨＰアドレス(http://toyo-tochigi.matrix.jp/)は、栃木県部会ホームページhttp;//toyo-tochigi.sakura.ne.jp/ のサブドメインで無料。

あとは正式に日程、会場、プログラムが決まれば、参加者にお知らせすべき情報をページ上に掲載するのみ。

2017.４.１