CSS備忘録

★font-sizeを指定したらline-hightもセットで指定すること
ブラウザごとユーザーの設定ごとにテキスト表示の解釈が違う。
IEでは行間を調整してくれないがfirefoxでは適当にやってくれる。
そのため、heightの見栄えに違いが出てしまう。



★できるだけハックは使用しない
基本に忠実に作っていればハック無しでもキチンと表示できる。
どうしてもダメなところはハックする。
ハックに頼り過ぎない。



★できるだけpaddingは使用しない。
　marginで処理できるものはmarginで。
marginが利かない場合、サイズによってmarginが取れずズレてしまうので
1pxずつ調整してみると、うまくいくことがある。



★IEなどブラウザ別表示の許容範囲とは？
配置がずれてなくて、画像等が隙間やずれが生じないこと。



★基本のターゲットブラウザ、エンジン
　IE6　IE7　Firefox1.5以上　Safari1.3以上
　IE　→　IEエンジン
　netscape・firefox　→　Gekkoエンジン
　Safari　→　Webkit



★faviconはサイトのルート上に置く
imagesフォルダーに入れるのではなくてindex.htmlと同じ階層にfavicon.icoを置く。
ローカルでチェックしてもfirefox以外のブラウザでは
ネット上から見ないとfaviconが表示できない。
IEはサーバーの一番上のフォルダにfavicon.icoがあれば勝手に読んでくれる。



★アンカータグの指定はlink visited hover activeの順番を守る
　この順番で設定しないと動作が正常にならない。



★XML宣言について
XHTMLで作るならXML宣言文は必須。
IE6の互換モードはターゲットブラウザから外す。（XML宣言しているから）
互換モードを入れてしまうとCSSはまったく変わってしまう。
互換モードや古いブラウザで作るならHTML4.01や最悪HTML3.2で作ること。
XHTMLでサイトを作る場合、基本的に古いブラウザや互換モードは外した場合の話になる。



★floatはtableの焼き直し。
　floatはtableレイアウトと大差ない。
　SEO対策を施すなら、絶対配置＆相対配置＆floatを組み合わせる。



★CSSの概念とは
　HTML　→　データ
　CSS　→　レイアウト
　という分離によって、データは重要なものを好きな位置に記述でき、CSSで見やすく配置すること



★テキストタイプのブラウザ
　SEOを意識するならテキストタイプのブラウザがあると便利。
　テキストタイプのブラウザ Lynx
googleなど主要なサーチエンジンのロボットはテキストタイプのブラウザの見え方と同じ情報の見方をしている。

position:absolute;

はあ。

絶対配置わからんすぎ。。。。

さにゃのサイトは絶対配置向きとゆー
先生のアドバイスに従い、ちょっと配置の仕方を変えてみた。


今までfloatでしかサイト組んでなかったさにゃさん。

floatと絶対＆相対配置は混在させちゃダメと言われていたのに
逆のことを言われて大ショックを受けたのです。。。Σ(￣□￣;)ガ～ンッ

人によってCSSの解釈とかやり方違うのはわかるけど
全く違う効果を言われてしまうと
何を信じたらよいのか、ほんとに迷ってしまう～

きっとみんな、いろんなやり方を自分で試して
答えは自分で決めているんだと思う。
誰のやり方が正解とかないんだろうな。。。


「floatではtableレイアウトとなんら変わらんから
SEO重視するなら絶対＆相対配置でやること！」と教わり
いま作り直し中なんだけどぉ

やってるうちにレイヤーみたいに要素が重なっちゃうから
もーワケがわからない。。。(@_@;) む～ん。

なんとなくでやってみたけど、
やっぱりうまくいかない。。。（そりゃそーだ）

教科書とググる先生片手に復習しなおし
CSSレイアウト出直しですだっ


まずここが理解できればイイwebデザイナーになれますとのこと。

何が何でも尚更モノにしなけりゃ。

きっとAJAXとかPHPとか覚えるよりも基本的で重要なコトなんだわ

どげんかせんといかん

もぉどーにもならんてことで
仕事のじゃまにならなければいーなと思いつつ
昨日、ガッコの先生にヘルプメールを送信。

いまコーディング中のwebサイトで様々なトラブルが発生(((（ ;ﾟДﾟ)))
（自分の技術が伴ってないだけとも言うが）

背景の処理がうまくいけば8割フォーマットが完成するんだけど。
こんなデザインにした自分をうらんでしまうよ。。。



永遠のテーマ（？）、ブラウザの致命的な問題が
どーしても私の行く手を阻む…（ー"ー；）
チクショー。

何度思ってもしかたないことだけど、
ブラウザの表示を共通してくれ～。

でも世の中のwebデザイナーがみんな越えてることなんだと思うと
なんとか自力で乗り越えたかったヨ（≧д≦）

そんなわけで
どーにもならん部分は後回しにして
サクサク他の作業を進めましょう。

ヒサブリCSS

先述したweb制作、ようやっとデザイン作業が終わり
昨日からhtml化に入った。

クリオ以来のコーディング。。。
やっぱりマメに触ってないと忘れる忘れる。

無料サーバーにアップするため、プログラムは使用制限があって
簡易的なものにしかなんないけど、今回は商用サイト（ガラス屋さん）。
基本はXHTML+CSSで組んで
JSとかflashとか、試験的に取り込んでみるつもり★☆★

現在はliがブラウザ別にうまく表示しなくて手こずってる……(@_@;)
firefox（モダンブラウザ）のほうが正解とは言うけど、
場合によってはIEのいいかげんな表示に救われる時があるのよね。。。
はて、どーしたものか。ちょっと頭冷やそかな～。

コリスさんとか様々なCSSマニュアル的サイトを見てちょっとずつ進む。

そんな中、いい情報を発見！

外部スタイルシートをlinkするかimportするかでパフォーマンスが違うらしい。
IEではimportで外部CSSを指定すると悪影響を与えるので使用しないとか。
いろんなサイトでCSSの指定の仕方があるなーとは思っていたけど
実際さにゃが使ってたのは、HTMLファイルにimport.cssをリンクして複数CSSを読み込むやり方。IE的にはNGですよ～とゆー方を使ってたのだ。。。ショック！

いくらガッコで教えてたからって、そのやり方がすべてではナイんだなと実感。
どんどん新しい情報と技術が出てくる業界なんだから
過去の方法に固執してたら取り残されちゃう。

※追記（2009.6.20.）
　教科書を読み返していたらimport.cssで外部cssを読み込むことでIE4.0のCSSを切ることができるのでした。よって今回もimportした。

とにかく、なんかするたびにコードをドジって
「あ～～～っもうっ！」となってしまう。。。

が、苦労の末にCSSがうまく反映すると単純なもんで嬉しい（＾＾＊
えへへ


こんな低レベルで転職できるんだろか。。。

やっとこさ

長いこと悩んでいた「背景画像が伸びない」という現象が解消された～
あーよかったよかった。

これで本文をガツガツ制作できるっ
つか課題提出は明日なんですが…。。（間に合うか！？）

でもこれがホントやり方としてはベストなのか分からないなあ。
のちのちもっとイイ方法が出てくるかもしれないので
今の方法を書いておきましょう。

●背景画像が周りにあわせて伸び縮みしない

*/親要素*/
#contents {
width:800px;
overflow:hidden;*/overflowはIEではスクロールバーが表示されてしまう*/
}

*/親要素に対して以下の指令を記述*/
#contents:after {
content:"";
display:block;
clear:both;
height:0;
visibility:hidden;
}

*/子要素*/
#main {
width:500px;
float:left;
background:url(画像) repeat-y center;
padding-bottom:32768px;
margin-bottom:-32768px;
}
と、することによって親要素に入っている子要素のdivのbackgroundが伸びた。
padding-bottomとmargin-bottomに32768pxの値を入れるってのがちょっと不安。。。
どっかのブラウザでバグってそーだなあ。
IE6は対象ブラウザにしてないけど、ちょっと見てみよう。

ひとまず今回のサイトではこれで問題解決した★