[超初心者向け] border styleをsolidにする~他のsytleとの比較も

こんにちは! CSSで学んだことをまとめています!

今回の記事では、border styleをsolidにするサンプルコードをまとめたいと思います。

また理解を深めるために、solid以外のborder styleについてもまとめておきます。

※本記事の内容

  • solidの意味と使い方
  • 他のスタイルの使い方のサンプル(double,groove,ridge,inset,outset,dashed,dotted)

ではさっそく始めていきましょう!

最短1ヶ月でWebエンジニアに転職できる無料のプログラミングスクールならGEEK JOBキャンプ・スピード転職コース(完全無料)↓↓

border styleをsolidすると

border styleをsolidにすると、枠線を作ることができます。

書き方は、CSSファイルに

もしくは、

borderの色や幅をまとめて指定する

という書き方ができます。

border styleをsolidするサンプルプログラム

では実際にサンプルとして、border styleがsolidなボタンを作ってみましょう!

まずHTMLファイルを作ります。(index.html)

次にCSSファイルにボタンのデザインをしていきます。(main.css)

すると、以下のようになります。


  • 枠線が1本線(solid)
  • 枠線の幅が1px
  • 色が、rgb(0, 196, 204)

シンプルですね。

ここまでborder styleのsolidを扱ってきましたが、CSSではsolid以外にも様々な枠線のデザインを作ることができます。

一緒に確認していきましょう〜。

double

border-style: double;

groove

border-style: groove;

ridge

border-style: ridge;

inset

border-style: inset;

outset

border-style: outset;

dashed

border-style: dashed;

dotted

border-style: dotted;

まとめ

以上です!

本記事ではborder styleをsolidにする方法をまとめました。

本ブログでは、他にもCSSやiOSのチュートリアルなど書いているので参考にしてみてください〜〜!

最短1ヶ月でWebエンジニアに転職できる無料のプログラミングスクールならGEEK JOBキャンプ・スピード転職コース(完全無料)↓↓