こんにちは、にゃんこ師匠です。エイプリルフールでネタに溢れている中、真面目な記事で恐縮です。

さて、今回はボクがかつてお世話になり、今でも利用しているリファレンス系サイトをご紹介したいと思います。

HTML(Hyper Text Markup Language)基礎

HTMLのリファレンスはかなり多くありますが、ずっと使っているのは以下になります。

HTMLタグ クイックリファレンス
001
http://www.htmq.com/index.htm

HTMLのバージョンは沢山ありますが「HTML5」は今、一番重要なバージョンでありまず覚えておきたい所ですね。
HTMLタグ クイックリファレンスさんはHTML5用のリファレンスもあるので便利です。

■ HTML5リファレンス
002
http://www.htmq.com/html5/index.shtml

各ブラウザの対応状況も確認できるので、実装されているタグなのかを確認しやすいのも助かります。

TAG <index>
003
http://www.tagindex.com

TAG <index>さんはタグをGoogleで直接検索すると、かなりの確度でヒットします。「あーこのアトリビュートって、何使えたっけかなー?」って時にも便利です。

HTMLツール

前述のTAG <index>さんは、ツールでも結構お世話になっています。

■ カラーチャート
004
http://www.tagindex.com/color/index.html

■ 色循環と補色
005
http://www.tagindex.com/color/color_wheel.html

ボクはデザイナーではないですがデザインチックな仕事も多いので多用します。色循環や補色、コントラストはこのブログのここでも紹介しているので、ぜひ読んで下さい。

■ URLエンコード・デコード
005-2
http://www.tagindex.com/tool/url.html
わずかでもフォームやプログラム、メールの送受信等が連携すると覚えなければ行けないのが文字コードの種類とエンコード・デコードです。「なんで、この文字化けているんだろう?どこで設定ミスった?」なんてのを調べる時にまずは、これを使ったりします。

■ テーブルタグ作成
006
http://www.tagindex.com/tool/table.html

数多く有る中でも「ブラウザのデフォルトがなっていない」「リセットCSSしてしまうとむしろ使えない」「記述に手を抜くとロクな事にならない」etc とても便利だけど、とても面倒なのがTableタグです。

■ W3C Markup Validation Service
007
http://validator.w3.org
WWWの本拠地。標準化の総本山。W3Cのチェッカーです。問題の大半は「HTMLの記述ミス」にあります。何か問題が起きたらまずはここでチェックしてみます。

CSS

まず、特にCSS3は避ける事の出来ない言語です。逆にCSS3さえ覚えてしまえばグラフィック・デザイン・ツールを使わなくても済む場面が山ほどあるというほど、重要です。

上記のHTMLクイックリファレンスやTAG <index>はもちろんの事、加えて以下のサイトもお薦めします。

CSS HappyLife ZERO
008
http://zero.css-happylife.com

ちょっと覚えにくいCSS2とCSS3のセレクタについても判りやすく解説。スマホ黎明期のHTML5+CSS3デザインでは大変お世話になった覚えが有ります。

■ W3C Cascading Style Sheets
009
http://www.w3.org/Style/CSS/
先に挙げた、W3CのCSSセクションです。CSS3はまだまだ過渡期に有り、ブラウザの実装状況や新たな提案も様々。全て英語ですが、そもそもCSSの提案と実装状況だけなら、そう難しく無く読めると思います。有志の方の日本語訳はこちら

CSS関連ツール

私はかなりの面倒くさがり屋です。書かなくて済むものは書きたく無い。時短したい。それをカバーしてくれている面々。

■ CSS3 Button Generator
010
http://css3button.net/showcase/

■ CSS3.0 Maker
011
http://www.css3maker.com/index.html

■ Ultimate CSS Gradient Generator
012
http://www.colorzilla.com/gradient-editor/

■ Responsive Design Testing
013
http://mattkersley.com/responsive/

HTML&CSSの総合的なリファレンスと記事

■ はじめてのマルチデバイス サイト
014
https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/

最近、Googleが立ち上げたマルチデバイス用のガイドブックです。「はじめての〜」と銘打ってますが、HTMLとCSSの理解が無いと多分読み解けません。いままでPC専門だったけど、「レスポンシブを勉強したい!」って人向けです。

■ Web Designer Wall
015
http://webdesignerwall.com
最初にレスポンシブという言葉を知ったのが(2010?2011?たぶん、そのくらい)このニュース系ブログの記事でした。

■ Webクリエイターボックス
016
http://www.webcreatorbox.com
良サイトだと思います。普通にデザインが好みでもあります。

■ LIG.inc
017
http://liginc.co.jp
何かで検索すると高確率でリファレンスにヒットしてしまいます。悔しいのでブックマークに入れず、避けて通るように最近はしていましたが、ご縁が合って、記事に載せていただいたので。(広告かよ!広告です。)