インラインスタイルシートで見出しを飾りたい

質問

インラインスタイルシートのみで
http://css.eweb-design.com/1402_kh.html
の左・下枠を表示のような見出しを作りのですが。

現状解らずに
<div style="font-size: 36px; line-height: 37px; color: rgb(102, 102, 102); border-left: 10px solid rgb(204, 204, 204); width: 600px; text-align: left; padding: 0px 0px 0px 20px; border-bottom-color: #cc9999; margin-bottom: 10px;"><strong>Size</strong></div><hr>
にしています。

可能であればどのようにすればよいでしょうか？

回答No.1

torayoshi · ベストアンサー

「見出し」というんだから<hn>で良いと思うんですが（提示された参考サイトを丸ごと使う）。
<h1 style="color:#666666;padding-left:10px;border-width:0px 0px 2px 10px;border-style:solid;border-color:#cccccc;line-height:100%;padding:0 0 0 20px;">Size</h1>
これではダメなんでしょうか。
あるいは<hr>の代わりにborderでは？
<div style="font-size:36px;line-height:37px;color:rgb(102,102,102);border-left:10px solid rgb(204,204,204);width:600px;text-align:left;padding:0 0 0 20px;border-bottom-color:#cc9999;margin-bottom:0;">
<strong>Size</strong>
</div>
<div style="border-bottom:solid 2px #cccccc;">
</div>

お礼

まさしく、これです。
ありがとうございました。

回答No.3

abacabu

連投すいません、Ｎｏ，２です。
あのページのタグこそがスタイルシートタグで、
それを外部データで作って、タグ上部で反映させると、
スタイルシートでＨ１とした場合はＨＴＭLにおいてもＨ１とすることで
そのまま反映されたと思います。
スタイルシートでＨ１が出た際の指示をしているのでそうなります。（確かそうだった）
まずはあのままを自分の所に貼りつけていじって行った方が無難です。
そうやって使っているうちに覚えます。
ＪａｖａＳｃｒｉｐｔもちょっとコツをつかむ迄は難しいですが、
参考サイトもあるのでそれと同じ感じでやっていけば簡単に使えます。

お礼

ご丁寧な回答有難うございます^^
No1様の方法で解決いたしました。

回答No.2

abacabu

何年か前までホームページを趣味で作ってた者です。
最近では外部データを読み込んで反映させるのを
インラインスタイルシートというんですね・・・
初めて知ったｗ
様は、あの書いてある物だけではダメです。
あれはタグの頭の方に外部アドレスから外部ファイルのＣＳＳをページ全体に反映させる形で
設定してあるので、その場の少ないコマンドでＣＳＳを起動できるのです。
従って、ああいう感じで、かつＷＥＢページを軽くするという意味でも外部ファイルとして
ＣＳＳやらＪａｖａＳｃｒｉｐｔやらを設定する事をお勧めします。
あのサイトのソース（右クリックすると画像保存とか出てくるところのしたにある「ソースの表示」で見れます）を
見るとわかりますが、ページ構成する前の段階で丈夫でＣＳＳが書いてありますので（恐らく参考の為）
ちょっと重いです。ソースを見てもらえばわかると思いますが、
あのＣＳＳタグを外部に作って上部にリンクを貼る事で反映するものです。
ＣＳＳはページの見た目全体をいじれるので、テーブルやフレーム（この２こは現在非推奨）を
ＨＴＭＬタグで書かなくてもそれに似た格好にレイアウト出来ます。
詳しくはそのページのスタイルシートページで!!

お礼

回答ありがとうございます。
外部のスタイルシートとインラインスタイルシートの場合
勝手が違うので、お恥ずかしながらインラインスタイルシートの書きかたは
良く解らないのです。
インラインスタイルシートの方が解説しているページが少ないので
ここで質問させて頂いた次第です。
レンタルブログ等ではCSSが編集できない場合もあるので。