【CSS】Webサイト開発で重要なborderの扱い方

そもそもborderとはどういった用途で使われるのでしょうか？

borderは区切りをはっきりさせるために使われます。

つまりレイアウトの際に用いられることが多いのです。

borderを利用することで、そのセクションを強調することも可能です。

これを用いることで、ユーザーにそのセクションを少しでも気にならせることが可能となります。

このジャンルの話は行動経済学にも関係します。

行動経済学にあるよくある話なのですが、

レストランに行って、松、竹、梅の3つの選択肢がある場合、真ん中の選択肢が1番選ばれるというお話です。

この知識を利用することで、自身のサイトでプランを3つ設定して、真ん中のプランにborderなどを加えて強調することができれば、そのプランをユーザーが選択する確率がさらに高まります。

しかし、これらの話はあくまでも確率の話ですので、必ず買う人が自身のサイトに訪れるかについては別の話です。

以上のようにborderにはメリットがあります。

では実際にborderを使ってみましょう。

borderの使い方は非常に簡単です。

以下のコードをCSSファイルのborderをつけたい要素のclassに記述するだけでborderを設定することができます。

blackの部分では色の指定が可能です。2pxとはborderの太さを意味しており、solidはborderのタイプを表しています。

                
border: black 2px solid;
                
              

上記のコードを適応した結果が以下の画像です。

ではUIを良くするためのborderの使い方を説明していきます。

borderの太さが1pxだとどんな印象を与えるでしょうか

若干薄くなりました。

つまりこの状態だと、強調が少し弱いです。

では次に10pxの太さだとどうなるでしょうか

ここまでの太さになるともはや額縁です。

ここまでのレベルで強調させるには、全ての要素に10pxのborderを設定するのではなく、部分的にするのが理想です。

もしこの太さのborderがたくさんあるとこのようなことになります。

こうなってしまうと、どれも強調されていません。

では注目記事だけを10pxにして他を2pxにします。

このように要素の区別することができています。

borderで必要な考え方としては「区別すること」です。

それを実行することで、人の目につきやすくなります。

以上がborderの使い方でした。 borderは要素を区別する役割を持っています。 色を変えることで区別するのも1つの手です。 これからのプログラミング学習を応援しています！

関連記事