申し訳ありません。もう一度質問させてください。CSSのh1,h2,h3の色付けをしたい。文章の途中で色付けもしたいのですが。
現在4000文字を超えるのでURLで質問します。public_htmlフォルダにつぎのURLのCSSを保存してサイト作成をしています。h1,h2,h3の色付けをしたいのと、文章の途中でも色付けをしたいのですができますか?
http://www.htmq.com/csskihon/401.shtml
よろしくお願いいたします。
No.2ベストアンサー
- 回答日時:
そのサイトの説明間違ってます。
><div>や<span>でスタイリングのためのタグ付けをする
『DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
とはっきり書かれている!!。これを理解できない人があまりに多かったため、HTML5では「文書をよりよく構造化するために、次の要素が新しく追加されました。( http://standards.mitsue.co.jp/resources/w3c/TR/h … )」
になっちゃった。
その上で文書構造に従ってカスケーディングの仕組みを使ってスタイルを適用する要素を選択(セレクトselect)していくのですよ。
たとえば、先の
CSSのh1,h2,h3で色付けをしたい - Webデザイン・CSS - 教えて!goo( http://oshiete.goo.ne.jp/qa/8510613.html )
のHTMLでしたら、
__<div class="section">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
が下のように次々につながっていたとしたら
__<div class="section">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="section">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
__<div class="section">
___<h3>項見出し</h3>
___<p>本文項記事</p>
___<p>sectionの階層でレベルが判断される</p>
__</div>
スタイルシートで
div.section div.section:nth-child(2n){background-color:rgb(200,255,255);}
sectionブロックの偶数番目のsectionは背景を薄い水色になるとなる。
他の書き方もある。
>現在4000文字を超えるので
でしたら、当然HTML上もsectionで区切られていて、リンク用にidなどが振られていると思いますから、そのidを使って
#section2{color:blue;}
でよいですね。
スタイルシート仕様書の
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
はしっかり理解しておきましょう。
その前に、HTMLはデザインを考えずにひたすら文書構造をマークアップすることに専念しましょう。
先のサンプルでしたら、将来スマホ用にデザインを変えるもの楽です。今でもリキッドなのでスマホで利用できますが・・
div.section div.section{width:auto;min-height:0;min-width:0;}
div.section div.section,div.section h2,div.section p{margin:0 180px;}
div.section div.section div.section,
div.section div p{margin:0;}
div.section div.aside,div.section div.nav{position:absolute;top:0;width:170px;height:100%;}
div.section div.aside{left:0;}
div.section div.nav{right:0;}
を
div.section div.section{width:auto;min-height:0;min-width:0;}
div.section div.section,div.section h2,div.section p{margin:0 0 0 180px;}
div.section div.section div.section,
div.section div p{margin:0;}
div.section div.nav{position:absolute;top:0;width:170px;height:100%;}
div.section div.nav{right:0;}
とするだけ
4000字とか大きなページらいちいちid振っていたらそれだけで頭がパンクする。馬鹿らしいので止めなさい。
No.1
- 回答日時:
リンク先の「CSSソースの全文」を使用しているのですね。
このh1,h2などに色の指定を書いていっても良いのですが、
「文章の途中でも色付けしたい」とのことでしたので、
直接h1,h2に色の指定を書くのではなく、
一番簡単なのは、CSSソースの全文の一番下にでも以下のように
色の指定を書き足します。
/* ---------- */
.red{color:#F00;}
.blue{color:#00C;}
.yellow{color::#FF0;}
/* ---------- */
<h2 class="red">見出し</h2>や、
<p>信号機の色は、<span class="blue">青</span>、<span class="yellow">黄色</span>、<span class="red">赤</span>の三色です。</p>
のようにすれば良いと思います。
余談ですが、文字の大きさの指定も以下のように、
/* ---------- */
.Lsize{font-size:160%;}
.Mside{font-size:90%;}
.Sside{font-size:70%;}
/* ---------- */
<p>これは<span class="red Lsize">赤くて大きな文字</span>です。</p>
<p>これは<span class="blue Ssize">青色の小さな文字</span>です。</p>
のように、組み合わせて使用できるので、一度作っておくと使い回せて便利です。
ご参考まで。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- HTML・CSS htmlです。 上のところには黒文字でピカチュウで、ピカチュウの文字には影をすべてにつけてください周 1 2023/01/02 12:48
- HTML・CSS HTMLとCSSについて 2 2022/09/12 15:46
- HTML・CSS ホームページについての質問です 最近学校でhtml等に触れる機会があったのですが、疑問がわきました 7 2022/05/06 15:42
- その他(Microsoft Office) Excel2003,2007の作業です 2 2023/05/17 09:58
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
<div id="container">の使いか...
-
要素間、要素内に隙間が空く
-
html の divとtable の役割
-
div要素が重なってします
-
htmlの見出しタグ(<h1>)の次...
-
ブログのサイドバーが下にくる
-
divの中に外部のHTMLを埋め込む
-
XHTMLでループ処理のやり方
-
HTML属性での「""」 「''」違い
-
divを横に並べる方法
-
インラインフレームのページ内...
-
inline-blockをネストすると表...
-
モバイルサイト用のタブ型メニュー
-
1サイト内にHTML5とXHTMLが混在...
-
横並びdivで一部の初期高さがず...
-
min-heightとheightの違いについて
-
画像上の文字列の中央配置
-
複数のボタンを等間隔に、かつ...
-
セクションをdivで囲むと見出し...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlのolやulなどlistにtitleや...
-
div要素が重なってします
-
HTML属性での「""」 「''」違い
-
複数のボタンを等間隔に、かつ...
-
ヘッダーとフッターだけ背景を...
-
html の divとtable の役割
-
<div id="container">の使いか...
-
divとpの使いわけ
-
min-heightとheightの違いについて
-
HTML5 iframe の代わり
-
divの中に外部のHTMLを埋め込む
-
3カラムレイアウトで「常に残り...
-
ヘッダーを左右に二分割する方...
-
画面を縮小するとカラムが落ち...
-
reuterのScraypingで不思議な現...
-
htmlの見出しタグ(<h1>)の次...
-
1サイト内にHTML5とXHTMLが混在...
-
inline-blockをネストすると表...
-
html5でheaderの中にnav
-
<!-- #BeginLibraryItemとは
おすすめ情報