CSSファイルの分け方と読み込み方法
- Webを作る際に、CSSの読み込みを次のようにしています。
- base.cssとcommon.cssが似たような役割をさせているので、統一したほうが良いのかなあとも考えました。
- みなさんは、どのようにしておられますでしょうか？私の分け方で、必要のない物、まとめられるものを何かありましたら、ご教授頂けましたら幸いです。
- ベストアンサー
CSSファイルの分け方皆様はどのようにしています？
こんにちは、サンタともうします。 宜しくお願い致します。 Webを作る際に、CSSの読み込みを次のようにしています。 import.css ************************************************ @charset "UTF-8"; @import url("reset.css");/*ブラウザ間の差異を無くすYUI*/ @import url("fonts.css");/*フォントサイズを整えるYUI*/ @import url("base.css");/*CSS要素の基本の定義*/ @import url("common.css");/*CSS要素スタイルの定義（ポジショニング迄）*/ @import url("index.css");/*index.htmlにだけ適用用のCSSファイル*/ ************************************************************ base.cssとcommon.cssが似たような役割をさせているので、統一したほうが良いのかなあ？とも考えました。 違いは、 reset.css ブラウザ間の差異を無くすためのCSS(YUI３) fonts.css IEのバグ回避と、それぞれの要素の基本フォントサイズを指定します base.css アウトラインもない、h要素や、段落を分けるだけのみ用の、CSS comoon.css 各HTMLファイルの共通するレイアウトポジションを適用する、CSS index.css index.htmlだけにしか使用されない、CSS みなさんは、どのようにしておられますでしょうか？ 私の分け方で、必要のない物、纒められるものを何かありましたら、ご教授頂けましたら幸いです 宜しくお願い致します。 失礼致します。 教えて頂けましたら、幸いです。
- ycqxs765
- お礼率98% (1019/1038)
- CSS
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
@importは古いIEが対応していないので使いません。 サイト全体の統一感を保つため ・永続的スタイルシートで、font-family、text-indent など ・標準スタイルシートは 配置などだけを指定したもの(Top用、一般記事、マニュアルなどと長文用)(*1) 色や背景の設定をしたもの(カテゴリーごと) 代替スタイルシート 印刷用スタイルシート (*1) <body class="Toppage"> <body class="longText"> とか・・で分けて、一枚のスタイルシートで行うこともある。
関連するQ&A
- ワードプレスのCSSを移動させる
私の使っているテーマのCSSが全部で6つあります。 1つはPHPやHTMLと同じ場所にあるのですが、その中にCSSというフォルダがありそのフォルダの中に5個のCSSがあります。なので、ワードプレス上からいじれず、いちいちFTPからダウンロードしていじらなくてはならなく面倒です。 テーマ編集で表示される階層にあるCSSに @import url(css/html5reset-1.6.1.css); @import url(css/layout.css); @import url(css/common.css); @import url(css/nav.css); @import url(css/content.css); @import url(css/top.css); このような記述があり、これがCSSフォルダに送っているのだと思い、 CSSフォルダの中のCSSを正しい階層にもってきて、上記の部分を @import url(html5reset-1.6.1.css); @import url(layout.css); @import url(common.css); @import url(nav.css); @import url(content.css); @import url(top.css); このように書けば大丈夫だろうとおもったのですが、HPからCSSで指定されていたH1の淵の画像などがすべて消し飛びました。 なんとか、５つのCSSの階層を上にあげたいのですが、どのようにすればよいのでしょうか？ ちなみに、使っているテーマは、 http://pacific.prime-strategy.co.jp/ これです。
- ベストアンサー
- CSS
- YUI fonts cssについて
YUI fonts cssを使い、ホームページを制作しようと考えています。 そこで質問なのですが、YUI fonts cssを使用し作ったサイトというのは プラウザで文字のサイズを変更できるのでしょうか？ （例えばIEでしたら文字のサイズを変更から「最大」にすれば文字が大きくなると考えて良いのでしょか？） いくつかの解説サイトを拝見して、文字のサイズはユーザーが自由に変えれるのだろうと思ったのですが 試しに数ページ作ってサーバーアップした所、いくら文字サイズを変更しても文字が大きくなりません。 YUI fonts cssというのは、相対指定ではなく絶対指定に近い物なのでしょうか・・・？ ユーザーに高齢の方も多いサイトですので、文字サイズを変えれない仕様にするわけにはいかず このままYUI fonts cssを使用するか、諦めてemで指定しなおすか悩んでいます。 詳しい方がいらっしゃいましたら、どうぞよろしくお願いします。 ※以下のコードをbace.cssに書き、読み込ませています。 @charset "utf-8"; body { font:13px "ＭＳ Ｐゴシック",arial,helvetica,clean,sans-serif; *font-size:small; *font:x-small; } table { font-size:inherit; font:100%; }
- ベストアンサー
- HTML
- cssのリンクをimport.cssに書きかえれないです！（@dreamweaver）
はじめまして。 今ある <link href="style.css" rel="stylesheet" type="text/css" /> を common/import.cssをリンクし、 <link href="/common/import.css" rel="stylesheet" type="text/css" /> に変更したいのですが、なぜかできません＞＜ ちなみにimport.cssの中身は @charset "shift_jis"; @import "/common/css/base.css"; @import "/common/css/contents.css"; @import "/common/css/right.css"; このような感じです。 ためしにcommon.cssにいろいろ書いたところ、反映されたので、common.cssそのものは参照できていると思うのですが・・・ ご教授いただければ幸いです。
- ベストアンサー
- HTML
- Yahoo UI Libraryのfonts.cssについて
Yahoo UI Libraryのfonts.cssについて質問です。 http://developer.yahoo.com/yui/fonts/ http://developer.yahoo.com/yui/build/fonts/fonts.css body { font: 13px/1.231 arial,helvetica,clean,sans-serif; *font-size: small; *font: x-small; } table { font-size: inherit; font: 100%; } 1.「*font: x-small;」と「font: 100%;」なんですが、この2つの処理の違いはなんでしょうか。 両方ともIEに対するハックだと思うのですが、なぜ別の方法をとっているのでしょうか？ 2.「font-size: inherit;」と「font: 100%;」は「font-size: 100%;」ですむ気がするのですが、 なぜこのようにしているのでしょうか？ ご存じの方、よろしくお願いします。
- 締切済み
- HTML
- @import のcss はどうやって見れますか？
あるホームページのhtmlで、スタイルシートの部分のリンク href="/common/css/common.css" をアドレスに加えて開くと、下記が表示されましたが、こういう場合実際のCSSの中身はどうすれば参照できるのでしょうか。このカテゴリでいいのか疑問ですがご教授ねがいます。 @charset "utf-8"; /* avoid MacIE4.5 & MacIE5.x */ /* \*/ @import url("base.css"); /* */
- 締切済み
- その他([技術者向] コンピューター)
- Yahoo! UI LibraryのFonts CSSについて
YAHOOが提供している Yahoo! UI LibraryのFonts CSSを利用して各ブラウザー毎のフォントサイズを統一しようとしているのですが 下記参考サイトで紹介している通りに設定をして使用したのですがどうもうまく適用されません。 ■参考サイト→http://thinkit.jp/article/813/1/ ちなみにYahoo! UIのFonts CSSはローカルにデータを持たずにヤフーサーバーから直接リンクして使用しています。 そもそも使用の仕方が間違っているのでしょうか？？ 問題がどこにあるのかアドバイスいただけると助かります。 下記に現在テスト製作中のサイトのアドレスを記載しておきますので中身を見ていただきアドバイスいただけると助かります。 ■HTML http://sangoclip.web.fc2.com/test/ ■デフォルトCSS http://sangoclip.web.fc2.com/test/shared/css/default.css ■リセットCSS http://sangoclip.web.fc2.com/test/shared/css/reset.css ■Yahoo! UI LibraryのFonts CSS http://yui.yahooapis.com/2.6.0/build/fonts/fonts-min.css
- 締切済み
- CSS
- リセットCSSがきかない
コーデイング超初心者です。 HTMLとCSSでWEBサイトを作成していて、 リセットCSSをコピペしたのですがきいていないようで、 Chromeでは綺麗に反映されるのですがそれ以外のブラウザでは位置がずれて表示されます。 YUI3やEric Meyer Reset CSS、HTML5 Doctor CSS Resetを使用しましたが 全部ダメでした。 リセットCSSはサイトに書かれているコードをコピペして貼るだけで使用できるんですよね？？ HTMLのheadの方に何か書き込まなきゃいけないんでしょうか？？ また、きかない場合どうすればいいでしょうか？？
- 締切済み
- CSS
- Yahoo UI Libraryのfonts.csについて
Yahoo UI Libraryのfonts.cssについて質問です。 http://developer.yahoo.com/yui/fonts/ table { font-size: inherit; font: 100%; } fonts.cssの中の、上記「font: 100%;」というのがよく分かりません。 この部分ではなにをやっているのでしょうか？ よろしくお願いします。
- 締切済み
- HTML
- かなり困ってます！CSSが適用されません…
WindowsXPでDreamweaverMXを使っています。 body {font-size: 12px;} .px10 {font-size: 10px;} という内容の外部スタイル「css.css」を作り、テンプレートに「css.css」を適用しました テンプレートを元にページをつくり、部分的に <td class="px10">文字列</td> といった感じで適用しました。 Dreamweaver上ではちゃんと適用されているのですが、ブラウザでみてみると文字が小さくなっていません。 bodyの12pxはブラウザ上でもちゃんと適用されています。 何がいけないのか、わかりません。どなたか解かるかたがいたらお知恵をかしてください。
- ベストアンサー
- HTML
- WinIE5にだけCSSを適用させない方法
Windows IE5にだけCSSを適用させない方法はないでしょうか？ WinIE5にだけ適用させる、という方法はわかったのですが、 この方法だと修正が大変な構造になっているので、WinIE5では CSSをいっさい読み込まないという形にしたいです。 具体的には <link rel="stylesheet" href=".index.css" type="text/css" media="all"> などとして、 index.cssで @import "001.css"; @import "002.css"; などと、複数のCSSファイルを読み込んでいるのですが、 WinIE5にはインポートしないようにしたいです。 よい方法があればお教えてください。よろしくお願いします。
- ベストアンサー
- CSS
お礼
ORUKA1951 様 ありがとうございました。 @import は、使用されないのですね。 本など読みますと（割と有名な）@importを使用しておりましたので、大丈夫かなあ？と思っておりました。 なるほど。 一枚のスタイルシートでも、書き方をけるるだけでいけますね。 ありがとうございました。