WORDPRESS

ブログで文章を枠線で囲む方法~htmlで書けちゃうよ!

投稿日:


blog01

<スポンサーリンク>

ブログで文章を枠線で囲む方法~htmlで書けちゃうよ!

ブログ書いててふとこう思うことないですか?

「この文、枠線で囲みたいなー」

そうなんですよね、こういうやつですね。

ブログの文章を枠線で囲む方法

 

うーん、囲むだけで文章が協調されるし、なによりブログに色があって綺麗に見えますよね。

今回はこの文章を枠線で囲む方法をまとめましたので、参考にしてみてください。

<div>タグを使って書く方法

あまりhtmlに詳しくない人は、コーディングなんてできないと思いがちなんですが、基本的に「こうやれば、あーなる」とだけ覚えとけば簡単に書くことができます。

文章を枠線で囲むには通常<div>タグを使って記載します。

ここではCSSとか難しい話は抜きにして直接、記事内に記載する方法を書いていきますよ。

基本パターンは以下です。


<div style="border-style: solid; border-width: 1px;">枠線で囲む文章</div>

 

これが↓のようになります。

枠線で囲む文章

 

どうですか?

CSSをいじろうとすると結構、知識が必要なのですが、このように<div>タグを使ってhtmlを直接書いてしまえば、難しい知識なしに、ブログ内の文章を枠線で囲むことができます。

ちなみにここではスタイル(装飾)は次の2こを指定しています。

border-style: solid(枠線の形式⇒実線)
border-width: 1px(枠線の太さ⇒1px)

 

つまりborder-style属性を変えれば枠線の形式を変えられるし、border-width属性を変えれば枠線の太さを変えることができます。

枠線の形式

枠線の形式には次のようなものがあります。

・solid:実線

・dotted:点線

・dashed:破線

・double:二重線

例えば二重線で太さ2pxにしたければ次のように記載します。


<div style="border-style: double; border-width: 2px;>枠線で囲む文章</div>

こうすると↓のようになります。

枠線で囲む文章

 

枠線内の余白の設定

次に枠線ないの余白の設定方法についてです。

枠線内の余白によって、詰まった感じになったり余裕をもった感じに見えるので、色々と用途に合わせて設定したいですよね。

枠線内の余白はpadding属性で指定します。

padding: 10px 5px 10px 20px;

設定できる余白の数字は左から、上・右・下・左となります。

例えば次のように記載すると


<div style="border-style: solid; border-width: 1px; padding: 10px 5px 10px 20px;">枠線内の余白が10px 5px 10px 20px</div>

こうなります。

枠線内の余白が10px 5px 10px 20px

 

枠線の文字色と枠線内の文章の文字色

枠線の文字色はborder-color属性、枠線内の文字の色はcolor属性で指定します。

border-color: blue;
color: blue;

例えば次のように記載すると


<div style="border-style: solid; border-width: 1px; padding: 10px 5px 10px 20px;border-color: blue; color: blue">枠線と文字の色が青</div>

こうなります。

枠線と文字の色が青

 

 枠線内の背景色

枠線内の背景色はbackground-color属性で指定します。

例えば以下のように記載すると


<div style="border-style: solid; border-width: 1px; padding: 10px 5px 10px 20px;border-color: blue; color: blue; background-color: pink">枠線内の背景色がピンク</div>

こうなります。

枠線内の背景色がピンク

 

もっとおしゃれに

最後にもう少しオシャレにしたいという方向けに角を丸くして影を付けてみます。

このように書きます。

<div style="border-style: solid; border-width: 1px; padding: 10px 5px 10px 20px;border-color: blue; color: blue; background-color: pink; border-radius: 5px; box-shadow: 5px 5px 5px #AAA;">角を丸くして影を付ける</div>

するとこうなります。

角を丸くして影を付ける

 

まとめ

いかがでしたか?

ブログ内の文章に枠線を付けていろいろと装飾する方法をまとめました。

htmlは難しいと考えないで、「こう書くと、こうなる」くらいに思っておけば結構簡単に書けるようになると思いますよ。

最後まで読んでいただきありがとうございます!この記事が気に入ったらぜひシェアしていただけるとうれしいです。


<スポンサーリンク>

<スポンサーリンク>

おすすめ記事

1

ネットでお金を稼いで汚い中年どもから独立する方法Content1 ネットでお金を稼いで汚い中年どもから独立する方法1.1 サラリーマンはつらいよ2 ネットでお金を稼ぐ方法【初級編】2.1 お小遣いサイ ...

2

<スポンサーリンク> Amazonでポチる前に知っておくべきお得な裏ワザ・購入方法Content1 Amazonでポチる前に知っておくべきお得な裏ワザ・購入方法2 【初級編】Amazonのお得な裏ワザ ...

-WORDPRESS

Copyright© IT虎の穴 , 2017 AllRights Reserved Powered by AFFINGER4.