HTML編集メモ自分用

参考ブログ

smatech.hatenablog.com

 

 

HTMLでの改行は<br>を挿入

<p></p>は異なる

 

色見本 

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

色

＃色コード

赤みがかったオレンジ色の色

#fc4a1a

 paleturquoise
#afeeee

lightsteelblue
#b0c4de

淡いグレー

#dcdcdc

 

１，シンプル囲み枠　色：#fc4a1a

ここに本文を入力します。
直線の囲み枠例

 

２，角丸囲み枠　色：#fc4a1a

ここに本文を入力します。
角丸の囲み枠例

 

３，点線囲み枠　色：#fc4a1a

ここに本文を入力します。
点線の囲み枠例

 

４，ドット囲み枠　色：#fc4a1a

ここに本文を入力します。
ドット線の囲み枠例

 

５，二重線囲み枠　色：#fc4a1a

ここに本文を入力します。
二重線の囲み枠例

 

６，塗りつぶし枠　色：#afeeee

ここに本文を入力します。
四角い塗りつぶし囲み枠例

 

７，角丸塗りつぶし枠　色：#afeeee

ここに本文を入力します。
角丸の四角い塗りつぶし囲み枠例。

 

８，影付き囲み枠　色：淡いグレー#dcdcdc

ここに本文を入力します。
シンプルな影付き囲み枠例です。

 

８−１， 影付き囲み枠　色：#afeeee

ここに本文を入力します。
シンプルな影付き囲み枠例です。

 

９，グラデーション塗りつぶし枠３色(#fc4a1a,#ff7f5e,#ffa58e,#ff7f5e,#fc4a1a)

ここに本文を入力します。
グラデーション塗りつぶし囲み枠例です。

 

９−１，グラデーション塗りつぶし枠３色(#80bfff,#aad5ff,#d5eaff,#aad5ff,#80bfff)

ここに本文を入力します。
グラデーション塗りつぶし囲み枠例です。

 

１０，付箋風

ここに本文を入力します。
ポイント付き付箋風囲み枠例です。

 

１０−１，付箋風　（囲み線・左：#80bfff，背景色：#d5eaff）

ここに本文を入力します。
ポイント付き付箋風囲み枠例です。

 

１１，見出し付き囲み枠

◆ここにタイトルを入力します◆

ここに本文を入力します。
見出し付きの囲み枠例です。

 

１１−１，見出し付き囲み枠　色：#0000ff  三か所

◆ここにタイトルを入力します◆

ここに本文を入力します。
見出し付きの囲み枠例です。

 

１１−２，見出し付き囲み枠　色：#add8e6  三か所

◆ここにタイトルを入力します◆

ここに本文を入力します。
見出し付きの囲み枠例です。

 

１２，ポイント

ポイント！

１行目。
２行目。

 

１３，ポイント

ポイント！

こここここおお。
ささささささささ。

 

１４，二重線

◆ここにタイトルを入力します◆

ここに本文を入力します。
見出し付き二重線の囲み枠例です。

 

 

 

１５，応用　（囲み線：なし　左：#000000，背景色：#f5f5f5）

ここに本文を入力します。
ポイント付き付箋風囲み枠例です。

 １０の応用（HTMLで囲み線部分「　border: #000000 solid 1px; 」 を消去）

 

 

１５−１，応用　（囲み線：なし　左：#000000，背景色：#f5f5f5）

ここに本文を入力します。
ポイント付き付箋風囲み枠例です。

１０の応用（囲み線なし，左幅狭め）

 

囲み枠の勧め

テスト。テスト。テスト。テスト。テスト。テスト。テスト。
テスト。テスト。テスト。テスト。テスト。テスト。テスト。。