2019/11/05CSSのみでデザインをする時に多く使用されるborderプロパティの基本的な使い方を初心者向けに解説します。今回は見出しやボタンなどborderを使用したデザイン例も用意しましたので制作の参考にしてみてください。CodePenで公開されているCSSボーダーのデザインのアイデアもピックアップしましたので合わせてご覧ください。プロパティを半角スペースで区切り一括指定(ショートハンド)します。線種・太さ・カラーを記述する順番は自由で、必要ないプロパティは省略することもできます。(省略したプロパティの値は初期値となります。使用することが多いと思いますが、破線や立体的なスタイルもあります。thick(太い)でも指定することができます。キーワードでの指定はブラウザによって線の太さの見え方が異なります。(border-color)は16進数(#000000)かカラーネーム(color)で指定します。下図は上下左右のカラーを変えた例です。/*枠線(左部)指定*/}CSSボーダーのデザイン例CSSのみでデザインする際に使用されるborderの使い方の例を紹介します。下線border-bottomを使用して立体感のあるCSSボタンにしたデザイン例。none;を消しボタンの押しこみを表現。文章中にある別記やポイントなど、テキスト領域のデザイン例。CSSの疑似要素を使用しラベル(POINT)を左上に配置。8px;}その他にCSSだけで三角・矢印を作るときに、borderを使用しデザインすることができますので下記記事も合わせてご覧ください。画像を使わずにCSSだけで三角・矢印を作る方法design.webclips.jp/css-arrow/CSSボーター制作のアイデアコードコミュニティサイトCodepenで公開しているborderを使用したデザインのアイデアから気になったものをピックアップしました。様々なborderの使い方がありますので参考にしてみてください。CodePen.borderといっても枠線だけでなくアイデア次第では、様々なデザインで活用することができますので参考にしてみてください。以上、border(ボーダー)の基本的な使い方の解説でした。