ga-05-I1

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

【 HTML/CSS逆引き辞典 】
ボーダーの活用1(タイトル)

ボーダーを使ったタイトル画像を5種類用意しました。

【ボーダーを使ったタイトルのサンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
  ボーダーを使ったタイトルデザイン
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <div style="width:520px;
                height:560px;
                margin:30px;auto;
                padding: 20px;
                border: solid 1px black;
                text-align: center;
                line-height:60px;
                font-weight: bold;
                ">
        <h2 class="title-sample-a">ボーダーを使った
        タイトルサンプルーA
        </h2>
        <h2 class="title-sample-b">ボーダーを使った
        タイトルサンプルーB
        </h2>
        <h2 class="title-sample-c">ボーダーを使った
        タイトルサンプルーC
        </h2>
        <h2 class="title-sample-d">ボーダーを使った
        タイトルサンプルーD
        </h2>
        <h2 class="title-sample-e">ボーダーを使った
        タイトルサンプルーE
        </h2>
    </div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
   ボーダーを使ったタイトルサンプル
--====================================*/
.title-sample-a{
    color: darkblue;/*文字色*/
    border: solid 3px darkblue;/*線色*/
    background-color: lightyellow;
    padding: 0.5em;/*文字周りの余白*/
}
.title-sample-b{
    color: darkblue;/*文字色*/
    border: solid 3px darkblue;/*線色*/
    padding: 0.5em;/*文字周りの余白*/
    border-radius: 0.5em;/*角丸*/
}
.title-sample-c{
    color: darkblue;/*文字色*/
    border-top: solid 5px darkblue;/*線色*/
    border-bottom: solid 5px darkblue;/*線色*/
    padding: 0.5em;/*文字周りの余白*/
}
.title-sample-d{
     padding: 0.5em;/*文字周りの余白*/
     color: #010101;/*文字色*/
     background: #eaf3ff;/*背景色*/
     border-bottom: solid 5px #516ab6;/*下線*/
}
.title-sample-e{
    padding: 0.4em 0.5em;/*文字の上下 左右の余白*/
    color: #494949;/*文字色*/
    background: #f4f4f4;/*背景色*/
    border-left: solid 7px #7db4e6;/*左線*/
    border-bottom: solid 5px gray;/*下線*/
}
        
 back
pagetop
 next

パソコン画面から
画像の切り取り

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

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

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