質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.51%

  • HTML

    8954questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5773questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Webサイト

    1076questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

CSSを別ファイル化するメリットがわかりません

解決済

回答 3

投稿

  • 評価
  • クリップ 1
  • VIEW 2,058

miki0901

score 4

CSSについてご質問させて頂きます。

以前より、WEBサイトを作成する際は


root
|-index.php
|
|-css
|  |-common.css
|
|-page01
|  |-style.css
|  |-index.php
|
|-page02
|-style.css
|-index.php


上記のように、
・root直下に共通CSS(common.cssは、どのページからも読み込まれる
・各ページごとに、cssファイルを用意
という構造で作成してきました。

ですが最近になって思うのが、
commonは別で用意して外部ファイル化することにより、共通参照項目を追加・編集・削除できるメリットを受けることができると思うのですが、下層ページに対するcssは、別途ファイル化する必要があるのだろうか?という点です。
page01 > style.cssなどは、必ずページ固有のcssを記述しています。
共通仕様される可能性があるものに関しては、common.cssに記述します。
であれば、htmlのhead内で

<head>
    <style>
    ...
    </style>
</head>


としても問題ありませんよね?
個人的な固定観念かもしれませんが、head内に記述するのは他のページでもあまり見かけず、なんだか問題があるような気がして、質問させて頂きました。

ページ固有のcssなので、そこまでずら~~~~っと続くほどの量はありませんので、htmlとしての可読性にもそこまで影響しないような。
※ページボリュームにもよるのでしょうが・・。

些細な手間かもしれませんが、各ページでいちいちhtml部、css部と切り替えながら編集するのが面倒で、同一ファイルに出来れば効率もあがるのではと考えるようになりました。

ぜひ、プロフェッショナルの方からのご意見を頂きたいです!

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+3

あくまでも私的な見解になってしまうのですが・・・

CSSを別ファイルにすることでメンテナンスがしやすくなるという利点があります。
将来、今現在想定していないページが増えたときに特定ページだけで使用していたCSSを使いたい場合は1行追加するだけで済みます。また、そうして複数ページに適用された場合、別ファイルになっていれば各HTMLファイルではなく、CSSファイル1つを編集するだけで済みます。
 
 
また、編集の作業効率からしても私は別ファイルにしたほうがやりやすく感じます。
私はAtomEditorを使用しているのですが、HTMLとCSSを2画面に分けて編集できます。そうするとCSS記述部分とHtML記述部分をスクロールでいったりきたりしなくても済むからです。
下記画像はその状態のスクリーンショットです。
イメージ説明
 
 
ただ、ページ毎にCSSファイルを作ることについては私としてはあまり好きではないです。
私だったら、もしわけるなら・・・

  • 全体共通CSS
  • 個別ページCSS
  • スマホ用CSS

もし分けるとしてもこれぐらいです。
サンプル画像のサイトは1つのCSSファイルにすべて記載していますが・・・^^;
その分、コメントを多めに記入しています。
自分しか編集しないものであっても、自分が忘れてしまう事もあったりするからです。
 
特に業務で作成する際は、自分以外の人でも管理しやすく、メンテナンスしやすい構造にすることが大切だと思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/20 01:37

    なるほど、とても勉強になります。

    私の環境はDWですが、上下分割をうまく活用すると別ファイルでもストレスなく作業出来そうですね。

    「もしわけるなら」の中に個別ページCSSとありますが、これは「ページごとの」ではなく、「どのページでも読み込まれる」ということでしょうか?
    また、もしそうだとすれば、全体共通CSSとはどのような違いがあるのでしょうか?

    なかなか自チーム以外のファイル分けまでうかがえる機会もありませんので、興味があります!

    キャンセル

  • 2017/10/20 18:36

    「個別ページCSS」はページごとのCSSを1つのファイルにまとめたものを意図しています。
    全体共通CSSとの違いはファイルを分けることで編集すべきファイルをわかりやすくする効果があります。
    もちろん、私の用に全体共通CSS内に記述しても問題ありません。
    そのあたりはCSS内の量に応じて分けたり、複数人作での管理の場合は意図しない箇所の誤編集を避けるために分けたりと、内容や状況に合わせて考えるといいかと思います。

    また、ページごとのフォルダにCSSファイルが入っているようですが、私でしたらルート直下にcssフォルダを作成し、その中にまとめて保存するようにすると思います。
    ページ毎にフォルダやファイルを分けると、何がどこに入っていたのかや、ファイルの追加が必要な場合にルールが守られなくなる恐れがあるため、ファイルの種類毎にフォルダ(例えばcss、js、imgなど)を作成することが多いです。

    キャンセル

  • 2017/10/28 15:03

    なるほど、とても参考になりました。

    皆さん素晴らしい回答頂いたのですが、こちらをBAとさせて頂きます。

    本当にありがとうございました。

    キャンセル

+2

共通しないスタイルならstyle要素で書いてしまっても問題ないです。
デメリットとしてメタ言語のsassとかが使えないこととかはありますね。

あと、エディタはHTMLとCSSを並べられるものを使うと効率化できますよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/28 15:00

    なるほど、メタ言語も取り入れたいと考えておりましたので、「非常に」参考になりました!

    皆さん甲乙つけがたい素晴らしいご回答ですので、先に回答して下さった方をBAとさせて頂きます!

    ありがとうございました!!

    キャンセル

+1

メンテ性を考えなければ<style>でhtml内に書くのもありだと思います。
(デザイン変えることはほとんど無い等)
読み込みファイルが増えれば増えるほどページ表示までに時間がかかるようになります。
例えばgoogle的にはcssもjavascriptもhtml内部に入れられるなら入れてねって考え方をしています。
その方が表示が早くなるので。
しかし他の方も言っている通りcssは別けた方がメンテしやすいです。
同じデザインのページがもう1つ増えることもあるかも知れませんし。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/28 15:02

    確かに、ほぼ同じデザインのページが出来た際などは分けていた方が便利ですね。

    良いご意見頂けて気づくことが多いです。

    皆さん甲乙つけがたい素晴らしいご回答ですので、先に回答して下さった方をBAとさせて頂きます!
    ありがとうございました!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML

    8954questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    5773questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Webサイト

    1076questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。