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

このブログで何回か紹介している0to255というオンラインツールですが、かなり便利だと思うので使い方を説明してみます。

0to255menu10.png

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

0to255の使い方

0to255menu00.png

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

0to255menu03.png

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

0to255menu14.png

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

メニューの配色を決める

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

0to255menu12.png

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

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

0to255menu13.png

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

できあがりとコード

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

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

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

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です。

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の使用例を紹介しました。色の使い方って本当に難しいと思いますが、こういうツールを使って機械的に決めていくとうまいことまとまるのかなと思います。

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

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加