ガイドライン
「CSSの基本的な話。」の話。Windows IE6と7,IE 8 SafariとFirefox Mac IEなどyuga.jsって？ウェブサイトを作る上で面倒な部分を自動で実装したり、ちょっとした機能を簡単に追加したりするJavaScriptです。jQueryを使って作られています
[CSS]全幅960+10pxをベースに汎用的に展開するグリッドシステム | コ
リス
デイリーWebテクバックナンバー
DreamweaverではじめるWeb標準〜XHTMLとCSSで構築するWebサイト〜
Webページ制作時のベースにできそうな、HTMLとCSSのテンプレート。
[JS]スムーズなスライドが気持ちいい、パンくずのスクリプト -
HTML5、CSS3、 SVGなどの新技術に対する各種ブラウザのサポート状況
Webサイトを立ち上げる際のチェックリスト。
440design | 使えるCSSテクニック101選 part2
Webデザイナーに役立ちそうなWebサービスやツールを紹介。
オンラインで簡単にグラフが作れるWebサービス。
JavaScriptを使ったイメージギャラリーを多数紹介。
真似からはじめるウェブデザイン | DesignWalker
ツールチップがじわっと動きながら出てくる効果をjQueryで作る方法の紹
介
親しみやすいデザインのサイトマップやチャートが作成できるオンラインサービス
[JS]jQueryのプラグイン33+1選
jQueryのチュートリアル
CSSでさくっと作れるグラフいろいろ
角丸にするとか、横並びのDivの高さを揃えるとか、ブラウザ側で簡単にやってくれたらいいのになということを、jQueryで解決しましょうというエントリー
case:MobileDesign! モバイルサイトのデザイン
海外のSEO対策・SEOツールをわかりやすく解説するブログ
UIデザインガイドラインのまとめ : could
画像ギャラリー、スライドショーを実現するソリューションを57個（56個
＋α）紹介。
1CSSに関する情報源サイトいろいろ
kulerのようなカラーテーマを作るツールいろいろ。
Google Analytics のような、サイト解析ツールを10個紹介。
ログイン画面のデザインショーケース。
テーブルデザインの参考になりそうなサンプル色々。
矢印、ビュレットなどちょっとしたアクセントに使えそうなミニサイズの
アイコン
Web制作を優雅にするために作られた、おなじみyuga.jsのドキュメントページ
ウェブサイトの第一印象を決める大切な21のポイント
[JS]jQueryのプラグイン33+1選 -2009年1月
ユーザーエクスペリエンスデザインの成果物リスト
企業が「Webページのリニューアルをしたい」って言ってきた場合、その企業は何を求めているか
ユーザーが迷わないウェブサイト設計のためのガイドライン
Web標準の定義.txt
ガイドライン.txt
style-guide.txt
Web標準の定義.txt
css float 背景が適用されない.txt
css初期化.txt
【DreamweaverではじめるWeb標準】第124号 [まぐまぐ！].txt
Web標準へ080324.txt
ウェブデザイナーの作業を助ける12のオンラインツール
Flashでやってしまいがちな14個の間違った使い方
Photoshopでやってしまいがちな12個の間違った使い方
reset.css関連
Webトレンド20061014
session07-mashiko
session08-horiuchi
session10-itoh
session01-mashiko
session02-takano
takano_resume_v1
session03-yamada
session04-kobayashi
session05-yamada
session06-sengan
DreamweaverでWeb標準(XHTMLとCSSでサイト構築)
■ DTDの基本■
QAチェックシート
(x)html css ガイドラインbeta ver0.2 2008/1/28
Web Designing 2007年10月号「特集1: プロも使えるXHTML + CSSテンプレート」サンプル集
Web標準へ080324.txt
リセット デフォルトスタイル
リセット デフォルトスタイル
リセット デフォルトスタイル
リセット デフォルトスタイル
リセット デフォルトスタイル
リセット デフォルトスタイル
リセット デフォルトスタイル
リセット デフォルトスタイル
リセット デフォルトスタイル
CSSプロパティの記述順序
CSSプロパティの記述順序
外部CSSを記述する際のガイドライン
スタイルシート属性記述の順番
CSS Coding Guideline
CSS2 Specificationでのプロパティの出現順序
■ 2007年の「CSSやWeb標準」ベストエントリー100選＋α - TRANS [hatena] ■ル
分割CSSファイルの構成とそのルール
CSS講座-CSSの基本-Webデザイナー独立支援サイト
CSSプロパティの順序
CSS プロパティの記述順を考える
Dreamweaver用拡張機能でCSSプロパティを並べ替える
CSSプロパティの記述順をルール化できるDreamweaver用拡張機能
覚え書き
Crescent Eve
EmEditor
ez-HTML
Crescent Eve
WEBマーケティング ブログ
コリス
デイリーWebテク・アーカイブ
DesignWalker
CSS Nite公式サイト
CREAMU - web2.0を紹介するデザイナーブログ
『現場のプロから学ぶXHTML+CSS』サポートサイト
nobuko.biz
sodaplaza
portfolio
salsa-copacabana
Web Designing 2007年10月号「特集1: プロも使えるXHTML + CSSテンプレート」サンプル集
* 外部CSSの読み込みからNN4.xをはじく
* デフォルトの固定スタイルシートに適用されないようにする
<link rel="stylesheet" href="css/xxx.css" type="text/css" title="Color" media="screen,print">
* media属性が"screen"意外の指定の場合、NN4.xには読み込まれない
* Title属性を指定するとNetscapeやOperaでは固定スタイルシートでなくなるためデフォルトでは適用されない
IE4などの古いブラウザは@importでの外部スタイルシートの読み込みが実行されないという症状を利用し外部から読み込ませる場合の注意点
@import "xxx.css";
上記の@importが記述されたファイルを読み込む際のlink要素のmedia属性を "screen"以外にすることでNN4.xも同時にはじけるので併用する
* @importが記述された読み込み専用のCSSには最低限のCSSを記述するとなお良い。別のファイルに最低限のCSSを記述する方法でも構わない。その場合は htmlの＜link~＞の記述の順番に気をつける。（次のIE3のlink要素の読み込みバグのため）
@importの記述はいくつか存在し記述によって読み込まれるブラウザが異なる
@import"xxx.css"; IE4.x NN4.xは読み込まない
* NN4.xの初期バージョンは@importを実行されるとフリーズする可能性がある
ここまで何段階かの方法で古いブラウザにCSSを読み込ませないようにがんばったが実はまだMac IE4.5は読み込んでしまう。いったん整理しよう。
* NN4.x はlink 要素のmedia属性を"screen"以外にしてはじいた
* IE4.x は@importを使ってワンクッション置くことによりはじいた
* IE3 はhtmlのlink要素の一番最後に書いた最低限のCSSのみ読み込ませはじいた
* NN4.x & IE4.x は @importnの書式を @import"xxx.css"としはじいた
だけれどココまでの手法でもMacIE4.5は以外にも読み込む
解決法上記までの方法にさらにワンクッション置く@importで読み込ませるその際、@import の記述を下記のようにする。
@import url("xxx.css")
セレクタの前に "* html" をつける
* しかしMac版IEにも適用されてしまうためコメントの最後を示す "*/" の前に "￥" を
つける裏技を併用する。これを適用させたいボックスを囲むボックスに適用させればよい
/* Mac版IE5は以下を無視 \*/
* html .wrapper {height:1%}
/*Windows版IE5はここまでで終了 */
DocTypeの宣言で、CSSの定義を減らすことができ、一定水準以上のHTMLコード品質を保つことができる。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">を宣言
明示的にheader要素内に下記のエンコード宣言を記述。
content-typeのcharset 指定
* 文字コード宣言より手前に日本語を書かない
* 日本語は文字コードを宣言した後で使うことが原則。コメント内の文章も例外ではない。
■<meta name=“description” />の内容
meta name=“description”では、ページの概要文を指定する。検?結果での表示文字数を踏まえて、全角150文字程?の内容を指定する。
■<meta name=“keywords” />の内容
meta name=“keywords”では、ページのキーワードを半角カンマ区?りで複数?挙する。キーワード数は最大5個までとする。
<meta name=“description”content=“(全角150文字程?)” /> <meta name=“keywords” content=“(最大5個まで)” />
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript">
* 文字コードの指定：「@charset」
例： @charset "euc-jp";
ソースがある程度長くなってくると、どこに何が記述されているのかすぐわかるように工夫する必要がある。
ある程度の区切りをつけ見出しのとその説明コメントを入れておくことも重要。
たとえば最初に目次をつくり、各区切りの前にコメントをそれぞれ記述するなど。
また、コメントに関しても書式を統一する。
| 目次の例 | コメントの例 |
| /*===目次=== 最終更新日：2006年5月22日 1:各要素のリセット 2:基本レイアウト ・・・ ===*/ |
/*===1:各要素のリセット===*/ ここにコードを書く /*===2:基本レイアウト===*/ ここにコードを書く |
CSSを見ただけで(X)HTMLのツリー構造が把握できるため、できるだけ丁寧に書いておく。
基準として、子孫セレクタはワイヤーフレームの各部位からはじめる。
たとえば「div#header」「div#nav」などからはじめる。
/* ======== 目次 ========== */
1. tag style
2. common parts
3. header
4. body
4-1. ピックアップ
4-2. おすすめ
5. footer
6.hidden elements
/* ======== /目次 ========== */
・・・・・・・・・
/*=================================
1. tag style
=================================*/
div#header{
}
div#header img{
display: block;
}
/* ======== /1:header ========== */
・・・・・・・・・
/*=================================
7. footer
=================================*/
div#footer{
}
div#footer p{
text-align: center;
}
/* ======== /7:footer ========== */
1. clearfixのCSSコードを、自身のCSSソースにコピペ。
2.拡張したいXHTMLの要素（親ボックス）に「class="clearfix"」を指定。
.clearfix:after{
content:".";
display:block;
height:0;
visibility:hidden;
clear:both;
}
.clearfix{
display:inline-block;
min-height:1%; /* for IE 7 and MacIE5.5*/
}
/* Hides from IE-mac \*/
*html .clearfix{height: 1%;}
.clearfix{display: block;}
/* for ie5,6*/
擬似要素「:after(もしくは:before)」は、ブロック要素の先頭か後尾に「注)」などの"生成内容"を追加するスタイルシート(css2)。 css側からその文章等を擬似的に追加するので、html内で不必要な構造タグを追加することを避けられる。下記、この性質を利用したまわりこみ回避例。クラス名clearfixとして多用されている。ちなみに、MovableTypeのデフォルトスタイルシートにはこのハックが使われており「．pkg」というclass名がそれ。
一段目
* :after（:before）疑似要素と呼ばれ、contentの内容を内容を、指定した要素のうしろ（まえ）に表示させるもの。用途としてはリンクを目立たせたり、全ての引用文(blockquote）に「"」ダブルクォートを付けたり。
* これをブロック要素にして、height:0 とか visibility:hidden; で見えなくし、clearをかけている
* IE7No.IE6とMac版のIE5には、after擬似要素が適用されないの次の段
二段目
* インライン要素に戻し、min-height:1%;で見えなくしている
* IE6以前には未対応
三段目
* 俗にいうスターHTMLでIE6以前のみに適用させるのは、高さ1％で実質上に見えなくしてブロック化。これで、Clearがかかる。
つかいどころ
フロートさせた要素を含む見かけ上は空のブロックに、擬似的にcontentをブロックの最後に発生させることで、空でなくなり背景をフロート要素の次まで表示させれるようになるのが一番便利。
【 html文書内でLINK指定 】
<link rel="stylesheet" href="css/import.css"type="text/css" media="all" />
/*<link>要素に「media="screen"」以外の値を記述すると、Netscape4.x以前ではCSSファイルは読み込まれません。
「screen」以外の値を同時に指定しているのでNetscape4.x以前に外部スタイルシートを読み込ませない*/
【 外部スタイルシートの構成例 】
読み込み専用
/css/import.css
@charset "euc-jp";
/* ------------------------------------------
基本外部スタイルシートの読み込み
IE 4.x/WinとIE 4/Macは、以下の書式では読み込まない
------------------------------------------ */
/*URLを指定する部分の書式を「url(〜)」ではなく「"〜"」にしているため、IE4には読み込まない。*/
@import "base.css";
@import "common.css";
/* Mac版IE5.x専用外部スタイルシートの読み込み
------------------------------------------------------------ */
/*\*//*/
@import "mac-ie5x.css";
/**/
/* Windows版IE5.x(5.0〜5.5)専用外部スタイルシートの読み込み
------------------------------------------------------------ */
@media tty {
i{content:"\";/*" "*/}} @import 'win-ie5x.css'; /*";}
}/* */
/* Windows版IE5.0専用外部スタイルシートの読み込み
------------------------------------------------------------ */
@media tty {
i{content:"\";/*" "*/}}; @import 'win-ie50.css'; {;}/*";}
}/* */
/* Windows版IE5.5専用外部スタイルシートの読み込み
------------------------------------------------------------ */
@media tty {
i{content:"\";/*" "*/}}@m; @import 'win-ie55.css'; /*";}
}/* */
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
指定順：概要
* 1.「視覚整形モデル」に関するプロパティ 表示や配置など
* 2.「ボックスモデル」に関するプロパティ marginやpadding、borderなど
* 3. 背景に関するプロパティ
* 4. フォントとテキスト、色に関するプロパティ
* 5. 生成内容に関するプロパティ
プロパティ詳細
o 視覚整形モデルプロパティ
display
list-style
position
float
clear
width
height
o ボックスモデルプロパティ
margin
padding
border
o 背景プロパティ
background
o 文字、色に関するプロパティ
color
font
line-height
text-decoration
text-align
vertical-align
white-space
o 表に関するプロパティ
table-layout
border-collapse
border-spacing
o 生成内容に関するプロパティ+(その他のプロパティ)
content
cursor
outline
volume
speak
* style属性が指定されていたらa=1、b=0、c=0、d=0とします。
* セレクタに含まれているid属性の数をbにカウントします。
* セレクタに含まれているid以外の属性と擬似クラスの数をcにカウントします。
* セレクタに含まれている要素と擬似要素の数をdにカウントします。
そして、a-b-c-dと数字を並べて、数字が大きいほど優先度が高くなります。
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */
li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */
li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */
ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */
h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */
ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */
li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */
#x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */
style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */
セレクタ類 CSS2 CSS2.1
style属性 100点 (id相当) 1,000点
id 100点 100点
class 10点 10点
擬似クラス 10点 10点
属性セレクタ 10点 10点
要素タイプ 1点 1点
擬似要素 0点 (無視) 1点
ユニバーサルセレクタ 0点 0点
* { color: silver; } /* 個別性 0点 */
em { color: gray; } /* 個別性 1点 */
p em { color: blue; } /* 個別性 2点 */
em.note { color: green; } /* 個別性 11点 */
em#note01 { color: red; } /* 個別性 101点 */
擬似クラスも10点。a要素に対する擬似クラスでは...
[例]
a:link { color: blue; } /* 個別性 11点 */
a:visited { color: purple; } /* 個別性 11点 */
a:hover { color: red; } /* 個別性 11点 */
a:active { color: yellow; } /* 個別性 11点 */
テーブルサンプル
カラーサンプル
シンプルデザイン
基本XHTｍl
枠線のバリエーション
テキストサンプル
フォントファミリーの指定
行の高さの指定
ナビゲーションサンプル
サイズ可変ナビゲーション
タブ形式ナビゲーション
フォームサンプル
フォームカラーバリエーション
ベーシックフォーム1
ベーシックフォーム1
ベーシックフォーム1
ベーシックフォーム2
ボックスサンプル
インラインボックス
ブロックボックス
バックグラウンドイメージ
リストサンプル
イメージマーカー
基本サンプル
ブロックカラー
バックグラウンドイメージマーカー
おまけ：バックグラウンド・イメージーマーカー応用編
レイアウトサンプル
2段組レイアウト
幅固定・左寄せ
幅固定・中央寄せ
幅固定・中央寄せ・背景つき
3段組レイアウト
幅固定・左寄せ
幅固定・中央寄せ
リキッドレイアウト
2段組・背景つき
2段組・幅の制限つき
外部CSSサンプル
CSSハック使用transitional
CSSハック使用strict
条件分岐コメント使用
CSSハック使用transitional
CSSハック使用strict
擬似クラスサンプル
フォントカラー
ブロックカラー
ボーダースタイル
基本XHTML
a.html
b.html
c.html
d.html
e.html
index.html
index2.html
message.html
index.html
index2.html
デザインのフォーム
フォーム
フォーム
フォーム
フォーム
フォーム
携帯フォーム
携帯フォーム
携帯フォーム
携帯フォーム
携帯フォーム
携帯フォーム
携帯フォーム
携帯フォーム
携帯フォーム
携帯フォーム
フォーム
フォーム
フォーム
フォーム
フォーム
フォーム
フォーム
フォーム
フォーム
フォーム
フォーム
form1.html
form2.html
table.html
midashi.html
index.html
index_link.html
mobile1.html
mobile2.html
0615_index.html
0630_index.html