複数ページからなるWebサイトを作成しています。
各ページに共通の部分(フォントサイズ、色など)もありますが、同じクラス名でも微妙に違うスタイル(widthやmarginなど)を持つものもあります。
現状は、以下の3つが各ページに混在しています。
- common.css
- ページ別のスタイルシート
- HTMLのstyle属性の中の記述
質問①
一般的なWebサイトでは、どのようにCSSファイルを定義しているのでしょうか?
(例えば、common.cssとページ固有のスタイルシートの組み合わせなど)
質問②
HTML内にcssを記述するのは、アンチパターンなのでしょうか?
質問③
今のスタイルシートが混在している状況を、どのように改善したらいいでしょうか?
よろしくお願いします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答6件
0
質問①
機能的に固有の指定が多ければファイルをわけます。
1つのサイトの中でも特殊なページがある場合に別ファイルへの分離を採用することが多いです。
質問②
いえ私はそうは思いません。
(反対派が多ければアンチパターンということになるでしょうけど・・・)
きちんと意図と意味を持って採用されたのであれば問題ないと思います。
質問③
まずは機能毎に整理してはいかがでしょうか?
②でも書きましたが、それぞれにきちんと意図と意味を持たせることが大事です。
※コーディング規約や個人の好みにもよるので、最終的にやりたいことが実現できていて、非効率でなければおおよそ大問題とはならないと思います・・
投稿2018/04/19 00:24
総合スコア80765
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総合スコア334
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
最近勉強中のフロントに関するにわか知識です。異論歓迎w
昔からいろいろ議論があるようですが、複数ファイルだろうが、単一ファイルだろうが埋め込みだろうがどれでもよいって感じです。
元々
・再利用性
・メンテナンス性
・パフォーマンス
・(google の評価)
の各分野で議論されていたようですが、
・ツールの充実
・フロントエンド向けフレームワークの拡充
・サイトジェネレータの利用
・(お手軽に利用できる CDN の普及)
・(HTTP/2 の普及)
といった改革により、生でコーディングする事が少なくなり、結果として人から見るとどうでも良い項目に変わりつつあります。
一回り以上昔の議論になっていると思われるので、今のフロントエンドの状況を一度学習してみてはいかがでしょうか?
投稿2018/04/19 02:17
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/19 02:19
2018/04/19 02:58
2018/04/19 03:14
退会済みユーザー
2018/04/19 03:34
2018/04/19 04:39
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
総合スコア9528
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
ベストアンサー
「odmdom」さんや「mts10806」さんも、書いておられますが、CSSの記述にはルールがありますが、ファイル構成にはルール等はありません。
「改善方法」としては、おおまかですが、以下の別角度から見た場合を考慮すると良いかと思います。
①通信速度を向上させる。
webサイトの閲覧で、ユーザー離脱の原因のひとつに、「サイト表示が遅い」があります。
CSSファイルが1つであれば、1回で済みますが、2つあれば2回の通信が必要となり、3つあれば3回の通信が必要となるため、1つのファイルにマトメる事で時間を短くする。(※JSファイル等にも同じ事が言えます。)
※HTML内の一部インライン化も、速度向上のために行う事もあります。
②コーディングを効率化させる。
各ページの共通部分と固有部分とを明確に分ける事で、作成・管理の効率を上げて行く。
投稿2018/04/19 01:33
総合スコア3521
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/19 01:37
2018/04/19 01:53
2018/04/19 01:54
2018/04/19 01:59
2018/04/19 02:01
2018/04/19 02:37
0
私は、ほぼ触ることのない記述はcommon.cssに、
それ以外をまとめたcssファイルという具合に分けることが多いです。
HTML内に記述することは基本的にないです。
読込み速度を少しでも上げるために意図的に記述するのであれば別ですが。
機能もしくは、ページごとに分けてみてはいかがでしょう、
最終的に非効率的でカオスな状態になっていなければいいかと思います。
投稿2018/04/19 00:59
総合スコア355
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/19 01:45
2018/04/19 01:45
2018/04/19 01:52
2018/04/19 01:59