ウェブカツは5ヶ月目でwordpress部とjavascript・jQuery部 中級が開放され、
一通りレッスン動画を見終わりました。
これまで受講したPHP・MySQL部もWEBサービス部もPHPオブジェクト指向部もそうですが、
一度見ただけでは理解できないので、
一通り全体を見てからその後繰り返しじっくり見て学んでいく方法で学習しています。
ウェブカツについてはこちらです。
前置きが長くなりましたが、今回の覚えておきたいCSSは、
border
です。
初歩的なのでは？と思われたかもしれませんが、
私め、borderを使うときは、
border: 1px solid #000;といった感じに一括指定の一点張りでした。
けれでも、borderの使い方をじっくり見てみると、
もっと幅広くborderプロパティを使うことができると感じ、
ここにメモを残しておこうと思います。
一括指定とは？
一括指定と書きましたが、
borderの一括指定とは、
border: ボーダーの幅 ボーダーのスタイル ボーダーの色;
になります。
border: 1px solid #000;といった感じです。
border-width
では、まずはborder-widthから。
- border-width: 20px;
- border-width: 20px 1px;
このようにborder-widthはborderの上下左右の幅をそれぞれ指定もできますし、(数値を示す箇所は下の共通する指定方法を参照)
下のように
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
と個別にも指定ができます。
border-style
次にborder-styleについてです。
border-styleもborder-width同様に下のように個別で指定ができます。
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
では、border-styleはどんなスタイルが指定できるかというと、
border-style: solid;
border-style: none;
border-style: dotted;
border-style: dashed;
border-style: hidden;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;border-styleのスタイルがどんなものかは mdn web docsをご覧ください。
border-styleも下のように上下左右で別々の指定を一括でできます。
border-style: double solid;border-color
border-colorもborder-styleやborder-width同様に個別に色を指定することができます。
- border-top-color
- border-right-color
- border-bottom-color
- border-left-color
実際に指定したものがこちら。斜めに色が入るところが面白いですね。
See the Pen Untitled by JandSadaKo (@green555) on CodePen.
border-radius
borderのCSSを指定してさらにborder-radiusを指定すれば、
borderの角も丸くなります。
共通する指定方法
border-width、border-style、border-colorを指定するときは以下のようになります。paddingやmarginと同じで上から時計回りですね。
値を4つ指定した場合は、 上 右 下 左
値を3つ指定した場合は、 上 左右 下
値を2つ指定した場合は、上下 左右
border-radiusは左上から時計回りで、左上、右上、右下、左下の順に指定をします。
まとめ
borderのCSSを利用して色々なパターンのボタンが出来そうです。
上記のCSSを使用して私も一つボタンを作成しました。
See the Pen border_style02 by JandSadaKo (@green555) on CodePen.
最後までお読み頂きありがとうございました。
次回の覚えておきたいCSSもお楽しみに！