趣味でHPをつくっていて気になったことがあるのですが、
http://www.kintore.info/about/index.html
このHPは「筋トレ学園について」というところが、
バックにデザインされた帯がついています。
ソースをみてみると<h2>筋トレ学園について</h2>とあり、
前後にCSSを外部ファイルで指定しているようでした。
私は今まで、Fireworksで画像をいちいちつくっていたので、
このCSSの方が便利だと思い真似がしたいのですが、
どのようにCSSを指定すればできるのでしょうか?
ご存知の方どうぞ教えてください。
No.3ベストアンサー
- 回答日時:
このサイトはXHTMLで書いているつもりですが。
ソースを表示するとわかりますが、極めてシンプルで、スタイルシートをはずす(firefoxの場合[表示]→[スタイルート]→[スタイルシートを使用しない])と、よくわかるように。
このページはHTMLの文書構造はきちんとできています。そのため、スタイルシートで柔軟にデザインできます。
(注)Another HTML-lint( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )で調べると、まだ多くのエラーはあります。
→( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
・スタイルシートを利用したページを作成する基本は、HTMLがきちんとか書かれていること。
---オーサリングツールは不要というか邪魔になる。
「HTMLエディタで作成するシンプルなコードはSEO(検索エンジン最適化)にも効果的であることから、一部のWebクリエイターには見直されつつある。」
Webオーサリングツール - Wikipedia( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83% … )より引用
さて、このサイトのスタイルシートは<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
などで勉強してください。
fireのアドオンさっそくインストールさせていただきました。
これかなり便利ですね!今までソースを表示でわかりにくいのをスクロールしていたのですが、これ外部CSSまで表示してくれますね。
はっきりいって最高です。
おしえていただきありがとうございました!
No.1
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS HTMLとCSSについて 2 2022/09/12 15:46
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- HTML・CSS HTMLとCSSによるWebページ生成について。この絵で「ochawan」の文字を枠全体の上から10 4 2023/02/28 23:17
- HTML・CSS CSSファイルの日本語コメントが文字化けしてしまう 3 2022/12/26 15:50
- HTML・CSS サイトをマルチデバイス対応にする為の準備や、CSSなどのおすすめサンプル集やアドバイスを頂きたいです 1 2022/07/13 22:15
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- フリーソフト サイトで使用していない画像ファイルの削除ソフトを探しています。 3 2023/04/05 10:49
- HTML・CSS htmltとcssの連携をして画像縮小について 1 2022/11/15 20:32
- 教育・ドキュメンタリー どう言うことですか?OKWAVE 2 2022/04/20 18:41
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS、Bootstrapについて contai...
-
HTMLで、IE/firefox 書き分ける...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
PDFファイルを開かずに印刷...
-
ペイント3Dのテキストサイズ変更
-
Illustratorで作成、pngで保存...
-
テーブル内の文字サイズを変更...
-
入力規則のリストの文字の大き...
-
Excel:一部のフォントでセルの...
-
教えてください。
-
ホームページビルダー作成HPがi...
-
テキストエディタmiの表示文字...
-
似ているフォント(Win⇔Mac)
-
EXCEL VBA 印刷プレビューダイ...
-
文字コード及びフォントに関す...
-
ページ内にスクロールバーのあ...
-
excelにて各シートの総印刷ペー...
-
Excel VBAで文字列の可視長を得...
-
Excel VBA メール作成について ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ホームページについて質問です...
-
cssでリンク先のurlを表示させ...
-
safari でcssがききません!
-
メールソフトBecky!のHTMLメー...
-
複数のcheckboxを間隔を空けず...
-
携帯では指定のタグを無効化す...
-
CSSシグネチャ
-
Chromeでcssを表示させると、cs...
-
スクロールバーをカスタマイズ...
-
cssの今、一番旬なブラウザごと...
-
googleカスタム検索の枠を消したい
-
bootstrapのどのcssドキュメン...
-
リンクの色一括指定について。
-
ホームページビルダーでcssのサ...
-
文字の色、大きさを変えるWe...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
入力規則のリストの文字の大き...
-
教えてください。
-
Illustratorで作成、pngで保存...
おすすめ情報