ga-05-l1

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

【 HTML/CSS逆引き辞典 】
構造と見た目を分ける方法
class名を複数記述するサンプル

装飾をスタイルシートに登録して、HTML記述の折にスタイルシートに登録したclass名を複数記述します。class名は、半角のスペースを空けて何個でも書くことができます。

下記サンプルは6種類しかありませんが、サンプルのCSSに登録されているclass名をすべて使うと432種類のタイトルを作ることができます。

枠線の色(3種類)×タイトルの色(4種類)×背景色(36種類)=432種類

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
      構造と見た目を分ける
     classを複数記述するサンプル
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title>構造と見た目を分ける</title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>

<div class="f-sub-title
     border-darkblue 
     moji-color-darkblue
     bg-blue1">
    タイトルサンプル1<br><span style="font-size: 18px">
(枠線:darkblue、文字:darkblue、背景色:blue1)</span>
</div>
               <br>
<div class="f-sub-title 
            border-darkblue moji-color-darkblue
            bg-blue3">
    タイトルサンプル2<br><span style="font-size: 18px">
(枠線:darkblue、文字:darkblue、背景色:blue3)</span>
</div>
               <br>
<div class="f-sub-title 
            border-darkblue 
            moji-color-white
            bg-blue6">
    タイトルサンプル3<br><span style="font-size: 18px">
(枠線:darkblue、文字:white、背景色:blue6)</span>
</div>
               <br>
<div class="f-sub-title 
            border-black 
            moji-color-black
            bg-yellow1">
    タイトルサンプル4<br><span style="font-size: 18px">
(枠線:black、文字:black、背景色:yellow1)</span>
</div>
               <br>
<div class="f-sub-title 
            border-black
            moji-color-black
            bg-yellow3">
    タイトルサンプル5<br><span style="font-size: 18px">

    (枠線:black、文字:black、背景色:yellow3)</span>
</div>
               <br>
<div class="f-sub-title 
            border-black
            moji-color-black
            bg-yellow6">
    タイトルサンプル6<br><span style="font-size: 18px">

    (枠線:black、文字:black、背景色:yellow6)</span>
</div>
               <br>
</body>
</html>
        
ワンポイント

枠線  : darkblue
文字色 : darkblue
背景色 : blue1

ワンポイント

blue1~blue6は、青色の薄い色から濃い色に順番に付けた名前。
style sheetに登録してある。

CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
    構造と見た目を分ける
  classを複数記述するサンプル
--====================================*/

/*--====================================
    タイトルの構造(骨組み)
--====================================*/
.f-sub-title {
   width: 500px;
   font-size: 24px;
   font-weight: bold;
   text-align: center;
   margin: 0 auto;
   padding: 0.4em 0.5em;
}
/*--====================================
    タイトルの装飾(枠線の色)
--====================================*/
.border-black{border:solid 3px black;}
.border-darkblue{border:solid 3px darkblue;}
.border-red{border:solid 3px red;}
/*--====================================
    タイトルの装飾(タイトル文字色)
--====================================*/
.moji-color-red{color:red;}
.moji-color-black{color:black;}
.moji-color-white{color:white;}
.moji-color-darkblue{color:darkblue;}
/*--====================================
    タイトルの装飾(タイトル背景色)
--====================================*/
/*--====================================
     36色背景色カラーコード
--====================================*/
.bg-red1 {background-color: #FFE4E1;}
.bg-red2 {background-color: #ffcccc;}
.bg-red3 {background-color: #ffb6c1;}
.bg-red4 {background-color: #ff99cc;}
.bg-red5 {background-color: #ff6699;}
.bg-red6 {background-color: #ff0000;}

.bg-green1 {background-color: #ccffcc;}
.bg-green2 {background-color: #90ee90;}
.bg-green3 {background-color: #32cd32;}
.bg-green4 {background-color: #3cb371;}
.bg-green5 {background-color: #008000;}
.bg-green6 {background-color: #006400;}

.bg-blue1 {background-color: #e0ffff;}
.bg-blue2 {background-color: #aeeeee;}
.bg-blue3 {background-color: #87ceeb;}
.bg-blue4 {background-color: #1e90ff;}
.bg-blue5 {background-color: #0066ff;}
.bg-blue6 {background-color: #191970;}

.bg-yellow1 {background-color: #ffffe0;}
.bg-yellow2 {background-color: #fffacd;}
.bg-yellow3 {background-color: #ffffbb;}
.bg-yellow4 {background-color: #ffff99;}
.bg-yellow5 {background-color: #ffff66;}
.bg-yellow6 {background-color: #ffff00;}

.bg-mono1 {background-color: #ffffff;}
.bg-mono2 {background-color: #e8e8e8;}
.bg-mono3 {background-color: #d0d0d0;}
.bg-mono4 {background-color: #a0a0a0;}
.bg-mono5 {background-color: #757575;}
.bg-mono6 {background-color: #000000;}

.bg-brown1 {background-color: #ffe4c4;}
.bg-brown2 {background-color: #ffd700;}
.bg-brown3 {background-color: #ff9900;}
.bg-brown4 {background-color: #d2691e;}
.bg-brown5 {background-color: #b22222;}
.bg-brown6 {background-color: #800000;}

/*--====================================
     22色背景色カラーネーム
--====================================*/
.bg-mistyrose {background-color: mistyrose;}
.bg-pink {background-color: pink;}
.bg-red {background-color: red;}
.bg-lightyellow {background-color: lightyellow;}
.bg-yellow {background-color: yellow;}
.bg-gold {background-color: gold;}
.bg-orange {background-color: orange;}
.bg-tomato {background-color: tomato;}
.bg-lightgreen {background-color: lightgreen;}
.bg-limegreen {background-color: limegreen;}
.bg-green {background-color: green;}
.bg-darkgreen {background-color: darkgreen;}
.bg-lightcyan {background-color: lightcyan;}
.bg-lightblue {background-color: lightblue;}
.bg-deepskyblue {background-color: deepskyblue;}
.bg-blue {background-color: blue;}
.bg-darkblue {background-color: darkblue;}
.bg-white {background-color: white;}
.bg-whitesmoke {background-color: whitesmoke;}
.bg-lightgray {background-color: lightgray;}
.bg-gray {background-color: gray;}
.bg-black {background-color: black;}
        
 back
pagetop
 next

当ホームページで
作成したテーブル
のサンプル

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

styleとclassを
組合わせて記述する
サンプル

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