文字に囲み枠を付けるHTMLタグをコピペ用に保存版にしました♪

文字に囲み枠を付けるHTMLタグをコピペ用に保存版にしました♪

2022年06月16日更新

<div class="warning-box" style="text-align: center;">WordPressを使って文字の囲み枠を簡単に付ける方法をご紹介します。</div>

文字の囲み枠の線の種類とHTMLタグ【コピペOK♪】

直線【solid】/角丸枠線【border-radius】

<div style="border: 3px solid #00c2cb; padding: 10px; border-radius: 0px; background: #ffffff;">ここに文章を記載する</div>

<div style="border: 3px solid #ffc2e8; padding: 10px; border-radius: 0px; background: #ffffff;">ここに文章を記載する</div>

<div style="border: 3px solid #ff914d; padding: 10px; border-radius: 0px; background: #ffffff;">ここに文章を記載する</div>

<div style="border: 3px solid #c9e265; padding: 10px; border-radius: 10px; background: #ffffff;">ここに文章を記載する</div>

<div style="border: 3px solid #a6a6a6; padding: 10px; border-radius: 20px; background: #ffffff;">ここに文章を記載する</div>

点線【dotted】

<div style="border: 5px dotted #cb6ce6; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

<div style="border: 5px dotted #ffde59; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

<div style="border: 3px dotted #5271ff; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

<div style="border: 3px dotted #ff5757; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

破線【dashed】

<div style="border: 5px dashed #A4A4A4; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

<div style="border: 5px dashed #deb887; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

<div style="border: 3px dashed #ff66c4; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

<div style="border: 3px dashed #008037; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

二重線【double】

<div style="border: 10px double #9D401B; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

<div style="border: 10px double #deb886; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

<div style="border: 5px double #7ed957; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

<div style="border: 5px double #004aad; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

溝やくぼみのある線【groove】

<div style="border: 10px groove #a1d8e6; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

<div style="border: 10px groove #ff66c4; padding: 10px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

隆起した線【ridge】

<div style="border: 10px ridge #90f667; padding: 5px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

<div style="border: 10px ridge #545454; padding: 5px; border-radius: 0px; background: ##ffffff;">ここに文章を記載する</div>

枠線のコード属性

<div style=
"border: 3px solid #00c2cb; padding: 10px;
border-radius: 0px; background: #ffffff;">ここに文章を記載する</div>

“border: 3px solid #00c2cb;

• 枠線の太さ【border: 3px】
• 枠線の種類【solid】
• 枠色の指定【#00c2cb】➡#カラーコード

padding: 10px;

• 枠線の内側の余白【padding: 10px】(ちなみに外側の余白は【margin】で表す)

border-radius: 0px;

• 枠角の丸み指定【border-radius: 0px】➡数字が大きくなると丸みが強くなる

background: #ffffff;”

• 背景色の指定➡#カラーコード
  《HTMLカラーコード参考サイト➡https://blog.codecamp.jp/color_pattern》

まとめ

ざっと紹介してきましたが、詳しい説明は避けています。

詳しく知りたい方は、HTMLとCSSのサイトを参照して下さい。

WordPressだとビジュアル画面でスタイルを色々選択できますが、思ったものがなかったり、他のブログサイトでも使用出来るのでとても便利かなぁと保存用として書いてみました。
『投稿ページに表示されるタイトルを非表示にする(WordPress)』コチラも参考になれば幸いです♪

『アラフィフの奮闘記』『猫との暮らし』『本、映画、音楽etc…』『サイト作成に必要なお勉強』

!!誤字・脱字、記載に何か問題のあるようでしたらコメント下さいm(__)m
える[Twitter猫、FANBLOG、Change Myself､ エラレルゥ､ Twitterエラレルゥ*^^*]