ga-04-07

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

7.枠線(ボーダー)の活用

目   次

1.ボーダーの基本

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

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

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

  1.ボーダーの基本

borderは枠線を引くCSSのプロパティです。タイトル、目次、コメントボックス、下線、他で使用します。

1.一括指定 ・・・・・・・・ border
線の種類、線の幅、線の色を一括指定します。但し、線の一部(例えば、上線等)を変更することはできません。線の一部を変更するにはborderの個別プロパティ(border-top等)を使います。

【ボーダーの一括指定】

画像

2.線の種類(主な4種類)

3.ボーダーの個別指定

 ※書き方は、一括指定と同じです。

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

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

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

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
  ボーダーを使ったタイトルデザイン
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <div class="container">
        <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";
/*--====================================
   ボーダーを使ったタイトルサンプル
--====================================*/
.container{
     width:520px;
     height:560px;
     margin:30px;auto;
     padding: 20px;
     border: solid 1px black;
     text-align: center;
     line-height:60px;
     font-weight: bold;
}
.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;/*下線*/
}
        
  
  3.ボーダーの活用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 comment-box-a">    
        <p>コメントボックスです。コメントボックスです。
            コメントボックスです。コメントボックスです。
            コメントボックスです。コメントボックスです。
        </p>
    </div>
    <div class="box comment-box-b">    
        <p>コメントボックスです。コメントボックスです。
            コメントボックスです。コメントボックスです。
            コメントボックスです。コメントボックスです。
        </p>
    </div>
    <div class="box comment-box-c">    
        <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;
}
.comment-box-a{
    background: aliceblue;
    border: dashed 3px skyblue;
}
.comment-box-b{
    background: lightcyan;
    border-bottom: solid 4px lavender;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
}
.comment-box-c{
    background: aliceblue;
    border-top: double 8px darkblue;
    border-bottom: double 8px darkblue;
}
        
  
  4.ボーダーによる三角形の作り方

当ホームページのトップに戻るボタンとページ移動ボタンの三角形はボーダーによって作られています。

<ステップ1>
太い線のボーダーを作り、上下左右のボーダーの色を変えます。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
 ボーダーを使った三角形の作り方(ステップ1)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-1.css">
</head>
<body>
    <div class="d-center">
        <p class="delta">
        </p>
    </div>
</body>
</html>
        
CSSコード(style-1.css)
@charset "utf-8";
/*--====================================
 ボーダーで三角形を作る step1
--====================================*/
.delta{
  width: 200px;
  height:200px;
  margin: 30px auto;      
  border-top: 20px solid red;
  border-right: 20px solid green;
  border-bottom: 20px solid darkblue;
  border-left: 20px solid cyan;
}
        

<ステップ2>
ボーダーの幅と高さをZEROに変更します。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
 ボーダーを使った三角形の作り方(ステップ2)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-2.css">
</head>
<body>
    <div class="d-center">
        <p class="delta">
        </p>
    </div>
</body>
</html>
        
CSSコード(style-2.css)
@charset "utf-8";
/*--====================================
   CSSで三角形を作る step2
--====================================*/
.delta{
  width: 0px;
  height:0px;
  margin: 30px auto;   
  border-top: 20px solid red;
  border-right: 20px solid green;
  border-bottom: 20px solid darkblue;
  border-left: 20px solid cyan;
}
        

<ステップ3>
必要の無い三角形を透明にします。

【サンプル画像】

画像

【サンプル コード】
HTMLコード
<!DOCTYPE html>
<!--====================================
 ボーダーを使った三角形の作り方(ステップ3)
=====================================-->
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="style-3.css">
</head>
<body>
    <div class="d-center">
        <p class="delta">
        </p>
    </div>
</body>
</html>
        
CSSコード(style-2.css)
@charset "utf-8";
/*--====================================
   ボーダーで三角形を作る step3
--====================================*/
.delta{
  width: 0px;
  height:0px;
  margin: 30px auto;
  border:20px solid transparent;
  border-bottom:20px solid darkblue;
}
        

transparent : 透明にする

 back
pagetop
 next

文字(テキスト)
の装飾

枠線(ボーダー)
の活用

画像の貼付け

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