Cascading Style Sheets カスケーディングスタイルシート
●CSSの目的
HTMLとは
文書の情報構造を定義するための言語
CSSとは
ウェブページの見栄えを制御する言語
HTML文書にCSSを適用する
文書構造とスタイル指定を分離する
HTML4.01やXHTML1.0の仕様では、 HTML文書から見栄えに関する指定を分離することが望ましいとされています。 HTMLでは文書構造のみを定義して、 スタイルについてはスタイルシートで指定することが推奨されています。
HTML4.01やXHTML1.0では、センター揃えをする centerタグ、フォントの見栄えを指定する fontタグ などの装飾目的の要素や、 色・サイズ・ボーダーなどを指定する装飾目的の属性については非推奨(deprecated)とされながらも使用することができますが、 HTMLの次世代バージョンとなるHTML5では、 centerタグ や fontタグ などは 廃止される予定 となっています。
利点
①HTMLソースが簡素化出来る
②検索エンジンのロボットが読みやすいソースになる為、SEO対策に効果的。
③デザイン変更が容易
●CSSの書き方
基本
背景/ボックス/テキスト/aタグ
インライン要素、ボックスレベル/重なり順序
http://www.tagindex.com/stylesheet/
アニメーション
transition
http://www.atmarkit.co.jp/ait/articles/1307/04/news002_3.html
text-shadow、animation 他
http://sample.atmarkit.jp/fux/1204/18/sample.html
サンプルコード
https://typesquare.com/sample/csseffect/
http://www.tagindex.com/template/index.html
CSSチェッカー W3C
http://jigsaw.w3.org/css-validator/
スマホ対応
CSS修正
http://yossense.com/css-for-smartphone/
端末の画面サイズの横幅に合わせてCSSを切り替え
http://webdesignerwork.jp/web/responsivewebdesign/
Javascript内でUserAgentを判別しCSS切り替え
http://www.myu-zin.com/webridge/archives/1038.html
(補足)
SEOとは
(Search Engine Optimization 検索エンジン最適化)
サーチエンジンの検索結果のページの表示順の上位に自らのWebサイトが表示されるように
工夫すること。
Flashとは
Adobe Systems社による、音声や動画、ベクターグラフィックスのアニメーションを組み合わせてWebコンテンツを作成するソフト。また、それによって作成されたコンテンツ。
Flashで作成されたアニメーションはただ再生するだけでなくマウスやキーボードによる操作や入力フォームによる文字入力も可能で、Flashが一種のアプリケーション実行環境となっている。
http://yahoo-mbga.jp/
http://static-a.yahoo-mbga.jp/static/img/nonmember/swf/login_movie12_mega_A2.swf
W3Cとは
World Wide Web Consortium(ワールド・ワイド・ウェブ・コンソーシアム)は、World Wide Webで使用される各種技術の標準化を推進する為に設立された標準化団体、非営利団体。