HPビルダー CSSの読み方

質問

ページごとにフォントの大きさや行間がバラバラなので統一したいのですが
CSSでサイトの細かいことは指定してあるはずなので
そこにいって確認しようと思うのですが
CSSを見ても意味が全くわかりません。
HPビルダーなのですが
どこにフォントや行間の指定がされているのか
教えてください。

CSSの読み方を自分で勉強するのですが
なかなか難しく
理解できません。
そのへんの勉強方法も教えて頂ければ嬉しいです。

回答No.2

ORUKA1951

No.1です。少し難しかったかな。
もう少しわかりやすく説明してみます。
No.1でも書きましたが、
・HTMLは文書の構造だけを記述する。(デザインのために書かない)
・スタイルシートは、それをどのようにプレゼンテーションするかを指定する。
と完全に分けて考えます。
　そうすることで、次の利点があります。
・スタイルシートを書き換えるだけでサイト内すべてのデザインを変えることができます。
・HTMLがシンプルで軽量になり、スタイルシートを読むのは一回だけなのでネット負荷も小さい。
・スタイルシートを複数用意することで
　a) スタイルシートを切り替えて好きなデザインで見てもらえる。
　　たとえば、CSSの基礎／CSS講座 ( http://deztec.jp/lecture/css/css_style.html )は二種類のスタイルシートが用意されています。

　　ブラウザの表示メニューでスタイルシート→変更

　b) ブラウザによってプレゼンテーションを変える
　　スマートフォン用、携帯電話用、パソコン用、目の悪い人用・・・

　c) 印刷用にスタイルシートを用意できる。
　　　読み上げソフト用のスタイルシート--たとえばここは若い男性の声で読めとか
・HTMLが文書構造でマークアップされているため検索エンジンが内容を理解しやすい

　このように利点はたくさんあります。

★言い換えると、HTMLが文書構造にしたがってきちんとマークアップされていれば
『ページごとにフォントの大きさや行間がバラバラなので統一したい』と思ったとき、それが可能になるのです。逆にそれができていないと無理なのです。ひとつひとつ、すべてのページのHTMLとスタイルシートを見比べながら手作業で変えていくしかありません。

　その方法ですが、幸いなことにビルダーはスタイルシートに対応していませんので、実にシンプルな指定方法しかされていません。
　スタイルシートの構造は
.main{
font-size:14px;
line-height:1.4em;
}
のようになっていますが、それぞれ
.main　セレクタ--選択手段 どの要素に適用させるかを指定する
{から}は、宣言ブロック
font-size:　プロパティ
line-height:　プロパティ　何について指定するか

14pxや1.4emはその値となります。

ビルダーが選択できるセレクタは、idやclass名になりますから
.main --classセレクタ　HTMLでは、<div class="main">と書かれている要素
#top　　一意セレクタ　 HTMLでは、<div id="top">とか枯れている要素
　著者が知らない限り、これ以上ややこしいのはない。

　あとはひたすらこつこつと。

　本当のことを言うと、HTMLのほうをすべて書き換えたほうが早いです。・・そうすれば、本の一箇所変えればすべてのページのデザインを変更するなど、スタイルシートの機能を存分に使えます。

回答No.1

ORUKA1951

＞ページごとにフォントの大きさや行間がバラバラなので統一したいのですが
　これこそ、文書構造を記述するHTMLとスタイルシートの最大の長所なのですが・・
＞CSSを見ても意味が全くわかりません。
　困りましたね。
　何も知らない人が作成したサイトでは、プロでも無理です。(^^)

　そこで、実際に私がウェブサイトを作成する例を挙げてみましょう。
デザインを一切無視して文書構造を記述するためにHTMLを書く。たとえば本文(section)だと・・
<div class="section">
　<h2>章見出し</h2>
　<p>記事</p>
　<div class=section">
　　<h3>項見出し</h3>
　　<p>記事</p>
　　<div class="aside">
　　　<p>本文と直接関係ない記事</p>
　　</div>
　</div>
</div>
になります。class名は、
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素とSPAN要素は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より
ですからね。class名については私は、
★HTML5 における HTML4 からの変更点:新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/#new-elements )の要素名やその意味を参考にしています。

ついで、スタイルシートを書きますが・・この文書構造を元にスタイルを指定する要素(タグで囲まれた部分)を選択して、デザインしていきますが、これはオーサリングツールでは不可能なのです。ツールには文書読解力はないのですからね。これは必然的にテキストエディタになります。
div.section{
　font-size:12pt;
}
div.section div.section{
　font-size:0.9em;
}
div.section div.aside{
　color:gray;
}

　さきでデザインを変えたければ
body{font-family:"MS ゴシック";}
div.section{
font-size:14px;
margin:0;
line-height:1.4em;
}
とすればよいだけですね。このとき、HTMLを開いてみることは、表示を確認する以外にはまったくないのです。

　このように、サイト全体のデザインを統一するためには、HTML自体がきちんと文書構造にしたがって書かれていることが前提なのです。そのうえで、トップページならトップページのデザインをするとかになります。
　そのとき必要なのは、
セレクタの指定方法( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/selector.html )
プロパティの指定方法
の知識です。

　幸いにというか、オーサリングツールはセレクタの指定はまったく対応していませんから、デザインを適用する要素ごとにclass名やidが書かれていますから、それをひとつずつ選んで、プロパティを修正していくことになります。
　スタイルシートは基本的に

セレクタ{
プロパティ:値;
プロパティ:値;
}
という構造ですから、見つけ出すのは簡単でしょう。

★ただし、ビルダーで製作したものでしたら、いったんすべてのマークアップを削除して、裸のテキストデータにしてから、改めてデザインを一切気にしないで、文書構造だけに注力してマークアップしてから、改めてスタイルシートを書いていくほうが早いと思います。
　実は、私の仕事の最大のうち、実入りが少なく負担が大きいのが、ビルダーで作られたサイトの修正なのですが、そうしています。

★オーサリングツールを使うためには、テキストエディタで作成する人の数倍もHTMLやスタイルシートの知識が必要なのです。そうでないととんでもないページが出来てしまいます。