- ベストアンサー
Ultimate CSSのhtml側の記述について
- Ultimate CSS Gradient Generatorという自動cssソース作成サイトで、html側の記述について質問です。初心者の方向けに解説します。
- html側には何と指定してやったら良いのか、具体的な記述方法を解説します。
- html側のソースコードの例を示し、cssとの連携方法も解説します。
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
一挙にそこに進んだって無理です。 スタイルシートを取り入れるには、何よりも先に、HTMLをきちんと学びなおしましょう。 ・W3C CSS 検証サービス( http://jigsaw.w3.org/css-validator/#validate_by_input ) に「メモ: CSSスタイルシートを意図した通りに機能させるには、正しい文書解析木が必要です。つまり、正当なHTMLを用いるべきです。」と書かれているのは伊達じゃありません。(英語でメモとは日本語のメモよりも重要な意味をもちます) 絶対に目を通しておく記事 ・スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) ・構造とプレゼンテーションの分離( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 ) そして、「DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )」 必ず読んで理解すること。 それには、 HTMLは文書構造を書く。文書構造しか書かない ￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣￣ と言うことが書いてあります。 そしてスタイルシートの登場です。HTMLで示された文書構造を元にスタイルを適用する要素を指定するセレクタ(選択子)を書いて、そのプロパティを記述します。 要素(Element)とは、文書を構成する要素のことで、タグでマークアップされます。 <h1>あいうえお</h1><!-- その文書の見出し要素であることを示す --> <p>かきくけこ、さしすせそ</p><!-- 他の文書のひとつの段落であることを示す --> <div class="section"><h2>見出し</h2><p>・・・</p><p>・・・</p></div> <!-- この部分が文書構造で本文(section)であることをclass名で示しているブロック要素 --> デザインにかかわることはHTMLには書きませんし、デザインのためにマークアップするのではない!!! その上で例えば次のようにマークアップされたHTMLがあるとします。 [HTML4.01] <body> <div class="header"><!-- この文書のヘッダ --> <h1>タイトル</h1><!-- 見出し --> <p>記事でここは<strong>注目</strong>して</p> <div class="nav"><!-- ナビゲーション --> <h2>サイトマップ</h2><!-- 見出し --> <p>記事でここは<strong>注目</strong>して</p> <ol><!-- 序列リスト --> <li><a href="">トップ</a></li><!-- リストの項目 --> <li><a href=""><strong>新着情報</strong></a></li> <li><a href="">製品</a></li> </ol> </div> </div> <div class="section"><!-- 本文ブロック --> <h2>本文</h2><!-- このブロックの見出し --> <p>記事でここは<strong>注目</strong>して</p> ・・・・・ これがHTML5だとしたら <body> <header><!-- この文書のヘッダ --> <h1>タイトル</h1><!-- 見出し --> <p>記事でここは<strong>注目</strong>して</p> <nav><!-- ナビゲーション --> <h2>サイトマップ</h2><!-- 見出し --> <ol><!-- 序列リスト --> <li><a href="">トップ</a></li><!-- リストの項目 --> <li><a href=""><strong>新着情報</strong></a></li> <li><a href="">製品</a></li> </ol> </nav> </header> <section><!-- 本文ブロック --> <h2>本文</h2><!-- このブロックの見出し --> <p>記事でここは<strong>注目</strong>して</p> となるでしょう。 【以下の説明はHTML4.01で行います。】 そしてスタイルシートで、ヘッダーのstrong要素の文字を赤くしたいなら、セレクタを 外部スタイルシート、<hea></head>内に ・div.header p strong{color:red;}と書 と書きます。 いずれを書いても、<div class="nav"></div>内、<div class="section"></div>内の、<strong></strong>の文字は赤くなりません。 なぜなら、 div.header p strong{} とは、headerというclass名をもつdiv要素の子孫(半角スペース)の子孫のp要素の子孫のstrong要素と言う意味だからです。 一方、単に strong{color:green;} と書いた場合は、すべてのstrongは緑の文字になりますが、上記のように指定したものがあると、そちらが優先されます。なぜならより詳しく厳密に指定してあるからです。 また、 さらにsection内の<p></p>について <p>記事でここは<strong style="color:blue">注目</strong>して</p> としたら、<head></head>内や外部スタイルシートで書いても変更することはできません。 これらのどの要素にデザインをするかの指定方法--セレクタはスタイルシートで最も大事な部分です。 Ultimateなどで作成するプロパティやその値の書き方なんて、テキストエディタで書いたってしれた物ですし、それがいくら書けたからと言って、目的の要素に対してスタイル(デザイン)が指定できるわけじゃありません。 まず身につけなければならないことは 1) HTMLで文書構造をきちんとマークアップできるようになること!! デザインは文書構造さえきちんと出来ていれば好きになります。 2) 次にCSS(カスケーディングスタイルシート)のカスケーディングを身につけます。 5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/selector.html ) 6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS21/cascade.html ) もちろん、その前の1 CSS 2.1仕様について 2 CSS 2.1の手引き 3 適合性: 必要条件と推奨事項 4 構文と基本データ型 も一通りは・・ それが出来ると 「cssの記述は掲載されているのですが、html側の記述が掲載されていません。」 が、【すでに書かれているHTMLにスタイルを指定する方法】が自然と分かるようになります。 みんな通ってきた道です。プロパティより先に知っているはずですから、書かれてないのです。
お礼
ありがとうございました。
補足
なるほど。 なんとなくですが解りやすい解説です。 大変参考になります。 よく、ネットで「ホームページビルダーはひどい」とか 書かれてますよね、あれって、 誰でもホームページが作れちゃうけど、 中のソースがぐじゃぐじゃで見る人が見ればひどい 事になってるみたいですね。 で、プラウザによってデザインが崩れたり。 そういうのは嫌なので、なるべくhtmlの構造が解る様な seamonkeyの様なエディタを使ってます。 あとはプラウザはFirefoxですね。 一応そこら辺の下調べまではしました。 あとは、なるべく外部のcssサンプルを試してみる、 そういう事もやっております。 そうですね。 勉強が足りなかったようです。