2006年02月03日

「font size」をスタイルシートで表示3

本日の更新情報。

新着サイト(6件)




先日、スタイルシートで「font」の色を指定する方法を書きました。

せっかくなので、今日は

『スタイルシートで、「font」の大きさを指定する方法』

を紹介しようと思います。
(またまた超初心者向けです...)



まず、外部スタイルシートを作成します。
(昨日作った方は作らなくて結構です)


  1. メモ帳などのテキストエディタを開きます。

  2. 「ファイル」「新規作成」をクリック。

  3. そのまま「ファイル」「名前を付けて保存」

  4. 「style.css」という名前で保存します

  5. サーバーにアップロード

  6. 終わり






「font」タグで文字の大きさを指定する時、

<font size="2">2</font>

などのように記述していたと思います。

これを、スタイルシートで記述しよう!という目論見です。




先ほど作成した(あるいは昨日作った)「style.css」を開きます。

<font size="2">2</font>

をスタイルシートで表現する場合は、

span.small {
font-size: 12px;
}

これを「style.css」にコピー&ペーストします。


そして、「style.css」を上書き保存→アップロードします。

次に、

<font size="2">2</font>

という記述のあるhtmlファイルの<head>〜</head>間に、

<link rel="stylesheet" href="style.css" type="text/css">

と書き込みます。
(スタイルシートは、「"style.css"」を参照して下さい、という意味)

これで、外部スタイルシートを参照するような指示ができました。

そして、

<font size="2">2</font>

これを消し、以下のように書きなおします。

<span class="small">2</span>

これで、ブラウザ上では

<font size="2">2</font>

と同じように表示されるはずです。
(「span」の、『small』を参照してね、という意味)




今回は「font size="2"」でしたが、
もちろん他の大きさに指定することもできます。

例えば、標準のフォントの大きさ

「font size="3"」

に相当する大きさは、

「font-size: 16px;」

です。

という訳で、「font size="3"」を指定したい場合は、
「style.css」に

span.middle {
font-size: 16px;
}

と書き(「middle」の部分は、好きな文字列でOKです)、
htmlファイルには

<span class="middle">3</span>

のように記述します。


物凄く小さいサイズを指定したい場合は、

span.○○ {
font-size: 6px;
}

<span class="○○">物凄く小さい</span>

というような感じです。


ちなみに、スタイルシートを呼び出したいhtmlファイルが、
「style.css」のある階層をよりも深い階層にある場合、

<link rel="stylesheet" href="../style.css" type="text/css">

<link rel="stylesheet" href="http://ホームページのURL/style.css" type="text/css">

などと調整して下さい。


SEO対策ディレクトリ型検索エンジン マーキュリー


スポンサード リンク
seo666 at 00:12│Comments(1)TrackBack(0)
│更新情報 | html、CSS

トラックバックURL

この記事へのコメント

1. Posted by 1   2013年06月11日 19:43
5 In my view every person ought to look at it. アポロとか、マーブルチョコとか、ポイフルとか、めっちゃおいしいのに、めっちゃカワイイ

この記事にコメントする

名前:
URL:
  情報を記憶: 評価: 顔   
 
 
 


スポンサード リンク