電網通信あみあみ

これならできちゃう!

【 魅力あるサイトを作成しよう(13) -- アコーディオンメニュー 】

あみが新しくサイトをデザインしています。

ami
うーん、これじゃ画面に入らない・・・
gen
ずいぶん困っているみたいだね。どうしたの?
ami
PC用のサイトをスマートフォンで見ても平気なように作り直しているの。
でも、小さい画面にはメニュー項目が全部入らなくて。
gen
確かにPCより画面が小さい分、そのまま入れるのは難しいね。
ami
項目を減らすわけにもいかないし、どうしようかな。
gen
だったら「アコーディオンメニュー」の形にしたらいい。
場所を取らないし、多くのスマートフォン対応サイトで使われているよ。
ami
アコーディオンメニューって?
gen
項目の部分を開いたり閉じたりが可能なメニューのことだよ。
こうして必要な部分だけ出せば、邪魔にならないんだ。

↓クリックしてみよう

メインメニュー

HOME
検索
おすすめ
ランキング
SALE

ami
たしかにこれなら便利かも。
でも、こういう風に動かすのは難しそう。
gen
心配いらないよ。前説明した「jQuery」は覚えているかな?
ami
えーと、確かスライドショーを作るときに教えてもらったよね。
おかげでFlashを使わずに画像を動かせたよ。
[簡単なスライドショーを設置してみよう!]
gen
今回あみが使うにも「jQuery」は役立つはずだよ。
スマートフォンのすべてがFlashに対応しているわけじゃないからね。
それに、アコーディオンメニューも色々な人が作ってくれているよ。
[参考サイト:aqua create(アクアクリエイト)]
ami
本当だー。
デザインやカラーも調節すれば、理想のメニューができそう。
ありがたく使わせてもらいまーす。
gen
これを使えば一つのページにたくさんのメニュー項目を置けるよね。
スマートフォンサイトは階層を深く作ると見づらくなってしまうんだ。
ami
確かに、最初のページまで戻るだけでも大変かも。
gen
うん。だから、「広く浅い」構造を目指して作ってみよう。
ami
わかった、やってみるね!
次回をお楽しみに!