Google検索エンジン

トップページ » スタイルシート入門講座 » CSSセレクタの書式、クラス・IDの指定方法

CSSセレクタの書式、クラス・IDの指定方法

  • セレクタの書式については、「セレクタ・擬似クラス・擬似要素の一覧」でも確認できます。 以下の3つの書式は、極めて使用頻度が高いと思いますので、より具体的な例を挙げて詳しく説明します。


    ■要素型セレクタ（書式：要素名）

    要素型セレクタを記述すると、要素のスタイルを変化させることができます。 例えば、「<em>」には、文字列を斜体表示する機能がありますが、例のように「background-color」などのプロパティをCSSに記述することで、要素本来の機能に追加して装飾されます。

    CSSファイル記述例 
    em {
	background-color:#CCCC00;
	color:#FF3300;
}
    HTMLファイル記述例
    <em>１．「要素名」</em>
    Webページの表示
    １．「要素名」

    ■classセレクタ（書式：要素名.クラス名）

    ブロック要素「div」は、「id」属性や「class」属性を指定しないで、HTMLファイルに記述しても意味を成しません。 例のようにCSSプロパティ記述して、「class」属性を指定すると、スタイルシートに記述しているプロパティどおりに整形されて表示されます。

    CSSファイル記述例 
    div.testA{
	font-style:italic;
	font-weight:bold;
	text-align:right;
	background-color:#FFCCCC;
	width:400px;
}
    HTMLファイル記述例
    <div class="testA">２．「要素名.クラス名」</div>
    Webページの表示
    ２．「要素名.クラス名」

    ■idセレクタ（書式：要素名#id名）

    idセレクタの書式は、ピリオド「.」がシャープ「#」に変わっただけで、基本的な考え方はclassセレクタと同じです。 ただし、HTMLファイルに同じclass属性のdivタグを複数記述しても構いませんが、同じid属性のdivタグは重複して記述しないようにします。 HTMLファイル内で、divタグのid値は一意となるようにします。

    CSSファイル記述例 
    div#testB{
	font-size:150%;
	font-weight:bold;
	text-align:center;
	background-color:#FFCCFF;
	width:500px;
}
    HTMLファイル記述例
    <div id="testB">３．「要素名#id名」</div>
    Webページの表示
    ３．「要素名#id名」
スタイルシート入門講座
it-manual.comのウェブサイト
書籍の紹介
  • フェイスブック 若き天才の野望 (5億人をつなぐソーシャルネットワークはこう生まれた)
    フェイスブック 若き天才の野望
    発売：2011/01/13
    定価：1,890円
    著者：デビッド・カークパトリック
    出版：日経BP社
    内容：ユーザー数が5億人を超え、会社の時価総額が2兆円を超え、グーグルを驚かす存在となった、フェイスブック。同社を率いるマスコミ嫌いのCEO、マーク・ザッカーバーグからの信頼を勝ち得たベテラン記者が、徹底取材からフェイスブックの真実を初めて明かします。
  • もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
    もし高校野球の女子マネージャーがドラッカーの『マネジメント』を読んだら
    発売：2009/12/04
    定価：1,680円
    著者：岩崎 夏海
    出版：ダイヤモンド社
    内容：ドラッカーとはピーター・ドラッカーのことで、経営学者・社会学者です。真面目な本ではなく、マネジメントはもちろん経済やビジネスの参考にはなりません。突拍子のないことが書かれているので、息抜きに読んでみると面白いです。
ネットショップ構築サービス
  • カラーミーショップ
    ネットショップ開業に必要な機能が全て揃っており、初めての開業をトータルで支援します。もちろんモバイルショップにも対応しており、さらにショップブログも付いてきます。利用開始から30日間はお試し期間なので、安心して利用できます。
  • ショップサーブ
    高機能のショッピングカートが標準装備されたネットショップ向けレンタルサーバーを提供してます。顧客管理、在庫管理、受注管理、ポイントシステム、アフィリエイト対応などネットショップの開店、運営、集客の機能が全て揃っています。既に他社のサーバーを利用している人も、ショッピングカートの機能を利用することが可能です。本格的にネットショップを開業したい方におすすめです。
  • レンタルショッピングカートXcart
    商品管理や在庫管理なども簡単操作で、ネットショップ運営をトータルサポートします。携帯ショップにも対応しており、パソコンと同じURLで携帯ショップも自動生成できます。決済は、クレジット、コンビニ、ネット銀行、電子マネーに対応してます。利用開始から30日間はお試し期間なので、安心して利用できます。
  • ワイズカート
    会員管理、ポイント管理、プレゼントキャンペーン、メルマガなど、高機能なショッピングカートです。テンプレート選択でもネットショップが出来るから初心者でも簡単です。
  • レンタルカートe-shopsカート2
    e-shopsカート２は初心者の方から繁盛店まで多数の導入実績を誇ります。初めてのネットショップでも簡単にショッピングサイトを作成できます。プラグイン対応のホームページ・ビルダーでショッピングカートの設置も簡単です。