ドロワーメニューをプラグイン無しで簡単に自作する方法 | マインドステージ
レスポンシブサイトやスマホサイトでは、ドロワーメニュー（スマホメニュー、ハンバーガーメニューとも呼ばれる）を必ずと言っていい程実装しますよね。jQueryのプラグインも豊富で、簡単に設定できますが、ブラウザの対応状況やバージョンによって不具合が発生したりと何かと面倒なこともあります。 そこで、今回はプラグイン無しで、CSSと簡単なjQueryでシンプルなドロワーメニューを自作していきたいと思います。 今回作成するメニューの仕様とデモ 今回は、シンプルなドロワーメニューを作成していきます。仕様としては、レスポンシブでコンテンツ幅が720px以下の場合、表示させます。また、レイアウトにはflexboxを使用しています。動きとしては、jQueryとCSS3のtransformプロパティを使用しています。 デモはこちら HTMLの作成 まずは、HTMLです。全体を<header>で囲み、ロゴ部分と
『センタリングの位置がずれる時』
Web仕事人の部屋札幌のWeb制作会社・株式会社メディアリュウム／株式会社WEBサクセスのスタッフHが、Web制作のTipsなどをお届けします。 ホームページのレイアウトでは、内容部分全体をセンタリングするのはよくあることですが、特に Firefox で見ているときにページを切り替えるとセンタリングの位置がずれたりしたことはないでしょうか？ ページによっては、文字量が少なかったりしてスクロールバーが必要なく収まってしまうページもあるかと思います。センタリングの位置がずれているのは、もしかしたらこのためかもしれません。 制作している中で心当たりがあったらまず、 ブラウザ右のスクロールバーが出ているか 確認してみましょう。 コンテンツ量が多い時にはもちろんスクロールバーが自動で出てきますが、コンテンツ量が少ないページには出ていなかったりしていませんか？実はこれが「ずれる」原因だったのです。 ち
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
