| Tips 4 | リストのレイアウト、表示項目を変更させたい | JavaScript |
| ＞＞ | point jQueryを読み込んで使用 | ||
| ＞＞ | point 記事一覧を見せるブログなどで使える |
多くの項目を一覧表示させる場合、縦に長くなってしまうことがある。この対処方法として表示する情報を減らしたり、左右に並べたりすることができるが、これらの表現は「delicious」（delicious.com/popular/）などでも採用されているので見たことがある人も多いだろう。
項目の並べ方をWebサイトを訪れた人が変更できれば、ユーザーにとっても見やすいはずだ。「Janko At Warp Speed」の「Adaptable view - how do they do it?」（www.jankoatwarpspeed.com/post/2009/07/07/Ada
ptable-view.aspx）で取り上げられている方法を参考に考えてみよう。表示スタイルを切り替えるにはいくつかの方法があるが、クリックしてclassを追加・削除して、用意してあるCSSを適用する方法を使ってみよう。
まず、HTML【1】とCSS【2】を用意しよう。CSSにはclassを追加した場合の指定も記述してある。Java
Scriptではクリックごとにclassを追加・削除する指定をしてある【3】。
【1】HTML
【2】CSS
【3】クリックでclassを操作するJavaScript
ここでのサンプルではコンパクト表示の場合にliに対して「width:50%;display:inline-block;」とすることで横並びにしてある。このあたりの並べ方は使う場面に合わせて変更すればよいだろう【4】。
【4】表示したところ
