css、html初心者です。
サイトを作るときのファイル構造について、基本的な質問をさせて下さい。
あるサイトを作るのにトップページのtop.htmlファイルと外部cssファイルをそれぞれ1つずつ作りました。
その後、別ページguide.htmlを作成したいのですが、基本的にcssファイルは1つですか?
例えば、top.htmlでは.contentsに対してmagin-top:120pxを、guide.htmlではmagin-top:50pxを指定したい場合は、.contents1、.contents2というように個々に作成していますか?
分かりにくくてすみません。。。
それとも全ページ共通のcssと各ページごとのcssなどを作るのが一般的なのでしょうか?
No.1
- 回答日時:
好みの問題なんだけど、1個にすると、「このページには使わない」cssの記述も全部読み込まないとイケナイ。
で、時間が掛る。そういう理由で分けているだけです。
No.2ベストアンサー
- 回答日時:
CSS(Cascading Style Sheets)を作成されたのですよね。
なら、Cascading の仕組みをフル活用しているはずです。
一枚にすれば、HTTP要求/提供のステップが一回で済むし、他のページに移動するたびに読み込まなくて済む。CSSはテキストですから読み込む時間はほとんどかかりません。
(画像や動画のほうは負荷が大きいですが、それでもアイコンや背景は一枚にしてスプライトという手法を使うのと同じです。小分けして必要な時、都度読むよりあらかじめ全部読ませた方が良い)
しかし、最近のネットはとても早くなっているので、時間的な問題は気にする必要がないでしょう。
一枚に書く方が一度読めばよいので速度的には有利です。しかし、メンテナンスは極めて厄介になる。
★管理しやすいので、分ける。
Cascading の仕組みから、
固定スタイルシートで、すべてのメディアに適用するスタイルを書きます。
これは印刷にも、スクリーンリーダーにも適用される
screenメディア用のメディア別スタイルシートを書きます。
screen用優先スタイルシート
★デフォルトのスタイルシートを記述した後、個別のページについては
そのページだけ適用する場合は、<head>内の<style>要素に記述
複数枚に適用させる場合は、外部スタイルシートで必要な部分だけを上書き
・・Cascading機能を使いシンプルに・・
これは、mediaqueryを使う場合も同じです。
公的なページなどでは、印刷用スタイルシート、代替スタイルシート、スクリーンリーダー用のスタイルシートが必要な場合もあります。
>.contentsに対して・・guide.htmlではmagin-top:50pxを指定したい場合は
これはHTMLが間違いです。20年以上前のHTML4.01の時代から「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するため( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」となっていて、デザインではなく文書構造をHTMLではマークアップします。HTML5では、<header><section>とか、具体的になりdivは原則使いません。
また、セレクタの指定も起点セレクタを書くようにしましょう。
大事なことは、メンテナンス性です。文書構造を担うHTMLとプレゼンテーションを担うスタイルシートを分ける最大の目的は、
【引用】____________ここから
2.4.1 構造とプレゼンテーションの分離
HTMLは、常に構造的マーク付けを規定するところのSGMLをルーツに持っている。HTMLの性質上、プレゼンテーションに関する要素や属性は、次々と他の機構、とりわけスタイルシートに置換えられていく。 また、文書の構造をプレゼンテーションと切り離すことで広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になるということが、経験的に知られている。
 ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ここまで[Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )]より
私の場合
1) 固定スタイルシート
HTMLの<head>への記述
<link rel="stylesheet" type="text/css" href="/CSS/parmanent.css">
CSSへの記述
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p{margin:0;line-height:1.6em;}
p{ext-indent:1em;}
・・・
2) メディア別優先スタイルシート
(screen用優先スタイルシート)
HTMLの<head>への記述
<link rel="stylesheet" type="text/css" media="screen" href="/CSSt/screen.css">
CSSの記述
body{font-famiry:*****;}
3) マニュアル用追加スタイルシート
(screen用追加スタイルシート)
HTMLの<head>への記述
<link rel="stylesheet" type="text/css" media="screen" href="/CSSt/manual.css">
4)
<link rel="Alternate StyleSheet" type="text/css" media="screen,projection,tv" href="/styleSheet/CSS/projection.css" title="プロジェクター用">
5) 印刷用優先スタイルシート
(print用スタイルシート)
<link rel="styleSheet" type="text/css" media="print" href="/styleSheet/CSS/print.css">
6) 個別のページ用
<head>
<style type="text/css" media="screen">
header nav li a[href="/page2.html"]{color:red;font-weight:bold;}
サイトナビで当該のページである場合
とか、
要は、カスケーディングの機能を利用して、メンテナンスが容易になるようにする。そのためのCascading スタイルシートなのですよ。
時間が取れれば、サンプル作ってみましょう
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- HTML・CSS CSSファイルの日本語コメントが文字化けしてしまう 3 2022/12/26 15:50
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- フリーソフト サイトで使用していない画像ファイルの削除ソフトを探しています。 3 2023/04/05 10:49
- HTML・CSS HTMLとCSSについて 2 2022/09/12 15:46
- HTML・CSS HTMLとcssでページを作っています。右図のような形にしたいのですが、margin topで指定す 3 2023/06/08 23:39
- HTML・CSS HTML と CSS 1 2023/03/07 06:50
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- HTML・CSS HTMLを正しく表示させるには 2 2023/06/18 09:12
- HTML・CSS Webページを作るには、HTMLとCSSだけ出来れば大丈夫なのですか? JavaScriptのスキル 6 2022/08/21 15:28
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jspにcssを反映させるには
-
ワードプレスで太字が反映され...
-
cssで、ボタンのテキスト部分を...
-
一部のページにデフォルトCSSを...
-
複数のhtmlで同じcssファイルを...
-
cssファイルの名称付け
-
行と行の間を一行空けたいです
-
CSSファイルの分け方皆様はどの...
-
CSSファイルを入れるフォルダは...
-
html/cssの辞書
-
HTMLの CSSのファイルというの...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
「MS Pゴシック」と同じ幅の...
-
PDFファイルを開かずに印刷...
-
縦書きテキストボックスの表示"...
-
EXCEL VBA 印刷プレビューダイ...
-
入力規則のリストの文字の大き...
-
テーブル内の文字サイズを変更...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssファイルの名称付け
-
jspにcssを反映させるには
-
ディレクトリ構成【「common」...
-
サイトを作る時のcssファイルは...
-
HTMLの CSSのファイルというの...
-
cssで、ボタンのテキスト部分を...
-
複数のhtmlで同じcssファイルを...
-
cssファイルを階層の異なるHTML...
-
cssが反映されません
-
一部のページにデフォルトCSSを...
-
WindowsとMacで違うCSSを読み込...
-
エクセルファイルにCSSを読み込...
-
定数の定義とかはできますか?
-
ブラウザでプレビューでCSSが反...
-
範囲指定印刷での位置(css)
-
ドキュメントルートより上の階...
-
スタイルシート(CSSスタイル)...
-
Dreamweaver のテンプレートで...
-
【CSS】スタイルやクラスがどの...
-
cssでiPhone SEで文字が小さす...
おすすめ情報