![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
HTMLの勉強中の作家です。
色々悩んだ末にサイトをHTML5に移行作業中です。
テキストを読んでもCSS3の書式がイマイチよく分かりません。
(CSS2.1の)指定は背景色、文字色(1部文字色変更含む)、フォントの種類、背景色etcetc…と言った至ってシンプルな文字のみのサイトです。
あちこちのサイトを見ながら悪戦苦闘をしていますが、CSSのチェックをかけるとエラーが出ます。
CSS2.1を3にするためにはどこをどう変えれば良いのでしょうか?
ちなみに
@charset "UTF-8";
.ryoko {
color : #407133;}
.kazumi {
color : #336070;}
div,p {
color : #222222;}
p { font-family: Arial, Helvetica, sans-serif;}
body {
background-color:#e0ffe0;}
a:link {
color : #0000ff;}
a:visited {
color : #003333;}
a:hover {
color : #660000;}
a:active {
color:#660066;}
p{
margin: 1px 0px 1em 0px;
font-size:95%;
line-height:103%;}
div {
color : #222222;}
div { font-family: Arial, Helvetica, sans-serif;}
div{
margin: 1px 0px 1em 0px;
font-size:95%;
line-height:103%;}
.akeru{ line-height:1em; }
↑これです。テキストとCSS3について説明されているHPと各マチマチなもので戸惑っています。
No.4ベストアンサー
- 回答日時:
#1,2,3 です。
ソースは省略しないで正確に書いていただけると有り難いのですが…。
質問文のソースには @font-face は存在しないので、#1 の時点では CSS2 でも CSS3 でも問題ないと判断しました。
> 「2.1で検証しました。エラー(CSS3の『@font-face』 が含まれています)」
"CSS2.1" として検証しているのですから、"CSS3" で定義されているプロパティに警告を出すのは当然です…。
[検証する] のボタンを押す前に [オプション] フィールドから "CSS3" の [Profile] を指定してください。
たびたびありがとうございます。
整理して説明します。
○約6時間かけてソース(CSS2.1)を(CSS3に)三分の一程度改変。
↓
○まだ作業の途中でしたが「一旦チェックをかけてみよう」とチェック。
↓
○エラー(テキストを見ながら作成したのに、どこをどう直して良いのか分からず)
↓
○「やっぱり才能ないな、自分」と脱力&作成したCSS3を保存せずに消去。
↓
○気を取り直してリベンジ!(どこをどういじれば良いのやら。。)それで質問。
と、言った次第です。
…って、えぇ!? すみません。。。「オプション」・・・見落としていました。上記ソースで…CSS3を選択して再検証してみたら。。合格(汗)
すみませんでした!
並びにありがとうございます!(自動で判別されるものだとばかり思い込んでいました)。
本当に本当にありがとうございます!
No.5
- 回答日時:
CSS2.1とCSS3の違いは何?
今の段階の私の理解ですが、
CSS3では、機能ごとにモジュールとして仕様が定義され、勧告される。
ベンダー/メーカー(ブラウザー等のユーザーエージェントを提供する人たち)は、どのモジュールを実装するか決め、実装するモジュールの機能を満足させればよい。一方CSS2.1ではCSS2.1の勧告を全てを実装しようと目指していた。
CSS3で新たなセレクター書式や、プロパティ・属性がモジュール毎に登場するけど、ユーザーは、それを使いたかったら使えばよい。CSS2.1で作ったCSSを書き換える必要は全く無い。(※HTML5はCSS3を使えとはどこにも書いてないような気がする。)
正確にはやっぱり↓をよく読む事です。
http://www.w3.org/TR/2001/WD-css3-roadmap-200105 …
※あやしいテキストや回答にひっかかたりするぐらいなら、上を翻訳ツールで訳した方が幸せかも。
ありがとうございます!
HTML5は理解できたのですけれど、CSS3の本には新要素の書式しか載っていなくて「2.1と3では出来ることの幅が違う」と、これだけしか理解できずに、…かと言って英語が得意というわけでもないためW3Cの原文を読むこともできず。翻訳サイトで翻訳するとおかしな日本語に。。。おかしな日本語でも何となく言いたいことは分かるのですけれど…。
サイトの紹介をありがとうございます。
昨夜…、回答を締め切ったはずが(けっこう うっかり者です)。
6時間悪戦苦闘した結果…「オプション」の選択をしていなかった…だなんて。
夫に話して苦笑されました。
No.3
- 回答日時:
#1,2 です。
繰り返しますが、CSS検証に使ったツールは何でしょうか?
> エラーメッセージは「2.1と3の混在(判定は2.1でした)」
何の事やらさっぱりわかりません…。
掲示されたソースは CSS2 でも CSS3 でも適合すると思うのですが。
CSS3 にしか存在しないプロパティを使えば、そこだけは確実に CSS3 と判定できますが、それ以外の部分(どちらでも定義されているプロパティ)についてはどちらを意識したものかは機械的に判断する術があるとは思えません。
例えば、colorプロパティは CSS2.1, CSS3 の両方に存在します。
http://zng.info/specs/css3-color.html#foreground
http://www.w3.org/TR/CSS2/colors.html#colors
タイプセレクタも CSS2.1, CSS3 の両方に存在します。
http://zng.info/specs/css3-selectors.html#type-s …
http://www.w3.org/TR/CSS2/selector.html#type-sel …
つまり、"p { color: red; }" と書いたとき、それが CSS2.1 なのか CSS3 なのかを判断することは出来ません。
どちらでも問題ないからです。
ありがとうございます。
http://jigsaw.w3.org/css-validator/
↑こちらを使いました。
言葉足らずでお手数かけまして、すみません。
確か・・・。「2.1で検証しました。エラー(CSS3の『@font-face』 が含まれています)」。。。このような内容でした(三分の一ほど改変してみて試しにチェックをかけて撃沈)。
つまり…、CSS自体は2.1なのにCSS3の要素が混ざっている…ということですよね?
CSS3で組んだつもりだったのですけれど(しかも6時間かけて悪戦苦闘した結果です・泣)。
No.1
- 回答日時:
CSS2.1 にあるプロパティは CSS3 にもあります。
(後方互換性有り)つまり、何も変える必要はありません。
> CSSのチェックをかけるとエラーが出ます。
掲示されたソースを http://jigsaw.w3.org/css-validator/ でチェックしてみましたが、エラーはありませんでした。
validator に何を使っていて、どこにどんなエラーが出てくるのでしょう?
> テキストとCSS3について説明されているHPと各マチマチなもので
基本的に W3C か W3C を翻訳した文書を信用してください。
CSS2.x
http://www.y-adagio.com/public/standards/tr_css2 …
http://www.d-toybox.com/spec/CSS2.1/appendixC/
http://hp.vector.co.jp/authors/VA022006/css/
http://www.w3.org/TR/CSS2/
CSS Text Level 3
http://www.w3.org/TR/css3-text/
年の瀬のお忙しい中、ありがとうございます!
説明不足で申し訳ございません。
2.1では「合格」しましたけれど、3にしようと思い、テキストにあるとおりに@や#を付けてみたりしているのですけれど(今月から勉強を始めたひよっこです)。
エラーメッセージは「2.1と3の混在(判定は2.1でした)」、諦めて改変した外部CSSを上書き保存をせずに消してしまったため、正確なメッセージを提示できなくてすみません。
HTML5+CSS2.1でも特に問題はないのでしょうか?(この辺もよく分かっていません)
現状、テキストのみの何の飾り気もないサイトですのでCSSの移行に疑問を持ちつつもHTML5+CSS3という(テキストの)図式に疑問を感じつつも、(新しいページから)ぼちぼち移行作業をしています。
HPの紹介をありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
fontサイズ指定の ”-(マイナ...
-
リストの前後の行間をなくす方...
-
指定の文字だけ色を変える
-
API Sleep関数について
-
テキストファイルの行を指定し...
-
特定の文字のみcssを適用するに...
-
CSSについて教えてください。 ...
-
Htmlとcssの勉強のため手書きで...
-
WEBサイトの作成で、imgタグに...
-
FireFoxで"display = none"を指...
-
a:hoverの下線指定が反映されない
-
外部CSSファイルで未定義のclas...
-
ホームページビルダー作成HPがi...
-
<input type="file"> の幅
-
全角半角含めて等幅で表示したい
-
文字と同じ幅で下線を引きたい...
-
文章の一部分だけ文字色を変え...
-
初期化
-
CSSを一部無効にしたい
-
テキストボックスの枠を非表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
リストの前後の行間をなくす方...
-
特定の文字のみcssを適用するに...
-
リンク文字
-
文字の位置、上下のマージンが...
-
Format 関数 表示書式指定文字...
-
テキストファイルの行を指定し...
-
API Sleep関数について
-
テキストエリア内の文字の装飾
-
CSSを一部無効にしたい
-
fontサイズ指定の ”-(マイナ...
-
ホームページビルダー作成HPがi...
-
全角半角含めて等幅で表示したい
-
CSSについて教えてください。 ...
-
<input type="file"> の幅
-
background-color: #ddd;の意味...
-
上付き文字と下付き文字を同時...
-
h1タグのパンくずリストへの設置
-
Excel VBA メール作成について ...
-
Excel VBA メール作成について ...
-
指定の文字だけ色を変える
おすすめ情報