歴史の世界

【カスタマイズ備忘録】強調したい文章を枠で囲って背景色をつける

HTMLでやる方法

次のようなもの

強調して大事なところだと印象づける、
または、後で見直した時に素早く見つけることができるための
細工

これをどうやってやるか。

HTMLは次のとおり

 <div style="padding: 10px; margin-bottom: 10px; border-radius: 10px; background-color: #ffffcc;">
強調して大事なところだと印象づける、 <br />
または、後で見直した時に素早く見つけることができるための<br />
細工
</div>

以上は次のサイトを参照した。

HTMLのお勉強・枠をつける - ウェブサイト制作ツール紹介 Jimdo diy

ただし、CSSを使えば、もっと簡単に枠が使えるようになる。

CSS+HTMLで枠を書く

以下のブログで紹介されたもの

www.ituore.com

CSSに書くこと

.waku{
padding: 10px;
margin-bottom:
10px; border-radius: 10px;
background-color:
#ffff99;
}

「waku」の部分は自分の好きな文字列でいい。上記に紹介したブログのように「accent-box」でもいい。

波括弧{}の中身、「padding」以降は上記「HTMLでやる方法」の中身をCSSに書いただけ。

HTMLに書くこと

<div class="waku">
強調して大事なところだと印象づける、
または、後で見直した時に素早く見つけることができるための
細工
</div>

divやclassはHTMLの言葉(?)なのでそれに詳しいページ参照。

注意事項

divタグで囲まれた中ではmarkdownの記法は使えない。

HTMLは使えるのでそちらを活用スべし。