スタイルシートをわかりやすく 2 （担当Ｍ） | 札幌発！テクニカルライター＆Webライターの部屋

100万ポイント山分け！1日5回検索で1ポイントもらえる

565942

ホーム | 日記 | プロフィール

【フォローする】【ログイン】

プロフィール

テクニカルライター

フォローする

フリーページ

取材

(6)

バックナンバー

2026/05
2026/04
2026/03

2026/02
2026/01
2025/12

日記/記事の投稿

ブログを引っ越します（蝦名）
仕組み作りは、お任せください（滝田）
あるべき姿と今の姿（滝田）
原稿をいただいて流し込むだけのWeb屋ではありません（蝦名）
負の連鎖にまきこまれない（滝田）
年度末で大変な皆様へ（蝦名）

お気に入りブログ

『佐渡島に行って考… ＬＤ菊池さん

歳を取って気付くことくりりん630さん

ＰＬＡ＋ＮＥＴＳク… ａｙｕｍｙｕさん
天使の導き 安寿ーあんじゅさん
新川てるえの家族の… 新川てるえさん
おもしろき　ことも… kenkenppaさん
プリプレス･センター… プリプリ人さん
駐妻の光と影　 pumpkin2005さん
にわとりのあたま にわとりのあたまさん
カラーセラピーＲｏ… rosa_mihoさん

< 新しい記事

新着記事一覧(全1310件)

過去の記事 >

2004/09/07

スタイルシートにコメントを入れるときのポイントその2です。

TOPページ用と下位ページ用のスタイルが、それぞれ膨大にできちゃったとき、どうしますか？

TOPページ専用、下位ページ専用のCSSファイルを別個に作成してリンクさせるのも１つの方法です。
でも、両方に共通のスタイルが含まれていると、
スタイル変更が必要になったとき、２ファイルをいっぺんに変更しなければならなくなり、作業が煩雑になってしまいますよね。ミスも出てきます。

そこで、CSSファイルは１つにして、次のようにコメントを入れておきます。

/*　TOPページ専用スタイル　*/

.footer {

font-weight: normal;
color: #ffffff
}
.catch {
font-size: 100%;
color: #cccccc
}

/*　下位ページ専用スタイル　*/

.nodecoration {
text-decoration: none;
color: #FFFFFF;

}

.topicpath {
font-size: 8pt;
font-weight: bolder;
color: #FFFFFF

/*　共通スタイル　*/

.font9pt {
font-size: 9pt
}

こんな感じで組み立てておき、
さらに

a.top{*******}
a.sub{*******}

など、HTMLタグ自体にclassの指定を入れておく方法も
併用すると、
スタイルがかなり判別しやすくなりますよ～ん。

お気に入りの記事を「いいね！」で応援しよう