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

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

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

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

CSS

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

Q&A

解決済

6回答

4850閲覧

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

olee46

総合スコア32

HTML

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

CSS

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

1グッド

2クリップ

投稿2018/04/18 19:27

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

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

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

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

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

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

よろしくお願いします。

Lulucom👍を押しています

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

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

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

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

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

guest

回答6

0

質問①

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

質問②

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

質問③

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

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

投稿2018/04/19 00:24

m.ts10806

総合スコア80765

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

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

olee46

2018/04/19 01:45

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

2018/04/19 01:45

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

2018/04/19 01:52

2回同じコメントを投稿されてますが・・・。 「機能」もサイトによって定義があるので一概に「これ!」と特定はできないのですが、例えばteratailで言うと、 「ヘッダ」部分は固定だとは思いますが、それ以降のコンテンツ部分の作りはページによって違います。 質問投稿画面は最も特殊な作りといえます。ページ自体が「機能」を持っていますね。 パンくずもありませんし、あくまで「投稿のために必要な要素」しか載らないようになっています。 質問一覧や詳細ページと違って左右の余白もありませんし、スクロールも最低限で済むようになっています。 これが「機能的に固有の指定が多い」となります。この「固有の指定」は質問投稿画面でしか利用されていないため、「分離する」が採用できます。 また、上述の通り「機能」は定義により様々な解釈ができます。 「ヘッダ」も機能「コメント投稿」も機能、右に出ている「ランキング」や「あなたの回答を待っています」というカラム部分も言わば「機能」です。 どこまで細分化するかどうかはサイトの要件によって異なってきますし、何を「機能」と呼ぶかもその要件次第です。
olee46

2018/04/19 01:59

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

0

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

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

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

投稿2018/04/18 23:36

編集2018/04/18 23:38
Anon_

総合スコア334

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

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

olee46

2018/04/19 01:40

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

0

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

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

元々

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

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

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

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

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

投稿2018/04/19 02:17

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

m.ts10806

2018/04/19 02:19

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

2018/04/19 02:58

te2ji 様 >今のフロントエンドの状況を一度学習・・・ 「ハッ!」となりました。ひょっとしたら私は「固い頭」のままだったかも・・・。勉強になります。
olee46

2018/04/19 03:14

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

退会済みユーザー

2018/04/19 03:34

「Qiita」「CSS フレームワーク」「フロントエンド」「最新」「最近」「開発環境構築」「サイトジェネレータ」「2018」等で検索すれば、トレンドが追えます。Qiita には定期的にこの手の記事が上がるので、情報が不足することはなりです。 で、大量にヒットするので、気になったものを調べてみると良いです。 学生さんなら、納期はなさそうですね。。。いろいろ手を出して、環境構築からドハマリしてみるのも結構いい経験になると思います。 片っ端から、公式サイトのチュートリアルやってみるとか。 ただ、変化の非常に激しい分野なので、2017年より前の記事は無視したほうが良いです。 *にわか知識、ほぼ未経験者の戯言ですが、参考になれば^^;
olee46

2018/04/19 04:39

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

0

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

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

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

投稿2018/04/19 01:45

miyabi_takatsuk

総合スコア9528

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

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

0

ベストアンサー

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

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

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

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

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

投稿2018/04/19 01:33

yoshinavi

総合スコア3521

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

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

olee46

2018/04/19 01:37

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

2018/04/19 01:53

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

2018/04/19 01:54

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

2018/04/19 01:59

@yoshinavi がんばります!
olee46

2018/04/19 02:01

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

2018/04/19 02:37

mts10806 様 原因が「ひとつ」とは限らず、複合的な場合が多くありますよね、貴重なご意見ありがとうございます。 olee46 様 「塵も積もれば山となる」のことわざがあるとおり、少しずつでも結果的に良い方向に向かうのは間違いないと思います。 他と違いをつけるのは、「どこまで細かな所まで気を配れるか」だと、個人的には思います。 (^^)
guest

0

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

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

機能もしくは、ページごとに分けてみてはいかがでしょう、
最終的に非効率的でカオスな状態になっていなければいいかと思います。

投稿2018/04/19 00:59

Atsushi_Okumura

総合スコア355

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問