html4+css2の固定幅 → html4+css2のレスポンシブデザイン → html5+css3のレスポンシブデザイン
と段階的に更新してきましたが、この度jQueryを実装し、主にタブレットやモバイルで閲覧した際のメニューのコンパクト化やスクロールアップの表示などを実現しました。（今更感はありますが）
PC画面（固定幅）
タブレット画面（メニューをjQueryでコンパクト化）
スマホ画面（メニューをjQueryでコンパクト化し、イメージを画面上部に表示）
メニューや画像の表示位置を修正することで、小さな画面でもよりたくさんの情報がファーストビューで見えるようになりました。
今までスクリプト系はどうも苦手で、仕事でやむなくやっていた範囲以外ではアレルギー反応を示していたのですが、このjQueryは、ほとんど知識のない私でも比較的簡単に取り入れられるくらいの使いやすさ。
なにしろjQueryのロゴに「write less, do more.」と書かれているくらいなので。
また、プラグインもたくさんあるので、
ウェブサイトのUIをもうちょっと良くしたいけどどうしていいかわからない
という方は一度検討してみてはいかがでしょう。
cssのセレクタもそのまま使えたりするので、普段cssでウェブデザインしているデザイナーの方には入りやすいのではないかと思います。
jQueryを使うには、まず本家のサイトからライブラリをダウンロードし、任意の場所に保存、htmlのhead内にタグを記述。
詳しくはこちらのサイトが参考になると思います。
実際の使い方やスクリプトのサンプルなどは検索するとわんさか出てくるので、けっこう凝ったものでもすぐに実装できます。
あとはそれらを試行錯誤しながら勉強も兼ねて修正していくという感じで現在やってるのですが、実際に思ったとおりに動くと嬉しいし、もっといろいろなことを試したくなってきます。
ただあまり使いすぎると、逆に見辛くなったり、表示が遅くなったり、覚えた機能はみんな使いたがる素人丸出し感が出てしまう危険もあるので、あくまでユーザー起点で必要なものだけほどほどに使っていきたいと思います。
↓この記事がお気に召したらソーシャルで共有してくれると嬉しいです↓
（ボタンは記事の一番下）
0 件のコメント:
コメントを投稿