文字サイズの固定

投稿者：admin 投稿日時：火, 11/11/2008 - 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^)丿）

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

関連書籍

ホームページ辞典第5版 HTML・CSS・JavaScript
著者: 株式会社アンク　出版年月: 2012-03-14 　
定価: ￥ 2,100 (新品)

アメブロ　カスタマイズ＆デザインブック
著者: 藤原直樹　出版年月: 2012-02-18 　
定価: ￥ 1,974 (新品)

HTML5 CANVAS & CSS3 デザインガイド (DESIGN GUIDE)
著者: 鈴木清安　出版年月: 2012-02-03 　
定価: ￥ 2,709 (新品)

月刊新潟Komachi 3月号
出版年月: 2012-01-25 　
定価: ￥ 675 (新品), ￥ 675 (中古)

DreamweaverではじめるWebサイト構築―「HTML」「CSS」を効率良くコーディング (I・O BOOKS)
著者: 村山秀明　出版年月: 2012-01 　
定価: ￥ 2,415 (新品)