スタイルシートの作成について

2023/10/28 23:23

このQ&Aのポイント

超初心者がスタイルシートの作成でつまずいています
試したが文字デザインが反映されない問題が発生
キーボードの仕様が原因かもしれない

ベストアンサー

超初心者です　スタイルシートの作成について

2014/02/28 09:55

入門書を片手に独習を始めたばかりで、早くもつまずいています。以下作成し、検証サービスでも問題なし、と出ましたが、何度試しても文字デザインが反映されません。下例には大きさfont-sizeしか入っていませんが、フォント・色についても反映されませんでした。WindowsとMac、両方で試しましたが同じ状況です。 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN””http://www.w3.org/TR/xhtml1/DTD/ xhtml-transitional.dtd”> <html xmlns=“http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=“Content-type” content=“text/html;charset=utf-8” /> <title>I love Paris</title> <style type=“text/css”> h1 {font-size: 0.75pix} </style> </head> <body> <h1>Paris</h1> </body> </html> 打ち慣れているキーボードがフランス語方式なのですが、いくつかの記号が出ないため、途中英語方式に変えたりしたのが悪いのかと思い、全て英語方式で書き直したりもしましたが状況は変わりません。キーボードの仕様はあまり関係ありませんでしょうか。解決策を教えてくださるかた、よろしくお願いします。

marcelin
お礼率100% (2/2)

CSS
回答数2
ありがとう数8

みんなの回答 （2）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2014/02/28 16:28 回答No.2

属性値を記述する時に使用出来るクォーテーションは、""と''です。『すべての属性値を二重引用符(ASCII十進34)または単引用符(ASCII十進39)のどちらかを用いて囲うよう求めている。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/sgmltut.html#h-3.2.2 )』使われている“”ではありません。サイズにpixはありません。意図は、0.75emだと思います。0.75pxじゃ見えません。【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから・in: インチ―1inは2.54cmに等しい。・cm: センチメートル・mm: ミリメートル・pt: ポイント―CSSで用いるポイントは1inの1/72に等しい。・pc: パイカ―1pcは12ptに等しい。・px: ピクセル―1pxは0.75ptに等しい。￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Syntax and basic data types - CSS 2.1 spec (ja)( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/syndata.html#length-units )］より ★transitinalは、あくまで古いブラウザ用の後方互換です。　さすがにHTML5を控えた現在では、transitionalの必要はないでしょう。　『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』 ★XHTML1.0はHTML4.01をそのままXMLにしたものです。　HTMLは4.01で終了予定でしたが、時代は変わりHTML5が主流になりそう。なら、HTML4.01strict→HTML5のほうがスムーズ＞入門書を片手に独習を始めたばかりで、早くもつまずいています。 ---余り良い物がありませんね。本当に!!・・仕様書を通読しておいたほうが良いですよ。・HTML 4.01仕様書( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ・CSS 2.1仕様書( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cover.html ) そして ☆Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) ☆W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) サンプル　このままコピーペーストする。 ★タブは＿に置換してあるので戻す。 ★Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html ) 　でチェック済みのHTML4.01strict+CSS2.1 ウェブ標準 ☆文字コードはUTF-8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=UTF-8"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css">  ＿</style> </head> <body> ＿<div class="header"> ＿＿<h1>タイトル</h1> ＿＿<p>このページでは・・・・</p> ＿</div> ＿<div class="section"> ＿＿<h2>見出し</h2> ＿＿<p>・・・</p> ＿＿<div class="section"> ＿＿＿<h3>見出し</h3> ＿＿＿<p>・・・</p> ＿＿</div> ＿＿<div class="nav"> ＿＿＿<h3>ナビゲーション</h3> ＿＿＿<ol> ＿＿＿＿<li>・・・・</li> ＿＿＿＿<li>・・・・</li> ＿＿＿</ol> ＿＿</div> ＿＿<div class="aside"> ＿＿＿<h3>補足</h3> ＿＿＿<p>記事</p> ＿＿</div> ＿</div> ＿<div class="footer"> ＿＿<h2>文書情報</h2> ＿＿<dl class="documentHistry"> ＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt> ＿＿＿<dd>2012-08-10</dd> ＿＿＿<dt id="LAST-MODIFIED">Last Modified</dt> ＿＿＿<dd>2012-08-10 12:00:00 (JST)</dd> ＿＿</dl> ＿＿<address>© ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address> ＿</div> </body> </html>

質問者

お礼 2014/02/28 21:39

大変丁寧なご指導、ありがとうございます。さっそく参考にさせて頂きます。海外在住で最新の書籍が手に入りにくい環境の為、いささか古い入門書を使用しています。まだまだ長い道のりになりそうですが、頂いた仕様書も併用で勉強を続けようと思います。

その他の回答 (1)

LancerVII
ベストアンサー率51% (1060/2054)

2014/02/28 10:11 回答No.1

こんにちは。キーボードの仕様というか、文中の””は半角で打たないといけません。 "" これです。またフォントサイズの単位にpixはないです。 pxです。 http://jigsaw.w3.org/css-validator/validator.html.ja で検証したらがっつりpixでエラーになってますよ。

質問者

お礼 2014/02/28 21:51

手元の本には"についての記載がなかったので、目からうろこが落ちました。サイズ単位についてはすでに読んでいて、注意していたはずなのですが何度も何度も夜中まで打ち直しをしたので疲労で目が見えなくなっていたようです、、、検証サイトも参考にさせて頂きます。ご指導ありがとうございました。

関連するQ&A

xhtmlのスタイルシートについて
<?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> <head> <meta name="robots" content="noindex,nofollow,noarchive" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> t { color : 407133; k { color : 337060; r { coior : 454580 > </style> ↑どこか間違っているところがありましたら教えてください。 <span class="#407133">てすと</span>　文字色が変わりません。どなたか指摘願います。
- ベストアンサー
- その他（インターネット・Webサービス）
XHTML のタイトルが表示されません　ご教授おね
タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。（cf,添付画像）　一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします！ソースは以下のとおりです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> ＊ちなみにサンプルでは以下のとおりになっています。（サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません） <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>
- ベストアンサー
- CSS
“タグの属性”と“スタイル”の優先度について
HTMLの勉強をしています。以下のソースですと、“cellpadding”が機能しません。試しに、*{margin:0; padding:0;}を外しレンダリングしてみると、うまくいきました。これは、やはり、「“タグの属性”と“スタイル”での指定なら、“スタイル”が優先されると考えてよいのですか？」よろしく、お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style text/css> *{ margin:0px; padding:0px; } </style> </head> <body> <table width="200" border="1" cellspacing="1" cellpadding="15"> <tr> <td>セルパディング</td> </tr> </table> </body> </html>
- ベストアンサー
- HTML
DreamWeaverでのスタイルシート適用後のプレビューについて
最近やっとDreamWeaverを購入してテーブルからCSSデザインに乗り換えようと奮闘中のものです。外部スタイルシートに div#container { background: #ffffff; padding: 20px; margin: 10px 30px; border: 2px solid #999999; } と書き、 HTMLのほうに、 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <link href="/test.css" rel="stylesheet" type="text/css" /> <title>test</title> </head> <body> <div id="container"> test web site </div> </body> </html> と書きプレビューしてみたのですがスタイルシートが適用されません。デザインビューでは適用されているのですが、、、何が原因なのでしょうか?
- ベストアンサー
- ホームページ作成ソフト
utf-8 文字化け
メモ帳でhtmlページを作成してたのですが、日本語を入力してIEで確認したら文字化けになります原因がわからず困っていましたよろしくお願いします IE10 IE　表示　エンコードはutf-8 自動選択にすると日本語表示になります <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ABC</title> <style type="text/css"> </style> </head> <body> <h1>ようこそ</h1> <p></p> </body>
- ベストアンサー
- その他（インターネット・Webサービス）
ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。下記のソースでhtmlを制作しましたが、#headerの上に余白があります。どうすればこの余白をとる事が出来るでしょうか？お教え頂ければと思います。 ↓ソース↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css">  </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
スタイルシートでテーブル
とても基本的な事なのですが、以下のコードを実行すると IE6 で見た時にセルの下に隙間が出来てしまいます。 Firefox 2.0 で確認した場合すっきり表示されてるのですが、なにかアドバイスありますでしょうか？ ------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>[ Picture ]</title> <style type="text/css">  </style> </head> <body> <div id="container"> <div id="section1"> <img src="images/picture01.jpg" /> </div> <div id="section2"> <img src="images/picture02.jpg" /> </div> </div> </body></html> -------------------------------------------------------------
- ベストアンサー
- CSS
IEでスタイルシートがまったく反映されない
WindowsのIEで表示した時、スタイルシートがまったく反映されません。他のブラウザではちゃんと表示されます。原因を教えてください。よろしくお願いします。ちなみにDreamweaver8で作成しています。 -----確認ブラウザ----- IE6.0(Win)：× Safari3.0.3(Win)：○ IEバージョン不明(Mac)：○ Firefoxバージョン不明(Mac)：○ -----ヘッダのソース----- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="style1.css" rel="stylesheet" type="text/css" /> <title>日本語タイトル</title> </head>
- ベストアンサー
- HTML
</a>は必要あるのですか？
とある参考書ですが、最後の</a>って要りますか？何のためにこれがあるのか意味がわかりません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>ローマの見どころ‐南イタリアへの旅</title> <style type="text/css"> h1 { font-size: 1.5em; background-color: yellowgreen; } h2 { font-size: 1.2em; background-color: khaki; } </style> </head> <body> <h1>ローマの見どころ</h1> <h2>サンピエトロ大聖堂</h2> <p>カトリックの総本山。ヴァチカンのサンピエトロ大聖堂。聖堂の上に登ったり、巨大な堂内を見学したりできる。</p> <h2>サンタンジェロ城</h2> <p>サンタンジェロ城。ローマ時代に作られた円形のお城。この城の前にかかっている橋は「ローマの休日」の舞台になりました。</a></p> </body> </html>
- ベストアンサー
- HTML
hタグ　印刷時の背景画像
おせわになります。 hタグで背景画像を使用しており、プリント表示させると、その背景画像が消えてしまいます。（IE6、IE7）プリントアウト時も同じように印刷させたいのですが、対策はありますでしょうか。 ※今の段階でどうしても不可能な場合は、 media="print"指定で、border-bottomで対応しようと考えております。 ▼HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>test</title> <style type="text/css">  </style> </head> <body> <h1>テスト見出し</h1> </body> </html>
- ベストアンサー
- CSS

スタイルシートの作成について

超初心者です　スタイルシートの作成について