CSSは現在のところ、SEOには全く関係ない。見た目を制御するだけのもの。
静的WEBサイトを作成する手順
- イラレ、フォトショを使って見た目を作る
- それに沿ってHTMLでマークアップする
- CSSで見た目を整える
EC業界の現在は「楽天」と「Amazon」の2強！
楽天のサイトはW3Cに準じてないのでCSSが効かない。(DOCTYPEがない！)だいたいは、テーブルに画像をはめている。
よって、ほぼほぼ画像！→よくないが仕方ない例。
基本の記述ルール
セレクタ {
プロパティ: 値;
}ディベロッパーツール（検証ツール）の使い方など
ブラウザのfn＋f12またはctrl＋shift＋iで起動
CSSの優先順位
element.styleの中にはHTMLのstyle属性で指定したものが表示される
developper toole(DT)は一番上に表示されている方が強い。
この表示順は、セレクタの得点計算で合計点が高い方が優先されるが、、、
考え方としては、より個人色の強い方が優先されると覚えればいい。
順番 !important>style属性>id>class>疑似クラス(:hoverなど)>疑似要素(:afterなど)>要素名>＊
同点だったときは、CSSファイルで後に書いてある方が有効。（上から読んでいくから。）
検証手順
- 検証したいところをクリック
- セレクタの頭文字を入力
- カーソルの↑or↓で選択
- tabで値を入力
- enter
- 問題なければ、「〇〇.css」となってるリンクをクリック
- 該当ファイルの全文が変更したCSSで表示されるので全コピー＆ペースト
その他
- idは１ページにつき１回しか使えないので、headerやfooterにid振ったりする。
- タグが各ブラウザに対して使えるかどうか？はチェックサイトで確認する
- menuは画像にするとSEO落ちる。できるだけテキストで入れる。
- 「user agent stylesheet」と書かれたものはデフォルトのブラウザのCSS
テキスト装飾
| プロパティ | 効果 | 例 |
|---|---|---|
| color | 文字色（前景色）を指定する | color:#666666; color:rgba(0,0,255,0.5); |
| opacity | 要素の透明度を指定する（初期値は1。0.0～1.0で指定） | opacity:0.7; |
| text-align | ブロック内の行の揃え位置・均等割付を指定する | left right center |
| text-decoration | 下線や線なし | none（無し） underline（下線） |
| text-shadow | テキストに影をつける（初期値：none） | スペース区切りで「水平方向の距離」 「垂直方向の距離」 「影のぼかし半径」 「影の色」を指定 「,」区切りで複数可 例）text-shadow: 5px 5px 2px #333333; |
text-shadowのぼかし具合は、数値だけだとイメージしにくい。四角二重のアイコンをクリックで可視化しながら調整できる。
