- ベストアンサー
各ページに対するスタイルの適用方法
ある程度の規模の企業サイトのようなサイトを作っていると、ヘッダーやフッターなどは同じスタイルだけど、とあるページのとある部分にだけ特別なスタイルを適用させたいということが多々あります。 そういう場合、これまでは全体に適用している外部CSSファイルにスタイルを追加していたのですが、そうするとそのような特別なスタイルを適用させたい部分を含むページが複数ある場合に、個別にユニークなidやclassを設定したあとにCSSに追記していくことになり、後々CSSが肥大化してとても管理しにくくなってしまいます。 HTMLのheadに直に書くとか、CSSファイルを分けるとか色々方法はあると思いますが、プロの方はどうやってCSSを管理しているのかが気になります。どんな形の適用方法が最も効率的なのかも知りたいので、意見を聞かせてください。
- twinhourse
- お礼率61% (47/77)
- CSS
- 回答数2
- ありがとう数9
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
そもそも、HTMLのかき方がまずいのです。 CSSの条件として、HTMLの文書解析木が正しいことが必須です。 皆さんのページを見ていると、CSSのためだけに、やたらとidが書かれているし、classも不統一です。 また、CSSもやたらと巨大で・・・ idはそのページの唯一特定の要素を定めるものですから、アンカーの目的地以外には特に必要がないはずです。 端的に言うと、Cascading Style SheetsのCascading Style Sheetsたる継承Cascading)を使ってない。 いくつかのポイント ★サイト内のデザインは統一されていること 1) サイト内で最低限統一するスタイルシートはひとつ 2) 配置を指定するスタイルシートは最大３種類 A) 各テーマのトップページ用 B) そのテーマの内容が書かれているページ用 C) プライバシーポリシーや紹介など事務的なページ用 3) 配色を決める カラー用 これらをカスケーディングさせます。 ★可能な限り、idは無論、classもむやみに使わない。 詳細度や、子孫セレクタ、兄弟セレクタ、隣接セレクタで可能なものはそれを使う ★classは特定の要素のためだけに使わない。 <div class="memo header important"> <div class="memo footer note"> とか・・・それだけでスリムになる。 普通はこうしているはず <div class="memo" <div class="header"> <div class="important"> <div class="footer"> <div class="note"> 実際にCSSをかいたら分かるけど、たったこれだけでスタイルシートは半減・・どころかもっとスリムになるはず。
その他の回答 (1)
- nori_007
- ベストアンサー率35% (369/1048)
大規模サイトを構築した事ありませんが。 スタイルシートのは基本外部 基本になるスタイルシート 基本になるスタイルシートを読み込んだ後、各コンテンツのみに適用するスタイルシートを読み込み。idやcssは上書きさせます。 もしくは、スタイルシートの書き方で、idやclassを階層化し、<body>に、idかclassを与えてスタイルを変更するのも有りだと思います。 特例的で有れば、そのhtmlファイルだけ、ファイルにスタイルを直接記述する。 ベストとは言えないかも知れませんが参考になればと思います。
お礼
やはり、スタイルシートを分けるのは基本ですよね。今までCSSリセット用とその他全部用の2つだけでやってきたので、ページの種類ごとに分けてみようと思います。
関連するQ&A
- 複数のページで使用する共通のレイアウトについて
なるべく(X)HTML＋CSSでサイトを作ろうと思っているのですが、 ヘッダ、フッタ、メニューなどの複数のページに及ぶ共通のレイアウト部分を CSSで一括で管理する方法はないのでしょうか？ JavaScriptでの方法は分かるのですが。。。 よろしくお願いします。
- ベストアンサー
- HTML
- CSS外部ファイル⇒ヘッダー＆フッター
こんにちは。 いまCSSファイルを使ってHPをキレイにしようと頑張っています。 そこで、教えて欲しいことがございます。 ワタシのHPは大きく分けて、ヘッター＆フッターと真ん中の３ブロクで分かれています。そのヘッダー＆フッター部分の画像と機能をそのままで複数ページにも適用させるようにしたいのです。 簡単に言いますと、indexにはリンクが沢山あり、そこから別ページに飛ぶようにしますが、そこで、ヘッダー＆フッターは同じ内容にしたいというものです。コノ場合はスタイルシートに何かを書き込むだけなのか、HTMLファイルを数の分だけイジルのでしょうか。 やり方がチンプンカンプンです。 どなたか教えて下さい。
- ベストアンサー
- ホームページ作成ソフト
- スタイルシートが適用されない。
Servlet/JSPでWeb開発しているのですが、スタイルシートが反映されません。 ファイルの配置 app `---css `--- x.css `---WEB-INF `--- jsp `---ja `---a.jsp `--- class `---ja `---A.class スタイルシートの指定で../css/x.cssと指定しています。 http://localhost:8080/app/ja/A(a.jspを表示)では適用されます。 ですが、Tomcatと連携で Proxy /ja/ ajp://localhost:8009/app/ja/ を指定して、 http://localhost/ja/A を表示するとサーブレットは問題なく動きますが、x.cssが適用されなくなります。 どうすれば適用されますか？
- 締切済み
- Java
- CSSを適用…させない！
ちは！ さてさて～スタイルシートで、たとえばページ内のtableすべてにスタイルシートを適用させるため書くのは TABLE{ うんぬん } ですが！この状態で、ページ内の数個のtableにはこの「うんぬん」を適用させたくない！ だからって、適用させたいtableにclassを設定しテクノは面倒だ！ そこで！、適用させたくない数個のtableに、「TABLE」に対してのstyleは適用させない！っていうclassを書く。 そんなCSSありますか？(わかりにく・・・い・・・) とりあえず、「ここは適用しなくていいよ」っていうCSSありませんかね？探してもないものはないんでしょうか・・・
- ベストアンサー
- CSS
- スタイルシートの設定について
現在スタイルシート勉強中です。 最近とある解説書を購入、さわりだけ読んでみたのですが 「中途半端にCSSを覚えた場合、divタグやclassタグを濫用したHTMLになってしまう。 しっかり覚えればdivタグはほとんど使用しなくても済むようになるだろう」 といった事が書かれていました。 私の場合、まさにHTML内はdivタグとclassタグでいっぱいです。 でも1サイトにCSSの外部ファイル1枚を使用（全てのHTMLに1つのCSSファイルを使用）した場合、 pタグやhタグ自体にスタイルを設定するとサイト内のタグ全てにその設定が反映されますよね？ となるとやっぱりclass分けするしか方法がないんじゃないかと思ったりしています。 皆さんは基本的CSSの設定方法はどのような感じですか？ classでいっぱい設定、または1サイトに何枚もCSSファイルを用意し、ページによってCSSファイルを 使い分けているとか、HTML内に直接CSSを書いてしまうとか（これは修正が大変だと思いますが・・・）。 沢山ご意見が聞けるとうれしいです。どうぞ宜しくお願い致します。
- 締切済み
- HTML
- ワードのページ設定についてです。。
ワードのページ設定についてです。ヘッダー部分とフッター部分のページ番号の書式を別々に設定する方法を教えてください。10ページ程度のファイルをいくつかまとめた文書を作成しています。ヘッダー部分に各ファイルごとのページ番号を、フッターには文書全体通してのページ番号を入れたいと思っています。ヘッダーとフッターの書式を別々に設定する方法はあるのでしょうか？どうぞよろしくおねがいいたします。
- ベストアンサー
- オフィス系ソフト
- スタイルシートがページの一部で適用されていない
headにcssの書かれたファイルを読み込ませているのですが、スタイルがきいているところと、きいていないところが出てしまいました。 文字に<span class="data">AAA</span>などとしているところはきいているのですが、 <th class="data1">BBB</th>としてるところがきいていません。 外部ファイルにはちゃんと「data」「data1」もあります。 何か書き方がまずいのでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- Wordのスタイル適用方法について教えてください
宜しくお願いします。 沢山のWord文書を作るにあたって「スタイルと書式」から 使用するスタイルに目印の名前を追記しました。 (例) 見出し１【使用】 この追記した名称が今になって問題になり、変更を要請されました。 今となっては使用しているスタイルも沢山、作った文書も沢山・・・ これを一つ一つ名称変更していくとかな～りの時間がかかってしまいます。 スタイルの定義ファイルみたいなものを作成して他の文書に適用する ような方法はないでしょうか？ 何卒宜しくお願いします。 使用しているWordは2003SP3です。 他に必要な情報がありましたらお答えしますので申しつけ下さい。
- ベストアンサー
- オフィス系ソフト
- スタイルシートの外部リンク方法は間違っていますか？
外部ＣＳＳファイルからＨＴＭＬファイルへリンクしてみましたが 文字化けの羅列になります ページのレイアウトの枠組みなのですが homepageフォルダにindex.html style.cssの2つのファイルを作成し style.cssのファイルの中に body { text-align:center; } #outline { width:750px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .main { width:480px; float:right; } .side { width:260px; float:left; } .c-both { clear:both; } と記述しtext2.cssと名前を付けたカスケードスタイルドキュメントを入れてあります これをＨＴＭＬに <html> <herd> <link rel="styleseet" href="style.css" type="text2.css"> </herd> <div id="outline"> <div class="header"> タイトルなど </div><!-- end header --> <div class="outline-marign"> <div class="main"> メインスペース </div><!-- end main --> <div class="side"> サイド </div><!-- end side --> <div class="c-both"><br></div> </div><!-- end outline-marign --> <div class="footer"> フッターなど </div><!-- end footer --> </div><!-- end outline --> </html> のように記述しました リンク方法はこれで間違えていますでしょうか？ ブラウザで見ると文字化けの羅列です ＣＳＳをＨＴＭＬに組み込むときちんと表示されるのでブラウザの問題ではない初歩的ミスだと思うのですが 御教授お願い致します
- ベストアンサー
- その他（インターネット・Webサービス）
- CSSファイルの上手な使い方を教えて下さい。
現在、Webサイトを作成しており20ページくらいになりますが、色や形を変えることが多々あり、そのたびにCSSファイルのコードを修正するのが面倒です。 私はhtmlファイル20枚につき、CSSファイル20枚となっており、すべてのCSSファイルにヘッダーやフッターサイドバーのデザインを施すコードが記述されております。 この方法は非効率でしょうか？ 良く考えてみたのですが、全てのページでヘッダーとフッター、サイドバーのデザインが同じなら、ヘッダー、フッター、サイドバーだけのCSSファイルを1つ作成し、メインコンテンツはページの分だけCSSファイルを作成するべきなのでしょうか？ この場合、htmlファイル1枚につき、2枚のCSSを読みこませれば良いのでしょうか？
- ベストアンサー
- CSS
お礼
色と配置でファイルを分けるんですね。たしかに、その方が効率的だし管理も楽な気がします。 また、Idなどの設定の仕方は実は意外と難しいなと思いました。たしかに、デザインのためにIdなどを振ってしまうこともあるし、細かいところのために恣意的なclassなどを使用してしまうこともあります。はじめからもっとポリシーを持ってマークアップするべきだと思いました。 ありがとうございます。