【HTMLサンプル】文字を線枠で囲う方法

htmlの使い方




ブログやサイトを運用していて「ここの文章を枠で囲いたいな〜」と思ったら、htmlを編集できる画面で枠をつけることができます。WordPress、アメブロ、FC2でも記事を枠で囲うことができます。

 

今回は簡単な枠をつけらえるhtmlのサンプルになります。

 

使いたい枠を見つけたら「ああああああああああああ」の部分を好きなテキストに変えて、HTMLの記述できる画面にしてからコピペしてください。

 

※ワードプレスの場合:テキストエディターに切り替えてコピペします。

 

 

細かい点線の枠

html-sample-boxline-1

 

 

 

点線の枠

html-sample-boxline-2

 

 

 

実線の枠

html-sample-boxline-3

 

 

 

 

二重線の枠

html-sample-boxline-4

 

 

 

細かい点線の枠

html-sample-boxline-5

 

 

 

点線の枠

html-sample-boxline-6

 

 

 

角丸実線の枠

html-sample-boxline-7

 

 

 

角丸二重実線の枠

html-sample-boxline-8

 

 

 

水色の可愛い点線角丸HTML枠

ああああああああああああああ

 

 

ピンク系赤色の可愛い点線角丸HTML枠

ああああああああああああああ

 

 

黄色の可愛い点線角丸HTML枠

ここに枠で囲みたい内容を入れます。

 

 

黄緑色の可愛い点線角丸HTML枠

あああああああああああああああああ

 

 

淡いグレーのHTML枠

ああああああああああああああ

 

 

淡い青色のHTML枠

あああああああああああああ

 

 

淡い赤色のHTML枠

あああああああああああああ

 

 

淡い黄色のHTML枠

ああああああああああああ

 

 

淡い緑色のHTML枠

あああああああああああああ

 

 

 

見出しつき囲い枠

青い見出しつき囲い枠

もしくは

 

 

赤色の見出しつき囲い枠

 

ピンクの見出しつき囲い枠

 

緑色の見出しつき囲い枠

 

黄色の見出しつき囲い枠

 

黄色の角丸見出しつき囲い枠線

 

青い角丸見出しつき囲い枠線

 

水色の四角見出しつき囲い枠線

 

マゼンダの四角見出しつき囲い枠線

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

あああああああああああああ

 

 

 

ああああああああああああああ

 

 

 

補足

  • background・・・背景のことです。
  • border・・・線の太さを調整できます。
  • padding・・・枠線と文字の間の隙間の大きさを調整できます。
  • solid・・・直線にできます。
  • dashed・・・破線にできます。
  • double・・・二重線にできます。
  • dotted・・・ドット線にできます。
  • 点線から線を実線に変更する方法・・・「dotted」部分を「solid」に書き換えます。
  • 線の太さを変更する方法・・・「border:●●●px」の●●●部分の数字を書き換えます。数字を大きくすることで線を太くできます。
  • 四角枠に変更する方法・・・「border-redius:●●●px」の部分を削除します。




よく読まれている記事

htmlの使い方

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です