【CSS講座】STEP11: 輪郭は「border」つけよう!

ではCSSを使って、輪郭を付ける方法を紹介します。

こちらの例文を見てください。

今回は上の例の、「こちらをクリック」に輪郭をつけましょう。

輪郭の付け方

1. 上の文字にある「こちらをクリック」の上でメニュー「検証」を選択します。

2. 出てきたウィンドウにあるCSSの「border」で輪郭をつけます。

   
   .ex button {
   background: ■#ffcaf1;
   line-height: 1;
   padding: 1em;
   border: none;
   }
   

   「border」のところの「none」「solid 2px red」にしてみてください。

   赤い輪郭がつきましたか?

3. コードの書き方はこちらになります。

   border : solid(線の種類) 2px (線の太さ) red(線の色) ;

   上のように「線の種類」「線の太さ」「線の色」をそれぞれ指定します。

   線の種類はこちらのようなものがありますよ。

   none	枠線を消す
   solid	1本線がつきます
   double	2本線がつきます
   dashed	破線がつきます
   dotted	点線がつきます

   太さや色を変えると、組み合わせは無限です。いろいろ試してみましょう。

4. 枠線は全体ではなく、部分的につけることもできます。

   border-bottom : solid 2px red ;

   上の例のように「border-bottom」と入れると、下線のみをつけることができますよ。

   上下左右の指定はこちらのように記述します。

   上線	border-top
   右線	border-right
   下線	border-bottom
   左線	border-left

   なお、左線と下線だけを使って装飾をつけたいときはこちらのようにすればOKですよ。

   border-bottom : solid 2px #000 ;
border-left : solid 10px #000 ;

ここで覚えるCSS

 

【STEP12】角を丸くする

← 前のページ

CSSの基本はこちらです

CSSの基本についてはこちらの記事にまとめています。