やまだ系

コンピューターやWEB関連の情報収拾と整理、資格取得に関することを目的にしたブログ

その2

bodyタグについてちょっと設定。今現在下記の内用で記述してます。

body {
	color: #666;
	margin: 0px auto;
	padding: 0px;
	font-family:"Verdana", "ヒラギノ角ゴ Pro W3",
          "MS Pゴシック", "Osaka", "sans-serif" ;
	text-align:center ;
	background : #E98383;
	width:760px;
	font-size:90%;
	line-height:120%;
}

bodyタグはhtml全体に影響を持っているタグでここで、基本となる文字の大きさなんかも指定してます。
htmlでいえばfont size="3"が、標準の文字サイズになっていますが、ブラウザごとに規定で持っているフォントサイズは微妙に違いますそこで、ブラウザごとにフォントサイズが違うため見え方も当然変わってきてしますので、それが嫌だという場合はpxでの数値指定ししてしまいます。
しかし、これだと文字を大きくしてみたい場合にブラウザによっては大きくならないという現実があります(特にI.E!)。そこで、文字サイズの大きさをユーザーが自由にかえられる可変性の指定をしています。cssにsmallとかx-samllとかもありますが、なかなか扱いが難しいので%自分は指定にしてしまっています→font-size:90%;ただこれもブラウザによって見え方がやっぱり違うので絶対いいというわけではないので、ケースバイケースで指定をする必要があると思います。
たとえばここでいうと右上項目の最新の日記やユーザー登録もしくはログインログアウト表示部分I.Eの[表示]-[文字のサイズ]-[最大]にかえてみても文字の大きさが変わらないのはここはpxでの数値指定をしているためです。ほかのレイアウトは崩れまくり(汗;)なので、レイアウトが崩れちゃいけないとかあった場合には絶対指定の文字サイズ指定が必要かもしれないというお話。ユーザーにとって使いやすいかどうかは、そのサイトのターゲットユーザーに会わせてということになると思ってます。
左右に余白を作っているのはmarginという部分で作ってます。
width:760px;
margin: 0px auto;
これはコンテンツの中身は横幅760pxに指定して、上下、左右は上下は全く間を作らず左右はお任せしますという指定になるんでしょうか。こうすることで、見ている人が760px以上のブラウザサイズで見た場合でも左右に自動的に間が生まれるという指定のつもり。ただし、
text-align:center ;
も、一緒に指定してないとI.Eは中央に配置してくれません。
でもコレを入れるとコンテンツの中身全部中央揃えになってしますので、それぞれのブロックに関してまた
text-align:left ;
を入れることでぜーんぶ中央揃えを回避できるのでした。

とりあえずここまで