モバイル対応しました。 – コーディング編

CSSで作る三角形

CSSについて書くとするならばフキダシのようにするために付けた三角形くらいでしょうか。とても有名で簡単なテクニックなのでご存じの方も多いかと思いますが仕組みと共に紹介します。

まず、のちに三角形となる「空の要素」を作ります。これはあくまで見た目の飾りであって意味を持たないので、HTMLにdivなんかで作るのは不適切です。なのでCSSのbeforeやafterの疑似要素＋content属性を使いましょう。

空要素が出来ました。これにボーダーを使って三角形を作ります。
仕組みは至って簡単です。

ボーダーです。

ボーダーは上下左右それぞれ別にプロパティを設定できます。
色を変えてみましょう。

ボーダーを太くしてみましょう。
ボーダーの境界はこのようになっています。

次に要素が大きさを持たなかったらどうでしょう。
形が見えてきましたね。

1辺だけ残して他のボーダーの色を透明にすれば三角形の完成です！

三角形の大きさはボーダーの太さで調節してください。それぞれの太さを変えることで色々な形の三角形が作れます。

このようにしてCSSのみで三角形が作れるわけです。ソースコードは以下の様になります。

これはあくまで一例なので実際には色んな書き方が出来ます。
このままだと少し冗長な感じもするので以下の方がいいですかね。

位置は状況に応じてpositionを使うなりして調整してくださいね。
また、当ブログのモバイルメニューのようにこの三角形にボーダー（境界線）を付けたいという場合は三角形をbefore疑似要素とafter疑似要素で色違いで２つ作って、ずらすように重ねれば再現出来ます。
フキダシなどが簡単に作れますね。

クリックでサブメニューが現れるようにする。

普通にclickイベントを使い、ボタンをクリックした時にslideToggleエフェクトで２階層目が現れるようにするだけです。

ただ、これだけだとメニューボタンをクリックしてメニュー一覧を開き、そのままサイト内検索ボタンを押すとテキストフォームも現れ、この２つが重なってしまいます。

これを回避するために、それぞれのボタンをクリックした時に、もう一方の要素をhideエフェクトで隠れるようにします。要素が元から隠れている場合は何も起こらないのでif構文で条件分岐させなくとも、これだけで問題ありません。

以下の様になりました。

ちなみにslideToggleは通常、スライドダウンで現れ、スライドアップで隠れるようになっています。画面上固定のメニューの様に「上から下に要素が現れる場合」にしっくり来るアニメーションです。

しかし今回作りたかったのは逆。下から上にニュッと現れるメニュー（アニメーション）です。
ではこれをどうやって逆にすればいいのか。

答えは簡単、CSSの位置指定をtopではなくbottomで指定するだけで自動的に逆になってくれます。賢い奴です、jQuery…。

どこを触ってもサブメニューが閉じるようにする。

これは「指定した領域外をクリックしたら、その領域を閉じる」と考えがちなのですが、逆に作ります。
どこをクリックしても指定した領域が隠れるようにして、その領域内をクリックした時だけはそのイベントが起きないようにするんです。

ソースを見てみましょう。

ドキュメントをクリックしたらメニューが隠れるようにしています。

stopPropagationにより、メニュー自身をクリックしたときは、そのクリックイベントが親要素に伝わらないようにしています。これで、上で設定した「ドキュメントをクリックした時の挙動」が.menu内では起こらなくなります。

しかし、これだけだとまだ不十分です。この状態で試してみると、メニューボタンを押した時にメニュー一覧が開かなくなってしまいました。
勘の良い方はお気づきかもしれませんが、メニューボタン自体もドキュメントですので、ボタンも「要素を閉じるクリックイベント」から除外しなければいけません。

書き方は同じなので最終的に以下の様になります。

TOPに戻るボタン（スムーススクロール）

ついでにTOPに戻るボタン（ページ最上部に戻るボタン）の作り方を。

まずHTMLでボタンを作ります。

ここはなんでも良いです。pじゃなくてdivでもいいですし。aだけでもいいですし。
ちなみにa要素のhref属性が#topとなっていますが、これはid名やname名に”top”と付けられた要素がなければ、ドキュメントの先頭に移動するようHTML5では正式に決められています。
もし他に#topの要素があれば、そちらが優先されてそこまで移動します。

そして肝心なjQueryです。

これで.toTopをクリックした時にドキュメントのトップまでスクロールするようになりました。
しかし、これだけでは#topは使っていませんね。

せっかくなのでTOPへ戻るボタン以外のページ内アンカーリンクもスムーススクロールにしちゃおうと言うことでhref属性が#から始まるa要素全てをターゲットにして、その移動先をそのアンカー名が付いた要素にするわけです。
やってみましょう。

はい、これで先ほどのボタンを押してみてもスムースに移動しません。一瞬で移動してしまいます。

何が起きているのかと言うと、至極当然です。5行目では、そのid名を持った要素を見つけてターゲットとするわけですが、id名topの要素なんて作ってません。結局topに戻るボタンのhref属性には、bodyなりheaderなりに付けたid名を指定しなければならないのです。もしくはbodyなりheaderなりにtopとid名を付けるか。
スクリプトをtop用にもう一つ書いてもいいですし、#topの場合～なんて条件分岐させてもいいですが無駄なので、最上部にある要素にid名を付けるのが手っ取り早いでしょう。

遠回りしてしまいました、すみません。
スピードを変えたい場合は500の部分を任意の数字にしてください。単位はミリ秒です。
イージングはswingの部分を。プラグインを読み込まないとlenearとswingしか使えませんが。
（他のイージングを使いたい場合はjQuery Easing Pluginのサイトからどうぞ。）

スムーススクロールとハッシュの利用

上記のスムーススクロールの記述では、return falseでa要素の本来のリンク機能をとめているのでページの遷移が起こらずURLの最後に「#id名」がつきません。これは僕にとってプラスなのですが、人によってはマイナスになります。
例えば:targetの疑似クラスを使いたい場合や、ブラウザの戻るボタンで元の位置まで戻したい場合です。

そのような場合は次のようにします。

8行目でページを遷移させています。これで通常のリンクで飛ばしたようにハッシュがURLの最後に付きます。