カラーツール「0to255」で色を決めてメニューを作ってみる

色に関する知識が乏しい私ですが、0to255を使うとまとまった感じの配色になるので重宝しています。今回は0to255を使ってメニューを作る際の色選びをしてみます。

0to255の使い方

まず、0to255の使い方についてですが、下の画像のように「PICK A COLOR」をクリックしてカラーコードを入力します。

今回は「#ff7400」を指定してみます。

すると、指定した色より明るい色と暗い色がグラデーションになってたくさん表示されます。近い色がたくさん表示されますので、これらをうまく使うとまとまった感じのメニューが作れます。

メニューの配色を決める

ということで、以下のような配色でメニューを作ってみます。

メニュー背景のグラデーションと境界線の1pxラインに使う色を選んでいます。「リストに1pxのラインを追加するだけで、印象がぐっとよくなる」でも説明しましたが、1pxのラインを2本組み合わせるとシャープな感じになります。様々なところで使えますね。

実際にどの部分になるか分かるようにメニューを拡大してみます。左側のグラデーションが通常時で、右側のグラデーションはオンマウス時になります。グラデーションは微妙な違いですが、それくらいの方がスタイリッシュな気がします。

テキストシャドウにも0to255で表示される色を使ってもいいのですが、個人的な好みでRGBAカラー（黒の透明度0.7）を使っています。この辺の理由はまた別の機会に紹介します。

できあがりとコード

というわけで出来上がりがこちら。

• IE
• Firefox
• Chrome
• Safari
• Opera

グラデーションを使っていますのでIE以外（IE10だとちゃんと見えるかも）で見ていただけると助かります。どうしてもIEしかないという方は一番上の画像で確認していただければと思います。

せっかくですので今回のコードも載せておきます。まずはHTMLです。

<ul id="menu">
  <li><a href="#">IE</a></li>
  <li><a href="#">Firefox</a></li>
  <li><a href="#">Chrome</a></li>
  <li><a href="#">Safari</a></li>
  <li><a href="#">Opera</a></li>
</ul>

続いてCSSです。

#menu {
  width: 600px;
  height: 45px;
  padding: 0;
  margin: 0;
  list-style-type: none;
}
#menu li {
  width: 20%;
  float: left;
  padding: 0;
  margin: 0;
  text-align: center;
}
#menu li a {
  width: auto;
  color: #fff;
  background: #ff7400;
  background-image: -webkit-linear-gradient(#ff8722, #dd6500);
  background-image: -moz-linear-gradient(#ff8722, #dd6500);
  background-image: -o-linear-gradient(#ff8722, #dd6500);
  background-image: -ms-linear-gradient(#ff8722, #dd6500);
  background-image: linear-gradient(#ff8722, #dd6500);
  font-size: 14px;
  font-weight: bold;
  margin: 0;
  padding: 12px 0;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0,0,0,0.7);
  display: block;
  border-left: 1px solid #ff9944;
  border-right: 1px solid #bb5500;
}
#menu li:first-child a {
  border-left: 0px;
  border-radius: 5px 0 0 5px;
}
#menu li:last-child a {
  border-right: 0px;
  border-radius: 0 5px 5px 0;
}
#menu li a:hover {
  background: #ff9033;
  background-image: -webkit-linear-gradient(#ffa255, #ff7d11);
  background-image: -moz-linear-gradient(#ffa255, #ff7d11);
  background-image: -o-linear-gradient(#ffa255, #ff7d11);
  background-image: -ms-linear-gradient(#ffa255, #ff7d11);
  background-image: linear-gradient(#ffa255, #ff7d11);
}

CSS3プロパティのグラデーションや角丸、CSS3セレクタのlast-childを使っていますので、ブラウザによっては対応してい場合があります。グラデーションの前に単色の背景色を指定するなどして少しだけ対策しています。

さいごに

ということで普段からお世話になっている0to255の使用例を紹介しました。色の使い方って本当に難しいと思いますが、こういうツールを使って機械的に決めていくとうまいことまとまるのかなと思います。

グラデーションの微妙な色の違いも表現できますし本当に便利なツールだと思いますので、ぜひお試しください。