相互リンク詳細へ

簡単コピペ!すぐに使える文字装飾のCSSデザインサンプル

css

文字装飾用CSSサンプルです。

ちなみに、CSSを追記せずに、テキストエディタで直接スタイルを記述する事でも装飾は可能です。

例)
下線を引く

<span style="border-bottom: solid 3px #fe8ca0;">下線を引く</span>

 

よく使う装飾はいちいちコードを書くのは面倒なので、CSSでデザインしておく事で、使いやすくなります。

 

CSSデザイン

アンダーライン

下線を引く

8692_07

/*下線*/
.under_line {
border-bottom: solid 3px #fe8ca0;
}

 

二重線を引く

8692_04

/*二重線*/
.under_line_w {
border-bottom: double 6px #fe8ca0;
}

 

上下に引く

8692_05

/*上下ライン*/
.line_w {
border-top: solid 1px #fe8ca0;
border-bottom: solid 1px #fe8ca0;
}

 

その他のborder-styleについて

border は、solid(1本線)・daouble(2本線)以外にも破線や点線もありますので、お好みに変更してご利用下さい。

  • none 初期値・ボーダーなし・太さ0
  • hidden ボーダーなし・太さ0
  • solid 1本線
  • double 2本線
  • groove 立体的な窪みライン
  • ridge 立体的な隆起ライン
  • inset 上、左の線=暗く・下、右の線=明るく
  • outset 上、左の線=明るく・下、右の線=暗く
  • dashed 破線
  • dotted 点線

 

点線の例

 

 

マーカー

文字の下にマーカー(蛍光ペン風)ラインを引きます。

細めのライン

8692_01

.marker1{
background: linear-gradient(transparent 80%, #fe8ca0 80%);
}

 

太めのライン

8692_02

.marker2{
background: linear-gradient(transparent 60%, #fe8ca0 60%);
}

 

全体に引く場合

8692_03

.marker3{
background: linear-gradient(transparent 0, #fe8ca0 0);
}

 

 

文字を囲む

シンプルな囲み枠

8692_08

/*文字囲み*/
.kakomi{
border: solid 3px #fe8ca0;
padding: 10px 20px;
}

 

角丸背景色付き囲み

8692_09

/*角丸文字囲み*/
.maru_kakomi{
background: #fe8ca0;
color:#fff;
line-height: 1.4;
margin-bottom: 20px;
padding: 10px 20px;
border-radius: 20px;
}

 

色の変更

以下もご利用下さい。

マカロンビビッドパステル和色セーフ色名 

 

 

HTMLコード

HTMLではすべて p 、div 、spanタグ で表示できます。

p class=”XXXX”
div class=”XXXX”
span class=”XXXX”

 

 注意点

spanタグを使うと文字の部分のみの装飾となります。

div(またはp)タグを使うとその行全体の装飾となります。

 

spanタグ利用例
<span class="marker2">マーカー2</span>

8692_02

 

div(またはp)タグ利用例
<div class="marker1">マーカー1</div>

8692_10

 

<div class="kakomi">シンプル囲み</div>

8692_11

 

スタイル登録や定型文登録について

上記のCSSを追記した場合、エディタで簡単に利用するためにスタイル登録するか、定型文登録すると便利です。

 

スタイル登録については以下をご覧ください。

 

ルクセリタスをご利用の方は以下も参考にして下さい。

 

css

Posted by 綾糸