ハンバーガーメニューを作った。

スポンサーリンク

マクドナルドのメニューではないですよ(笑)。

スマホでブログやホームページを見た時に画面上部に表示される三本線です。

それをハンバーガーメニューと言います。

ハンバーガーメニューは何となく難しいと思って敬遠していましたが、そろそろ導入しないといけない感じになりまして・・・

なので、重い腰を上げたのであります。

CSSで出来る?

得意なCSSで出来るか調べました。結論から言うと出来ます。

しかし、かなりCSSを書かないといけない。めまいがする(笑)。

CSSはダメだなって感じでした。

jQueryでハンバーガーメニューを作る

CSSでハンバーガーメニューの導入は諦めてjQueryを使うことにしました。jQueryはほとんど使ったことがないので戸惑いましたが、半日かけてようやくハンバーガーメニューを作ることが出来ました。

jQueryでは10行ほど書けば良いだけ。慣れると1時間もあればハンバーガーメニューが作れるかなって感じです。

Google先生は偉大だ(笑)。先生に聞くだけでハンバーガーメニューが作れるのですから。

スマホのみで

ハンバーガーメニューはスマホ限定で表示させたいのです。なので、メディアクエリを使いました。

メディアクエリとは端末の画面幅に合わせて表示内容を変えることです。

ブログやホームページはスマホで見られることが圧倒的に多いので、スマホに適した表示にしないといけません。そんな時にメディアクエリが最高です。

MacBookが欲しい

ホームページはiPadで作っています。ほとんど不便はないですが、MacBookが欲しいね。

単なる物欲ですけどね(笑)。MacBookでホームページ制作するのがオシャレだと思ってますので(笑)。

ま、高くて買えないけども。

iPadで頑張ります。

とりあえず、ホームページを沢山作りたい。実は8パターン作りましたが、あまりにイケてないので公開をやめました。1つずつ地道に作り直そうと思っています。

やる気が湧かないので作ってませんが・・・

まとめ

久々にブログを書きましたが、楽しいですね。ホームページ制作は頭をフル回転しないといけないですが、ブログの方が気が楽です。

ひょっとするとWebデザイナーよりブロガーの方が向いていたりして(笑)。

ま、両方ともやるつもりですけどね。

どちらか片方に偏ることなく生きていきたいと思います。

おしまい。