簡単!スマホ用メニュー|3本線のハンバーガーメニューと、その下に「menu」という文字

こんにちは、寒くなってきました。
副業フリーランスも、うさぎ雑貨制作も最近ちょっとサボり中のマッツォです。

久しぶりによく使うコードをメモとして残しておこうと思い久しぶりにブログを開きました。

スマートフォンのときだけ3本線のメニューが右上にでてくるアレです。

やりたいこと

  • 3本線のハンバーガーメニュー
  • 3本線の下に「menu」と言う文字もついているもの
  • クリックして開いている時は「これクリックしてるよ」とわかるようにボタン部分の色は暗くする
<div class="menu_button"><span></span><span></span><span></span>MENU</div>
<ul id="hNavi">
	<li><a href="index.html">トップ</a></li>
	<li><a href="info.html">企業情報</a></li>
	<li><a href="place.html">拠点一覧</a></li>
	<li><a href="sitemap.html">サイトマップ</a></li>
</ul>

そして下のJSは、スマホのときだけメニューがでるようにする部分です、headタグの中に書きましょう。

<script>
	if (window.matchMedia('screen and (max-width:768px)').matches) {
		//メニュー
		$(function() {
		    $("#hNavi").css("display","none");
			$(".menu_button").on("click", function() {
				$("#hNavi").slideToggle();
				$(".menu_button").toggleClass("menu_close");
			});
		});
	}
</script>

これで準備はできましたが、実際三本線にしたり、メニューに色をつけたりするのはCSSで行います。
下は例。スマホ用のCSSに書いて下さい。
色などお好きに変更してみてください。

.menu_button {
    position: absolute;
    top: 22px;
    right: 10px;
    background-color: #FA0046;
    border-radius: 5px;
    font-size: 12px;
    font-weight: bold;
    padding: 5px 8px;
    color: #FFF; }
    .menu_button span {
      display: block;
      background-color: #fff;
      height: 2px;
      margin-bottom: 3px; }
  .menu_close {
    background-color: #CE5E60; }
  #hNavi {
    position: absolute;
    top: 70px;
    right: 10px;
    z-index: 999;
    border: 2px solid #CE5E60;
    border-radius: 3px; }
    #hNavi a {
      background-color: #FBF7F7;
      display: block;
      padding: 10px 20px;
      color: #FA0046;
      border-bottom: 1px dotted #CE5E60;
      text-decoration: none;
      text-align: right; }
    #hNavi li:last-child a {
      border: none; }
  #hNavi:after {
    content: "";
    position: absolute;
    top: -8px;
    right: 12%;
    margin-left: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #CE5E60 transparent;
    z-index: -1; }

※動かない場合

jQueryを読み込んでいますか?orその読みこみより前に記述していませんか?

文字が左にグググッと寄って重なって表示されてしまう時の対処法

先日、IE8でこんな風にページ内の文字が表示されてしまいました。

文字が寄る

動き的には、最初はちゃんと表示されるものの、JSを読み込んでいるタイミングでこうなってしまっている様子の動き方をする。

そこでページ内にあるjQueryのプラグインをひとつづつ取っていってもなぜか解消されない。
あまりナイ症状なのか、それとも基本的ななにかをすっ飛ばしているからこうなったのか?(基本的な部分のCSSを見直してみたつもりだけど変なところは発見できず)

ググると「Win8のバグだ、MSゴシックなどのWindows系フォントをfont-familyで指定するといい」と書いているのでそうしてみたが・・・・だめだった。

絶対に原因はある、しかし時間もそうかけていられない状況で・・・・

最終手段。
IE8で発生する問題ならIE8辞めよう。

といっても、IE8が絶対条件の環境のWeb制作ですので、そのブラウザサポートしていません、とは言えない。

そこでこれだ。

<!--IE7モードで表示-->
<meta http-equiv="X-UA-Compatible" content="IE=7">

こういう書き方をすると「IE7の表示方法をしてください」とIEに命令できるのです。
IE8以下しか許されていない環境下、IE7にて見ていただくしかないという苦肉の策ではありますが、ひとまずはこれで解消されました。

IE8なんか切り捨てたいけれど、会社がイントラの都合上どうしてもIE8。
Updateされないようにしっかりシステムいじってらっしゃいますし、全社IT監査のときにはIEのバージョンを無理やり上げていないかの見回りまで来ます。

なのでIE8はまだしばらくは仲良くやっていかなくてはいけない共同体です・・・

formに入力した文字、CGIに遷移したら文字化け!?修正はたったこれだけ。

formのテストをしていました。
必須項目を入力して「送信!」

そしたら・・・・form.cgiの画面にて・・・・

これ。

文字化け

よく見ると、どうやらEUC-JPでなければならない様子。

でも、ページもうUTF-8で作ってるしな・・・・・

そう思ってどうにかこのままでなんとかできないかとぐぐってみたところ、formタグにひとつ足すだけでどうやらいけそうだ。

accept-charset="EUC-JP"

ただし、IE対応とか、戻るボタンで戻ってきた場合はまたこのひとコードだけではすまないのですが。
しかし、formだけなんとかすれば良いというのはとても助かりました。

ひとまずmemo!

プラグイン「Bogo」で多言語サイトを簡単に作る!

英字で会議(ぱくたそさん)

グローバル化は進む進む。
外国語対応を求められる制作も増えてきた今日この頃です。

ww

WordPressで日本語と、翻訳した英語のページを切り替えする機能が欲しいとき、とっても助かる「Bogo」というプラグインがあります。
これを利用して英語切り替え対応のサイトを作ったので、備忘録を書きます。 “プラグイン「Bogo」で多言語サイトを簡単に作る!”の続きを読む

ディレクションができないとコード書けたってつらたん

職業訓練でWEBのお勉強をしたのちに、私がお世話になっている会社。
実は制作会社ではありません。制作、やる会社です。
ITな人だけでない集合で、それぞれの特技が見事に分散しており、いい具合に助け合える素敵な会社です。

私はWEBデザイナーとして(何もできへんくせに)雇ってもらえたのですが、少しずつかけるコードも増えてゆき、ホームページとやらが作れるようになりました。

だがしかし。 “ディレクションができないとコード書けたってつらたん”の続きを読む

超超初心者のころナビで困ったこと色々思い出してみた

最初のころは理解に苦しんだul li の横並び(float)などなどは、自分としてはとても混乱したところかな、と思います。
例えば、横並びにはなったけど、高さ(height)が反映されないよー!とか。

今回は、ナビゲーションを2つご紹介します。 “超超初心者のころナビで困ったこと色々思い出してみた”の続きを読む

ほんの少し傾いた写真の角度を一発補正する方法 

写真をみると「あれ、なんだかちょっとナナメな気がする・・・・。」そんなときってありますよね。
ネットショップ用に撮った商品画像でよくそんなことが起こる私です。(瓶ものがななめをむいております)

今回は、私が先日通りすがりにとった風景写真で説明したいと思います。

黄色の線が、写真にまっすぐの線をひいたものです。
写真のまっすぐが出るといいかなぁって思うのは白い線。橋のラインが右下がり気味なので、そこを基準に角度補正をしたいです。

私はPhotoshopCS6を使っていますので、その画面をキャプチャしつつご紹介します。

まっすぐ?

ものさしツールをつかえば、一発解決。

ものさし

橋の部分で、まっすぐの基準になりそうなところを始点と終点決めてドラッグ!(わかりますか?橋のところにあるうすーい線!ここをドラッグしています)

ものさしひく

角度入力

回転

まっすぐになった

どうでしょうか。

ななめ感が解消されましたか?

デザイナー出身ではない私やあなた?は、「どうナナメなのかわからないけど、なんとなくこの写真、ナナメっぽい」と感じることが多いと思います。
そんな時に「ものさしツール」を是非活用してほしいと思います。

:nth-childでaタグにCSSでボタン実装したいんですが反映されません

ナビゲーションの実装。
こんなタグでナビゲーションを作ってみました。

<ul class="nav">
	<li><a href="#">浜寺公園</a></li>
	<li><a href="#">大山公園</a></li>
	<li><a href="#">大泉緑地</a></li>
	<li><a href="#">大浜公園</a></li>
</ul>

これを横並びにfloatして背景画像をあてたい!
めちゃくちゃ初歩的なことだっただろうと思うのですが、
私はちょっと勘違いしておりハマりましたので、書いておきます。

条件は、liにidなどを付けずに、疑似クラス「:nth-child」を使ってそのナビゲーションを実装するということでした。
:nth-childについては下記のページを参考にさせていただいた。
http://weboook.blog22.fc2.com/blog-entry-285.html

ここで見ながら気楽に書いてた。
「.nav li a」に「:nth-child」をつけて、
.nav li a:nth-child(2)
にCSSを指定してゆけばよいのだと思っていました。
大間違い!!
a:nth-childじゃ動いてくれなかった!!!!

試行錯誤の結果・・・・・下記のような感じで使わなければならないのでした・・・・・
li:nth-child(2) a です!

.nav li:nth-child(2) a {
float: left;
background-image: url(../images/nav.png);
display: block;
height: 40px;
text-indent: -999999px;
width: 166px;
background-position: -255px 0px;
}

最近気になっている本

初めてのサイト制作でしくじっていたこと「id classの乱用」

ホームページをはじめて作った時、とにかく時間がかかりました。
htmlもcssも、まだあまり理解できていなかったから。

で、とにかく確認確認で、書き直し書き直し。
理解していないので、一個一個だめなところをつぶしていく作業が、最初からでした。

それは私の場合成長過程で必要だったとしても、これは避けなきゃいけなかったんじゃないか、と思ったのがこれ。

idの乱用と混乱

今思い返せば、無駄なところにidやclassをつけて、cssを書いては、やっぱり違う方法がいいと書き直し。
すると、無駄なidやclassがたくさん残り、なんだかごちゃごちゃソース。
ごちゃごちゃしてるうえに、あまりわかってないもんだから混乱する。

結果、例えばdivを消しちゃって閉じてないからcssちゃんと動かないとか、たくさんありました。

idをむやみやたらにつけずに計画的に。
そして、
まずはバリデーターでチェック。

これ、必要なんだなと痛感しました。

idとclassの使い分け

「なんでもかんでもidをつける」という必死のcss。

継承されていく法則をつかめずにいたので、ひたすらidつけてはcss書いていました。

結果、同じ名前のidを使ってしまって(多すぎてかぶる)なんだか崩れるなんて事態も・・・・

サイト制作を何個か練習して、やっと無駄なidをclassにしたり、知恵が付いてきました。
やはり何事も経験…、とはいえ、これはもっと早くに理解していれば楽だったなぁってつくづく思いました。

力づく、みたいなid id id id!は卒業!
去年のCSS見て、ながーーー!と思えるようになったので(いらん重複いっぱい)少しは成長できたなーっと、ほんの少しだけ、自分をそっと褒めます。

世間にはsassとかいう、すごいパワフルなヤツがいてるらしいので、今度はそれも学びつつ使ってみたいなーとか思っています。
(背伸び)