HTML5の構文チェックとCSS3について
- HTML5の構文チェックとCSS3についての勉強中の作家です。新規ページからHTML5にしようと思っています。
- 現在のソースは合っているか不安です。W3Cの検証サイトでチェックをしたところ、「Passed, 1 warning」と出ました。CSSは2.1のままで、細かい指定は要らないです。CSS3に書き換える方法が分かりません。
- CSS2.1をCSS3に書き換えるためにはどうすれば良いでしょうか？テキストの記述例には@や#が付いていますが、現時点ではそれほど凝るつもりはありません。
- ベストアンサー
HTML5の構文チェックとCSS3について
HTMLの勉強中の作家です。 新規ページからHTML5にしようと思っています。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="robots" content="noindex,nofollow,noarchive"> <link rel="stylesheet" href="style.css" type="text/css"> <style type="text/css"> <!-- --> </style> <title>私小説</title> </head> ソースはこれで合っていますか？ W3Cの検証サイトにてチェックをしたところ「Passed, 1 warning」と出ました。 CSSは2.1のままです。 CSS3のテキストを読んでいますけれど、文字のみのサイトなため、細かい(背景などの)指定は要らないです。 英語が達者と言うわけでもないため「 1 warning」の指摘らしき文章を翻訳サイトにて翻訳してみました(市松模様だとか意味不明な日本語に翻訳さましたけれども・笑)。どうやらCSSに原因がある…ぽいです(ハッキリとはしていませんけれど)。 現行のCSS2.1をどう書き換えればCSS3になるのか？(CSS2.1はW3Cのサイトで合格しました) テキストを読んでいるのですが、イマイチよく分かりません。 @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; } .akeru2{ margin-top:2em; } .akeru3{ margin-top:3em; } ↑これをCSS3にするためにはどうすれば良いのでしょうか？(テキストの記述例には@や#が付いていましたけれど、テキストに書かれているほど凝るつもりは今のところ予定はないです)。
- HTML
- 回答数2
- ありがとう数4
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
もしかして、1 warning って 「Using experimental feature: HTML5 Conformance Checker.」 これのこと？ だとしたら、まったくCSSは関係ないですよ。 単に、HTML5は、仕様がまだドラフト（草案）段階ですよっていう意味のWarningだと思います。 別のHTML5チェッカーを紹介しときます。 http://validator.nu/
その他の回答 (1)
- Tacosan
- ベストアンサー率23% (3656/15482)
その「warning の指摘らしき文章」とやらを「そのまま」だすことはできませんか?
お礼
ありがとうございます。
補足
Notes and Potential Issues The following notes and warnings highlight missing or conflicting information which caused the validator to perform some guesswork prior to validation, or other things affecting the output below. If the guess or fallback is incorrect, it could make validation results entirely incoherent. It is highly recommended to check these potential issues, and, if necessary, fix them and re-validate the document. Using experimental feature: HTML5 Conformance Checker. The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you. Congratulations The uploaded document "sisyousetu105.html" was successfully checked as HTML5. This means that the resource in question identified itself as "HTML5" and that we successfully performed a formal validation using an SGML, HTML5 and/or XML Parser(s) (depending on the markup language used). Validating CSS Style Sheets If you use CSS in your document, you can check it using the W3C CSS Validation Service. ↑これです。
関連するQ&A
- CSS2.1とCSS３の違いを教えて下さい。
HTMLの勉強中の作家です。 色々悩んだ末にサイトをHTML5に移行作業中です。 テキストを読んでもCSS３の書式がイマイチよく分かりません。 (CSS2.1の)指定は背景色、文字色(１部文字色変更含む)、フォントの種類、背景色etcetc…と言った至ってシンプルな文字のみのサイトです。 あちこちのサイトを見ながら悪戦苦闘をしていますが、CSSのチェックをかけるとエラーが出ます。 CSS2.1を３にするためにはどこをどう変えれば良いのでしょうか？ ちなみに @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について説明されているＨＰと各マチマチなもので戸惑っています。
- ベストアンサー
- HTML
- divにも同じフォントスタイルを適用したい
現在 p { color : #222222;} p { font-family: Arial, Helvetica, sans-serif;} p{ margin: 1px 0px 1em 0px; font-size:95%; line-height:103%; } このような指定をしてあります。 しかしセンタリングなどに <div style="text-align:center;">のタグを使用するとセンタリングはされますけれど、上記CSSが反映されませんよね。 あちこちのHPを参考に色々試行錯誤をしていますけれど上手く反映されません。 div { color : #222222;} div { font-family: Arial, Helvetica, sans-serif;} 以下略 div.test 等に変えても同じです。 どこがダメなのでしょうか？
- ベストアンサー
- HTML
- HTML、CSSについて分からないことがあります
下記の2パターンのコードを書きました。 一番目のコードのように、CSSファイルでdivの中に、text-decoration: noneと書いたのですが、うまく実行されませんでした。しかし2番目のCSSファイルのように、＜a＞で指定するとうまくできました。 質問ですが、 (1)<a>で区切らずに、<div>ではできないのでしょうか？ ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; } a { text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーHTML－－－－－－－－－－－－－－－－ <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>About Me</title> </head> <body> <img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/> <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/> <div> <a href="https://facebook.com">Join us<span>Facebook<span> </a> </div> </body> </html>
- 締切済み
- JavaScript
- HTML、CSSについて分からないことがあります
下記の2パターンのコードを書きました。 一番目のコードのように、CSSファイルでdivの中に、text-decoration: noneと書いたのですが、うまく実行されませんでした。しかし2番目のCSSファイルのように、＜a＞で指定するとうまくできました。 質問ですが、 (1)<a>で区切らずに、<div>ではできないのでしょうか？ ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; } a { text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーCSS－－－－－－－－－－－－－－－－－ img { display: block; height: 100px; width: 300px; margin: auto; } p { text-align: center; font-family: Garamond, serif; font-size: 18px; } /*Start adding your CSS below!*/ div{ height: 50px; width: 120px; border-color: #6495ED; background-color: #BCD2EE; border-radius: 5px; margin:auto; text-align:center; text-decoration: none; color: red; } div { height: 20px; width: 200px; border-color:#6495ED; background-color: #BCD2EE; border-radius:5px; margin: auto; text-align:center; text-decoration:none; font-family:Arial; display: block; } span{ color: red; } ーーーーーーーーーーーーーーーーーーHTML－－－－－－－－－－－－－－－－ <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="stylesheet.css"/> <title>About Me</title> </head> <body> <img src="http://s3.amazonaws.com/codecademy-blog/assets/46838757.png"/> <p>We're Codecademy! We're here to help you learn to code.</p><br/><br/> <div> <a href="https://facebook.com">Join us<span>Facebook<span> </a> </div> </body> </html>
- ベストアンサー
- CSS
- CSS ブログ本文とサイドバーのバランス
質問させてください！ weeblyの2カラム標準テンプレートを使用しweb siteを運営しているのですが、 両端の空白をもう少し縮め、本文とサイドバーをその分広げたいと思い、CSSを 調整しようと調べながら各数値を変更してみたのですがうまくいきません。 どの数値を変更するべきなのか教えていただけたらと思います。 理想のサイトのリンク先も貼付けておきます。 http://www.fecalface.com/ body { background-color:#fff; font-family:"helvetica",arial,sans-serif; font-size:62.5%; color:#777; margin:0; padding:0; } acronym { cursor:help; border-bottom:1px dotted #ddd; } #container { font-size:1.2em; width:800px; margin:0 auto; } #header { color:#444; margin:0; padding:0px; background:#fff url(%%HEADERIMG%%) no-repeat bottom right; } #header h1 { font-family:"helvetica",arial,sans-serif; font-size:2em; color:#333; margin:30px 0 0 0; font-weight:normal; line-height:1.5; } #header h1 strong { color:#c00; } #header h2 { margin:1000px 0 0 0; font-size:1em; font-weight:normal; color:#999; } #navigation { text-align:right; margin:10px 10px 10px auto; } #navigation { margin:0 10px 0 0; padding:0; } #navigation li { margin:0; padding:0; list-style:none; display:inline; } #navigation li a { padding:5px 6px 2px 4px; margin:0 2px 0 0px; color:#000000; text-decoration:none; font-weight:helvetica; border-bottom:1px solid #ddd; } #navigation li a:hover { color:#C00; border-bottom:1px solid #c00; } #active a:link { color:#C00; border-bottom:1px solid #c00; } #active a:hover { color:#C00; border-bottom:1px solid #c00; } #active a:visited { color:#C00; border-bottom:1px solid #c00; } #content { margin:20px 0 20px 10px; padding:0; } #content p { padding:2px; text-align:justify; line-height:1.5; } #content h1 { display:block; margin:50px 0 0 10px; padding:0; font-family:"helvetica",arial,sans-serif; font-size:1.8em; color:#c00; border-color:#ddd; border-style:solid; border-width:0 0 1px 0; } #content h2 { display:block; margin:40px 40px 0 0px; padding:0 長くなってしまいましたがよろしくお願いします！
- ベストアンサー
- HTML
- ページ上部の余白をなくしたい（ＣＳＳ）
初歩的な質問で申し訳ありません。 以下のような記述なのですが、 <div id="container">の上部にスキマが出来てしまいます。 背景に仮色をつけたりして確認しましたが、 どうしても余白をなくすことができません。 marginの指定の仕方がおかしいのでしょうか？ ご指摘いただけると助かります。 /* HTML（単純に書くとこんな感じです）*/ <body> <div id="container"> <div id="header"> <div> </div> </body> /* CSS */ body { margin : 0; padding : 0; background-color : #eeeeee; font-size : 12px; line-height : 150%; color : #333333; font-family : arial, helvetica, sans-serif, Verdana, Geneva, ＭＳゴシック; text-align : center; } #container { margin : 0 auto; padding : 0; width : 751px; text-align : left; background-color : #ffffff; } #header { margin : 0 auto; padding : 0; width:745px; height:120px; background: transparent url(***.jpg) ; background-repeat: no-repeat; }
- ベストアンサー
- HTML
- このＣＳＳで間違いがありますか？
下記のＣＳＳで上手く認識しません。 どこか間違いがありますでしょうか？ お詳しい方宜しく願います。 table.cal tr td{ padding:2px; border-style:none; color:#575757; } tr.out{ margin:20px 20px 10px 20px; text-indent:0em; font-size :12px; letter-spacing:0.2em; line-height:1.5; color:#575757; } td.outs{ margin:20px 20px 10px 20px; text-indent:0em; font-size :12px; letter-spacing:0.2em; line-height:1.5; color:#575757; }
- ベストアンサー
- その他([技術者向] コンピューター)
- EXCELでHTMLのタグの入ったセルを結合したい
下記のHTMLのタグが入ったセルと画像URLのセルを結合したいのですが、＆などで結合すると ダブルクォーテーションが倍くらいに増えてHTMLのタグとして機能しません。 どうやって結合させるのがいいのでしょうか？ =A1(HTMLのタグ）＆A2(画像URL）＆A3（HTMLのタグ） <body> <div style="WIDTH: 100%; TEXT-ALIGN: center"> <div id="wrapper" style="FONT-SIZE: 23px; FONT-FAMILY: Arial, Helvetica, sans-serif; WIDTH: 860px; COLOR: #000; TEXT-ALIGN: left; MARGIN: 0px auto"> <h1 style="FONT-SIZE: 38px; HEIGHT: 60px; WIDTH: 850px; COLOR: #ffffff; PADDING-LEFT: 10px; MARGIN: 0px; LINE-HEIGHT: 60px; BACKGROUND-COLOR: #336600">Picture</h1> <img src="画像URL"> <div class="sub_tit" style="FONT-SIZE: 35px; HEIGHT: 40px; WIDTH: 850px; FONT-WEIGHT: bold; COLOR: #ffffff; PADDING-LEFT: 10px; LINE-HEIGHT: 40px; BACKGROUND-COLOR: #336600"> Description </div><br><font size="5">
- ベストアンサー
- HTML
- HTML&CSS DIVをぴったりと縦に並べたい
HTML&CSS初心者です。 下記のソース様に、DIVで一つにまとめたBOXを縦に並べたいのですが、 「見出し002」の上のマージンがうまく取れずに困っています。 .box内のphoto00.jpgをフロートにしている為、フロートが悪さをしている事を考え、 「見出し002」の上のDIV内に<br style="clear: both;" />を入れると、余白が生まれるのですが、 MacのSafariとFirefoxでは、余白の差が出てしまいます。（Safariの方が余白が大きい） <br style="clear: both;" />を入れないと、上のマージンはほぼ消えてしまい、わずかにFirefoxの方では余白が生まれます。 ちなみにこの現象は「ここにテキストが入ります。」の行数を減らすと解決するのですが、 下記のソースでも、photo00.jpgの高さをはみ出す行数ではない為、この<div class="box">に 変な膨らみを持たせたくありません。 どなたか解決法を教えて下さい。よろしくお願い致します。 【HTML】 <div id="main"> <div class="mds01"><h3><em>見出し001</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p><br style="clear: both;" /> </div> <div class="mds02"><h3><em>見出し002</em></h3></div> <div class="box"> <img src="img/photo00.jpg" width="155" height="108"> <h5>小見出し</h5> <p class="txt">ここにテキストが入ります。<br><br> ここにテキストが入ります。<br> ここにテキストが入ります。</p> </div> </div> 【CSS】 /*メイン大枠部分*/ #main { margin: 0px; padding: 0px; width: 627px; float: right; background: #FFFFFF; height: auto; } /*各見出し*/ .mds01 h3 { background: url(img/mmds01.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } .mds02 h3 { background: url(img/mmds02.gif) no-repeat; margin: 25px 0px 15px; padding: 0px; height: 20px; width: 587px; font-size: 9px; color: #FFFFFF; clear: left; float: none; } /*ボックス*/ .box { margin: 0px; padding: 0px; height: auto; width: 587px; clear: left; } /*ボックス内・画像とテキスト*/ #main .box img { float: left; padding-right: 10px; } #main .box h5 { font: bold 14px "ＭＳ Ｐゴシック", Osaka; color: #022962; margin: 0px 0px 10px; padding: 0px; } .txt { font: normal 13px/16px "ＭＳ Ｐゴシック", Osaka; color: #333333; margin: 0px; padding: 0px; } em { visibility: hidden; }
- ベストアンサー
- HTML
- CSSでエラーが出ました
CSS初心者です、宜しくお願いします。 CSS Validatorで検証した結果 文法解析エラーが発生しましたtext04 p・・・ @layout-grid-line : 1.8; text04 p・・・Parse error - Unrecognized } と結果が出ました、 以下CSS記述 .text04{ font-size : 16px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.8; color : #666666; background-color : #ffffff; margin-left : 0px; width : 662px; padding-left : 10px; } .text04 p{ font-size : 14px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.8; color : #666666; background-color : #ffffff; margin-left : 0px; layout-grid-line : 1.8; } どなたかご指導ください、お願いします。
- ベストアンサー
- HTML
お礼
ありがとうございます！ 翻訳サイトの結果を読み、なんとなくyyr446さんの仰るとおのこと…ぽい。と何となく認識していました(他にそれらしき警告は見当たりませんし)。 英語が得意ではないため「1 warning」が気になりまして(なんの警告だろう？)と気になってはいました。 チェッカーの紹介をありがとうございます。 重く…ないですか!?(先日も10分ほど待ちましたけれど諦めました)。