ラベル HTML の投稿を表示しています。 すべての投稿を表示
ラベル HTML の投稿を表示しています。 すべての投稿を表示

2013/06/09

CSS3 スタンダード・デザインガイド【改訂第2版】 が素晴らしい

先日
webデザイン系の友人が絶賛していたので、まよわず即購入。



CSS3 スタンダード・デザインガイド【改訂第2版】 (Web Designing Books)


まず、とにかく見やすい、わかりやすい
CSSの 各プロパティの解説が、基本1プロパティ1ページ(以上)ずつ、オールカラーで解説されています。
見やすく洗練されたレイアウトで解説されているので、わかりやすいし、探しやすいです。
オールカラーっていうのも、ぱっと頭に入ってきやすいですよね。

そして、圧倒的な情報量
タイトルには CSS3とありますが、基本CSS2.1がベースとして解説されてて、CSS3で追加されたプロパティについてはわかりやすいアイコンがついています。
ちょっと先取りしたCSS4についての情報まで、合わせて解説されています。
CSSの 各プロパティ、1つ1つについての解説も、抑えておくべきところの解説が、シンプルにわかりやすくまとまっていて、ブラウザ対応状況は、PCだけに限らず、Android&iOSの対応状況も 一目見てわかるようになっています。
前半は、基本的な CSSプロパティの解説。後半には、スマホ開発向けの、スマホブラウザで使えるCSSのプロパティ解説も載っています。


初心者の方なら、まず全部に目を通してみて、詳細まで覚えなくても「ああ、CSSでこんなことができるんだな~」ということを感じてもらえると思います。

ある程度 CSSに知識のある方なら、最新のリファレンス本として そばにおいて置ける本だと思います。

私は普段は開発がメインですが、マークアッパーさんから上がってきたデザイン(HTML等)をシステムに乗せたときに、ある程度の調整は必ず発生します。
この本があれば、ある程度の調整はマークアッパーさんに差し戻さなくても対応出来ますので、コレはいい本に巡り会えたと思って小躍りしております。

マークアッパーさんもそうですが、開発の方にもぜひ一度お手にとっていただきたい。

ちなみに 電子版もあるようですよ。iPadなどを持ち歩いてる方はこちらがいいかもですね。




CSS3 スタンダード・デザインガイド【改訂第2版】 [リフロー版]








2012/05/24

divを ページ(100%)に隙間なく 合わせる


html, body { height:100%; }
#wrap {
  background: #ffc;
  width: 100%;
  height: 100%;
}
#contents {
  background: #ddd; レイアウト確認の時は背景色付けるといいです
  margin: 0 30px;
}
<body>
<div id="wrap">
<div id="contents">
</div><!--/contents-->
</div><!--/wrap-->
逆に、divを決められたサイズで固定したい場合は↓こちら
参考) min-width、min-height、max-width、max-heightをIE6でも実装する方法 | CSS Lecture




2012/05/08

【HTML】src属性のURI値でhttpの記述が省ける?!


最近のブラウザでは、
というように、src属性のURI値で、"//"から記述するとブラウザ側で
表示されているURLプロトコル(httpかhttps)を自動的に
判別して解釈してくれるようです。
IE6以降、FireFox,Opera,Safari,Chromeで確認済み)
いちいちjavascriptとかでhttpかhttpsの判別をコントロールしなくても
良いので楽なのですが、W3Cで推奨されている(非推奨ではない)記述方法として今後も使っても問題ないのでしょうか?
------------------
RFC 3986: Uniform Resource Identifier (URI): Generic Syntax
の「4.2. Relative Reference」を見る限りでは
//で始まるパスは相対参照として正しいようです。
なんか、//で始まるパスはnetwork-path referenceと言うが滅多に使われないみたいなことも書かれてます。
「5.4.1. Normal Examples」の例の中にも//で始まるパスが載ってます。

RFC 1630: Universal Resource Identifiers in WWW
こっちにも//で始まるパスの例示がありますね。

> // で始まるURIは、正しいURIです。しかし、これはWWWブラウザによっては正しく評価されないかも知れません。
とかかれています。
【和訳】