- 締切済み
初心者なのでHTMLでスタイリングをしていたのです
初心者なのでHTMLでスタイリングをしていたのですが、CSSへ挑戦したいと思い、これまでHTMLへ書いたものをスタイルシートへ移したいのですがどうすれば良いですか？ とりあえず...link rel でCSSと結合するのかなと思うのですが、 何ページもある時はどうなるのでしょうか？そもそもCSSは全てのページを同じ条件にする目的で使うのですか？いくつも作るのですか？ 例えば<h1 style ="background-color: #----;">とHTMLへ書いた場合はを h1{background-color: #---}のように書き直さないといけないのですか？ 同じセレクタがいろいろなページにある時はどうなるのしょうか？ copy and pasteで移すことは出来ないのですか？ また、gradient bacgroundに挑戦したいのですが、 http://ie.microsoft.com/testdrive/graphics/cssgradientbackgroundmaker/default.html を見てみたのですが全く出来ませんでした。下に書かれている、markup languageを試しに書いたのですが、全然できませんでした。フォトショップなどで自分で作らなければならないのですか？ 全く分かりません。よろしくお願いします。
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- too_bad
- ベストアンサー率53% (70/130)
ほかの方が書かれていますが、まずは落ち着きましょう。 覚えたいと思ってあっという間に覚えれる人はそうそういないのです。 昔のとある番組ですが、1週間で円周率を100桁暗記できたら100万円 なんてのをやってました。 お金のためなら間違えずに確実に覚えれますか？ ということなのです。 基礎がわからないのにいきなりのぶっつけ本番では、 何も覚えれないし何も進めないのです。 まずは基礎を身に着けるところから始めましょう。 ということで基礎編。 ＞例えば<h1 style ="background-color: #----;">とHTMLへ書いた場合はを h1{background-color: #---}のように書き直さないといけないのですか？ 大半は合ってますが状況によっては微妙に違います。 例えば、<h1>タグが1つだけならそれでも良いでしょう。 ですが、 <h1>あいさつ</h1> <p> 当社は・・・中間省略・・・を目指して邁進して参ります。 </p> <h1>経営理念</h1> <p> 生産第一をモットーに・・・以下略 </p> というHTMLソースがあったとします。(PageRankうんぬんは置いておくとして) CSSに、 h1 { background: #eff; color: blue; } と記載したとすると、 <h1>あいさつ</h1>の内容と<h1>経営理念</h1>の内容が 同じとなってしまいます。 これでは別々にしたいときに困りますよね。 ということで別々にしてみましょう。 HTML部分 <h1 id="greet">あいさつ</h1> <p> 当社は・・・中間省略・・・を目指して邁進して参ります。 </p> <h1 class="tex">経営理念</h1> <p> 生産第一をモットーに・・・以下略 </p> CSS部分 h1#greet { background: #eff; color: blue; } h1.tex { background: #cff url("../img/bg.jpg"); color: red; font-size:0.8em; } こうすることにより、idやclassとして振り分けることが可能なのです。 idは全体を通して1度しか同じ名前のものは使用できません。 classは何度でも同じ名前のものが使用できます。 idを割り振るときには#を、classを割り振るときには.を付与し、 それぞれにお好きなお名前を付けてあげてください。 なお、CSS内部に画像のパスを記入する場合は、CSSから見てどこにあるかを 記載しないと表示されませんので注意が必要です。 とここで雑学に近いお勉強コーナーを設けさせていただきたいと思います。 カスケードスタイルシート(CSS)とは、今はWEBサイトのためのものですが、 スタイルシートそのものは、WEBサイトに限らず色々なものがあるのです。 一様に装飾を目的とした装飾用言語と言われていますが、 単体としてコンピュータ言語としては扱われておりません。 そしてHTMLとCSSは別のルートを経て現在の関係に至ったのです。 何が言いたいかと言うと、HTMLとCSSは全くの別物が引っ付いて1セットになったのだと 覚えておいてほしいわけです。 基本が全くの別物ですので、HTML言語と同じように記述されても CSSでは読み込んでくれないケースが多々ありますので注意が必要です。 (両方W3Cによるものだとか言うツッコミはなしの方向でお願いします。) ほかの方が言われておりますとおりにしろとは言いませんが、 兎にも角にも独学が大切なのです。 大半の方は独学で学んでおりますので、ほかの方の意見も無下にせず、 尊重して参考になされるのが一番良い選択肢なのです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞何ページもある時はどうなるのでしょうか？そもそもCSSは全てのページを同じ条件にする目的で使うのですか？いくつも作るのですか？ これこそ文書構造とプレゼンテーションの分離の最大の特徴でもあるのです。文書構造さえ同じだったら、たった一つのスタイルシートを書き換えることですべての見栄え(プレゼンテーション)を変更できますし、プリンター用には印刷用のスタイルシートを、スマートホンにはスマートホン用のスタイルシートを、パソコン用にはパソコン用の、点字端末や読み上げソフトにはそれようのスタイルシートとできるのです。もちろん。特定のページだけ専用のスタイルシートでデザインもできますし、特定のページの特定の場所のみデザインを変更することもできるのです。 しかし、いきなり、そこまでを目標にしてもうまく行きません。たぶん何度も何度も作っては反省し、つくっては反省・・の繰り返しで上達しかありません。 すでにあるページは、そのままでも構いません。--ブラウザは過去互換性を持たなければなりませんから、それらのページが利用できなくなることはありませんからね。 ＞例えば<h1 style ="background-color: #----;">とHTMLへ書いた場合 この場合について、説明するとスタイルシートはカスケーディングスタイルシート(CSS)を使われると思いますが、background-color:のようなプロパティより先にしっかり身につけて欲しいのはカスケーディングの仕組みです。 CSSは、このカスケーディングの仕組みがあってのものなのです。すなわち、 1) ユーザーの最重要宣言＞著者の最重要宣言＞著者の通常の宣言＞ユーザーの通常の宣言＞ブラウザの持つスタイルシート の順番で適用されること 2) それぞれの宣言は詳細度でどれを優先するかが決まること 3) 同じ詳細度なら後出のもので上書きされること をまとめてカスケーディングといいます。 <h1 style ="background-color: #----;">という指定は、HTML要素のstyle属性での指定ですから、詳細度は[1,0,0,0]となって他のすべての宣言は失われて優先されますから、外部や<head></head>内にどのように書かれていても上書きできないのです。 言い換えると、これは、いちおうすべてのファイルで共通なスタイルシートを利用するが、この文書のこの部分だけは別のスタイルを指定したいときに使う方法です。 よって、もしHTML内にこのようなstyle属性での指定があれば、これはすべて消してしまわないとなりません。高機能なテキストエディタがあれば、正規表現を使って [ style="[^\"]*"] →置換→[] で消すことができます。 ＞gradient bacground はCSS3のプロパティです。あせりすぎです。 今は、まずCSS2.1とHTML4.01strictに絞って学んでください。strictですよ。strictはプレゼンテーションに関わる要素も属性もありませんから、スタイルシートを学ぶには最適です。HTML5はHTML4.01strictの改訂版です。 ※REC-CSS2 邦訳 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cover.html ) ※HTML 4.01 Specification (ja) ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/cover.html ) ※HTML5 における HTML4 からの変更点 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff ) 特に 5. セレクタ ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html ) 6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html ) (注意)このマニュアルはCSS2です。現行のCSSはCSS2.1です。詳細度の計算が変更になっています。6.4.3 Calculating a selector's specificity ( http://www.w3.org/TR/CSS2/cascade.html#specificity )--英文しかない
- 神崎 渉瑠（@taloo）
- ベストアンサー率44% (1016/2280)
>とりあえず...link rel でCSSと結合するのかなと思うのですが、 何ページもある時はどうなるのでしょうか？そもそもCSSは全てのページを同じ条件にする目的で使うのですか？いくつも作るのですか？ どこに書いたかをわかりやすくするため、カテゴリー分けのようにファイルを分割することはありますが、 最初のうちは１つでいいです。 >例えば<h1 style ="background-color: #----;">とHTMLへ書いた場合はを h1{background-color: #---}のように書き直さないといけないのですか？ はい。その通りです。 >同じセレクタがいろいろなページにある時はどうなるのしょうか？ copy and pasteで移すことは出来ないのですか？ CSSファイルに1度だけ書けば、同じタグやclass全部に適用されます。 HTMLの1カ所にだけに適用したい場合は、CSSはclassセレクタで記述し、HTMLは1カ所にだけclass属性を付ければ、そこにだけ適用されます。 >また、gradient bacgroundに挑戦したいのですが、 IE7、IE8はグラデーションで表示されません。 IE9か、Firefox、Safari、Chrome、Operaなどの最新版を使用してください。 Windows XPではIE9をインストールできませんので、IE以外のブラウザを使わなければなりません。
