実務でリセットCSSを使うときは、html5doctorとnormalize.cssかどちらにしようか考えているのですが、
現場ではこちらが良いと思いますか?
またhtml5doctorの場合下記のような変更を加えているサイトのソースを使わせてもらうのが良いかと思うのですが、情報が古いのも有りどれが良いかご存知なかたがいましたら教えてください。
http://www.html5.jp/html5doctor/html-5-reset-sty …
こちらのサイトもhtml5doctorで有名のようですね。
どちらのソースを使わせてもらおうか迷いますが、こちらは若干更新日が古そうですね。
http://www.html5-memo.com/first-html5/html5-002/のほうがよさそうなのですかね?
No.1ベストアンサー
- 回答日時:
reset.css
全て0にしてから設定したい数値を指定する
normalize.css
デフォルト値を設定してから0にしたいものに0を指定する
という違いだけなので、使いやすい方を使ってください。
新しいファイルは新しいHTMLタグが追加されていますので、できるだけ新しい方が良いです。
reset.cssは分かるのですが、normalize.cssはブラウザの設定で表記してから、リセットしたいところだけ、
自分で指定してリセットするということですね。
必要なクセはあえて自分で残すということですね。
No.3
- 回答日時:
>必要なクセはあえて自分で残すということですね。
の意味が分かりません。
ウェブ標準(HTML4.01strict+URL入りのDOCTYPE)だと、ブラウザ間の誤差--癖はほとんどないはずです。
大事な事はユーザーインターフェースで、ユーザーが常用しているブラウザのもつデフォルトのスタイルシートは大きく変更しないほうが良いのです。リンクの色や下線とか、リストや引用ブロックの字下げとか・・。
凝ったデザインが必要な場面は、トップページやナビゲーション部分だと思います。それ以外の記事の部分は、極力デフォルトのスタイルを活用することになると思います。それをいちいち再設定するのは労力の無駄じゃないかと。
私的には、欧文と日本語の表記の差、具体的には、p{text-indent:1em;margin:0;line-height:1.7em;}とか・・一般的には固定スタイルシート(persistent style sheet)に書く程度のものとか。
具体的にリセットCSSにしろ、normalize.cssにしろ、ほとんどの項目は、改めて設定しなければならないものが大部分を占めています。
とにかくシンプルに分かりやすくしないとメンテナンス困る。
No.2
- 回答日時:
質問の趣旨と変わりますが、html5doctorはHTML5の勉強のためによく利用するのですが、リセットCSSは利用しません。
リセットCSSの問題点
1) カスケーディングの仕組み上、本来デフォルトであるブラウザのもつスタイルシートをすべて無効にしてしまう。
・カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
・HTML 4のためのデフォルトスタイルシート( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
そのために、すべての要素に対するスタイルシートを再指定しなければならなくなる。
それは、結果として
・対応していない指定があるとデフォルトのスタイルさえ適用されない
・スタイルシートが膨大で煩雑なものになりメンテナンスが難しくなる。
・メディアごとのスタイルはどうするか??
handheldやspeech(aural)
そのHTMLに登場するであろう要素に対してスタイルを指定すれば、リセットして再指定するよりはるかに簡単で分かりやすい。
例えば、順不同リスト(UL)は本文中(section)などではデフォルトでよいが、ナビゲーション(nav)内ではblockやinline-blockにしたければ、
nav ul,nav ul li{list-style:none;margin:0;padding:0;position:relative;}
header nav ul li{width:20%;display:inline-block;}
section nav ul li{width:100%;}
ですむものを
リセットCSSを読み込ませたあとで
nav ul,nav ul li{position:relative;}
header nav ul li{width:20%;display:inline-block;}
section nav ul li{width:100%;}
section ol{margin:1em;padding:0 1em;}
section ol li{list-style:disc outside;margin:0.5em 0 0 2em;}
とかするよりよっぽど楽ですよ。
>どちらのソースを使わせてもらおうか迷いますが、
つかうなら、html5docterでしょうが、そもそもリセットCSSは使わないほうが楽ですよ。
実際に使用して、携帯電話(handheld)、印刷(print)して泣く事になる。
この回答への補足
reset.cssは分かるのですが、normalize.cssはブラウザの設定で表記してから、リセットしたいところだけ、
自分で指定してリセットするということですね。
必要なクセはあえて自分で残すということですね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
liタグの中に<p>タグやら<dl>を...
-
リストマーカーをボックス内に...
-
html <ul></ul>の並びで一行空...
-
カルーセルスライダー「slick.j...
-
リストの数字のフォントサイズ...
-
Dreamweaverで、ul要素の下に写...
-
SWIFTでHtmlのソースの一部を取得
-
番号付きリスト(<Ol><Li>・・...
-
リストタグを用いた段組みメニ...
-
CSS 横並びリストの書き方はど...
-
CSS3グラデーションで、右端だ...
-
<table>の高さ固定。情報増加時...
-
ブログのメニュー設定時にテン...
-
<ul><li></li></ul>にするメリ...
-
HTMLで組織図を作成する方法
-
フッターのボーダーが消えてし...
-
HTMLでメニューをリストで書き...
-
CSSのみで画像とテキストに同時...
-
テーブルリンクに付いて
-
横並びのボタンの背景を片方だ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html/cssの、navを2段にする...
-
リストマーカーをボックス内に...
-
ulタグやliタグの中でbrタグ...
-
リストの数字のフォントサイズ...
-
liタグの中に<p>タグやら<dl>を...
-
<ul>~</ul>が二つ続くと間に改...
-
<table>の高さ固定。情報増加時...
-
<ul><li></li></ul>にするメリ...
-
レスポンシブWebデザインでリン...
-
html <ul></ul>の並びで一行空...
-
display:table;を多段表示させたい
-
HTMLで組織図を作成する方法
-
divタグ内のコンテンツが重なっ...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
HTML5のfooterに見出しを付けて...
-
htmlの<ol>タグで、数字などを...
-
css 横並びのナビゲーションバ...
-
ナビゲーションバーを端まで伸...
-
疑似クラス :activeが効きません
おすすめ情報