ga-04-04

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

4.CSSの書き方 (実用的サンプル)

目   次

1.子孫セレクタのサンプル

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



  1.子孫セレクタのサンプル

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

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!---====================================
     子孫セレクタのサンプル
======================================-->  
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" 
          href="style-1.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又はタグ名を半角スペースで区切って記述すれば絞り込みになる。

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

複数のclassをセレクタに適用することによって多様な表現を可能とします。書き方はclassを半角スペースで区切ります。classは何個書いても良いです。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
    classの複数指定のサンプル
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <link rel="stylesheet" 
          href="style-1.css">
</head>
<body>
    <div class="box border-orange bg-lightyellow color-red">
        <h1>class複数指定の練習です</h1>
    </div>     
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
    classを複数記述するサンプル
--====================================*/
.box {
    width: 440px; 
    height: 90px;
    margin: 60px auto;  
    text-align: center;  
}
.border-orange{
    border: double 10px orange;
}
.bg-lightyellow{
    background: lightyellow;
}
.color-red{
    color:red;
}
        
ワンポイント

border、background、colorに沢山の色を設定しておくことにより多様な表現が可能となる。

 back
pagetop
 next

CSSの基本

CSSの書き方
(実用的サンプル)

文字色と背景色

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