jQueryでドロワーメニューを実装する方法

jQueryでドロワーメニューを実装する方法を紹介します。
ドロワーメニューとは、アイコンをタップすると引き出しの様に開閉できるメニューの機能の事です。開閉部の分だけレイアウトに余裕ができるので、スマートフォンアプリやレスポンシブ対応のトップページなどにも取り入れられています。

レスポンシブデザインに役立つフレームワークBootstrap

レスポンシブデザインに役立つ、BootStrapについて紹介します。まずはBootstrapの全体像を理解しておきましょう。
BootstrapはTwitter社が開発したCSSのフレームワークです。通常CSSを書く場合、全てのスタイルを自分で作っていく必要がありますが、このフレームワークにはよく使われるスタイルがあらかじめ定義してあるので、ルールに沿って利用するだけで整ったデザインのページを作成できます。

ポートフォリオサイトとして使うのが効果的です。

HTML+CSSテンプレート、HTML5 UPの紹介

bootstrapを冠したテンプレートに限らず、優秀なものは沢山あります。今回は、HTML5 UPというHTML+CSSテンプレートを紹介します。HTML5 UPはレスポンシブに加えて多くのオプションがあるHTML+CSSテンプレートです。
CC BY 3.0なので個人・商用利用ともに可能ですが、適切な著作元表示と著作者サイトへのリンクが必要です。最低限のライセンスに気をつけてカスタマイズしてみましょう。

.slideToggleで開閉可能なパネル、アコーディオン

「アコーディオン」とは開閉可能なパネルのことで、表示領域の少ないデバイスや、ミニマルなデザインでは有効に活用できます。今回は.slideToggleメソッドと.next()メソッドで簡易的に実現しています。

.slideToggleメソッドは、jQueryオブジェクトにマッチした要素をスライドしながら、表示されている場合は非表示に、非表示の場合は表示します。また、.next()メソッドはjQueryオブジェクトにマッチした要素集合の各要素の直後の兄弟要素を取得します。

See the Pen .slideToggleでアコーディオン by mine333 (@kenic_ono) on CodePen.light

サイトをレスポンシブ対応する際の画像の扱い方

サイトをレスポンシブ対応する際には、画像もしくは画像を子要素に持つ親要素をスクリーンサイズに応じて柔軟に変化するようにCSSを指定しましょう。以下の例では、画像のサイズがブラウザーの幅に応じて変化するようにサイズを指定しています。

アニメーションイベントに関する記述を簡潔にできるanimate.css

今回はAnimate.cssについて紹介します。アニメーションイベントに関する記述をいくらか簡潔にできるので、アニメーションをCSSで指定する機会が多い時に参考にしてみて下さい。

Animate.cssは要素にclassをつけるだけで、簡単にいろいろな種類のCSS3アニメーションを実装してくれる便利なスタイルシートです。

[定番]レスポンシブ対応サイトのスライダーを実装したい時

レスポンシブ対応サイトのスライダーを実装したいときの例を紹介します。
今回のサンプルコードには、bxsliderというCSSテンプレートを用いています。
(※bxsliderはCDNを用いて取得)
また、スライダー下のキャプションテキストが表示される画像には自作の.jsファイルを用いています。

イメージの枠を消したい場合は、cssの.bx-wrapper .bx-viewportをコメントアウトして下さい。その他、オプションが多数ありますので、検索してみましょう。

PHPでファイル関数を使って簡単にファイルの読み書きをしよう

PHPを使えばファイル関数を使って簡単にファイルの読み書きをすることができます。また、json_encode関数の第二引数にJSON定数のJSON_UNESCAPED_UNICODEを指定すると、日本語はそのままでJSON形式に変換することが可能です。