目次 < 前項 戻る 次項

バナー

中年おっちゃんでも出来た ホームページ作成講座 with ? mark

第四章 私のホームページ − 其の弐

余裕が無い?
ε-(;ーωー)フゥ…余裕じゃーー!

サンプル-5
馬子にも衣装?
サンプル-6
サンプル-7
サンプル-8

サンプル-5

サンプル5を開いて、ソースを見て下さい。

BODY要素、H1要素、P要素の余白部を ”0” にして、表示可能な巾と高さを最大にしました。

P要素の表示を105%にしました。

参照 巾や高さの単位 要素の領域

スタイルシート内の変更箇所

<style type="text/css">
body  { margin    : 0px ;
        padding   : 0px ; }
h1,p  { background-color : #ccf ; }
h1    { font-size : 120% ;
        margin   : 0px ;
        padding  : 0px ; }
p     { font-size : 95% ; font-size : 105% ;
        margin   : 0px ;
        padding  : 0px ; }
.posi { float    : left ;
        width : 20% ; width : 19.95% ; }
</style>
body { margin : 0px ; padding : 0px ; }
marginプロパティは、周囲の要素との隙間、マージンの指定
margin : 0px ;
要素全周のマージンを0pxにする。
paddingプロパティは、要素の影響する範囲、パディング領域の指定
padding : 0px ;
要素全周のパディング領域を0pxにする。
.posi { float : left ; width : 20% ; width : 19.95% ; }
何故か列の表示幅が19.95%になっています?

馬子にも衣装?

少し古いバージョンのIEでは、列の表示幅20%指定では、ブラウザの表示幅をホンノ少し変えただけで表示が崩れる現象が起きてしまいました。

表示が崩れている画面の表示  表示が崩れている画面の表示

表示幅をホンノ少し変えてだけで、表示が崩れたり崩れなかったり。これでは不安定で実用になりません。他のブラウザでは、正常に表示されます。

各列の表示巾を、表示可能な巾の20%と単純に考えていました( 100% / 5= 20% )が、ブラウザがスタイルシートを解釈して計算した時に、全体の表示幅が100%を超えると判断して、最後の列を左側に移動したようです。

そこで、表示幅を表示可能な巾の19.95% とする事で、表示の崩れがなくなりました。少し古いバージョンのIE だけの現象のようです。

IEでの表示崩れが克服できましたので他のブラウザでもサンプル5を表示させてみました・・・・?

IE での表示
Internet Explorerの表示

NN での表示
Netscape Navigatorの表示

Opera での表示
Operaの表示

Firefox での表示
Mozilla Firefoxの表示

Sleipnir での表示
Safariの表示

HTML という馬子に スタイルシート という衣装を着せただけなのに、何故こんなに見栄えが違うのでしょうか?

この時に使用している各ブラウザも少しバージョンの古いものです。

サンプル-6

サンプル6を開いて、ソースを見て下さい。

表示文字を太文字表示にして、要素間を見易い間隔に設定しました。

参照 要素の領域 巾や高さの単位

スタイルシート内の変更箇所

<style type="text/css">
body  { margin    : 0px ;
        padding   : 0px ;
        font-weight : bold ; }
h1,p  { background-color : #ccf ; }
h1    { font-size : 120% ;
        margin   : 0px 0.2em ;
        padding  : 0px ; }
p     { font-size : 105% ;
        margin   : 0px 0em 0.2em 0.2em 0.75em ;
        padding  : 0px ; }
.posi { float    : left ;
        width    : 19.95% ; }
</style>
body { margin : 0px ; padding : 0px ; font-weight : bold ; }
font-weightプロパティは、表示文字の太さ指定
  • boldは、太文字の表示指定
  • BODY要素に指定する事で、そのページの基準になります。
p { font-size : 105% ; margin : 0em 0.2em 0.2em 0.75em ; }
margin : p1 p2 p3 p4 ; は、要素回りマージン値の個別指定
  • p1 : 要素の上側のマージン指定
  • p2 : 要素の右側のマージン指定
  • p3 : 要素の下側のマージン指定
  • p4 : 要素の左側のマージン指定
と、時計回りで指定します。

サンプル-7

サンプル7を開いて、ソースを見て下さい。

P要素の表示を整列させました。確認の都合上、P要素の左右のマージンを"0"としました。

参照 巾や高さの単位

スタイルシート内の変更箇所

<style type="text/css">
body  { margin    : 0px ;
        padding   : 0px ;
        font-weight : bold ; }
h1,p  { background-color : #ccf ; }
h1    { font-size : 120% ;
        margin   : 0.2em ;
        padding  : 0px ; }
p     { font-size : 105% ;
        margin   : 0em 0.2em 0em 0.2em 0.75em 0em ;
        padding  : 0px ; }
.posi { float    : left ;
        width    : 19.95% ; }
.dan  { margin-top : 1.2em ; }
</style>
.dan { margin-top : 1.2em ; }
margin-topプロパティは、要素上側マージンのみのを指定します。

BODY要素内の変更箇所

<body>
 :
<h1 class="dan">生活一般</h1>
== 生活一般 ==
 :
<h1 class="dan">PC</h1>
== PC ==
 :
</body>
<h1 class="dan"> 〜 </h1>

スタイルシートで指定した対象クラス要素に反映させて表示させます。

該当H1要素の上側マージンを調整する事で、私が現在使用しているバージョンの IE ではP要素の高さが揃いましたが、他のブラウザでは、微妙に揃っていません。私は、普段 IE を使用していますので、このまま進みますが、将来、IE のバージョンや使用するブラウザが変わり、表示がずれたとしても、この指定を変えるだけで対処できます。

リンク先の名称が2行表示になった箇所の名称を変更しました。

『 HTML 4.01 Specification 』  ⇒  『 HTML 4.01 Spec.』
『 XHTML 1.0 2'nd Edition 』 ⇒ 『 XHTML 1.0 2'nd 』
『 通信用語(等)の基礎知識 』 ⇒ 『 通信用語の基礎知識 』
『 日本最初のホームページ 』 ⇒ 『 日本最初のH.P. 』
『 南極観測のホームページ 』 ⇒ 『 南極観測のH.P. 』

サンプルは、私のホームページで、他人が見るわけでもないので勝手に名称を変更しましたが、実際にウェブページ上でリンクする場合、名称を変更して記述するのは失礼ですし、著作権法上も問題があると思います。

サンプル-8

サンプル8を開いて、ソースを見て下さい。

H1要素とP要素の背景色を消して、P要素のマージンをサンプル6の状態に戻します。

参照 巾や高さの単位

スタイルシート内の変更箇所

<style type="text/css">
body  { margin    : 0px ;
        padding   : 0px ;
        font-weight : bold ; }
h1,p  { background-color : #ccf ; }
h1    { font-size : 120% ;
        margin   : 0.2em ;
        padding  : 0px ; }
p     { font-size : 105% ;
        margin   : 0em 0em 0.2em 0.2em 0em 0.75em ;
        padding  : 0px ; }
.posi { float    : left ;
        width    : 19.95% ; }
.dan  { margin-top : 1.2em ; }
</style>

これで、構成要素の配列(レイアウト)が決まりました。次章からは見栄えの変更です。

目次 < 前項 戻る Top ↑ 次項

Created:Jul.,12,2009 Updated:Oct.,25,2011 © by おっちゃん
Oct.,25,2011 全面更新