CSSの書き方色々③(枠の書き方)

スポンサーリンク

はじめに

こんにちは。今回はCSSを使って枠を書く方法をご紹介します。枠とは私がちょくちょく使っている下記のものですね。

中に文字をいれるとこんな感じですね。

枠の中に文字を入れてみました。

枠は点線も普通の線も出来ますし、太さや色も変えられます。

枠の作り方

枠の作り方は至って簡単です。まずは下記のhtmlを書いてみましょう。

<div class="normalwaku">
<p>ここに文字を入れます。</p>
</div>

おや?今回初めて登場している文字がありますね。「div」です。これはここにCSSを反映させたいけど反映させるための元となる土台が何もないので、自分で無理矢理土台を作っちゃおうみたいなイメージで使います。

<div class="normalwaku">

</div>

上記のように書き、「div」~「/div」の間に入っている部分にCSSを反映させるようになっています。CSSを反映させるため「class」も忘れずに付けてください。

今回は「div class=”normalwaku”」という箱に対して枠となるCSSを反映し、その枠の中に「pタグ」として文字を入れるという形になります。

CSSの書き方

枠線を作る時は下記のようにCSSを書きます。

.normal{border:1px solid #000000;}

はい、また新しい書き方が出てきましたね。CSSを反映させるために「.(ピリオド)」を付けますが、今までは「p.」のようにclassが付いているタグが分かるように「.」の前にタグも書いていました。

しかし、「div」を使う時は「div.」とするのではなく「.」単体でOKです。divは自分で無理矢理作った土台なのであえてCSSでは表記せず省略するのです。(という説明が正しいかは分かりませんが私はそのように覚えました。)

そして「border」は線を引くためのCSSです。「border」は下記のように線を引く方向を指定することができます。

  • border-top:上線
  • border-bottom:下線
  • border-right:右線
  • border-left:左線
  • border:四方全方向

上下左右なにも指定せずにただ「border」とだけ記述をすると上下左右全方向に対して線を書いてくれます。

「1px」で線の太さを指定しています。そして「solid」ですが、これは普通の線です。他に下記のような種類があります。

  • solid:1本線
  • double:2本線
  • groove:立体的に窪んだ線
  • ridge:立体的に隆起した線
  • dashed:破線
  • dotted:点線

この辺は実際に試してみると面白いです。

実際に下記のhtmlに上記のCSSを反映させると…

<div class="normalwaku">
<p>ここに文章が入ります。</p>
</div>

こうなります。

ここに文章が入ります。

どうでしょうか?出来ましたか?

他にこういうのが知りたいというものがあればコメントを貰えると嬉しいです。それではまた次回。

CSS

Posted by koyasu