文字サイズの固定

投稿者：admin 投稿日時：2008/11/11（火） 13:55

せっかく、きれいに表示されるようにレイアウトを考えても、ブラウザの「文字のサイズ」を変更すると、レイアウトが崩れてしまう・・・・
そんなときは、「スタイル」を設定すると一定の大きさで表示されるようになります。

スタイルシートを用いる方法には、次の３つがあります。
表示サンプル　：18pxを指定するとこのように表示されます
（１）色々なHTMLタグに個別に記述する方法

【記述例】
<font style="font-size: 18px">このように表示されます</font>

（２）ページの<head></head>にスタイルを記述する方法

【記述例】
　　　<style type="text/css">
　　　
　　　</style>

（３）（２）の内容を拡張子がcssで終わる名前の外部ファイルに記述します。このとき、<head></head>部分に、外部ファイル名を記述します。

【記述例】
<link rel="stylesheet" href="外部ファイル名" type="text/css">

サイト全体のデザインに関わる記述は、記述を一元管理できる（３）の方式を用いることをおすすめします。（変更が発生した場合、外部ファイル１つを修正すれば絃ページに反映する）

また、設定は、①<font>などのタグ自体に設定する方法と，②タグにclassや③IDを指定することでスタイルシートの内容を反映させる方法があります。

文字の大きさに限らず、色は背景やその他デザインに関わる多くのことを設定することが出来ますので、色々と活用の方法を試行錯誤されてみると良いと思います。

（ちなみに、このセルの背景もスタイルシートで指定しています(^o^)丿）

※スタイルシート関連をとても参考にさせていただいています！

関連書籍

HTML+CSSコーディング　ベストプラクティス　高速かつ堅牢なコードを効率よく書くために
著者: こもりまさあき、西畑一馬、浜俊太朗　出版年月: 2010-08-25 　
定価: ￥ 2,625 (新品)

iPhoneアプリケーション開発ガイド　―HTML+CSS+JavaScript による開発手法
著者: Jonathan Stark 　出版年月: 2010-08-07 　
定価: ￥ 1,995 (新品)

Dreamweaver CS5 HTML&CSS Webデザイナー養成講座
著者: 村谷圭一　出版年月: 2010-07 　
定価: ￥ 2,814 (新品)

iPhoneのオモチャ箱 iPhone SDKプログラミング
著者: 徳井直生　出版年月: 2010-06-22 　
定価: ￥ 3,675 (新品), ￥ 2,879 (中古)

ビデオ SALON (サロン) 2010年 07月号 [雑誌]
出版年月: 2010-06-19 　
定価: ￥ 1,020 (新品)