HTML/CSS3-2 CSSの宣言方法

Posted on

CSS記述方法

これまでCSSファイルを作成し、外部のスタイルシートを読み込む方法を使ってきました。スタイルシートの書き方には、HTMLに直接書き込む方法（内部スタイルシート）と、HTML要素内に直接書き込む方法（インラインスタイルシート）もあります。

HTML内部スタイルシート記述方法

<style>
  h1{
     color: red;
     font-size: 16px;
  }
</style>

インラインスタイルシート記述方法

<h1 style="color: red; font-size: 16px;">タイトル</h1>

ただし、現在は文書構造はHTML、装飾は外部スタイルシートを使う場合がほとんどです。これは、HTMLファイルに埋め込んだ場合、指定されたCSSは、指定したページ内でのみ有効となり、例えばヘッダー部分でSPANタグに関する指定を行った場合、このページのSPANタグには指定が反映され、他のページでは反映されないことになります。

同じように要素にインラインスタイルシート（直接HTML内書き込み）で記述すると、そのページのその要素のみのスタイルになり、修正等行う場合非常に時間がかかる原因となるためです。Webページは一回アップしたら終わりではなく、都度修正を行ったり追加をしたりする可能性が高い媒体です。

そのため、運用を考えてCSSを外部ファイルで読み込ませて、一括管理できる方法が一般的です。その上で、特定のページのデザインのみ変更したい場合は、内部スタイルシートを利用します。その場合は、style要素はlink要素より後に書かないといけません。CSSは上から順に読み込んでいくため、内部スタイルシートを先に記述してしまうと、外部CSSで上書きされて読み込まれるためです。

また、スタイルシートをhead内に記述、もしくはインラインスタイルシートで記述すると、ルールが競合した場合、インラインスタイルシートが優先となります。

優先度は

外部スタイルシート＜head内記述＜インラインスタイルシート

となります。

セレクタの種類

CSS3で使えるセレクタは、多くの種類があります。セレクタを使いこなせれば、それだけ細かくスタイルの適用先をコントロールできることになります。

  • タイプセレクタ（要素名を使うセレクタ） 
    P{
  color: red;
}

     

  • グルーピングセレクタ（種類の異なる要素に同じスタイルを使用する場合、セレクタを「，」コンマで区切ってグループ化する） 
    h1,h2,p{
   color: red;
}

     

  • ユニバーサルセレクタ（「*」半角アスタリスクで記述し、すべての要素に適用させます。リセットCSSなどに使われます。） 
    *{
  margin: 0; padding: 0; font-style: normal; font-weight: normal; font-size: 100%; text-decoration: none;
}

     

  • クラスセレクタ（スタイルを要素に関係なく適用するセレクタ） 
    HTML ファイル内記述

<h1 class="red">はじめまして</h1>


CSS　ファイル内記述

.class{
   color: red;
}

    クラスセレクタを使用したい場合、HTMLファイルの要素にクラス属性を記入します。

  • タイプセレクタとの組み合わせ（タイプセレクタにクラスセレクタを組み合わせて使うことで範囲をより限定できます。） 
    h1.red {
   color: red;
}

    要素名.クラス名　で記入します。要素名とクラス名の間には「.」半角ドットが入ります。前後にスペースは記述しません。使える文字は大文字アルファベット、小文字アルファベット、数字、ハイフン（-）、アンダースコア（_）です。大文字と小文字は区別されます。数字とハイフンは先頭文字に使えません。

  • IDセレクタ（HTMLの一個の要素だけに限定してスタイルを適用させるときに使います。） 
    HTML　ファイル

<h2 id="blue">色を青くします。</h2>

CSS　ファイル

#blue {
    color: blue;
}

    IDセレクタは「#」半角シャープとID名の組み合わせで構成されます。使える文字はクラスセレクタと同じです。IDセレクタはクラスセレクタに似ていますが、使用の際の制限があります。

  1. 1つの要素には、ID名は一つしか指定できない。
  2. 1つのHTMLファイル内では、同じIDを繰り返して使えない。

1つのID名は、1つのWebページ内に、1回しか使えません。クラスは、同じページ内に何度でも使えますし、1つの要素に複数のクラスを指定できます。ID属性は、セレクタとしての他に、ページ内リンクのジャンプ先として使うこともできます。

<!doctype html>
<html lang="ja">
　<head>
　<meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="style.css">
<!-- エンコードの指定はutf-8 -->
　<title>Web Design Lesson</title>
　</head>
　<body>

　   <ul>
　    <li>TOP</li>
　    <li><a href="#self">自己紹介</a></li>
 　   <li>問い合わせ</li>
　   </ul>

　　<h1 id="self">はじめまして！</h1>
    <img src="image.png">
    <p>はじめまして、〇〇と申します。<em>HTML</em>を学習しはじめました。</p>
	<p><em>CSS</em>は面白いです。</p>
　  　<table>
     <tr>
       <td>項目</td>
       <td>詳細</td>
     </tr>
     <tr>
       <td>住所</td>
       <td>〒〇〇〇△△△△　　東京都〇〇区1-2-3</td>
     </tr>
     <tr>
       <td>電話番号</td>
       <td>03-××××‐△△△△</td>
     </tr>
    </table>    

　</body>
</html>

上記は、はじめましてのh1要素にid属性をつけ、リスト要素内からページ内にリンクするように記述しています。

また、IDセレクタにも要素名をつけてスタイルを適用できます。

<h1>デザインの勉強</h1>
<p>HTMLの学習</p>
<div id="footer">Copyright mn design</div>


div#footer{
    border-top: dotted 1px #000099;
    padding-top: 0.2em;
}

上記のように記述すると、footerというIDのつけられたdiv要素にのみスタイルが限定されます。他のページでたとえば、p要素にfooterという名前がついていても、p要素には適用されません。

また、Webページの制作では、<div></div>というブロック要素が活用されます。<div> は特に意味は持ちませんが、汎用的なブロック要素として、スタイルシートを適用したり、JavaScfript で操作するのによく用いられます。

同様なタグに <span> がありますが、<div> はブロック要素として、<span> はインライン要素として定義されています。

HTML
<p><span>HTML</span>や<span>CSS</span>の記述はいろいろな要素が関係しています。</p>

CSS
p span{color:red;}

上記の記述でHTMLとCSSの文字色が赤く指定されます。

<div>と<span>はよく出てきますので、CSSやjavascript指定の要素として覚えておきましょう。

疑似クラス

疑似クラスとは、要素の状態別に異なるスタイルを適用するときに使うセレクタです。疑似クラスがよく使われるのはリンクの<a>要素です。

リンクは文書構造上でも、他のページへの遷移を表すため、デフォルトで下線をつけられて区別した表示がされています。クリックされていない「未訪問リンク」とクリックされたことのある「訪問済リンク」など、一つの要素に対して状態によって変化のあるセレクタには、疑似リンクを使ってより見やすいページにする工夫が求められます。

未訪問リンクと、訪問済リンクの色を変えるのは、a要素のセレクタに、追加セレクタで　「:link」（未訪問）「:visited」（訪問済）と記述します。プロパティを区切る際にも使う「：」ですが、疑似クラスの「：」は半角スペースなどを入れません。

HTML側

<ul>
 <li><a href="#">HTMLについて</a></li>
 <li><a href="#self">CSSについて</a></li>
</ul>


CSSファイル

a:link{
 color: red;
}

a:visited{
 color: green;
}

上記は、未訪問は赤、訪問済は緑の表示とするスタイル指定となります。

sample29

ユーザーアクション疑似クラス

リンク要素に対しては、マウスポインタ（カーソル）の動作も状態として判別させて、スタイルを指定することができます。判別されるマウスポインタの状態は

  • :hover　（リンクにマウスポインタが重なったとき）
  • :focus　（リンクを選択したとき）
  • :active　（リンクをクリックしたとき）

疑似クラスを記述する順番は、CSSの後に記述したルールが適用する際の優先順位が高くなるというルールに従わせるには、「a:link」「a:visited」 「a:hover」 「a:focus」 「a:active」の順に記述する必要があります。

u30bbu30ecu30afu30bfu8aacu660e
:rootu6587u66f8u306eu30ebu30fcu30c8u306bu9069u7528
:first-childu3042u308bu8981u7d20u5185u306eu6700u521du306eu8981u7d20u306bu9069u7528
:last-childu3042u308bu8981u7d20u5185u306eu6700u5f8cu306eu8981u7d20u306bu9069u7528
:nth-child(n)u3042u308bu8981u7d20u5185u306eu96a3u63a5u3057u3066u3044u308bu8981u7d20u3092u6700u521du304bu3089u6570u3048u3001nu756au76eeu306eu8981u7d20u306bu9069u7528
nth-last-child(n)u3042u308bu8981u7d20u5185u306eu96a3u63a5u3057u3066u3044u308bu8981u7d20u3092u6700u5f8cu304bu3089u6570u3048u3001nu756au76eeu306eEu8981u7d20u306bu9069u7528
only-childu3042u308bu8981u7d20u5185u3067u5b50u8981u7d20u304cu7279u5b9au306eu8981u7d20u306eu307fu306eu5834u5408u306bu9069u7528
emptyu8981u7d20u5185u304cu7a7au306eu5834u5408u306bu9069u7528
targetu30a2u30f3u30abu30fcu30eau30f3u30afu3067u98dbu3093u3060u5148u306eu8981u7d20u306bu9069u7528
enabledu6709u52b9u306bu3055u308cu3066u3044u308bUIu8981u7d20u306eu3042u308bu8981u7d20u306bu9069u7528
disabledu7121u52b9u306bu3055u308cu3066u3044u308bUIu8981u7d20u306eu3042u308bu8981u7d20u306bu9069u7528
checkedu30c1u30a7u30c3u30afu306eu6709u7121u306eu72b6u614bu306bu3088u308bu8981u7d20u306bu9069u7528
indenterminateu4e0du78bau5b9au72b6u614bu306eu8981u7d20
not(u6761u4ef6)u6761u4ef6u306bu4e00u81f4u3057u306au3044u8981u7d20

Scroll Up