CSS3を深く学びたい

ウェブデザインをしているのですが、制作環境が変わったため、Illustrator、Photoshopが使えなくなりました。仕方ないので写真の加工は無料のもの、それ以外はできるだけCSS3で、できるだけこれまでと遜色のないグラフィックをつくりたいと思っています。

CSS3 スタンダード・デザインガイド【改訂第2版】

この本を購入してみようと思っているのですが、他によい本やサイトをご存知の方がおられましたら、教えていただけますか。よろしくお願いします。

No.1 回答者： ORUKA1951 回答日時： 2014/06/18 19:33

　Illustrator,PhotoshopとCSS3がどうしても結びつかない。

ウェブデザインされていたにしてはあまりに突拍子もないので・・

　CSS3はグラフィクを作るのではなく、プレゼンテーションを指定するものです。画像の切り貼り加工は出来ない。HTML5のSVG( http://ja.wikipedia.org/wiki/Scalable_Vector_Gra … )でしらInkscapeを使ってイラストは作れるでしょうが・・

　Illustrator,Photoshopは、プレゼンテーション指定するものではなく、イラスト(ベクター画像)や写真(ビットマップ)を処理するソフト。Illustrator,Photoshopは、部品を作るソフトに過ぎません。

　CSS3はまだ勧告にいたっていない。いまだにしばしば変更が続いています。勧告にいたっているのは多くのモジュールのうちCSS Color、CSS Namespaces、Selectors Level 3だけ。
＞他によい本やサイトを
　そういう状況だから本はない。W3Cの草案をひたすら追いかけて、ブラウザの対応状況を見ながら進めていくしかない。
勧告済みの二点だけ
Selectors Level 3( http://www.w3.org/TR/css3-selectors/ )
CSS Color Module Level 3( http://www.w3.org/TR/css3-color/ )

　IllustratorやPhotoshopでウェブデザインされていた経歴から、およそのことが想像できます。HTMLとCSSを基礎から学びなおす良いきっかけを与えられたと考えましょう。
　今後ウェブはHTML5が主流となるでしょう。その時に絶対に役に立ちます。

★HTMLはデザインのためじゃない
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
　HTML文書が、ブラウザやプラットフォームの違いを超えてうまく働くべきであるということは、多くが認めるところである。 相互運用性の達成は、コンテンツプロバイダのコストを低下させる。なぜならただ1種類の文書しか作る必要がなくなるからだ。
・・・【中略】・・・
　HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
★HTMLは文書構造をマークアップします。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　HTML5/CSS3では、それがより徹底されます。すなわち、
<header>
　<h1>ページタイトル</h1>
　<nav><ol></ol></nav>
</header>
<section>
　<h2>本文</h2>
　<section>
　　<h3>下の階層</h3>
　　<aside>このsectionと直接は関係ない記事</aside>
　</section>
　<nav>このセクションの目次</nav>
</section>
<footer></footer>
　のようなHTMLに対して
section section aside{
position:absolute;
right:0;
width:20%;min-width:100px;
}
のようにスタイルシートを書くことになります。
HTML4.01でも指摘されていた
・テキストを画像に置き換えて表現する。
・余白制御のために画像を用いる。
・ページレイアウトの目的で表を用いる。
・HTMLでページを作らずにプログラムに頼る。
　(注)Illustratorで作って切り貼りするような手法
( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
は、より使えなくなります。

　HTMLは、IllustratorやPhotoshopといったDTP的なものとは、まったく逆の発想によるものです。DTPはどのように表現するかから出発しますが、HTMLはどういう内容かから出発します。そうすることで、スクリーンリーダーは見出しは男声の大きめな声で読み上げてくれるでしようし、印刷するときはfixedされている物は各ページに印刷してくれますし、ディスプレイには黒字に白地で表示していても印刷するときは反転させるとか・・。点字端末には点字で出力してくれます。

　これを機会に、HTML/CSSを基礎から復習しましょう。IllustratorやPhotoshopの経験のある新人には、すべて忘れろ!!と言ってます。
　CSS3の必要はありません。
・HTML 4.01 仕様書邦訳( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
・CSS 2.1仕様（日本語訳）( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
をまず一通り読んでおきましょう。
　それだけでIllustratorやPhotoshopで作成されたページより、はるかによいものができるでしょう。



　

この回答へのお礼

早速、ご回答いただき、ありがとうございます。
仕様に関しては、正直、不勉強なことは否めません。改めて学びたいと思います。

希望としては、以下のような表現を、自分で考えてつくりだせるよう、体系的に学びたいのです。

http://coliss.com/articles/build-websites/operat …
http://coliss.com/articles/build-websites/operat …
http://coliss.com/articles/build-websites/operat …
http://www.nxworld.net/tips/css-only-button-desi …

お礼日時：2014/06/19 10:35