システム開発エンジニア、Web制作で見てほしいソース

  • このエントリーをはてなブックマークに追加
  • Pocket
システム開発エンジニアイメージ画像

コーディング作業はただでさえ時間がかかるので、イメージに見合う色のコードや基本的なソースコードはコピー&ペーストが便利です。今回は、Web制作、システム開発エンジニアに見てほしいカラーコードとソースコードサイトをご紹介します。

カラーコード

200以上もの色のコードを覚えるのはとても不可能。そこで、ひと目で分かりやすく、感覚的に使えるカラーコードのサイトを以下にまとめました。用途ごとにチョイスして使ってみてください。

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

カラーコード表

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

HTMLカラーコード

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

ワニchanのうぇぶわーるど:カラーコード表

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

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

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

HTML,CSS カラーコード一覧表

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

HTML カラーコード表 – イヌでもわかるJavaScript講座

2.7 16進と10進の変換をしたいとき

カラーコード変換ツール

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

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

3 ソースコード

ソースコードもいちいち参照していてはかなりの時間を要してしまいます。

ソースコードの勉強はスキル向上には不可欠ですが時間との勝負でもあるサイト制作では致命的となることも…。まずは、下記のサイトを参照し、時間短縮を図りつつ、コードの意味を少しずつ精査していきスキル向上に結び付けましょう。

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

コピペ用ソースコード集 : 株式会社エクサソリューションズ

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

Vandelay Design(英語)

4 コード共有サイト

4.1 作品の共有がしたいとき

jsdo.it – Share JavaScript, HTML5 and CSS

4.2 「失敗コード」を見て、学びたいとき

ウンコード・マニア

4.3 手軽にコードを共有したいとき

Codetter(こーどったー)β | Twitterにコードをつぶやこう

最後に

上記のサイトを押さえておけば、コーディングに関する膨大な手間と時間は大幅に軽減されるはずです。その分のエネルギーをよりクリエイティブな、よりユーザーにやさしいサイト作りに還元してください。

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

cta_ss