TOP ブログの基本 アフィリエイト アクセスアップ カスタマイズ ブログ・HTML ブログ・CSS




ハイサイ(ようこそ)利爺のブログへ


●ブログの基本、アフィリエイト、HTML・CSSまで
初めての方にも分かり易いように下記のシリーズで纏めています。

・・・・・・・・・・・・・・・・ 各章の項目(目次) ・・・・・・・・・・・・・・・
= 現在、シリーズ記事を書いているブロックです。

エントリー順に確認できるように【目次】を作ってありますので
上段のコンテンツバー(menu)または上記の項目から各ブロックに入れます。


●本文中に表示しているアイコンは
= 参照記事  = 頁中の章  = 注釈  = 記事ブロック
を表します。

2010年10月29日

箇条書きの基本(CSSの定義1)

■ 5-30 CSSを定義、箇条書きを装飾する。

HTMLはマークアップ言語と言われ、タグを用いて
「これは見出し」「この部分は記事本文」「画像はここ」というように
要素を指定して、レイアウトやウェブページを制御しますね。

見出しや本文をどのように表示するか
HTMLをどのように使用するかはプラウザ(www)に準拠しています。

HTMLだけで、ウェブページを表示しようとすると
使用するタグがより複雑になり、プラウザによって見栄えが変わったり、表示位置が異なっていたりと、バランスが崩れてしまうことがあります。

そのような背景で
HTMLのタグの簡素化や共通化をもとに、HTMLとは別にデザインや装飾する仕組みが考え出されています。

それがCSSですね。

    ※ Cascading Style Sheet(スタイルシート)

CSSはHTMLのタグの機能を補ったり、拡張する役目があり

●HTMLでウェブページの内容を作成(マークアップ)して、
●そのHTMLをCSSで装飾する。

という考えで
CSSにさまざまな拡張機能が取り入れられ、複雑な構造もスムーズに構築でき、柔軟にウエブページのレイアウトが行えるようになっています。

HTMLは、そのCSSを呼び出してWEBページに適用する形になっています。

CSSは
wwwの世界、IEやFirefoxをはじめ大方のプラウザに対応していて
ウェブページを作るのに欠かせないものです。

将来はCSSとHTMLの関係は

機能が拡充してより簡便に使用でき、役割分担が明瞭になり、
ウェブページをもっとスムーズに作りあげる仕組みに改善されるでしょう。


■ 箇条書きのHTMLと定義するCSSの役割
その使い方を確認してみましょう。


HTMLの箇条書きの要素は次の3種類でしたね。

@順序なし箇条書き(箇条書きリスト)
A順序あり箇条書き(連番リスト)  
B定義型箇条書き   
⇒ ul要素
⇒ ol要素
⇒ dl要素





順序なし箇条書き(箇条書きリスト)を基にして、HTMLとCSSの構造を確認します。

Aの連番リスト、B定義型箇条書き の仕組みやCSSの適用は
@の箇条書きリストと同じ方法です。

【箇条書きのHTML】

沖縄県の市町村
<ul>
<li>那覇市
<li>沖縄市
<li>……
</ul>

【表示例】

沖縄県の市町村
  • 那覇市
  • 沖縄市
  • ……

「デフォルト値」で表示した例です。

   注)
   デフォルト値での表示は、テンプレートの
   CSSで定義している文字の種類、サイズや色が適用されます。
  
HTMLにも
文字やウェブデザインのために装飾する方法は数多くあります。


文字の装飾などをHTMLタグだけで指定すると

●使用するタグの種類が多くなり、煩雑になります。
●さらに構文としてのHTMLが重くなります。

ウェブページでは画像の取り扱いや文字の装飾、表の作成、箇条書きのマーカーなど
いわゆる「デザイン」はCSSで行い、HTMLの構文(マークアップ)は簡便に軽くすることが基本になります。

【CSSに箇条書きを定義】

CSSの基本形は

セレクタ{
  .text {
プロパティ:値;
  font-size:12px;



⇒セレクタ名(開く)

⇒プロパティ名:その値;

⇒セレクタ(閉め)


の形式ですね。  
セレクタ名の  {    プロパティの  : ;    閉めの  }  の記入を忘れないように。

箇条書きにCSSを適用するには
 ● 過去記事を含めて全べての記事に適用する。
 ● 必要なページにだけCSSを適用する。

の二つの考え方があります。

■ 過去記事を含めた全べての記事にCSSを適用する。

全てのページ(記事)で使用している箇条書きに、
文字の種類、太さ、大きさや文字の色など、統一したスタイルを適用させるには、

箇条書きのタグ
<ul> <ol> <dl> を
CSSのセレクタとして直接に定義します

【CSSへ定義した例】

<!-- 順序なし箇条書き(箇条書きリスト)-->
ul{
font-size:13px;
color:#0000ff;
list-style-type:square;
}
ul ul{
font-size:12px;
color:#990000;
list-style-type:circle;
}
 
<!-- 順序あり箇条書き(連番つきリスト)-->
ol{
font-size:13px;
color:#0000ff;
list-style-type:upper-alpha;
}
ol ol{ … }

<!-- 定義型箇条書き-->
dl{ … }
dl dl{ … }

●セレクタとして定義した後は、箇条書きのHTMLタグを

<ul> …
<ol> …
<dl> …

と記入しただけで、
プロパティとその値を読み込んでデフォルトでの定義どおりに表示をします。

●ここで注意することは、箇条書きにしている
「過去記事を含めた全べての記事」
に定義したCSSが適用されることです。


●リストの階層ごとに異なったスタイルを適用するには
第二層 ⇒ ul ul { … }  
第三層 ⇒ ul ul ul { … }

と定義しておけばプロパティ値が反映されます。
 ※ ul と ul の間に半角のスペースを空けます。

参照 
●階層とは(この記事の下段)
●箇条書きリストの階層ごとにスタイルを定義


一般的なブログのテンプレートのCSSには
箇条書きをセレクタとして設定していませんね。

ブログサービスでは、
同じテンプレートを使用しているブロガーが複数にわたります。

共通のテンプレートを使用している方でも、個人用にCSSを書き換えて
使用する書体やデザインを変更していることが多いですね。

テンプレートのCSSに箇条書き<ul><ol><dl>をセレクタとして
最初から定義してしまうと

文字やその修飾などの<body>要素を書き換えた場合でも、
箇条書きはすでに定義していますので、その定義のとおりでの表示になります。

箇条書きの文字の大きさなどが、本文とは異なった形で表示される。

などと全体的なバランスが崩れる時もあります。

見栄えがいいように本文との対比を考えて、
箇条書きのCSSを書き直すことが必要なときもでてきます。

デフォルト値は
CSSに初期値として定義している文字が基本になっています。

箇条書き、テーブルなどは、
必要なときに定義することが望ましいCSSの使い方になっています。


■ 必要なページの箇条書きにだけCSSを適用する。

class ・ id の定義と適用。

一部の箇条書きにCSSを適用する方法をみていきましょう。

CSSを適用したい箇条書きのセレクタを
「class」名または「id」名
で定義します。

【class ・ id属性】

  ●class属性
  定義した箇所の箇条書きにだけCSSが適用されます。
  セレクタを同じウェブページで何度でも使えます。
  セレクタの前に「.」(カンマ)を付けます。

  ●id属性
  定義したセレクタを一度だけ使う。
  セレクタの前に「#」(シャープ)を付けます。

  ※classやidは、
  箇条書きだけではなくtebleや段落(p)などに対しても
  追加セレクタとして使う時の基本です。

class属性とid属性は同じ使い方をします。

【 class をCSSに定義する】

class をCSSに定義するには
class名の前に「.」(カンマ)を付け「.aaaaa 」というセレクタにします。
  ※「.」を忘れないようにしましょう。

文字の大きさや文字色など装飾に必要なプロパティとその値を記入して
CSSを変更して保存します。

「.aaaaa 」はセレクタ名ですので、自由に付けてかまいませんが、
箇条書き用のセレクタだと分かりやすい名前にしましょう。

 ※ここでは、
 仮のセレクタのclass名を「.samp ul」として定義しておきます。
 
「箇条書きCSS:class定義@」

.samp ul{
font-size:13px;
color:#0000ff;
list-style-type:square;
}

⇒ class名
⇒ 文字(13px)
⇒ 文字色(青)
⇒ マーカー「square=四角」
⇒ セレクタの閉め

このCSS(class)を適用するためのHTMLは

【HTML】
<div class="samp ul">
 <ul><li>〜</ul>
</div>
または
<ul class="samp ul"> <li>〜</ul>の形式です。

両方ともclass定義した <.samp ul> を適用せよの意になります。

   注)
    CSSに定義したclass名には
   「.samp ul」と「.」が付いています。

 
   「.」はCSSに対してセレクタは「class」であるという意味ですので、
    HTMLを記入して適用する時には
    <div class="samp ul">のように「.」は記入しません。


    idの「#」も同じ使い方です。    

【HTML記入例】
<div class="samp ul">
<ul>
<li>那覇市
</ul>
</div>

「表示」
  • 那覇市

表示は「箇条書きCSS:class定義@」が適用され

本文より1px大きい文字、
文字の色は青、
項目のマーカーの種類は「square=四角」ですね。


このように、ある要素に対してCSSを定義して適用すると、
同じ要素にはすべて同じスタイルが指定されます。

これがCSSの特徴です。

CSSへの定義の方法やHTMLタグの記入形式は
<ol要素><dl要素> でも同じ仕組みです。


■箇条書きリストの階層ごとにスタイルを定義。

箇条書きの階層とは

【階層の表示例】
  • 那覇市
    • 人口約312,000人、約122,000世帯

項目「那覇市」は
「人口は約312,000人」の親の項目であり、第一層になります。

人口の項目は親の層の下、第二層に表示されますね。

このような形式を「階層」といいます。

第一層、第二階層、そして第三階層 … 
と階層化している箇条書きでも、各階層ごとに文字を修飾したり
マーカーを画像に変更して使用することができます。

先のCSSのclass定義@と同じように、
装飾をしたい階層に使用する新しい「class」をCSSに定義しておきます。

 ※サンプルでは「.samp2 ul」の名前でclss定義をして
 適用してみましょう。


「箇条書きCSS:class定義A」

.samp2 ul{
font-size:11px;
font-color:#990000;
list-style-type:circle;
}

⇒ class名
⇒ 文字のサイズ(11px)
⇒ 文字の色(薄茶)
⇒ マーカー「circle=白丸」
⇒ セレクタの閉め

先に定義した「.samp ul」を親項目に、
この「.samp2 ul」を第二層の子項目の文字を修飾するセレクタとして適応します。

第三層や四層にも
異なる装飾をしたいときは同じような定義が必要ですね。

【HTML】
<div class="samp ul">    ← 定義@を適用
<ul>        ← 第一層
<li>那覇市
<div class="samp2 ul">   ← 定義Aを適用
<ul>        ← 第二層
<li>人口約312,000人、約122,000世帯
</ul>
</div>

</ul>
</div>

【表示】
  • 那覇市
    • 人口約312,000人、約122,000世帯

第一層の那覇市の文字サイズは13px、色は青、マーカーは黒四角。

第二層の人口の項目の文字の大きさは11px、色は薄茶色、マーカーは白丸と定義通りの表示になりましたね。

この注意点は
●CSSに定義した「.samp ul」は親項目に、
●「.samp2 ul」は必ず子項目に適用させなければいけない。


と言う決まりはありません。

逆に定義のA「.samp2 ul」を親に、
定義@「.samp ul」を子に適用してもかまいません。

定義は必要に応じて、どの層に適用しても構いません。

また、第一層だけに定義して、
第二層以下には定義(適用)をしなければ、
以下の階層には、第一層に適用した「class」が反映されます。

そのことを「継承」と言います。

また逆に第一層には定義無し
下部の層だけ個々に定義することも自由にできます。

classやidは
必要な時に自由に呼び出して使用できる便利なセレクタです。



以上のようにHTMLの「要素(タグ)」に class属性を指定して
そのclassをセレクタにすることで、思うとおりの細かなスタイルが設定ができますね。

箇条書きだけではなく、テーブル、段落、段組みなどにclassやidを対応させれば
記事の中で必要な「要素」にだけ適用するスタイルを定義することができます。

CSSの定義、HTMLでの適用の方法は
CSSを使う上での基本になりますので、仕組みに慣れるようにしましょう。

次回は、
マーカーに画像(アイコン)を用いるなど
少し進んだCSSの適用を確認します。




▲HTMLの関連記事
   holder01.gif ブログで使うHTML-目次ー
    http://tosiji-dreamafi.seesaa.net/article/133635358.html

★ご協力お願いいたします★   
      kame.jpg
    banner_01.gif
……人気ブログランキング……



この記事へのコメント
明けましておめでとうございます。

利さん、倭人です。
超ご無沙汰してしまってすみません。
昨年は本当にお世話になりました。

4月より投資ジャンルに専念し、
どうにかこうにかやっております^^
(コメントをいただけるなら置手紙で)

本年もよろしくお願い申し上げます。

お体には気をつけ
元気で頑張ってくださいね。

Posted by 倭人 at 2011年01月01日 10:27
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/167840781
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。