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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Webサイト

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

HTML

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

CSS

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

Q&A

解決済

3回答

6785閲覧

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

miki0901

総合スコア14

Webサイト

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

HTML

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

CSS

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

1グッド

2クリップ

投稿2017/10/19 14:15

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内で

html

1<head> 2 <style> 3 ... 4 </style> 5</head>

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

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

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

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

airi_fukuoka👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

CSSを別ファイルにすることでメンテナンスがしやすくなるという利点があります。
将来、今現在想定していないページが増えたときに特定ページだけで使用していたCSSを使いたい場合は1行追加するだけで済みます。また、そうして複数ページに適用された場合、別ファイルになっていれば各HTMLファイルではなく、CSSファイル1つを編集するだけで済みます。


また、編集の作業効率からしても私は別ファイルにしたほうがやりやすく感じます。
私はAtomEditorを使用しているのですが、HTMLとCSSを2画面に分けて編集できます。そうするとCSS記述部分とHtML記述部分をスクロールでいったりきたりしなくても済むからです。
下記画像はその状態のスクリーンショットです。
イメージ説明


ただ、ページ毎にCSSファイルを作ることについては私としてはあまり好きではないです。
私だったら、もしわけるなら・・・

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

もし分けるとしてもこれぐらいです。
サンプル画像のサイトは1つのCSSファイルにすべて記載していますが・・・^^;
その分、コメントを多めに記入しています。
自分しか編集しないものであっても、自分が忘れてしまう事もあったりするからです。

特に業務で作成する際は、自分以外の人でも管理しやすく、メンテナンスしやすい構造にすることが大切だと思います。

投稿2017/10/19 14:40

8yazaki

総合スコア454

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miki0901

2017/10/19 16:37

なるほど、とても勉強になります。 私の環境はDWですが、上下分割をうまく活用すると別ファイルでもストレスなく作業出来そうですね。 「もしわけるなら」の中に個別ページCSSとありますが、これは「ページごとの」ではなく、「どのページでも読み込まれる」ということでしょうか? また、もしそうだとすれば、全体共通CSSとはどのような違いがあるのでしょうか? なかなか自チーム以外のファイル分けまでうかがえる機会もありませんので、興味があります!
8yazaki

2017/10/20 09:36

「個別ページCSS」はページごとのCSSを1つのファイルにまとめたものを意図しています。 全体共通CSSとの違いはファイルを分けることで編集すべきファイルをわかりやすくする効果があります。 もちろん、私の用に全体共通CSS内に記述しても問題ありません。 そのあたりはCSS内の量に応じて分けたり、複数人作での管理の場合は意図しない箇所の誤編集を避けるために分けたりと、内容や状況に合わせて考えるといいかと思います。 また、ページごとのフォルダにCSSファイルが入っているようですが、私でしたらルート直下にcssフォルダを作成し、その中にまとめて保存するようにすると思います。 ページ毎にフォルダやファイルを分けると、何がどこに入っていたのかや、ファイルの追加が必要な場合にルールが守られなくなる恐れがあるため、ファイルの種類毎にフォルダ(例えばcss、js、imgなど)を作成することが多いです。
miki0901

2017/10/28 06:03

なるほど、とても参考になりました。 皆さん素晴らしい回答頂いたのですが、こちらをBAとさせて頂きます。 本当にありがとうございました。
guest

0

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

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

投稿2017/10/19 14:41

oskbt

総合スコア1895

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miki0901

2017/10/28 06:00

なるほど、メタ言語も取り入れたいと考えておりましたので、「非常に」参考になりました! 皆さん甲乙つけがたい素晴らしいご回答ですので、先に回答して下さった方をBAとさせて頂きます! ありがとうございました!!
guest

0

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

投稿2017/10/20 00:23

poko_poko

総合スコア168

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miki0901

2017/10/28 06:02

確かに、ほぼ同じデザインのページが出来た際などは分けていた方が便利ですね。 良いご意見頂けて気づくことが多いです。 皆さん甲乙つけがたい素晴らしいご回答ですので、先に回答して下さった方をBAとさせて頂きます! ありがとうございました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問