ga-05-I2

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

【 HTML/CSS逆引き辞典 】
ボーダーの活用2 (コメントボックス)

ボーダーを使ったコメントボックスを3種類用意しました。

【サンプル画像】

画像

※ タイトル付きのコメントボックスのサンプルは、基本の基本の 「12.構造と見た目を分ける」の「3.styleとclassを組み合わせて記述するサンプル」を参照してください。  


【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
ボーダーを使ったコメントボックス(3種類)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <div class="box"
         style="background: aliceblue;
                border: dashed 3px skyblue;">
        <p>コメントボックスです。コメントボックスです。
        コメントボックスです。コメントボックスです。
        コメントボックスです。コメントボックスです。
        </p>
    </div>
    <div class="box"
         style="background: lightcyan;
                border-bottom: solid 4px lavender;
                box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
                border-radius: 9px;">
        <p>コメントボックスです。コメントボックスです。
        コメントボックスです。コメントボックスです。
        コメントボックスです。コメントボックスです。
        </p>
    </div>
    <div class="box"
         style="background: aliceblue;
                border-top: double 8px darkblue;
                border-bottom: double 8px darkblue;">
        <p>コメントボックスです。コメントボックスです。
        コメントボックスです。コメントボックスです。
        コメントボックスです。コメントボックスです。
        </p>
    </div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*=====================================
ボーダーを使ったコメントボックス3種類
--====================================*/
.box {
    padding: 0.5em 1em;
    margin: 3em auto;
    width:200px;
    font-size: 12px;
    font-weight: bold;
}
.box p {
    margin: 0; 
    padding: 0;
}
        
 back
pagetop
 next

ボーダーの活用1
(タイトル)

ボーダーの活用2
(コメントボックス)

ボーダーによる
三角形の作り方

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