HTML&CSSフロントエンド何度も読み直したい資料・ツールまとめ



HTML5/CSS3などのフロントエンドもWeb上の資料が充実しすぎていて、ついつい今までなんとなく作って体系的な知識が不足していました。知れば知るほど奥が深いフロントエンド・コーディングを少し手も効率的にするために、いくつか書籍を購入したり、ネット上の資料を読み込んでみたので、備忘録がてらまとめていきます。
(02/05 20:10) 定期見直し

 

🎂 [Style Guide]﹁Google HTML/CSS Style Guide﹂の和訳


http://re-dzine.net/2012/05/google-htmlcss-style-guide/
Googleが作ったStyle Guide﹃Google HTML/CSS Style Guide﹄を和訳していただいた﹃Google HTML/CSS Style Guideを適当に和訳してみた﹄。HTMLのベーシックな書き方から、CSSの書き方まで一貫している。個人的にはCSSのプロパティがアルファベット順というのは合理的だと思う！

 🐰 [Style Guide] メンテナーブルCSS


http://www.cyberagent.co.jp/recruit/techreport/report/id=7926
サイバーエージェントさんが提供している﹃メンテナンス性に優れたCSSのルールについて﹄。シンプルでわかりやすいので、チーム作業でも適用がしやすそう。また、1つひとつのルールに対して納得できる理由があるので、意味を意識してコーディングをできます。

🐠 [Web記事] 意外と知らない！? CSSセレクタ20個のおさらい


http://weboook.blog22.fc2.com/blog-entry-268.html
CSSセレクタはHTML/CSSのコーディングをする上で必須ですが、CSS3になって指定する方法がぐっと増えました。それをわかりやすくまとめてくれている記事です。今までのコーディング中に何度もお世話になっています！

🐞 [Web記事] 爆速でHTMLコーディングするためのTips


http://qiita.com/nex_32/items/7c11ce54b398cd7c7e29
HTMLコーディングを最短で行うためのワークフロー的な資料です。特に﹃HTMLを組む => 画像を入れて、レイアウトする => 文字・JSを組み込む﹄というわかりやすいポリシーが共感できました。さっそく次回から試してみます。

 😸 [Tool] W3C HTML Validator


http://validator.w3.org/
この﹃W3C HTML Validator﹄は多数の書籍やサイトで紹介されているデファクト・スタンダードなツールのようです！

🗻 [Tool] W3C CSS Validator


http://jigsaw.w3.org/css-validator/
この﹃W3C CSS Validator﹄は、﹃W3C HTML Validator﹄のCSSエラー検知版です。こちらも数多くのサイトで紹介されています。ツールを活用することで、CSSの品質を向上させていきたい！

 🎃 [Tool] OneClickCSS


http://css.miugle.info/
この﹃OneClickCSS﹄は、﹃爆速でHTMLコーディングするためのtips﹄で紹介されていたHTMLの基本構造からSCSSやLESSなどを含むCSSを自動生成してくれるツールです。ワークフローの中にしっかり組み込まれると必須ツールだと感じます！

 🐹 [書籍] HTML+CSSコーディング　ベストプラクティス


こちらはすでに新品はAmazonにはなくって、中古しか販売していないようですが、そのぶんかなりお手ころなお値段です。CSSのオブジェクト指向の考え方を適用した設計や、開発効率を向上させるための方法論、高速化させるために必要なことなど、エンジニア的にも納得感を持って読み進められるのがいいです！

 🎳 [書籍] 作りながら学ぶHTML/CSSデザインの教科書


こちらは体型的な知識を取得するというよりは、プロになりたいデザイナーさんが、﹃HTML/CSSを使ってテキストを装飾していく過程﹄をトレースできるチュートリアル的な書籍でした。作りながら基礎を学びたい人にお勧めの書籍です。

👽 見栄えが良くなった！　CSSやHTML5の役立つ総まとめ


http://commte.net/blog/archives/3770
コムテブログさんのすばらしいまとめ記事﹃見栄えが良くなった！CSSやHTML５の役立つ総まとめ﹄。テーマごとに有名なブログ記事をまとめてくれていたり、サンプルソースをまとめてくれています！

🐮 [Web記事] レスポンシブ・WebデザインでのCSSコードの書き方


http://yomotsu.net/blog/2012/10/01/mediaquery-goodpractice.html
最近の開発ではレスポンシブ・デザインでのコーディングがもはや必須と言っても過言ではなくなりつつあります。ということで、レスポンシブデザインを組む上で理解しておくべきことが書かれた両記事です！

😀 [Web記事] フロントエンドでコーディングスピードをアップさせる6つの方法


http://www.yoheim.net/blog.php?q=20130407
こちらは細かいコーディングの話というよりは、フロントエンドを開発するときのポリシーや心構え的な内容がまとまっています。フロントエンドもバックエンドと同じようにDRYや、リファクタリングがあって、いかにクリアなコードを書くことが大切かということを強く感じさせてくれる記事です！

 😎 変更来歴


(02/05 20:10) 定期見直し
  

🖥 VULTRおすすめ


 ﹁VULTR﹂はVPSサーバのサービスです。日本にリージョンがあり、最安は512MBで2.5ドル/月($0.004/時間)で借りることができます。4GBメモリでも月20ドルです。  最近はVULTRのヘビーユーザーになので、﹁ここ﹂から会員登録してもらえるとサービス開発が捗ります！  

📚 おすすめの書籍