ga-04-12

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

12.構造と見た目を分ける

目   次

1.構造(枠組み)と見た目(装飾)を分ける意義

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

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



  1.構造(枠組み)と見た目(装飾)を分ける意義

構造(枠組み)と見た目(装飾)を分けることによって、コード記述を最小限にして、多様な表現ができます。特にタイトル、見出し、コメントボックス、吹き出し、囲み枠、大きな矢印等の共通に使える部品(module)は、HTMLによる簡単な記述で装飾を変更したうえで利用できます。

構造(枠組み)と見た目(装飾)を分ける2つの方法を紹介します。
(1) class名を複数記述する
(2) styleと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;}
        
  
  3.styleとclassを組み合わせて記述するサンプル

ボックスの細かい設定(枠線、ボックスの影、文字の大きさ、文字の太さ、文字間隔等)は、CSSで記述し、変化させたい項目(ボックスの幅、ボックス全体の背景色、表題の背景色・文字色)は、HTML記述時にstyleで指定します。また、配置場所は絶対アドレスをstyleで指示することにより、HTML記述時に自由に変更できます。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!---====================================
     構造と見た目を分ける
 styleとclassを組み合わせて記述するサンプル
======================================-->
<html>
<head>
    <meta charset="utf-8">
    <title>styleとclassを組み合わせて記述するサンプル
    </title> 
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
<!---====================================
   コメント ボックス 枠
======================================-->
<div class="comment-box-waku"> 
<!---====================================
   コメント ボックス(green)
======================================-->
<div class="comment-box"
     style="top:  40px;
            left: 40px;
            width: 150px;
            background-color: lightgreen;">
    <div class="comment-box-title"
         style="background-color: darkgreen;
         color:white">
    ワンポイント
    </div>
    <p>
    コメントボックスのサンプル。コメントボックスのサンプル。
    コメントボックスのサンプル。コメントボックスのサンプル。
    </p>                
</div>
<!---====================================
   コメント ボックス(black)
======================================-->     
<div class="comment-box"
     style="top:  0px;
            left: 270px;
            width:220px;
            background-color: white;">
    <div class="comment-box-title"
         style="background-color: black;
         color:white">
    ワンポイント
    </div>
    <p>
    コメントボックスのサンプル。コメントボックスのサンプル。
    コメントボックスのサンプル。コメントボックスのサンプル。
    </p>                  
</div>
<!---====================================
   コメント ボックス(yellow)
======================================-->     
<div class="comment-box"
     style="top: 170px;
            left: 220px;
            width:300px;
            background-color: lightyellow;">
    <div class="comment-box-title"
         style="background-color: red;
         color:white">
    ワンポイント
    </div>
    <p>
    コメントボックスのサンプル。コメントボックスのサンプル。
    コメントボックスのサンプル。コメントボックスのサンプル。
    コメントボックスのサンプル。コメントボックスのサンプル。
    </p>                
</div>
<!---====================================
   コメント ボックス(blue)
======================================-->     
<div class="comment-box"
     style="top:  320px;
            left: 100px;
            width:350px;
            background-color: lightcyan;">
    <div class="comment-box-title"
         style="background-color: darkblue;
         color:white">
    ワンポイント
    </div>
    <p>
    コメントボックスのサンプル。コメントボックスのサンプル。
    コメントボックスのサンプル。コメントボックスのサンプル。
    コメントボックスのサンプル。コメントボックスのサンプル。
    </p>                 
</div>
</div>
<!-- コメントボックスの枠終了 -->     
</body>
</html>
        
ワンポイント

★ボックス全体の指定
 topからの位置 : 40px
 leftからの位置 : 40px
 ボックスの幅 : 150px
 背景色    : 薄緑
★表題の指定
 背景色    : 濃緑
 文字色    : 白

CSSコード(style-1.css)
/*--====================================
  コメント ボックス(comment-box)のサンプル
--====================================*/
@charset "utf-8";
.comment-box-waku {
 margin: 1em auto;
 padding: 1em 1em;
 width: 520px;
 height:450px;
 border: 1px solid gray; 
 position: relative;
}
/*--====================================
     コメント ボックス(comment-box) 
--====================================*/
.comment-box {
    margin: 2em 0;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.32);
    position:  absolute;
}
.comment-box  .comment-box-title {
    font-size: 0.8em;
    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;
    margin: 0;
}
        
ワンポイント

絶対アドレスによる配置を行うときは、親要素に「position:  relative]を指定しなければならない。

ワンポイント

絶対アドレスによる配置を行うときは、対象要素に「position:  absolute]を指定しなければならない。

 back
pagetop
 next

表作成(テーブル)

構造と見た目を分ける

レイアウトの基本

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