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

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

ただいまの
回答率

90.61%

  • HTML

    8663questions

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

  • CSS

    5576questions

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

WebサイトのCSSファイルの構成をどうしたらいいか

解決済

回答 6

投稿

  • 評価
  • クリップ 2
  • VIEW 313

olee46

score 23

複数ページからなるWebサイトを作成しています。
各ページに共通の部分(フォントサイズ、色など)もありますが、同じクラス名でも微妙に違うスタイル(widthやmarginなど)を持つものもあります。

現状は、以下の3つが各ページに混在しています。

  • common.css
  • ページ別のスタイルシート
  • HTMLのstyle属性の中の記述

質問①
一般的なWebサイトでは、どのようにCSSファイルを定義しているのでしょうか?
(例えば、common.cssとページ固有のスタイルシートの組み合わせなど)

質問②
HTML内にcssを記述するのは、アンチパターンなのでしょうか?

質問③
今のスタイルシートが混在している状況を、どのように改善したらいいでしょうか?

よろしくお願いします。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 6

+6

質問①

機能的に固有の指定が多ければファイルをわけます。
1つのサイトの中でも特殊なページがある場合に別ファイルへの分離を採用することが多いです。

質問②

いえ私はそうは思いません。
(反対派が多ければアンチパターンということになるでしょうけど・・・)
きちんと意図と意味を持って採用されたのであれば問題ないと思います。

質問③

まずは機能毎に整理してはいかがでしょうか?
②でも書きましたが、それぞれにきちんと意図と意味を持たせることが大事です。

※コーディング規約や個人の好みにもよるので、最終的にやりたいことが実現できていて、非効率でなければおおよそ大問題とはならないと思います・・

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/19 10:45

    すみません、「機能」というのが良くわからないのですが、「機能的に固有の指定が多い」「機能毎に整理する」とはどういうことか、ご説明いただいてもよろしいでしょうか?

    キャンセル

  • 2018/04/19 10:45

    すみません、「機能」というのが良くわからないのですが、「機能的に固有の指定が多い」「機能毎に整理する」とはどういうことか、ご説明いただいてもよろしいでしょうか?

    キャンセル

  • 2018/04/19 10:52

    2回同じコメントを投稿されてますが・・・。

    「機能」もサイトによって定義があるので一概に「これ!」と特定はできないのですが、例えばteratailで言うと、
    「ヘッダ」部分は固定だとは思いますが、それ以降のコンテンツ部分の作りはページによって違います。
    質問投稿画面は最も特殊な作りといえます。ページ自体が「機能」を持っていますね。
    パンくずもありませんし、あくまで「投稿のために必要な要素」しか載らないようになっています。
    質問一覧や詳細ページと違って左右の余白もありませんし、スクロールも最低限で済むようになっています。
    これが「機能的に固有の指定が多い」となります。この「固有の指定」は質問投稿画面でしか利用されていないため、「分離する」が採用できます。

    また、上述の通り「機能」は定義により様々な解釈ができます。
    「ヘッダ」も機能「コメント投稿」も機能、右に出ている「ランキング」や「あなたの回答を待っています」というカラム部分も言わば「機能」です。
    どこまで細分化するかどうかはサイトの要件によって異なってきますし、何を「機能」と呼ぶかもその要件次第です。

    キャンセル

  • 2018/04/19 10:59

    失礼しました。具体例を出していただいので理解できました、ありがとうございます!

    キャンセル

+5

cssファイルの構造に決まったルールはありませんので、common.cssと各ページごとのcssの組み合わせでも問題ないと思いますが、私は1ファイルにすべて記述する派です。
何よりcssを作成・読込・検索の手間を考えたときに1ファイルにまとめられていた方が効率が良いです。
Webコーディングは時間との戦いなのです。(苦笑)

HTMLにstyleを記述することはまれにありますが、基本はcssで定義のほうがHTMLコードが簡潔になるのでいいと思います。

余談ですが私はsassを使用していて、sassであればネスト形式で記述できるので1ファイルに全ページのcssが記述されていても見やすく管理しやすいです。

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/19 10:40

    sass、知りませんでした!教えていただいてありがとうございます!

    キャンセル

+4

最近勉強中のフロントに関するにわか知識です。異論歓迎w

昔からいろいろ議論があるようですが、複数ファイルだろうが、単一ファイルだろうが埋め込みだろうがどれでもよいって感じです。

元々

・再利用性
・メンテナンス性
・パフォーマンス
・(google の評価)

の各分野で議論されていたようですが、

・ツールの充実
・フロントエンド向けフレームワークの拡充
・サイトジェネレータの利用
・(お手軽に利用できる CDN の普及)
・(HTTP/2 の普及)

といった改革により、生でコーディングする事が少なくなり、結果として人から見るとどうでも良い項目に変わりつつあります。

一回り以上昔の議論になっていると思われるので、今のフロントエンドの状況を一度学習してみてはいかがでしょうか?

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/19 11:19

    > 結果として人から見るとどうでも良い項目

    まさにその通りですね。
    作る側のエゴであることもしばしば。
    別の回答のコメントに質問者も書いてますが、
    > ページの重さに悩んでいた
    ↑の方が問題としては大きいです。

    キャンセル

  • 2018/04/19 11:58

    te2ji 様
    >今のフロントエンドの状況を一度学習・・・

    「ハッ!」となりました。ひょっとしたら私は「固い頭」のままだったかも・・・。勉強になります。

    キャンセル

  • 2018/04/19 12:14

    @te2ji
    「今のフロントエンドの状況を一度学習」とは、具体的にどうすればいいのでしょうか?当方学生で、基本的にW3SchoolsやStackOverflow、APIのドキュメンテーションなどを読んで独学でコーディングしている状況です。どのようにすれば、「今のフロントエンドの状況を一度学習」できるのでしょうか、後学のためにご教授いただければ幸いです。

    キャンセル

  • 2018/04/19 12:34

    「Qiita」「CSS フレームワーク」「フロントエンド」「最新」「最近」「開発環境構築」「サイトジェネレータ」「2018」等で検索すれば、トレンドが追えます。Qiita には定期的にこの手の記事が上がるので、情報が不足することはなりです。
    で、大量にヒットするので、気になったものを調べてみると良いです。

    学生さんなら、納期はなさそうですね。。。いろいろ手を出して、環境構築からドハマリしてみるのも結構いい経験になると思います。
    片っ端から、公式サイトのチュートリアルやってみるとか。

    ただ、変化の非常に激しい分野なので、2017年より前の記事は無視したほうが良いです。

    *にわか知識、ほぼ未経験者の戯言ですが、参考になれば^^;

    キャンセル

  • 2018/04/19 13:39

    ご丁寧にありがとうございます!ちょっとずつ勉強していきたいと思います!

    キャンセル

checkベストアンサー

+3

「odmdom」さんや「mts10806」さんも、書いておられますが、CSSの記述にはルールがありますが、ファイル構成にはルール等はありません。

「改善方法」としては、おおまかですが、以下の別角度から見た場合を考慮すると良いかと思います。

①通信速度を向上させる。
webサイトの閲覧で、ユーザー離脱の原因のひとつに、「サイト表示が遅い」があります。
CSSファイルが1つであれば、1回で済みますが、2つあれば2回の通信が必要となり、3つあれば3回の通信が必要となるため、1つのファイルにマトメる事で時間を短くする。(※JSファイル等にも同じ事が言えます。)

※HTML内の一部インライン化も、速度向上のために行う事もあります。

②コーディングを効率化させる。
各ページの共通部分と固有部分とを明確に分ける事で、作成・管理の効率を上げて行く。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/04/19 10:37

    CSS/JSファイルごとに通信が発生するんですね、知りませんでした!ページの重さに悩んでいたのでありがとうございます。

    キャンセル

  • 2018/04/19 10:53

    次から次へと色々な「悩み」も出てきて、大変でしょうが、頑張ってください。
    (^^)

    キャンセル

  • 2018/04/19 10:54

    横から失礼します。

    > ページの重さに悩んでいた
    複合的な要因で起こりうる現象です。
    css/jsだけでなんとかなるとも限りませんし、大して関係ないかもしれません。
    HTMLの記述量だったり画像の多用やサイズだったり、
    もしかしたらサーバー側やクライアント側に原因があるかもしれません。

    キャンセル

  • 2018/04/19 10:59

    @yoshinavi
    がんばります!

    キャンセル

  • 2018/04/19 11:01

    @mts10806
    データベース関連の処理や、WebRTCも使っているので、仰る通りcss/jsの読み込みを減らすだけで簡単には解決できないと思います。
    それでも少しでも軽くできたらいいな、という感じです

    キャンセル

  • 2018/04/19 11:37

    mts10806 様
    原因が「ひとつ」とは限らず、複合的な場合が多くありますよね、貴重なご意見ありがとうございます。


    olee46 様
    「塵も積もれば山となる」のことわざがあるとおり、少しずつでも結果的に良い方向に向かうのは間違いないと思います。
    他と違いをつけるのは、「どこまで細かな所まで気を配れるか」だと、個人的には思います。
    (^^)

    キャンセル

+3

私は、ほぼ触ることのない記述はcommon.cssに、
それ以外をまとめたcssファイルという具合に分けることが多いです。

HTML内に記述することは基本的にないです。
読込み速度を少しでも上げるために意図的に記述するのであれば別ですが。

機能もしくは、ページごとに分けてみては同でカオスな状態になっていなければいいかと思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

+3

①基本的にはこうしなきゃってルールは存在しないので、開発の環境によりけりでいいのではないかと思います。
私の会社では、複数人での開発が主なので、誰が見てもすぐ状況がわかるように構造を決めるよう、心がけています。
全ページ共通のCSSは、common.css、
ページごとのCSSは、各ページのディレクトリの中に、各CSSといったぐあいにファイルを用意しています。

②そんなことはありません。むしろ、PageSpeed Insightで高得点をとるには、
(表示速度を上げるには)
HTML内にCSSを書く必要があったりします。
ただ、それだと、管理、開発が困難になりますので、、、
私は、PHPを使い、CSSファイルを読み込み、HTML内に吐き出すようにしています。
なので、PHPを使えるならPHP、ないしGulpなどを使って、統合してCSSいりHTMLを吐き出すようにしたりなどやることによって、CSSファイルは別に持って管理しやすくしつつ、ページ速度を上げるために、HTML内に吐き出すって条件を満たすことができます。
ただ、上記をやるのは、難しいし、めんどうなので、
やるのが難しければファイルを読み込む方を選んだ方がいいかと思います。(ページ共通CSSは特に)

③まずは、使用するCSSが、全ページ共通なのか、個別ページでのみなのか、はたまたライトボックスなどに適用するCSSなのか、この三点くらいで大まかに分けて、そのあと必要ならば、もっと細かく分ける、でいいのではないでしょうか。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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

  • HTML

    8663questions

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

  • CSS

    5576questions

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