文章の囲み修飾　その１

どうもみなさん、でざりゅう（@deza_ryu）です

さて今回は文字の修飾について勉強しましたよ。

目指す文章の囲み方

一口に文字の修飾と言ってもたくさんありますが、今回は目指す囲み方は

なんて感じのを目指してみました。

文章の囲み方種類

えっ？種類？と思いますが簡単に言うとこんな感じです。

枠その２

どちらも囲ってはいますが明らかに違いますよね？

そうです、枠その１では画面いっぱいに枠が広がっていますが、枠２では文章の長さで切れてます。どちででもいいのですが好みと場面によって使い分けましょう。
下にそれぞれのコードを表記しておきますね。

<div style="border: 1px solid #cccccc; padding: 10px; background: #ffffff;">枠その１</div>

<span style="border: 1px solid #cccccc; padding: 10px; background: #ffffff;">枠その２</span>

いろいろな線の種類

線の太さの変え方

ここでは線の太さを変えてみたいと思います。

<div style="border: 10px solid #cccccc; padding: 10px; background: #ffffff;">太さの変更</div>

赤文字を1PXから10px変更してみました。枠線が太くなることがわかりますね。

線の色の変え方

では線の色を変えてみましょう。

ちなみにカラーコードはこちらを参考にしました。

WEB色見本 原色大辞典 – HTMLカラーコード

<div style="border: 10px solid #ff0000; padding: 10px; background: #ffffff;">色の変更</div>

solido のあとを　#CCCCCC⇒#ff0000　と変更すると赤くなります。

線の種類の変え方

2重線

今度は線の種類を変えてみます。

まずは線を2重線にしてみましょう。

<div style="border: 1px double #cccccc; padding: 5px; background: #ffffff;">2重線</div>

single⇒doubleとすると2重線になりました。

点線

<div style="border: 1px dotted #cccccc; padding: 5px; background: #ffffff;">点線</div>

double⇒dottedで点線になります。

破線

<div style="border: 1px dashed #cccccc; padding: 5px; background: #ffffff;">破線</div>

dotted⇒dashedで破線になります。

ちょっと変わった線

<div style="border: 1px groove #cccccc; padding: 10px; background: #ffffff;">窪んだ線</div>

<div style="border: 1px ridge #cccccc; padding: 10px; background: #ffffff;">隆起した線</div>

<div style="border: 1px inset #cccccc; padding: 10px; background: #ffffff;">上囲み</div>

<div style="border: 1px outset #cccccc; padding: 10px; background: #ffffff;">下囲み</div>

という具合にいろいろな線の種類で囲むことができます。

次回は塗りつぶしなどを勉強します。

まとめ

<div style="border: 大きさ 種類 色; padding: 10px; background: #ffffff;">いれたい文字</div>

ということですね。