ga-05-c1

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

【 HTML/CSS逆引き辞典 】
CSSの実用的な使い方 「子孫セレクタのサンプル」

class又はタグ名を半角スペースで区切って記述すれば絞り込みになります。CSSを適用する範囲を絞り込むことに使います。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!---====================================
     子孫セレクタノサンプル
======================================-->  
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" 
          href="style-1.css">
    <link rel="stylesheet" 
          href="color-style.css">
</head>
<body>
      <div class="comment-box">
          <div class="box-title">
              コメントボックス
          </div>
              <p> 
              コメントボックスの内容です。
              コメントボックスの内容です。              
              コメントボックスの内容です。
              コメントボックスの内容です。
              コメントボックスの内容です。
              コメントボックスの内容です。  
              </p>  
      </div>
   </body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
     コメント ボックス(comment-box) 
--====================================*/
.comment-box {
    width:200px;
    margin: 30px auto;
    background: white;
    border: solid 1px gray;
}
.comment-box  .box-title {
    font-size: 0.8em;
    background-color: red;
    color:white;
    padding: 0px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.comment-box  p {
    padding: 5px 10px 10px 10px;
    font-size: 0.7em;
    font-weight: bold;
    line-height: 16px;
    color: black;
    margin: 0;
}
        
ワンポイント

class又はタグ名を半角スペースで区切って記述すれば絞り込みになる。

 back
pagetop
 next

CSSをhead 部に
styleタグを用いて
書くサンプル

子孫セレクタ
のサンプル

classを複数記述する
サンプル

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken