- ベストアンサー
このサイトのようにｈタグをしていした文字のバックに帯をつけるCSSはどうやっているのでしょうか？
趣味でHPをつくっていて気になったことがあるのですが、 http://www.kintore.info/about/index.html このHPは「筋トレ学園について」というところが、 バックにデザインされた帯がついています。 ソースをみてみると<h2>筋トレ学園について</h2>とあり、 前後にCSSを外部ファイルで指定しているようでした。 私は今まで、Fireworksで画像をいちいちつくっていたので、 このCSSの方が便利だと思い真似がしたいのですが、 どのようにCSSを指定すればできるのでしょうか？ ご存知の方どうぞ教えてください。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
このサイトはXHTMLで書いているつもりですが。 ソースを表示するとわかりますが、極めてシンプルで、スタイルシートをはずす(firefoxの場合[表示]→[スタイルート]→[スタイルシートを使用しない])と、よくわかるように。 このページはHTMLの文書構造はきちんとできています。そのため、スタイルシートで柔軟にデザインできます。 (注)Another HTML-lint( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html )で調べると、まだ多くのエラーはあります。 →( http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi?ViewSource=on;URL=http://www.kintore.info/about/index.html ) ・スタイルシートを利用したページを作成する基本は、HTMLがきちんとか書かれていること。 ---オーサリングツールは不要というか邪魔になる。 「HTMLエディタで作成するシンプルなコードはSEO（検索エンジン最適化）にも効果的であることから、一部のWebクリエイターには見直されつつある。」 Webオーサリングツール - Wikipedia( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB#HTML.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF )より引用 さて、このサイトのスタイルシートは<head>内に記述してあるスタイルシートをご覧ください。(直接は著作権の関係で示せません) 一番良いのは、firefoxにfirebug( https://addons.mozilla.jp/firefox/details/1843 )の組み合わせでしょう。 ★仕組みや方法については はじめてのWebドキュメントづくり http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ 裏の裏の目次 http://tancro.stp-1.com/stylesheet/index.html などで勉強してください。
その他の回答 (2)
- yambejp
- ベストアンサー率51% (3827/7415)
kinniku.cssに#mainや#mainright以下のh2にスタイルシートが 設定されていますね
h2 {background-color:#******;} －－という感じかと。 http://www.htmq.com/style/background-color.shtml
お礼
これです！ 勉強になりました！ありがとうございます！
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/spn/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
fireのアドオンさっそくインストールさせていただきました。 これかなり便利ですね！今までソースを表示でわかりにくいのをスクロールしていたのですが、これ外部CSSまで表示してくれますね。 はっきりいって最高です。 おしえていただきありがとうございました！