• Home
  • Web制作
  • 【CSS枠線活用術】WebデザインをワンランクUPさせる鉄板テクニックを紹介

【CSS枠線活用術】WebデザインをワンランクUPさせる鉄板テクニックを紹介

schedule update
Tags: CSS

はじめに：CSS枠線とは？

Webサイトをデザインする上で、欠かせない要素の一つが「枠線」です。CSS枠線は、HTML要素の周りに線を描くことで、要素を視覚的に区切ったり、強調したりすることができます。

例えば、

  • 表のセルを区切る
  • 見出しを目立たせる
  • ボタンに立体感を出す

など、様々な場面で活用されています。

CSS枠線の基本：枠線の種類と指定方法

CSS枠線は、いくつかのプロパティを組み合わせて指定します。まずは、基本となるプロパティを押さえましょう。

枠線の太さ：border-width

border-widthプロパティでは、枠線の太さを指定します。

  • 単位：px（ピクセル）、em、remなど
  • 指定例：border-width: 1px;

枠線の種類：border-style

border-styleプロパティでは、枠線の種類を指定します。

  • 種類：
    • solid（実線）
    • dashed（破線）
    • dotted（点線）
    • double（二重線）
    • groove（溝線）
    • ridge（隆起線）
    • inset（彫り込み線）
    • outset（浮き出し線）
  • 指定例：border-style: solid;

枠線の色：border-color

border-colorプロパティでは、枠線の色を指定します。

  • 指定方法：
    • 色名：red、blueなど
    • 16進数カラーコード：#ff0000、#0000ffなど
    • RGB値：rgb(255, 0, 0)、rgb(0, 0, 255)など
  • 指定例：border-color: red;

枠線を一括指定：border

上記のborder-width、border-style、border-colorプロパティは、borderプロパティで一括指定することも可能です。

  • 指定例：border: 1px solid red;

ワンランク上のデザインを実現する応用テクニック

基本を踏まえた上で、さらにCSS枠線を活用して、Webデザインをより魅力的に仕上げるテクニックをご紹介します。

角丸にする：border-radius

border-radiusプロパティを使用すると、枠線の角を丸くすることができます。

  • 単位：px（ピクセル）、em、rem、%など
  • 指定例：border-radius: 5px;
  • ポイント：値を大きくすると、より丸みを帯びたデザインになります。

片側だけの枠線を指定する

border-top、border-right、border-bottom、border-leftプロパティを使用することで、上下左右それぞれの枠線を個別に指定できます。

  • 指定例：border-bottom: 1px solid #ccc;

枠線を使ったデザイン実例

ここでは、実際にCSS枠線を用いたデザイン例をいくつかご紹介します。

角を丸くしたボタン

Sample

<style>
  .rounded-button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 5px;
  }
</style>
<a href="#" class="rounded-button">Sample</a>

枠線に影をつけたボタン

Sample

<style>
  .shadow-button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border: none;
    box-shadow: black 4px 4px;
  }
</style>
<a href="#" class="shadow-button">Sample</a>

ホバー時に枠線の色を変えるボタン

Sample

<style>
  .hover-button {
    padding: 10px 20px;
    background-color: #4CAF50;
    color: white;
    text-decoration: none;
    border: solid 2px black;
  }
  .hover-button:hover {
    border-color: red;
  }
</style>
<a href="#" class="hover-button">Sample</a>

まとめ

CSS枠線は、Webデザインにおいて非常に重要な役割を担っています。基本的な使い方をマスターするだけでなく、応用テクニックを駆使することで、より洗練されたデザインを実現することができます。ぜひ、本記事を参考にして、CSS枠線を活用してみてください。

関連記事