当メディアのリンクにはアフィリエイト広告が含まれています

文章の囲み修飾 その1

WordPress

どうもみなさん、でざりゅう(@deza_ryu)です

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

目指す文章の囲み方

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

TEST

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

文章の囲み方種類

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

枠その1

枠その2

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

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

<div style="border: 1px solid #cccccc; padding: 10px; background: #ffffff;">枠その1</div>
<span style="border: 1px solid #cccccc; padding: 10px; background: #ffffff;">枠その2</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重線にしてみましょう。

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>

ということですね。

コメント