【初心者でもわかる】borderは直線を引くだけじゃない！borderを使って出来ること6選+おまけ2つ

どうも7noteです。borderを使って直線を引く以外のできることをまとめました

div {
  border: solid 1px #000;
}

これ以外使ったことない・・・なんてことありませんか？
知ってるようで知らないかもしれない、borderでできることをいろいろまとめました。

「直線以外も引ける」

わりと基本的な事ですが一応。
borderのスタイルをsolid以外に指定すると、点線や波線も引くことができます。

style.css

div {
  border: dotted 1px #000; /* 点線を引く */
  border: dashed 1px #000; /* 破線を引く */
  border: double 1px #000; /* 二重線を引く */
}

「曲線も引ける」※波線はちょっと難しい

当たり前の人には当たり前かもしれませんが、border-radiusと組み合わせることで曲線を作れます

style.css

div {
  border-top: solid 1px #000;  /* 線を引く（※borderを4方向に指定すれば円になる） */
  border-radius: 50%;          /* 曲線にする */
}

「立体感のある線を引く」

擬似要素を使ったり、影と組み合わせて立体感のある線を引くことができます。
※見本画像は背景に(background: #666;)を入れています。

「影を使った例」

style.css

div {
  border-bottom: solid 1px #333;
  box-shadow: 0 1px 0 #ccc;
}

「疑似要素を使った例」

style.css

div {
  position: relative;
}
div::after {
  content: '';
  width: 100%;
  border-bottom: solid 1px #333;
  box-shadow: 0 1px 0 #ccc;
  position: absolute;
  left: 0;
  bottom: 0;
}

「三角形を作る」

三角形も簡単に作れます。この三角形を使って吹き出しを作ったりなんかもよくある手法ですね。
三角形ジェネレーターがあるので、そのようなWEBツールを使うのがオススメ！

style.css

div {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #007bff transparent;
}

「三角形以外にも台形とかも作れます」

style.css

div {
  width: 20px;  /* ここの値で調整可能 */
  height: 20px; /* ここの値で調整可能 */
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #007bff transparent;
}

「矢印を作る」

borderの上と右を作成して、45度回転させればよくボタンについてる矢印も作れます。

style.css

div {
  width: 20px;
  height: 20px;
  border-top: 1px solid #000;
  border-right: 1px solid #000;
  transform: rotate(45deg);
}

「おまけ」

できそうでできない、グラデーションのborderを作る

これはborderを使っては再現ができません。
backgroundを使うことで表現できます。

style.css

.div{
    width: 100%;
    height: auto;
    padding: 0;
    text-align: center;
    border-left: 2px solid #43C6AC;
    border-right: 2px solid #d9e653;
}
div::before,
div::after{
    content: "";
    display: block;
    height: 2px;
    background: linear-gradient(to right, #43C6AC 0%, #d9e653 100%);
}

要素の占有範囲を確認する

どの要素がどこに表示されているのかわからなくなったり、表示場所なんかが思ってた通りにならない時に、とりあえずborderやbackgroundなどを指定して、状況を確認するのに使います。

私自身も始めたての頃は、よくわからなくなったらとりあえずborderを付けて要素の現在置を確認するようにしていました。

※borderの分だけ要素の横幅が長くなるのでピタピタのデザインだとborderが原因で崩れることなどもあるので注意！

参考：
http://sdora.sub.jp/blog/?p=511
http://apps.eky.hk/css-triangle-generator/ja
https://www.infocrest.co.jp/blog/category/tips/442/

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ