すべての閲覧環境で同じものを見せることはできるでしょうか？・・・
各種ブラウザ、ＯＳ、機種には、それぞれ特徴がありますが、HTMLの基本要素の設定にも多少の差があります。
たとえばMacの標準フォントサイズは14ptですが、Windowsでは12ptです。
このような仕様の違いからまったく同じデザインで表示するためには、多大な時間と労力が必要になります。
このようなことを避けるためにも、デザイン重視ではなく、文章内容に力を注ぎ魅力あるコンテンツを製作するよう
心がけましょう。
どうしてもと言われる場合は、フォントサイズを統一するためのＣＳＳを各ＯＳ，ブラウザ用に製作すれば可能です。
各要素の設定変更
ＣＳＳを使用すればブラウザの基本設定も自由に変更できます。
たとえば見出し要素、<h1>〜<h6>のフォントサイズは、ＩＥの場合150%〜50%に設定されていますが、
これを逆にすることも可能なのです。
しかし、見出し<h1>が最も重要な見出しであるという要素の持つ意味は変わりません。
では、早速文字の大きさの変更からはじめてみましょう。
文字の大きさを変えるには、font-sizeを指定します。これらの指定は、段落、各要素、id、classに対して行います。
文字の大きさの変更
仮に<h5>の文字の大きさを変えてみましょう。
h5{font-size: 100%;}
これが<h5>の標準文字サイズです。
これが変更された<h5>の文字サイズです。
色の変更
文字の色を緑色にして見ましょう。
h5{font-size: 100%;
color: #008000;
}
どのような要素に対しても設定できますが、各色に意味を持たせることが大切です。
これが変更された<h5>の文字サイズです。
背景色も変えて見ましょう
これが変更された<h5>の文字サイズです。
文字が左に寄りすぎなので、２文字分右に寄せます。
これが変更された<h5>の
文字サイズです。
枠で囲んで見ましょう。
これが変更された<h5>です。
枠線の色、太さも自由に変更できます。
これが変更された<h5>です。
ここまでの設定は下記の様になっています。
h5{
font-size: 100%;
color: #008000;
background-color:#ffffee;
text-indent:2em;
border:solid;
border-width:1px 2px 2px 10px;
border-color:#cccccc #999999 #008000 #ff0000;
}
これで文字の大きさ、色、背景色、枠線を使いこなせます。
各要素の設定変更
文字の上下間隔
文字の上下間隔が狭いと、文章が読みづらくなってしまいます。
この間隔を調整するには、<line-height>を使用します。通常は100%ですが、これ以上を指定する
ことで、間隔が広くなります。反対に小さくすれば狭くなります。
広くした場合 文章が読み易い間隔にしましょう。
文字の上下間隔が狭いと、文章が読みづらくなってしまいます。
この間隔を調整するには、<line-height>を使用します。通常は100%ですが、これ以上を指定する
ことで、間隔が広くなります。反対に小さくすれば狭くなります。
狭くした場合 読みにくくならないよう注意が必要です。
文字の上下間隔が狭いと、文章が読みづらくなってしまいます。
この間隔を調整するには、<line-height>を使用します。通常は100%ですが、これ以上を指定する
ことで、間隔が広くなります。反対に小さくすれば狭くなります。
文字列の位置指定（左右と中央の場合）
文字列をセンター割付するには、Text-align:center;を指定します。
また、左に寄せるには、Text-align:left;を指定します。
右に寄せるには、Text-align:right;を指定します。
センター割付の文章
左寄せの文章
右寄せの文章
