高森太郎の日記。

高森太郎の日記です。

固定とは? 分かりにくい説明(^^;)


 良く分かる説明は「CSSの主なプロパティ -- ごく簡単なHTMLの説明」をご覧ください。(汗

 まず、使っているのがWindowsで、IEを使っているって事を前提でおねがいします〜。これいがいあんまり詳しくないので(汗)

 スタイルーとで「値を固定する」というのは、たとえば、表示領域の幅の場合、固定してある場合、今見ているブラウザのウインドウなどに関係なく、幅が固定されているとか、見ている側の設定に関係なく文字の大きさが固定されている、と言うことです。
 利点としては…

  • ページを作っている側で表示をほぼ完全にコントロールできる
  • 表示ページのくずれを最小限に抑えることが出来る

 と言うのがありますが逆に

  • 見ている側の環境によっては、幅を固定するとがらーんとあいてしまったり、小さい文字が読みにくくなったりする。
  • 「固定にすると見にくい!」と鬼の首を取ったかのように言ってくる人がけっこ〜いる(^^;)(とくにフォントサイズが……)

 と言うことがあります。いずれもはてなダイアリー中に限定した場合ですが。そして、自分のこのページは一切固定は用いてません。ためしに、表示→文字のサイズ、を変更したり、画面を小さくしたりしてみてください。変わらないでしょう?


 さらに具体的な話に行くと……

 スタイルシートで大きさを指定する場合は、通常、

  • 99cm ... centimeters
  • 99em ... element's font M
  • 99ex ... element's font x
  • 99in ... inches
  • 99mm ... millimeters
  • 99pc ... picas
  • 99pt ... points
  • 99px ... pixels



 という単位があります。(この中でよくつかうのは、px(pixels)とemをよくつかいます。)で、ここで登場しているのはすべて*1すべて固定サイズです。

 たとえば、

body{
	width: 8000px;
}

とすると、画面全体の大きさが8000ピクセルに固定されます。そうすると、大抵の場合、画面の下に横スクロールバーが出て、画面がぐにょ〜んと横に広がります。
 もし、8000ピクセル以上のものを表示できる画面を使っている人だと、8000ピクセル以上にあまってしまった場所は、ただ背景色が表示されるだけでなにもなし、というだけになります。


 そして、相対表示と言うのは

  • %

があります。その名のとおりパーセントです。

 たとえば、

body{
	width: 80%;
}


とすると、IEのウインドウの大きさの80%になります。
こうすると、画面の小さなモバイルパソコンを使っている人も、デザイン事務所で巨大で広大なモニタースペースを使っている人も、その表示させたウインドウの大きさの80%になります。


 このサイズ指定は文字でも可能で、たとえば

strong{
	font-size:120%;
}

 にすると通常の文字の大きさより20%大きいです。これは理屈的には

strong{
	font-size:1.2em;
}

 も同じなんですけど……実はこのemというのはとあるブラウザで大きさの認識に難がありまして……一般的に%を使うことも多いようです。

 さらに、

<body>

 中略

<h3>今日は土曜日</h3>
<div class="day">
あいうえお
<div class="section">
<h4>雨だよ〜ん

 なーんてなっている場合。固定表示だとすべて固定してしまえばよいのですが、%指定だと……

div.day{
	width:80%;
	margin-left:10%;
}

div.section{
	width;80;
	margin-left:10%;
}

 と指定した場合、それぞれの指定はそれぞれの親要素から指定の量、ということになるんです。
 この場合<day class="day">で囲まれた部分は、親要素(bayを含むもの。)bodyから80%の大きさになります。
 さらに、sectonの親要素(sectionの親要素)はdayですから、dayの80%になります。
 つまり、sectionの幅はbodyの80%のさらに80%になる、ということになるわけです。


 ……ややこし〜(^_^;)
 とりあえずやってみることをお勧めします。とりあえず今あるスタイルシートとヘッダとフッタを保存しておいて、やってみればいいと思います。だめだったらそれを元に戻せば元に戻るんですし。

 というわけで、固定とは、の良く分からない説明でした。


 繰り返しですが、良く分かる説明は「CSSの主なプロパティ -- ごく簡単なHTMLの説明」をご覧ください。(汗

*1:本当は、emとex,pxは、それぞれ文字の大きさと画面の解像度に依存して大きさを変化するらしいですが、ここでは固定としてます。