リセットCSSの選択と情報の信頼性

このQ&Aのポイント
  • 実務でリセットCSSを使う際の選択肢はhtml5doctorとnormalize.cssの2つです。
  • html5doctorの方が情報が古い可能性があるため、信頼性を考慮する必要があります。
  • より新しい情報を提供しているhtml5-memo.comのソースを利用することも検討してください。
回答を見る
  • ベストアンサー

リセットCSSについて

実務でリセットCSSを使うときは、html5doctorとnormalize.cssかどちらにしようか考えているのですが、 現場ではこちらが良いと思いますか? またhtml5doctorの場合下記のような変更を加えているサイトのソースを使わせてもらうのが良いかと思うのですが、情報が古いのも有りどれが良いかご存知なかたがいましたら教えてください。 http://www.html5.jp/html5doctor/html-5-reset-stylesheet.html こちらのサイトもhtml5doctorで有名のようですね。 どちらのソースを使わせてもらおうか迷いますが、こちらは若干更新日が古そうですね。 http://www.html5-memo.com/first-html5/html5-002/のほうがよさそうなのですかね?

noname#226032
noname#226032
  • CSS
  • 回答数3
  • ありがとう数7

質問者が選んだベストアンサー

  • ベストアンサー
回答No.1

reset.css 全て0にしてから設定したい数値を指定する normalize.css デフォルト値を設定してから0にしたいものに0を指定する という違いだけなので、使いやすい方を使ってください。 新しいファイルは新しいHTMLタグが追加されていますので、できるだけ新しい方が良いです。

noname#226032
質問者

お礼

reset.cssは分かるのですが、normalize.cssはブラウザの設定で表記してから、リセットしたいところだけ、 自分で指定してリセットするということですね。 必要なクセはあえて自分で残すということですね。

その他の回答 (2)

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.3

>必要なクセはあえて自分で残すということですね。  の意味が分かりません。  ウェブ標準(HTML4.01strict+URL入りのDOCTYPE)だと、ブラウザ間の誤差--癖はほとんどないはずです。  大事な事はユーザーインターフェースで、ユーザーが常用しているブラウザのもつデフォルトのスタイルシートは大きく変更しないほうが良いのです。リンクの色や下線とか、リストや引用ブロックの字下げとか・・。  凝ったデザインが必要な場面は、トップページやナビゲーション部分だと思います。それ以外の記事の部分は、極力デフォルトのスタイルを活用することになると思います。それをいちいち再設定するのは労力の無駄じゃないかと。  私的には、欧文と日本語の表記の差、具体的には、p{text-indent:1em;margin:0;line-height:1.7em;}とか・・一般的には固定スタイルシート(persistent style sheet)に書く程度のものとか。  具体的にリセットCSSにしろ、normalize.cssにしろ、ほとんどの項目は、改めて設定しなければならないものが大部分を占めています。  とにかくシンプルに分かりやすくしないとメンテナンス困る。  

noname#226032
質問者

お礼

ありがと

  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.2

質問の趣旨と変わりますが、html5doctorはHTML5の勉強のためによく利用するのですが、リセットCSSは利用しません。  リセットCSSの問題点 1) カスケーディングの仕組み上、本来デフォルトであるブラウザのもつスタイルシートをすべて無効にしてしまう。  ・カスケード処理の順序( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html#cascading-order )  ・HTML 4のためのデフォルトスタイルシート( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/sample.html )  そのために、すべての要素に対するスタイルシートを再指定しなければならなくなる。  それは、結果として  ・対応していない指定があるとデフォルトのスタイルさえ適用されない  ・スタイルシートが膨大で煩雑なものになりメンテナンスが難しくなる。  ・メディアごとのスタイルはどうするか??    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)して泣く事になる。

noname#226032
質問者

お礼

html5docterの方が良いのですね。 normalize.cssはどんなデメリットがあると思ったのでしょうか?

noname#226032
質問者

補足

reset.cssは分かるのですが、normalize.cssはブラウザの設定で表記してから、リセットしたいところだけ、 自分で指定してリセットするということですね。 必要なクセはあえて自分で残すということですね。

関連するQ&A

  • リセットCSSがきかない

    コーデイング超初心者です。 HTMLとCSSでWEBサイトを作成していて、 リセットCSSをコピペしたのですがきいていないようで、 Chromeでは綺麗に反映されるのですがそれ以外のブラウザでは位置がずれて表示されます。 YUI3やEric Meyer Reset CSS、HTML5 Doctor CSS Resetを使用しましたが 全部ダメでした。 リセットCSSはサイトに書かれているコードをコピペして貼るだけで使用できるんですよね?? HTMLのheadの方に何か書き込まなきゃいけないんでしょうか?? また、きかない場合どうすればいいでしょうか??

    • 締切済み
    • CSS
  • リセットCSSが効かない

    初めてのwebページ作りで困ったことが起こりました。リセットCSSを記述し、まずはFirefoxで表示の確認をしてみました。ところが、本来余白が無くなって詰めて表示されるはずが、なぜか余白が残って表示されてしまいます。(リストマーカーなど他のリセットCSSはなぜか反映されていました。)コードを何度も見直しましたが、これといった間違いは見つからなかったのでおかしいなぁと思い、別のブラウザでも表示させてみました。すると、EdgeとIEでは同じく一部のリセットCSSが反映されていないようでしたが、Google Chromeではすべて正しく反映されており、無駄な余白のないレイアウトしやすい状態になっていました。これでリセットCSSがうまく機能していることは確認できたのですが、なぜGoogle Chromeでしか反映されないのか不思議でなりません。webサイト制作専門の方に聞いても「ブラウザの問題は分かりかねないと」と言われてしまい、困っています。先に進みたいのですが、別のブラウザで正しく表示されないとなると問題だと思うので、なるべく早く解決したくこちらで質問させていただきました。HTML、CSS、ブラウザに詳しい方などにご教示いただけたらと思います。よろしくお願いいたします。

    • 締切済み
    • CSS
  • CSSの部分リセットについて

    サイト全体に影響するCSSでtableのボーダーを非表示に指定しています。 ところが、一部分のみCSS無指定状態のtableを表示する必要が出てしまいました。 該当するtableに別クラスを割り当てて、その部分だけを個別に指定しようと思いましたが、実際見てみると、CSS無指定状態とは微妙に見た目が異なってしまいます。 ====CSS内容==== table { border: 0px none; } td { border: 0px none; border-collapse: collapse; } /*普通にtableを書くとボーダーが消えてしまうので個別に指定*/ .reset table{ border: 3px ridge; } .reset td{ border: medium ridge; border-collapse: collapse; } ====HTML==== <div class="reset"> <table> <tr> <td>ああああああ</td> <td>ああああああ</td> </tr> <tr> <td>いいいいいい</td> <td>いいいいいい</td> </tr> </table> </div> 元のtableの指定はサイト全体に影響が出てしまうため、修正することができません。 いまさらながらものすごく後悔していますが・・・。 また、今後の使いまわしを考えると、IDの指定もできません。 無理矢理何とかできないかと思い、上記の方法を取りましたが、やはりうまくいきません。 理想としては、指定した箇所のみCSSの影響がなくなるということですが、いろいろ調べても見つかりませんでした。 根本的に作り直しした方がいいのは理解していますが、何か方法があればと思い質問させていただきました。 どなたか良い案がありましたらお助けください。

    • ベストアンサー
    • HTML
  • reset.cssについて

    質問させていただきます。 表題の通り、reset.cssの作成についての質問です。 質問は2つあります。 1.「*」で全てを一気に設定してはいけないのはな何故? 2.参考としたサイトなどはありますか? [質問1について] 初心者な質問ですが、このことに関していまいち理解しておらず、 優先順位が一番低い、ぐらいにしか認識がありません。 しかし、reset.cssの参考に出来るサイトを調べてみると どのかたもタイプセレクタでプロパティを設定していました…。 このことから、「*じゃダメなんだなー。」と思いつつも「なんでだ?」と 思っていましたので、ここに質問させていただきました。 [質問2について] 現在、reset.css作成にあたり、参考となる見本を探しています。 自分が見本として見勉強していたのが「YUI Reset CSS」です。 他に見本にしたサイトなどがありましたらお願い致します。 以上です。失礼いたします。

  • CSSをCSSとして更新を行ってくれるソフト

    CSSを使用したサイトをテキスト手打ちで作りました。 基本的に私が更新するのですが、私が多忙な時にサブで手伝ってくれる方のソフトがフロントページ・エクスプレスです。 困っているのは、こちらのソフトを使うと、.CSSのファイルを無視してソースにHTMLのタグを直接組み込んでしまうため、ソースがごちゃごちゃになってしまうことです。 CSSをCSSとして認識してくれるソフトはどのようなものがありますか? 今まで全てメモ帳で作ってきましたので、ソフトの知識はさっぱりです…よろしくお願いします。

  • HTMLから複数のCSSファイルへのリンクを&でつなぐ方法

    今日たまたま見た外国サイトで<HEAD>内のCSSリンクの記述方法を以下のようにしているのを見つけました。 今まで見たことのない記述方法だったので、これは果たして有効なのか?新しい記述方法? 少し気になったので、この記述方法をご存知の方がいましたら、この記述方法のメリットがあれば教えていただきたいと思います。 <link href="http://www.example.com/css/css&amp;f=reset.css,global.css" media="screen" rel="stylesheet" type="text/css" > 参考元:http://www.tweeeeet.com/

  • CSSファイルは、どこから読み込んでいるのか?

    とあるWebサイトのソースを見たら、headの部分が次のようになっておりました。 <link rel="stylesheet" href="css/import.css" type="text/css" media="all" /> これは、普通に記述されていると思いますが、href="css/import.css"を開いてみたら、次の記述しかありませんでした。 @charset "utf-8"; /* CSS Document */ @import "common.css"; @import "top.css"; @import "text.css"; @import "faq.css"; @import "form.css"; これは、どういうことでしょうか? CSSからCSSを読みこんでいるのでしょうか? なぜ、htmlファイルに複数行をかけてCSSファイルを一つずつ読みこませないのでしょうか? 何かメリットがあるのでしょうか?

    • ベストアンサー
    • CSS
  • CSSが読み込めません

    今 HTML5とCSS3で個人のWebサイトを作成しており、 確認のためGoogleChromeにコピーして見てみましたが 外部CSSが全く反映されていません Windows8、保存している文字コードはどちらもUTF-8です <!DOCTYPE html> <html lang="ja"> <head> <link rel="stylesheet" type="text/css" href="style.css"/> <meta charset="UTF-8"> <meta name="keywords" content="〇〇"> <meta name="description" content="〇〇。"> <title>〇〇</title> </head> <body> <H1>〇〇</H1> <img src="〇〇.png"> </body> </html> CSS ソース↓  body {color: red; } 何故こんな簡単なところでつまずいているのか自分でも分かりません どなたか分かる方いらっしゃいましたらご教授ください

    • ベストアンサー
    • CSS
  • インラインフレーム内のcssを親フレームに適用する

    インラインフレーム(子ウィンドウ)に表示されているページ(同一ドメイン上のページです)で読み込まれているcssを、ページ読み込み時に親ウィンドウ側でも読み込みたいと思っています。 内容としては 親ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test1.css"> 子ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> となっているソースをページ呼び出し時に 親ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> 子ウィンドウ側css呼び出し部分 <link rel="stylesheet" type="text/css" href="test.css"> <link rel="stylesheet" type="text/css" href="test2.css"> のように共通していないcssを子ウィンドウ側に合わせて変更したいのです。 子ウィンドウ内のページのソースは訳があって編集する事が出来ないので、親ウィンドウ側で子ウィンドウ内の <link rel="stylesheet" type="text/css" href="test2.css"> の href の値を読みこみ、親ウィンドウ側の href の値を置き換えるといった方法では無いかと思うのですが、具体的にどうすればよいのか分かりません。 どなたかご存知の方、ご教授ください。 よろしくお願いいたします。 また、ブラウザはIE6~8と、Firefoxを想定しています。

  • 外部CSSを適用させるための正しいソースコードの書き方

    dreamweaverCS4のバグではないかと思うのですが、外部スタイルシート(test.css)を作成し、それをHTMLファイル(test.html)へ適用させたいのですが、ファイルの階層が同じなので、以下のようにソースコードを書くのが正解だと思いますが、 <link href="test.css" rel="stylesheet" type="text/css"> 以下のように、「../test.css」と「..」が付いても適用される場合があります。 <link href="../test.css" rel="stylesheet" type="text/css"> 逆に「..」が付く方が正解で、付かない方が間違っているのでしょうか? どっちが正しいのでしょうか? そもそも「..」とは何でしょうか? すみません、根本的なところからわかっていません。 よろしくお願いします。

    • ベストアンサー
    • HTML