(image by 写真AC)

ただでさえ時間のかかるコーディングを少しでも楽にしたいと思ったことはありませんか?1語でも間違うと、全てがダメになってしまうので、コーディングやチェック自体は怠ることができませんが、それ以外の部分で楽できる部分は楽してしまいましょう。イメージに見合う色のコードや、よく使う基本的なソースコードはコピぺが便利です。今日は、プロアマ問わず、全てのエンジニア、Web制作者に見てもらいたいカラーコードとソースコードサイトをまとめてご紹介します。

カラーコード

200を超す色のコードを全て覚えるのは不可能ですが、本を手繰るのも時間がかかりますよね。というわけで、一目でわかるカラーコードのサイトをまとめてみました。それぞれ少しずつ性格が違うので、その時々、レベルに応じて使い分けてみてください。

シンプルに最低限のカラーコードが知りたい時

色の種類が多くなく、余分な説明も無いので、最低限の色とコードだけ知りたいという場合は簡潔で良いかと思います。

直観的に良いと思った色を抽出したい時

カラーチャートとカラーピックで、クリックした部分の色のコードがわかる優れものです。直観的に作業ができ、クリックした部分の色は次回以降用に保存もできます。

HTMLカラーコード

HTMLカラーコードでは、ウェブサイトで使用するHTML のカラーを探すためのツールを無料で提供しています。HTMLカラーチャートとHTMLカラーピッカーは、色探しの作業を手軽にしてくれる素晴らしいツールです。

html-color-codes.info

とにかく色の名前とコードをたくさん知りたい時

147色の色名とコード、更にはセーフカラー216色のコードも記載されています。

カラーコード表

RGB、16進数、色名、セーフカラー216色のカラーコード表です。

www.wanichan.com

カラーコーディングに関して、ちょっと遊び心がほしい時

カラーチャートやコード表に関しては物足りない感じはありますが、言葉からストライプを生成する「ストライプメーカー」や、色成分表の生成などとユニークさに関しては群を抜いています。実践的というよりは楽しむという印象ですが、個人的には好きなサイトです。

WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org

カラーコードだけでなく、実際に挿入した際のコーディングのイメージをつかみたい時

実際にカラーコードを挿入する方法が場合別に記載されているので、初心者の方には心強いかと思います。

HTML,CSS カラーコード一覧表 | 背景色や文字色の設定

HTML,CSS 500色のカラーコード一覧表。W3C指定16色やセーフカラー216色など、ホームページのフォントカラーや背景色。カラーコード一覧表

www.netyasun.com

文字色と背景色のバランスをすぐに確認したい時

実際に選択した文字色と背景色を見ることのできるサイトです。実際に組んでみてから、「失敗した」という二度手間を防ぐことができます。

16進と10進の変換をしたい時

16進と10進の変換ツールです。いちいち参照するのは意外に手間がかかるので、これはありがたいですね。

既存サイトの色コードをすばやく識別する方法

カラーピッカーをダウンロードすることで、既存サイトで「いいな」と思った色を抽出し、自分で制作しているサイトに適用することができるというものです。

15 既存サイトの色コードをすばやく判別する - WEBの作業が楽になるテクニック総まとめ 第3回 - MdN Design Interactive

WEBの作業が楽になるテクニック総まとめ 第3回 既存サイトの色コードをすばやく判別する文=こもりまさあき既存Webサイトで使用されている色を参考に、サイトの配色を検討することがあるだろう。しかしながら目視ではどのような色コードが使われているのかわからない。そのような場合は色を判別できるツールを活用しよう。オンラインソフトウエア「Col...

www.mdn.co.jp

ソースコード

ソースコードに関しても全て覚えているのは理想的ですが、そうでない場合、いちいち参照していては時間のロスになってしまいます。覚える努力は必要ですが、どうしても時間の無い時や初心者の方などはこれらを参照し、スキルを積んでいきましょう。

ケース別に詳細かつ広範なコードが知りたい時

見やすいサイトではないですが、カテゴリごとにソースコードがまとめっていて、かなり広範囲まで網羅されています。コードだけでなく、解説も付いているので、初心者の方で根気がある方は上からしらみつぶしに閲覧していくと良いかもしれません。

基礎的で簡単な短いコードが知りたい時

囲み線などの簡単なコードが書いてあります。こういったものを積極的に活用して、時短に繋げたいところです。

コピペ用ソースコード集 : 三重県津市のITコンサルタント|株式会社エクサソリューションズ

ページの文章のちょっとした装飾に、コピペ(コピー・ペースト)するだけで簡単に使えるHTMLソースコードをご用意しました。ソースコードの種類は定期的に追加していきますので、ページ制作に活用してワンランク上のホームページを実現しましょう!コピペ用ソースコードの使い方各ページに記載されている「ソースコード」をHTMLソースにコピー・ペーストして使用してください。concrete5で使...

www.exa-sol.co.jp

英語でコードを勉強したい時

Perlクックブックでの勉強をスムーズにできるように作られたサイトです。ケース別に使えるソースコードを参照できます。英語のサイトなので、すんなり入ってくるという感じではないですが、英語が得意な方なら問題ありませんね。

CSSレイアウトのサンプルコードが知りたい時

CSSレイアウトのサンプルコードです(英語)。

コード共有サイト

コード共有サイトでは、自分の自信作を見てもらうという使い方の他にも、良いお手本を見て自分の参考にする、また、エラーが起きた時に誤った箇所を他の人に見つけてもらうなど、その使い方は多種多様です。以下ではそんなコード共有サイトを紹介します。

作品の共有がしたい時

コードをWeb上に保存する感覚で、作品とコードの共有ができるサイトです。

jsdo.it - Share JavaScript, HTML5 and CSS

jsdo.it - share JavaScript, HTML5 and CSS - jsdo.it is a service to write JavaScript, HTML5, CSS in your browser and share it. You can copy and modify others' code. And also Ask questions about JavaScript, HTML5, CSS

jsdo.it

「失敗コード」を見て、学びたい時

「人の振り見てわが身を直せ」というようなコンセプトで運営されているもので、誤ったコードを見て、自分のレベルアップに繋げようというサイトです。コーディングの合間の息抜きに良いかもしれません。

ウンコード・マニア

「なんだこの糞コードは!(怒)」「書いた奴出てこい!(怒)」 こんな声を聞いたり、叫んだりしたことはありませんか? ウンコードについて学ぶことによってウンコードを撲滅しましょう! とりあえず、趣のあるウンコード鑑賞から始めて下さい

unkode-mania.net

手軽にコードを共有したい時

コードをTwitterでつぶやいて共有できます。

おわりに

これらのサイトを使って、少しでもコーディングが楽に進むといいですね。