2006年02月02日

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

本日の更新情報。

新着サイト(13件)




さて..今日は書くことがないので、思いついたネタを...。

いつからかは知りませんが、「font」タグは
「非推奨タグ」に認定されていますよね。

という訳で、
今日は「font」タグをスタイルシートで表示させる方法です。
(超初心者向けです...)



まずは、スタイルシートのファイルを作ります。

スタイルシートは、
<head>〜</head>間に入れてもよいのですが、
SEO的にもソースの見た目にもよくないので、
外部に作ります。

作り方。


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

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

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

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

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

  6. 終わり



これで外部スタイルシートが完成しました。

あとは、その空のスタイルシートに色々と書いていきます。




今日は「font」タグの話なので、
スタイルシートを使った「font」タグの指定方法です。

「font」タグは、「色」や「大きさ」を指定する時に
使うことが多いと思いますのですが、今日は時間がないので(笑)
『スタイルシートで、文字の色を指定する方法』を簡単に。




今まで、

<font color="#ff0000">赤</font>

という記述をしていた箇所があったとします。

とりあえず、先ほど作成した「style.css」を開きます。

そこで、以下のような記述をします。


span.red {
color : #ff0000;
}


こう書いたら、「style.css」を上書き保存→アップロードします。

次に、

<font color="#ff0000">赤</font>

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

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

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

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

最後に、

<font color="#ff0000">赤</font>

を消します。
消した場所に、以下のような記述をします。

<span class="red">赤</span>

これで、ブラウザ上では

<font color="#ff0000">赤</font>

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

今回は「#ff0000=赤」でしたが、
もちろん他の色を指定することもできます。


例)

青なら...

span.blue {
color : #0000FF;
}

緑なら...

span.blue {
color : #008000;
}

ちなみに、スタイルシートを呼び出したい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:22│Comments(4)TrackBack(0)
│更新情報 | html、CSS

トラックバックURL

この記事へのコメント

1. Posted by store15nov.net   2012年06月07日 09:22
5 For my part everybody ought to glance at this. あたしが好きなお菓子は、アポロ
2. Posted by セリーヌ バイカラー バッグ   2014年03月09日 02:36
(内側)ファスナーポケット×1、オープンポケット×2
3. Posted by プラダショルダーバッグ新作   2014年03月17日 17:57
スタンパコッコ 2つ折り財布 グレー
4. Posted by 2児のママです♪   2015年07月03日 18:42
巡り巡ってたどり着きました♪
更新、頑張っているんですがどうしても上手く書けないのでスランプ中です(;´∀`)
私のブログもあなたに何か興味を惹く事があればいいのですが☆
色んな記事を書けるようにブログ巡りをしているので、是非とも私のブログにも遊びに来て下さいね♪

この記事にコメントする

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


スポンサード リンク