ga-05-l2

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

【 HTML/CSS逆引き辞典 】
構造と見た目を分ける方法
styleとclassを組み合わせて 記述するサンプル

ボックスの細かい設定(枠線、ボックスの影、文字の大きさ、文字の太さ、文字間隔等)は、classで記述し、変化させたい項目(ボックスの幅、ボックス全体の背景色、表題の背景色・文字色)は、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

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

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

文字及びボックスの
センタリング

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