CSSのborderにはいろいろな種類があります。
見出しに使ったり文字の強調にも使ったり、ページ全体をデザインする上でも重要なものがCSSのborderになります。
これから紹介するものは基本的なものからどの場面で使うの？と言ったものもありますが、基本さえ覚えてしまえば色や太さを自由に変えて、オリジナルのborderを作ることもできますのでぜひ挑戦してみてください！
もちろんコピペOKですよ！
見やすくするためほとんどの例にpadding(余白)を設定してあります。
borderの種類いろいろ
ボーダースタイル「solid」を使った基本となるborderです。
ボーダースタイル「solid」を使用。
全ての囲い線の色を変えたい場合は、一つ一つに太さや色を指定してあげる必要があります。
ボーダースタイル「double」を使用。
ボーダースタイル「groove」を使用。
立体的にくぼんだように表示する線です。
ボーダースタイル「ridge」を使用。
立体的に隆起したように表示する線です。
ボーダースタイル「inset」を使用。
上と左がペアになり、下と右がペアとなって違う色を表示します。
ボーダースタイル「outset」を使用。
上のinsetと逆のパターンです。
ボーダースタイル「dashed」を使用。
ボーダースタイル「dotted」を使用。
border+背景色
borderで囲んで背景に色を設定しました。文字色も「color」で変更可能です。
上下にborderを設定しています。
上下にボーダースタイル「double」を使用していますが、上下で線幅が違います。
border+背景色+影
ぼやっとした影を付けて立体感を出しました。
角に丸みをもたせる「border-radius」と、下にborderを指定すると立体感のあるボタン風ができます。
背景の内側にborder
borderとbox-shadowの組み合わせです。
上と同じものですが、周りをぼかしてみました。
番外編
背景と同じ色のぼかしを周り全体に行いました。
上のものに追加して、真ん中に白を指定してぼかし線のようにしました。
「box-shadow」と「border-radius」を上手に使うと、複雑な形も作れます。
右端が徐々に透明になっているデザインです。紹介してる線の色は緑色の蛍光色ですが、お好みで色を変えてもいいですね。
左のborderの半分だけに色を指定しています。
最後に
borderの組み合わせでいろいろなものができました。数字や色を変えるだけでたくさんのデザインが可能です。コピペはもちろん、自分オリジナルのものをぜひ作ってみてください。
この記事へのコメントはありません。