ヨスのCSS講座

【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

border : ここにコードを入れる ;

 

【STEP12】角を丸くする

← 前のページ

CSSの基本はこちらです

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