A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
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
- 回答日時:
>ページごとにフォントの大きさや行間がバラバラなので統一したいのですが
これこそ、文書構造を記述する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-html4 … )]より
ですからね。class名については私は、
★HTML5 における HTML4 からの変更点:新しい要素 ( http://standards.mitsue.co.jp/resources/w3c/TR/h … )の要素名やその意味を参考にしています。
ついで、スタイルシートを書きますが・・この文書構造を元にスタイルを指定する要素(タグで囲まれた部分)を選択して、デザインしていきますが、これはオーサリングツールでは不可能なのです。ツールには文書読解力はないのですからね。これは必然的にテキストエディタになります。
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 … )
プロパティの指定方法
の知識です。
幸いにというか、オーサリングツールはセレクタの指定はまったく対応していませんから、デザインを適用する要素ごとにclass名やidが書かれていますから、それをひとつずつ選んで、プロパティを修正していくことになります。
スタイルシートは基本的に
セレクタ{
プロパティ:値;
プロパティ:値;
}
という構造ですから、見つけ出すのは簡単でしょう。
★ただし、ビルダーで製作したものでしたら、いったんすべてのマークアップを削除して、裸のテキストデータにしてから、改めてデザインを一切気にしないで、文書構造だけに注力してマークアップしてから、改めてスタイルシートを書いていくほうが早いと思います。
実は、私の仕事の最大のうち、実入りが少なく負担が大きいのが、ビルダーで作られたサイトの修正なのですが、そうしています。
★オーサリングツールを使うためには、テキストエディタで作成する人の数倍もHTMLやスタイルシートの知識が必要なのです。そうでないととんでもないページが出来てしまいます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS cssで指定したフォント名が反映されないのですが、一般ファミリ名の優先順位付きリストを指定するために 1 2023/05/01 00:24
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- HTML・CSS Dreamweaver のテンプレートでの相対パスの設定について 2 2023/06/13 17:28
- その他(プログラミング・Web制作) 次に、楽天のアジャイル就活に参加して、1日で内定を獲得できる。私は大企業に就職できる? 2 2022/04/17 13:38
- HTML・CSS PrettierのHTMLの記述変更 linkタグ 1 2022/06/23 04:06
- HTML・CSS お金をあまりかけずにプログラミングを勉強する方法を教えてください。 こんにちは。 Webデザイン系の 3 2022/08/05 03:22
- Web・クリエイティブ 独学でwebデザイナーを目指すには 2 2022/09/17 16:27
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- Chrome(クローム) 最近のGoogle Chromeのデータ読み込みの遅延やエラーって頻発しますか? 2 2023/01/06 22:12
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSS/日本語のID・クラス名につ...
-
HP作成(ワッパーを中心に)
-
idの中のid指定
-
<span>で2重にかけているものを...
-
セルの高さが変化しない(ワー...
-
「CSSで1つの要素に複数のクラ...
-
CSSの適用を一部だけ除外したい。
-
マウスカーソルを当てた時だけ...
-
CSSで下まで背景色を伸ばす方法
-
cssでIEとFIREFOX(とchrome)の...
-
Bootstrap3でcontainerがずれる...
-
<div align="right"> を css で...
-
CSSのホバーエフェクト
-
1から100までの自然数のうち、2...
-
css 横並びのナビゲーションバ...
-
画像にリンクを張ると画像がず...
-
ポップアップメニューを表のよ...
-
カラープレーンってなんですか?
-
超音波で洗脳。
-
line-height指定で発生する余白...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
idの中のid指定
-
CSSに同じclass名がいっぱい‥。...
-
個別にリンクの色を変える方法
-
HTML要素のid/class名の長さに...
-
最近、HTMLのヘッダーをIDで定...
-
CSS, リンクの色を一部変えるに...
-
liリストタグの背景色に色がつ...
-
CSSのクラス名・ID名の指定でワ...
-
htmlのid属性って必要なの?
-
サイトにjQueryが使用されてい...
-
スタイルシートで、id属性の中...
-
リンク文字の 一部だけ色を変...
-
外部css定義したclassをht...
-
ページの左右の余白(枠外)に...
-
<span>で2重にかけているものを...
-
CSSでテキストリンクの色を複数...
-
同ページ内でリンクの色を変え...
-
CSSが効かずどのように指定すれ...
-
display:table-cell内でこんな...
-
CSSで下まで背景色を伸ばす方法
おすすめ情報