Ultimate CSSのhtml側の記述について
- Ultimate CSS Gradient Generatorという自動cssソース作成サイトで、html側の記述について質問です。初心者の方向けに解説します。
- html側には何と指定してやったら良いのか、具体的な記述方法を解説します。
- html側のソースコードの例を示し、cssとの連携方法も解説します。
- ベストアンサー
Ultimate CSSのhtml側の記述について
いつもお世話になっております。 当方、htmlとcssについてはごく初心者。 主なツールはSeamonkeyとalphaEDITとcssはTeraPadを使っております。 さて、質問ですが、初歩的なものかもしれませんが、 webで検索しても出てこなかったので質問させて頂きます。 Ultimate CSS Gradient Generatorという自動cssソース作成サイトで、 cssの記述は掲載されているのですが、html側の記述が掲載されていません。 初歩的すぎな事なので記載されていないだけなのかもしれませんが, html側には何と指定してやったら良いのでしょうか? 因みに、cssは「style.css」としております。 html側のソースは <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <link href="./style.css" rel="stylesheet" type="text/css"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>index</title> </head> <body> </body> </html> としております。 どなたか、親切な方、ご指導、解説のほどを宜しくお願い致します。
- RIOT1970
- お礼率44% (87/195)
- CSS
- 回答数1
- ありがとう数4
- みんなの回答 (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にスタイルを指定する方法】が自然と分かるようになります。 みんな通ってきた道です。プロパティより先に知っているはずですから、書かれてないのです。
関連するQ&A
- CSSの記述
HTMLで普通のテキストのサイズを固定したいのですが、 うまくいきません。 何が間違っているのでしょうか。 一部のHTMLだけ、リンクの下線をはずしたいので、 HTMLに <LINK REL="stylesheet" HREF="css/style_win.css" TYPE="text/css"> <STYLE TYPE="text/css"> <!-- A { text-decoration: none; font-size: 10pt;} --> </STYLE> と記述。 こちらの方は大丈夫です。 だめなのは外部 css/style_win.css に body { font-size:10pt } と書いたほうがまったく制御していません。 初心者で、本もたくさん調べましたが わかりません。 どうかお願いいたします。
- ベストアンサー
- HTML
- cssの、一つ目の記述がHTML側に反映されません。
スタイルシートの超初心者です。 <style type="text/css"> body {background-color:#87cefa;} h1 {background-color:#ffddaa;} と記述すると、bodyの記述がHTMLの表示に反映されず、順番を入れ替えても、一つ目になった記述が反映されません。 <style type="text/css"> } body {background-color:#87cefa;} h1 {background-color:#ffddaa;} 試しに、上の様に「}」を挟んだら反映されたのですが、こんなのをダミーで入れているのは、とっても納得が行きません。どなたか、原因を教えて頂けないでしょうか?
- ベストアンサー
- HTML
- 【フォント】記述したCSSが反映されない
ログを検索しましたが同様の質問は無いようなので投稿させて頂きます。 先日PCを買い替えましてXPからVistaへと移行しました。 しかし新しいPCで自分のサイトを見てみると、CSSでフォントをTahomaに指定していたページの文章が何故かゴシック体で表示されています。 (サイトは旧PCでビルダー7を利用して作成したものです) 古いPCからHTMLのデータを移動し早速ソースを確認、上書き保存等してみましたがフォントはゴシック体のまま。 明朝なども試しましたが反映されてくれません。 やはりOSやブラウザの変更が原因なのでしょうか。アドバイスをよろしくお願いします。 ↓HTMLソースの一部を掲載します <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <meta name="robots" content="noindex,nofollow"> <STYLE type="text/css"> <!-- body { scrollbar-face-color: #000000; scrollbar-highlight-color: white; scrollbar-shadow-color: white; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: white; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000; } --> </STYLE> <style type="text/css"> <!-- a{ text-decoration:none; } --> </style> <style type=text/css> <!-- body,td { margin-top : 50pt; margin-left : 90pt; margin-right : 90pt; margin-bottom : 40pt; font-size :15px; font-family :'Tahoma'; } --> </STYLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 7.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE>(仮)</TITLE> </HEAD>
- ベストアンサー
- HTML
- CSS今度は外部ファイル!
前回「CSSが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない!」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○abc.css(外部ファイル) .body{ color:#006666; font-size:30px; } ○HTMLファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="abc.css" type="text/css"> --> </style> </head> <body> 背景色は濃い青緑です<br> フォントサイズは30px・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・ 真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名 hp-name.css ○HTMLファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="body.css" type="text/css"> --> </style> </head> <body> <div class="hp-name"> HP名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・ で、外部ファイルを読み込むだけではいけないのでしょうか? それとも、外部ファイルの書き方がいけないのでしょうか? 外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css"> <!-- --> </style> をつけてみたのですが、ダメでした
- ベストアンサー
- その他(インターネット・Webサービス)
- JSの記述を別ファイルに移す
下記のHTML内の <script type="text/javascript">~</script> をtest.jsとして別ファイルに移す場合にどのように、記述するればよいのでしょうか。単純にコピペしたのですがうまくいきません。 初歩的だとは思いますが、ご指導をお願いします。 --------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/Draggable.js"></script> </head> <body> <div id="test1" class="test"></div> <div id="test2" class="test"></div> <script type="text/javascript"> var test1 = new Draggable("test1"); var test2 = new Draggable("test2"); </script> </body> </html>
- ベストアンサー
- JavaScript
- CSSでの記述についてです。
CSS初心者で独学でいろいろ試しているのですが、分からないことがあるので質問させてください。 1、スタイルシートの定義を個別にして、文章を書いたページのスタイルを一括で統一する方法を取っています。 2、ページの下の部分に「戻る」「次へ」のリンクを作って、リンクを張りました。 3、同じフォルダ内のページに対してリンクを貼ったとき、「戻る」と「次へ」の間にわずかに間隔があります。(それを保ちたいのです) 4、しかしひとつ階層が上の(フォルダ外)のページに対してリンクを貼ったとき、何故か「戻る」と「次へ」の間の間隔が狭くなってしまいます。 スタイルシートを文書の記述とは別に作って一括で処理しているので、その文書ページの記述に問題があるのだと思うのですが、どこが問題なのか分かりません。参考までに、以下にページの記述を記載します。 ---------------------------------------- <間隔がきちんとある方> <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML lang="ja"> <head> <LINK rel="stylesheet" type="text/css" href="../stylesheet1.css"> <title>Torikago2</title> </head> <body><br> <p> 文書<br> </p> <br><br> <a href="torikago1.html">戻る</a> <a href="torikago3.html" class="01">次へ</a> </font> </body> </html> ------------------------------------------------- <間隔が狭くなる方> <html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML lang="ja"> <head> <LINK rel="stylesheet" type="text/css" href="../stylesheet1.css"> <title>Torikago1</title> </head> <body><br> <p> 文書<br> </p> <br><br> <a href="../toppage.html">戻る</a> <a href="torikago2.html" class="01">次へ</a> </font> </body> </html> ------------------------------------------------ ちなみに、スタイルシート>文書フォルダ となっていて、 間隔の狭くなってしまう方のページもその文書フォルダの中にあります。 スタイルシートのリンクに対しての記述も必要でしょうか? 以下のようなものです。 ------------------------------------------------ a {position:relative; right: -43%; bottom: 40px; background-color:white; opacity: 0.8; padding:10px; margin:0px; text-decoration: none;} a.01 {position:relative; bottom: 10px; background-color:white; opacity: 0.8; padding:10px; margin:0px; text-decoration: none;} どなたか教えて頂けると嬉しいです。
- ベストアンサー
- その他(インターネット・Webサービス)
- CSSについて
前回「CSS今度は外部ファイル!」で質問をさせていただきました http://okwave.jp/qa4254612.html #2の回答者様の記述ソースをコピペしてCSSファイルと、HTMLファイルを作ったところ、HTMLファイルに外部CSSが反映されて表示されました。 しかし、このCSSファイルの中身(だけ)とファイル名を変更したところ、今度は反映されなくなりました。 ■CSSファイルの変更■ 変更前 body { color: blue; font-size:30px; 変更後 .hpname{ font-size:50ox; color:#006666 text:align:center; } ■CSSファイル名 半角小文字でhpname.css ■HTMLファイル 変更前 <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body> 背景色は青で文字は30px </body> </html> この中の <link rel="stylesheet" type="text/css" href="test.css"> を変更。 href="test.css">を href="hpname.css"> にしました。 ///////////////////////////////////////////////////////////// CSSファイルの作りかたがいけないのでしょうか? 「.」をつけてはいけない? それとも外部ファイルを読み込むパスを絶対指定などしなくてはならないのでしょうか(同じフォルダ階層内です) 何回やり直しても結果が同じなので、また質問させていただきました。
- 締切済み
- その他(インターネット・Webサービス)
- IEにおいて、CSSの記述順番によって表示が異なる?!
CSSの外部ファイルを読み込んで、スタイルを効かせているのですが、 ブラウザIEだとスタイルの書き順によってスタイルが効いたり効かなかったりします。 例えば、 <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="http://sample.com/style.css"/> </head> <body> <div id="style0"> <!--style0の始まり--> <div id="style1"><p>■■■</p></div> <p id="style2">■■■</p> <ul class="style3"> <li id="style4">■■■</li> <li id="style4">■■■</li> </ul> </div> <!--style0の終わり--> </body> </html> というHTMLにおけるCSSの書き順は、 #style0{ ▲▲▲ } #style1{ ▲▲▲ } #style2{ ▲▲▲ } .style3{ ▲▲▲ } #style4{ ▲▲▲ } の様に、HTMLファイル内でスタイルを指定した順に(スタイルの登場順に)、CSSファイル内ではスタイルを記述しきゃならないのでしょうか? もっとも、登場順に指定した方が良いかどうかも、私には分かっていません。ただ言えるのは、IEにおいて、書き順によって表示に違いが生じるということだけです。 なお、私が知りたいことは、 ・こういう現象が起こることは一般的にあることなのかどうか ・この現象の発生メカニズム ・IEにおけるCSSの正しい記述法(記述順番) 以上3点です。 ちなみに、FireFoxやOperaでは、順不同で問題なさそうです。 くどくなりますが、IEで問題が生じる場合というのは、 例えば、上の例で言えば、 スタイルの書き順を、 style3{ ▲▲▲ } style2{ ▲▲▲ } style4{ ▲▲▲ } のように順番を変えて記述した場合です。 この問題についてネット上で色々と調べたのですが、解決に至りませんでした。 リンクのスタイルなど、書き順が重要なものがあるということは知っているのですが、本件とはまた別の話だと思っています。 質問の記載方法に不備がありましたら、適宜補足をさせて頂きます。 以上、どなたか回答をよろしくお願い致します。
- 締切済み
- HTML
- HPの文字の大きさを変えるCSSがうまくいきません
ネット上によく出ているjsやcssを利用した文字サイズを変える方法を、ソースを取り込んでみるのですががうまくできません。 初心者なので、かわかり易く教えていただると助かります。 尚、styleswitcher.jsはダウンロード済です。 ソースは、 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" type="text/css" href="style1.css" title="style1"> <link rel="alternate stylesheet" type="text/css" href="style2.css" title="style2"> <link rel="alternate stylesheet" type="text/css" href="style3.css" title="style3"> <script type="text/javascript" src="styleswitcher.js"></script> <style type="text/css"> style1.css body {font-size: 100%;} style2.css body {font-size: 80%;} style3.css body {font-size: 120%;} </style> <title></title> </head> <body> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style2'); return false;">サイズ小</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style1'); return false;">サイズ中</a> <a href="javascript:;" onclick="javascript:setActiveStyleSheet('style3'); return false;">サイズ大</a> <br> <br> テスト<br> </body> </html> よろしくお願いいたします。
- ベストアンサー
- HTML
- 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
お礼
ありがとうございました。
補足
なるほど。 なんとなくですが解りやすい解説です。 大変参考になります。 よく、ネットで「ホームページビルダーはひどい」とか 書かれてますよね、あれって、 誰でもホームページが作れちゃうけど、 中のソースがぐじゃぐじゃで見る人が見ればひどい 事になってるみたいですね。 で、プラウザによってデザインが崩れたり。 そういうのは嫌なので、なるべくhtmlの構造が解る様な seamonkeyの様なエディタを使ってます。 あとはプラウザはFirefoxですね。 一応そこら辺の下調べまではしました。 あとは、なるべく外部のcssサンプルを試してみる、 そういう事もやっております。 そうですね。 勉強が足りなかったようです。