ga-05-c2

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

【 HTML/CSS逆引き辞典 】
CSSの実用的な使い方
「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

子孫セレクタ
のサンプル

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

文字色の指定方法

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