よくいろいろなサイトやブログで、
のような文章を枠線で囲んだ表記見かけませんか？
今回は上記のような文章を枠で囲む方法を説明していきたいと思います。
はてなブログの文章を枠で囲う方法
『記事を書く』から『HTML編集』を選択してもらい、下記タグをコピーし貼り付けてみて下さい。
<div style="border: 3px solid #ff1493;">見本</div>
貼り付け後に『編集見たまま』か『プレビュー』を選択してもらうと下記のような囲いができます。
では先ほどコピーして貼り付けたタグの内訳を見ていきましょう。
<div style="border: 3px（枠線の太さ） solid（実線） #ff1493（枠線の色）;">見本（枠線内の本文）</div>
となっています。
枠線の太さをかえるには
枠線の太さをかえる場合は
border:3pxの数字を変更すれば太さを変えることが出来ます。
例えば3pxを10pxにかえます。
<div style="border: 10px solid #ff1493;">見本</div>
と線の太さが変わる事が分かります。
枠線の種類をかえるには
次に枠線の種類ですが、solidと書かれた部分を下記値に順次かえていきます。
double・・・枠線を2本線で表示。
<div style="border: 10px double #ff1493;">見本</div>
dotted・・・枠線を点線で表示。
<div style="border: 10px dotted #ff1493;">見本</div>
dashed・・・枠線を破線で表示。
<div style="border: 10px dashed #ff1493;">見本</div>
groove・・・窪んだ枠線を表示。
<div style="border: 10px groove #ff1493;">見本</div>
ridge・・・隆起した枠線を表示。
<div style="border: 10px ridge #ff1493;">見本</div>
inset・・・上、左の枠線を暗く、下、右の枠線を明るく表示。
<div style="border: 10px inset #ff1493;">見本</div>
outset・・・上、左の枠線を明るく下、右の枠線を暗く表示。
<div style="border: 10px outset #ff1493;">見本</div>
といった形でいろいろな枠線を表示させる事ができます。
枠線の色を変えるには
枠線の色をかえるには#ff1493の#以降の英数字を変えます。
例えば
枠線を黒に変更・・・#000000（black）
<div style="border: 10px dotted #000000;">見本</div>
枠線を青に変更・・・#0000ff（blue）
<div style="border: 10px dotted #0000ff;">見本</div>
#以降の英数字を変更すると上記のような表示になります。
カラーコードは下記サイトを参考にして下さい。
枠線内の余白の変更
枠線内の余白を変更するには
枠線の説明で使用した
<div style="border: 10px dotted #ff1493;">見本</div>
にpadding: 〇〇px;を追加します。
※余白の大きさは〇〇の部分の数字を変更する。
例えば
<div style="border: 10px dotted #ff1493; padding: 15px;">見本</div>
とすると以下のようになります。
枠線内の背景色を変更する
枠線内の余白の変更で使用した
<div style="border: 10px dotted #ff1493; padding: 15px;">見本</div>
に更にbackground: #〇〇〇〇〇〇;
※〇には枠線の色で説明した英数字で色を指定する。
例えば
<div style="border: 10px dotted #ff1493; padding: 15px; background: #ff69b4;">見本</div>
枠線の角を丸くする方法
<div style="border: 10px dotted #ff1493; padding: 15px; background: #ff69b4;">見本</div>
にborder-radius: 〇〇px;を追加します。
※〇〇の部分には数字を入れる数字が大きいとより角が丸く表示されます。
例えば
<div style="border: 10px dotted #ff1493; padding: 15px; background: #ff69b4; border-radius: 10px;">見本</div>
<div style="border: 10px dotted #ff1493; padding: 15px; background: #ff69b4; border-radius: 20px;">見本</div>
border-radius: 〇〇px;の〇〇の数字により上記のような違いになります。
まとめ
今回は文章を枠線で囲む方法を紹介させていただきました。
題名ははてなブログになっていますが、はてなブログ以外でも紹介させていただいた内容を活かす事ができます。
是非今回の文章を囲う方法を活かして、個性的なブログ作成に取り組んでみてください。
※記事は2020年7月21日現在の内容です。実際のサービス内容等と異なる場合がありますので注意して下さい。