TOPページ >  スタイルシート(CSS)の記述 > ページ内で一回だけスタイルを使用する

ページ内で一回だけスタイルを使用する

ホームページやブログなどのウェブサイトで、ページ内で一回だけスタイルを使用する場合は、スタイルシートで IDを指定する方法があります。

#名前 { スタイル }

という形式で、スタイルに名前を付けます。複数の指定をする場合は、;(セミコロン)で区切って記述します。見やすいように改行してもOKです。タグの記述は、

<タグ名 id=" 名前 ">

というように、どのスタイルを適用するのか id="名前" で指定します。

同一のスタイルを何度も使用する場合はこちら →複数のタグで同一のスタイルを指定する
使用例です。

<style type="text/css">
<!--
#test3 {
font-weight:bold;
font-size:18px;

}
#test4 {
color:white;
background-color:#000080;
width:100%;

}
-->
</style>

タグの記述は、次のようになります。

<span id="test3">ページのタイトルなど</span>

<div id="test4">
ページの本文など。#スタイル名 で指定する名前は、同一ページで他に絶対使われない名前にしてください。IDが同じものがあると、エラーになる場合があります。ブログの場合 記事が別々でも、それらの記事が一緒に表示されるとき、エラーの対象になります。
</div>

このサンプルを表示させると、次のようになります。

ページのタイトルなど
ページの本文など。#スタイル名 で指定する名前は、同一ページで他に絶対使われない名前にしてください。IDが同じものがあると、エラーになる場合があります。ブログの場合 記事が別々でも、それらの記事が一緒に表示されるとき、エラーの対象になります。

この指定は、ページ内で一回のみの指定なので一般的にはホームページやブログのタイトルなど、他に出現しないものに使います。

個別の記事投稿であればいちいちスタイルシートを記述するより style属性を指定する方法のほうが、いいかも知れません。

通常のウェブサイトであれば、スタイルの記述は<head>~</head> に記述しますが、ブログの場合、そのまま記事の投稿欄に記載してしまっても平気です。
この場合、自動改行機能を有効にしたままですと<style>タグの改行で本文が改行されて間が開いてしまいますので、自動改行は無効にしておくことをおすすめします。

ランキングに参加中です! お役に立てたらクリックをお願いします→

同一カテゴリ内一覧
テーブルの余白などのスタイルを指定する
スタイルシートでボタン風リンク文字を表示する
スタイルの共通部分をまとめて記述する
タグを入れ子にして同じクラス/ID名を使い分ける
見出しタグ(H1~H6)のスタイルを指定する
未リンク、訪問済み、リンク中、マウスが重なったときのリンク文字のスタイルを指定する
リンク文字のスタイルを指定する
タグのスタイルを指定する
外部からスタイルシートを読み込む
ページ内で一回だけスタイルを使用する
複数のタグで同一のスタイルを指定する
一時的にスタイルシートを利用
IEの方はこちらから当サイト ブックマークできます。
ランキング参加中!お役に立てたら クリックをお願いします。
当サイト掲載カテゴリは
Yahoo! JAPAN コンピュータとインターネット > データ形式 > HTML > リファレンス