ホームページを自作します。エディタを使って自分でつくるオリジナルなホームページの作り方を説明します。SEO対策webサイトを作ります。

CSSstudy

トップWEBデザインCSSの基礎

CSSの基礎!


スタイルシート(CSS)とは

スタイルシート(Stylesheet)とは、CSS(Cascading Style Sheets)のことです。
HTMLのタグと組み合わせて使用するもので、HTML文書(WEBページ)の「見た目」に関する指定をする仕組みです。
  

● HTML → 文書の構造を定義。
タイトルや見出し、段落、強調箇所、引用、表組、など、文書内の文章などに役割(意味付)をする。

● CSS → 装飾や配置など文書の体裁を設定。
字のサイズ、色、太さ、といった文字装飾、配置箇所の指定など、「見た目」を直接指定する。


  

■ スタイルシートを利用するメリット

・文字や画像の配置、行間などを細かく設定することができる。

・ページの内容とデザイン(見栄え)を、別々に管理することができる。

・デザインの変更を一括して行えるため、ページの管理が楽になる。
 スタイルの内容をあらかじめ設定しておき、それを必要な箇所に適用させる。
 何箇所でも、何ページでも同じスタイルを適用でき、修正も一括でできるなど、
 デザイン作業が効率化できる。

・ブラウザでの表示が速くなる。
 HTMLファイルの容量が減り、軽くなったことでブラウザでの表示が速くなる。
 テーブルなどのレイアウトは表示に時間がかかる。

・シンプルでスタイリッシュなデザインができる。

・アクセシビリティが良くなる。すべての人に優しいホームページを構築することができる。
 

■ ボックス(ブロック)という考え方

ページにデザインを適用する場合は、
ボックス(ブロック、かたまり)という単位で考えるとよいです。
ある範囲にボックスを作りたい場合は、下図のように、<div>タグを使います。

  見出しのボックス
  文章のボックス
  ・・・・・・・・
などは、<div> この範囲内が、見出しのボックス </div>
    <div> この範囲内が、文章のボックス </div>

という様になります。

<div>タグを使って、全体をボックスにする例。

  <div>
    <h2>見出しのボックス</h2>
    <p>文章のボックス ・・・・・ </p>
  </div>



ところで、HTMLのタグは、ブロック要素とインライン要素に分けられます。

● ブロック要素  → タグの前後に改行が入る。
           ブロックを形成するタグのこと。
 
   ブロック要素となるタグ
   <h1>~<h6>、<p>、<blockquote>、<ul>、<ol>、<div> など。


● インライン要素 → タグの前後に改行が入らない。
           要素は行の一部となる。  

   インライン要素となるタグ
   <b>、<i>、<a>、<img>、<font>、<span> など。


スタイルシートの書き方''

■スタイル指定(スタイル宣言のルールセット)

タグ要素に対して、スタイルを設定する場合は次のように書きます。
これを「スタイル宣言のルールセット」といいます。

 
 (タグ名){ (属性)(値)}             
   ↑     ↑    ↑
 selector  property  value

selector :スタイル指定を適用する対象となる要素。
property:スタイルの属性。(つまり何を指定するかを示すもの)
value  : propertyで指定する値。

   で囲まれた部分を「宣言ブロック」(スタイル宣言の内容)といいます。

「 property:value ; 」が宣言の基本形です。

記号「」は等値を示し、「」は区切りを示します。
区切り記号によって、{  }(宣言ブロック)の中に複数個の「 property:value ; 」を列挙できます。
最後尾のみ「」は省略可能。



(例)見出し(h2)の文字を赤、背景色を水色、
   段落(p)の文字サイズを90%、行間を150%に設定したいときは、 

  h2 { color : red ; background-color : #ccffff ; }
   p { font-size : 90% ; line-height : 150% ; }
  

または、段落(p)の文字サイズを12pt、文字色を青、行間を20ptに設定したい時は、
次のようになります。(最後尾の「;」は省略してもよい。)

   p { font-size:12pt ; color:#ffff00 ; line-height:20pt }

   
上のように、セレクタ(selector)が要素名(h2,pなど)の時に、タイプセレクタと呼びます。

尚、下記のごとく、セレクタには、他にも多くの種類があります。

・全称セレクタ、・タイプセレクタ、・子孫セレクタ、・子供セレクタ、・隣接セレクタ、
・属性セレクタ、・クラスセレクタ、・IDセレクタ、 ・疑似クラス、 ・疑似要素

などです。


■クラス を設定してスタイルを適用する方法

  

セレクタとして、「」(ピリオド)に続けて「クラス名」を指定します。
これで、class=”「クラス名」”を追加された要素が、スタイル宣言を適用する対象となります。

クラスによる指定はタグの種類にかかわらず、同一のデザインを適用したい場合に行います。

クラスを指定する場合は、半角のピリオドに続けてクラス名を書きます。

(クラス名){ (属性):(値);(属性):(値);・・・} 



(例)「menuクラス」を、指定した文字に対して、文字色を青に設定する場合。
スタイル宣言のルールセットのセレクタは、「.menu」で、
宣言ブロックは、「{ color :blue ; }」ですね。

つまり、.menu { color :blue ; } となるわけです。
  

 <html>
 <head>
 <style type="text/css">
 <!--
  .menu { color :blue ; }  
  -->
 </style>
 </head>
 <body>
 <h3 class="menu">サイドメニュー</h3>
 <div class="menu">webサイト作成</div>
 </body>
 </html>

 これは、どちらも文字色が青色になります。
 クラスmenuのスタイルが「h3」にも「div」にもどちらにも適用されるからです。
 

◆タグとクラスを組み合わせる方法

(a) 同一タグの中でクラス指定のあるものにデザインを適用する。

  (タグ名)(クラス名){ (属性):(値);(属性):(値);・・・} 



 (例)<p>タグを使用している段落の中で、「menu」というクラス指定のあるものに、スタイルを設定する。

 <html>
 <head>
 <style type="text/css">
 <!--
  p.menu { color :blue ; }  
 -->
 </style>
 </head>
 <body>
  <p class="menu">段落1 ここに(青色文字)が設定される</p>
  <p>段落2 (ここには設定されない)</p>
 </body>
 </html>
}}  
 これは、段落1の範囲内の文字を青色にしますが、
 段落2にはクラスmenuが指定されていないので、文字色は元のままで変化はありません。
    


(b) クラス内にある任意のタグに対してデザインを適用する。

   (クラス名)(半角スペース)(タグ名){ (属性):(値);・・・}
 


(例) 「menu」クラスの中にある<h2>タグのみにスタイル(青い文字)を設定する場合。

#style(class=box_brown_swm){{
 <html>
 <head>
 <style type="text/css">
 <!--
  .menu h2 { color :blue ; }  
  -->
 </style>
 </head>
 <body>
 <div class="menu">
 <h2>この見出しにデザインが適用される</h2>
 <p>・・・ 段落 ・・・</p>
 </div>
 <h2>この見出しには適用されない</h2>
 </body>
 </html>

 この場合、<div>~</div>の間に挟まれている範囲(ブロック)内にあるのは、
 <h2>と<p>の2つのブロックですが、適用されるのは、<h2>のブロックだけです。
 <p>のブロックには適用されません。また、
 </div>の後に出てくる<h2>はクラスmenuの適用範囲外なので文字は青色になりません。


■IDを設定してスタイルを適用する方法

  
セレクタとして、「」(ハッシュ)に続けて「IDの名称」を指定します。そして、
宣言ブロック{  }内に、「属性:属性値;」を記述します。

例えば、IDの名称「title」のスタイル宣言の内容が、「文字色を茶色(brown)にする」という場合のID設定は、

 title { color:brown;}
     
と書き、それをHTMLに反映させるには、
  
 <div id="title">反映させたい文字など</div>

と書きます。
   
最後尾の「;」は省略することができます。  

 id=”「IDの名称」” を追加された要素だけが、スタイル宣言を適用する対象となります。

特徴としては、同じHTML文書内では複数の要素が同じIDを持つことは許されません。
同一ページにおいては、ID名はひとつだけの要素に限られます。
  
つまり、上記の場合は、「id=”title”」は一つの要素<div>に対してのみ適応されるということになります。

複数の要素に対して同じID、例えば『 #title { color:brown } 』、を指定してはいけません。
   
つまり、同一ページ内で一つのIDである『#title { color:brown }』に対して、
   
 <div id="title">~</div>
 <p id="title">~</p>
 <h1 id="title">~</h1>
  
などの様に、複数の要素(div, p, h1)に使うことは許されていません。
各々のIDは、同一ページ内では一つの要素のみ一回だけ使えます。
規約を破ると、不具合を起こすことになるので注意しましょう!!
   

◆要素とIDを組み合わせる方法
 
 (a)  直接IDを指定する方法と要素名に続けてID名を指定する方法
   
 ● 直接指定は、例えば、次のように書きます。

 #testpart{ width:700px;color:blue;text-align:center;border:4px solid #00ff00;} 

 この場合は、ID名「testpart」の対象となる要素の内容は、「幅700pxで、太さ4pxの緑色(#00ff00)の実線の枠で囲まれ、枠の中の文字は全てblue(青色)で、テキストは中央に表示される」となります。


    
 ● 要素名に続けてID名を指定する場合は、例えば、次のように書きます。

 h1#testpart { width:600px;color: red;border:3px groove #cccc00;}
   
 この場合は、大見出しの要素h1の中の内容が、ID名「testpart]で宣言されたスタイル(デザイン)で装飾されます。

つまり、大見出しh1の文字は赤色で、その大見出しの全体は、幅600pxで、太さ3pxのgroove(立体枠窪み)形状の、RGBカラーコードが「#cccc00」の色の枠線で囲まれています。

        
 sample 

 <html>
 <head>
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>IDの使い方練習</title>
 <style type="text/css"><!--
 #testpart{ width:700px;color:blue;text-align:center;border:4px solid  #00ff00;}
 h1#testpart { width:600px;color: red;border:3px groove #cccc00;}
 --></style>
 </head>
 <body>
 <div id="testpart">
 <h1>ここではIDの使い方の練習をしています。</h1>
 この緑色の全体枠組みはどうですか?<br />
 下の見出しはいかがですか?。<br /><br />  
 <h1 id="testpart">ここではIDの使い方の練習をしています。</h1>
 このスタイルで満足しましたか?<br />    
 もし満足しなかったら、各々の#testpart {属性:値;・・・ }の中の
「属性:値;」を変更しましょう!<br />
 </div>
 </body>
 </html>

  
この場合は次のようになります。→ sample
     



 (b) IDに続けて半角スペースを1個おいて、要素にスタイルを適用する方法
 
例えば、#header p{属性:値;~ } のように書きます。
  
 #header p{color:navy}
  

 <div id="header"> ~ </div> として、このheaderブロックの中の、P要素に対してのみ、文字色をnavy(紺色)にします。
   
     
次の様に、各ブロックに属する段落要素「<p>~</p>」にスタイルを適用したい時は:
例えば   

 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
 <title>サンプルページ</title>
 <link rel=stylesheet type="text/css" href="style.css">
 </head>
 <body>
 ヘッダーブロック:  <p> ~ </p>

 メニューブロック:  <p> ~ </p>

 メインコンテンツブロック:  <p> ~ </p>

 フッターブロック:  <p> ~ </p>

 </body>
 </html>

    
の場合、それぞれのブロックに、下記のごとく、ID属性をつけます。

  ヘッダーブロックは: id="header"
 メニューブロックは: id="menu"
 メインコンテンツブロックは: id="main"
 フッターブロックは: id="footer"
   
 そこで、<div id=" ID名"> としてID属性をつけると、
 <div>はブロック(エリア)なので、段落ブロックの「<p>~</p>」を入れ子にします。
  
 <div id="header">
 <p>ヘッダー</p>
 </div>
  

 <div id="menu">
 <p>メニュー</p>
 </div>
  

 <div id="main">
 <p>メインコンテンツ</p>
 </div>
  

 <div id="footer">
 <p>フッター</p>
 </div>
  

以上の様になります。
HTMLタグはここで終了しますが、
別途「style.css」に各IDのデザインを記入していきます。
    
例えば、次の様に、

   ヘッダーブロック: <p>の文字の背景色はグレー(gray)、文字は中央揃え
   メニューブロック: <p>の背景をオレンジ色(orange)
   メインコンテンツブロック: <p>の文字の色を紺色(navy)
   フッターブロック: <p>の背景色を薄い紫色(lavendar)、文字は中央揃え

   
とすると、ID名とタグ要素を書いたスタイルシート「style.css」は、下記のようになります。
 

 #header p{background-color:gray;text-align:center}
  
 #menu p{background-color:orange}
  
 #main p{color:navy}
  
 #footer p{background-color:lavender;text-align:center}

   


スタイルシートを書く場所

(1)ヘッダ部にスタイルを設定する。

 </head>の直前に、

 <style type="text/css">
 <!--
   selector { property:value;}
   ・・・・・・・・
   ・・・・・・・・
  -->
 </style>

  
 <style type="text/css"> ~ </style> の間に「スタイル宣言ルールセット」を書きますが、
その際、CSS非対応のブラウザが、スタイル定義を表示してしまうことを避けるため、
 <!--   ~   -->
を入れてコメント化しておきます。

   
sample2   

 <html>
 <head>
 <meta http-equiv="Content-Style-Type" content="text/css">
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>CSSの基礎知識 </title>
 <style type="text/css">
 <!--
  h2 {width:700px; color:red; background-color: #ccffff;}
   p {width:700px; color:navy; font-size:90%; line-height:160%; background-color:#ffeecc;}
 -->
 </style>
 </head>
 <body>
 <h2>CSSの基礎知識</h2>
 <p>スタイルシートは、ウェブページのデザインを定義、記述するためのテキストファイルであり、HTMLとは異なる働きを持っています。<br />
いわば、HTMLは見やすい文章表現に主体が置かれており、<br />スタイルシートはその文章を取り巻く環境構成やデザインに主体が置かれているとも言えます。
 </p>
 <br /><br />
 <div style="margin-left:300px;font-weight:bold">
 <a href="http://makehp.mitioka.com/index.php?CSSstudy#sample2">戻る</a>
 </div>
 </body>
 </html>

  

上記の結果は → sample2
  


(2)別ファイルとして設定する方法

◆複数のページに同一のスタイルを設定するような場合、
スタイルシートの定義部分を別ファイルから読み込むことができます。
指定方法は、次のようにヘッダ部の中に<link>タグを入れます。
このとき、ファイル名の拡張子は「.css」とします。
  
例えば、
 <html>
 <head>
 <title>Style Sheet Test</title>
 <link rel="stylesheet" type="text/css" href="/mystyle.css">
 </head>
   
の場合、
「mystyle.css」ファイルの中は、「スタイル宣言のルールセット」のみを羅列して書きます。
 <style><!--  や  --></style> は書きません。
 
つまり, ファイル名「mystyle.css」のCSSファイルを開くと、
中身は次のような「スタイル宣言のルールセット」が羅列されているだけです。

 【mystyle.css】

   body {
      font-size:13pt;
      line-height:15pt;
      color:#333333;
      background-color:#ffee00;
      margin:20px;
      }
      
   p {
     color:blue;
     font-size:12pt;
     font-style:italic;
    }



(3)その都度、要素に直接スタイルを適用

  
 ◆例えば、上の小見出し(3)の見出し文章の「スタイル」という文字を
赤色文字サイズを18px」にして、目立つようにすると、
次のようにスタイルを適用することになります。

(3)その都度、要素に直接<span style="color:red;font-size:18px;">スタイル </span>を適用する。

  
これを表示すると次のようになります。 ⇒  sample3
  

 

    
 ◆また、この文章を、「見出し」にしたい時は、次のように書きます。

【 大見出し】:<h1>~</h1>を使います。<br />

 <h1 style="color:blue; border:1px solid #00ff00; margin-right:300px; background-color:lightyellow;">(3)その都度、要素に直接スタイルを適用する。</h1>


【中見出し】:<h2>~</h2>を使います。<br />

 <h2 style="color:green; border:1px solid #00ff00; margin-right:300px; background-color:lightyellow;">(3)その都度、要素に直接スタイルを適用する。</h2>


【小見出し】:<h3>~</h3>を使います<br />

 <h3 style="color:red; border:1px solid #00ff00; margin-right:300px; background-color:lightyellow;">(3)その都度、要素に直接スタイルを適用する。</h3>

 
これを、ブラウザで表示させると次のようになります。⇒ sample4
   
いかがでしょうか! 

(4)要素とその属性

上記の例では、

h1,h2,h3,p,a,hr,div,table,ul,ol,img,span,… 等が要素(element)で、

コロン(:)の左側にある、color,border,margin-right,background-color,等を
属性(property)と言い、

コロン(:)の右側にある、red,1px solid #00ff00,300px,lightyellow,などを属性値
(value)と言います。

また「セレクター」とは、ある条件を備えた「要素」のことです。








powered by QHM 6.0.4 haik
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional