【HTML/CSS】初心者の方へ。今でも使う、要素への枠線の引き方を紹介します。【border】

2020年7月30日

今回はサクッと要素に枠線を引く方法を紹介します。

Webページの装飾はもちろん、

要素がどこにあるのか、どのような挙動をしているのかを知ることができるので、
様々な場面で役立ちます。

マジでサクッと最低限のことしか書かないので
HTML始めたて以外の人はバックしていいかもです。

枠線の引き方

まずこちらを用意します。

<html>
<head>
</head>
<body>
    <p>枠線1</p>
    <p>枠線2</p>
</body>
</html>

何の変哲もないPタグ。
こちらに枠線をつけるコードは・・・

<html>
<head>

</head>

<body>
    <p>枠線1</p>
    <p>枠線2</p>
</body>
<style>
    p{
        border: 2px solid red;
    }
</style>
</html>

こんな感じ。
borderの引数は(枠線の太さ　枠線の種類　枠線の色) 。

他にもいろんな引数の指定方法がありますが、
記事が長くなるだけなので知りたい人はリファレンスを読むべし。

結果はこんな感じ。

手抜きみたいになりましたが、これで終わり。

とりあえず枠線の引き方だけ知りたい！
って方がほとんどだと思うので、最低限にて終了。

枠線っていろいろなことがやれるので、
またやる気が出たら記事を書くかもしれない。

Posted by daichan