linkerは「人と人」「人と情報」「人と物」をつなぐデザインユニットです。

『プロならば知っておくべきWebコーディング&デザインの定石100』を読んで知識の棚卸しはどうでしょう

みなさん、こんにちは、まーしーです。
日本はお花見の季節のようですね。ロンドンは一足早くおわってしまった感じですが、こちらにも桜(?)があるので来年は花見をしたいと思っています。

さて、先日『プロならば知っておくべきWebコーディング&デザインの定石100』を読みました

プロならば知っておくべきWebコーディング&デザインの定石100
古籏一浩, 比留間和也, 平澤 隆, 境 祐司, 矢野りん 他 / MdN ( 2010-10-26 )

HTML / CSS コーディングでつまずく点での解決策やJSの話。Flash、レイアウトなどのデザイン、SmartPhoneやePubの話などかなり盛りだくさんな内容です。

例えばHTML+CSSのCHAPTER1の内容はこのような感じです

CHAPTER 01 HTML + CSS
001 4重などのdivの入れ子をためらわない
002 表組み(table)のセル幅をよりスマートに指定する
003 IEの独自CSS filterプロパティに注意する
004 背景が切れないように工夫する
005 Webフォントを利用した表現
006 Flashと重なる要素が背面に表示されてしまう
007 フロートさせたimg要素の下にテキストが表示されてしまう
008 横並びにしたリストの間に隙間が空いてしまう
009 idやclass名のつけ方で時間を取られてしまう
010 テーブルやリストを交互に色分けしたい
011 新着情報やフォームのマークアップにいつも悩んでしまう
012 フロートさせた複数のボックスがきれいに並ばない
013 ページ送りのセンタリングがうまく行かない
014 特定のブラウザにだけスタイルを適用させたい
015 FirefoxでHTML5 Video映像が繰り返し再生できない
016 HTML5 Video/Audioでブラウザによっては映像や音がでない
017 IEのバージョン9以前でCanvasが使えない
018 placeholderがIE、Firefoxで使えない
019 スタイルを指定したフォントの値がデフォルトに戻ってしまう
020 ボックスの上下マージンを指定しても段落間に変化がない
021 指定したフォントが上下の文章と重なって欠けてしまう
022 欧文やURLを挿入するとテーブルのセル幅が広がってしまう
023 印刷するとページのリンク(参照先のURL)がわからなくなる
024 できるかぎり見た目通りに印刷したい
025 CSS管理の現在を知りたい
026 画像サイズも可変なリキッドレイアウトを実現する
027 text-shadowをうまく使ってよりテキストを際立たせる
028 CSS3の接頭辞付きプロパティは正式名も同時に指定する
029 border-radiusを使って楽をする
030 nth-childとnth-of-typeの違いをしっかりと把握する
031 CSS3のグラデーションを使って表現を豊かにする
032 transitionでリッチなユーザー体験をさせる
033 CSS Animationで印象的なUIを実装する
034 box-shadowプロパティを使ってグロウ効果を演出する
035 CSS3を使って画像を使わずに表現力豊かなボタンを作る
036 RGBaを使って表現の幅を広げる
037 transformを効果的に使って表現力を高める
038 ユーザーのウィンドウサイズによってCSSを切り替える
039 MovableTypeでのスマートフォン対応CMSの作成
040 WordPressでのスマートフォン対応CMSの作成
[column 01] いろいろあるWebコンテンツデザインツール

プロならば知っておくべきWebコーディング&デザインの定石10 - MdN Design Interactive
http://www.mdn.co.jp/di/book/6153/  

非常に盛りだくさんですね。

以前紹介した@hilokiさんの書籍でCSS3やSmartPhone向けの勉強はできますが、あわせてこちらの内容をよみながら自分の知識の棚卸しをしてみてはどうでしょうか?
気づかずにやっていることやこんな方法があったんだ、という気付きもあるかもしれません。

個人的には普段あまり使わないRGBaのところを読んでふむふむ、というかんじでした。

棚卸しをしてみたい方にはいい感じの一冊だと思います。