おとなんつづり

ほっと一息、大人世代あれこれ。心豊かな暮らしを目指しています。

【初心者向け】HTMLタグに直接CSSを指定して使える囲み枠いろいろ


f:id:otonann:20170310200018j:plain

 

ブログを書いていると、文章を枠で囲んで表示させたい時があります。

では実際にどう書けばよいのか私を含め初心者には少々難しいですよね。そこで今回は、先輩方のサイトを参考に自分なりに加工した囲み枠をご紹介します。 

 

 

はじめに

 

本格的にブログをはじめて、ようやく1年が経とうとしています。

 

CSSもHTMLも詳しくない私は、枠を1つ使うにも時間がかかって大変でした。ひょっとして、同じように苦労されている方がいらっしゃるんじゃないかと思いました。

 

そこで今回は自分で使って便利だったものをご紹介します。もしお気に入りがありましたら、コピぺ(コピーアンドペースト)してピンポイント的にお使いください。文字や色を置き換えてもOKです。

 

 

 

おそらくそんな遠回りな書き方にしなくても、こうすれば簡単だよ~というのもあると思います。ごちゃごちゃ修正しながら作ったので文字の並びも分かりにくいかも。

ご自由に訂正してお使いくださいね。

 

 

タイトル付き囲み枠

 

色タイトル付き・角丸

 

色タイトル・角丸

枠の中の文章1行目

枠の中の文章2行目

枠の中の文章3行目

 

 

▼こちらをどうぞ 

 
<div style="height: 13px;"><span style="background: #008000; padding: 8px 10px; border-radius: 4px; color: #ffffff; font-weight: bold; margin-left: 10px;">色タイトル・角丸</span></div>
<div style="padding: 30px 15px 10px; border: 1px solid #008000;">
<p>枠の中の文章1行目</p>
<p>枠の中の文章2行目</p>
<p>枠の中の文章3行目</p>
</div>
 

 

 

border-radius: 4px の数字を大きくすると角がさらに丸くなります。

1px solid の数字を大きくすると太い囲みになります。

  

#ではじまる赤文字部分は色の指定(カラーコード)です。

ここを変えると違う雰囲気になりますよ。

 

 

例えば、#008000(緑)部分を#ff9933(オレンジ)に変更しただけで、こんな風になります。

 

色タイトル・角丸

枠の中の文章1行目

枠の中の文章2行目

枠の中の文章3行目

 

 

色タイトル付き・四角

 

角を丸くしたくない場合はこちらです

 

色タイトル・四角

枠の中の文章1行目

枠の中の文章2行目

枠の中の文章3行目

 

▼こちらをどうぞ

 
<div style="height: 13px;"><span style="background: #008000; padding: 8px 10px; color: #ffffff; font-weight: bold; margin-left: 10px;">色タイトル・四角</span></div>
<div style="padding: 30px 15px 10px; border: 1px solid #008000;">
<p>枠の中の文章1行目</p>
<p>枠の中の文章2行目</p>
<p>枠の中の文章3行目</p>
</div>
 

 

 

▼カラーコードはこちらのサイトが便利ですよ。

www.colordic.org

 

  

 

枠の中に入ったタイトル

 

ほんの少しシャドウ(影)がついています。 

 

枠の中に入ったタイトル

枠の中の文章1行目

枠の中の文章2行目

枠の中の文章3行目

 

▼こちらをどうぞ

 
<div style="padding: 5; margin: 15px auto; width: auto; background: #fff; border: 1px solid #ccc; border-top: 1px solid #ccc; box-shadow: 1px 1px 2px #ddd;">
<div style="padding: 15px; margin: 0px 0px 5px; background: #f1f1f1; border-bottom: 1px; font-size: 18px; color: #161616;">枠の中に入ったタイトル</div>
<div style="padding: 15px;">
<p>枠の中の文章1行目</p>
<p>枠の中の文章2行目</p>
<p>枠の中の文章3行目</p>
</div>
</div>
 

 

 

 

▼使用例

 f:id:otonann:20170309181246p:plain

 

 

▼この枠を使った記事はこちら 

grimo-with.com

 

  

 

タイトルなし囲み枠

 

 

シンプルな囲み枠・少し小さめ

 

文章の始まりから少し下げて使いたい時のために、枠の両サイドに余白があります。

シンプルな囲み枠。太文字にしてもOKです。

枠の中の文章1行目

枠の中の文章2行目

枠の中の文章3行目

 

 

▼こちらをどうぞ

 
<div style="margin: 1.2em; padding: 1.2em; border: solid 1px #c0c0c0; background-color: #f1f1f1;">シンプルな囲み枠。<strong>太文字にしても</strong>OKです。
<p>枠の中の文章1行目</p>
<p>枠の中の文章2行目</p>
<p>枠の中の文章3行目</p>
</div>
 

 

 

シンプルな囲み枠・画面いっぱい

 

文章のはじまりとぴったり合わせて、画面いっぱいに使いたい時に。 

 

シンプルな囲み枠。太文字にしてもOKです。

枠の中の文章1行目

枠の中の文章2行目

枠の中の文章3行目

 

 

▼こちらをどうぞ

 
<div style="padding: 1.2em; border: solid 1px #c0c0c0; background-color: #f1f1f1;">シンプルな囲み枠。<strong>太文字にしても</strong>OKです。
<p>枠の中の文章1行目</p>
<p>枠の中の文章2行目</p>
<p>枠の中の文章3行目</p>
</div>
 

 

 

見出し代わりや目立出せたい文字に

 

「border-radius: 3px」部分の数字を多くすると、もっと丸くなります。

 

角を少し丸くしました。太文字にしてもOKです。

 

 

▼こちらをどうぞ

 
<div style="padding: 1.0em; background: #a2d8b4; border-radius: 3px;">角を少し丸くしました。<strong>太文字にしても</strong>OKです。</div>
 

 

 

同じ色を使った囲み枠と下線セット

 

統一感を出す為に、同じ色で下線や囲み枠を作りました。

細い囲み枠はサイドバーのタイトルなどにも。

 

カラーコード #55bb55(薄緑色)部分を変更すると違う雰囲気になりますよ。

 

 

細い囲み枠

 

▼こちらをどうぞ

 
<div style="padding: 0px 16px; border-style: solid double; border-width: 1px 5px; border-color: #C0C0C0 #55bb55;">細い囲み枠</div>
 

 

 

 

 

細い囲み枠と同じ色の下線

 

▼こちらをどうぞ

 
<div style="padding: 0px 16px; border-bottom: 3px double #55bb55;">細い囲み枠と同じ色の下線</div>
 

 

 

 

 

細い囲み枠と同じ色の囲み枠

 

▼こちらをどうぞ

 
<div style="padding: 16px; border: double 2px #55bb55; background-color: #f2f7ed; margin-top: 30px; margin-bottom: 30px;">細い囲み枠と同じ色の囲み枠</div>
 

 

 

短い囲み枠(ボタン風)

 

1行全部じゃなくて、文字のまわりだけを囲んでボタン風に作りました

クリックすると指定したURLへジャンプするようになっています。

 

記事下に「過去記事一覧を見る」というボタンを作りたかったんです。これもHTMLファイルに貼って使いました(;´∀`)

「text-decoration: none」はリンク下線を出さないという指示です。

「display: inline-block」を入れると上の囲み枠のように1行ぜんぶに枠がつきません。

 

 

参考記事に飛ぶようにしたり、TOPに戻るにしたりと、URL部分を書き換えれば色々使えると思います。以下では私の記事一覧に飛ぶようなっています。

http//www.otonan.com/archive を変更してお使いくださいね。

(コロン:を全角にしてありますが半角に訂正してお使いください。)

 

 

左寄せボタン風

 

 

▼こちらをどうぞ

 
<div align="left">
<div style="background: #f1f1f1; margin: 0px; padding: 10px; border-radius: 3px; text-align: center; display: inline-block;"><a style="text-decoration: none;" href="http//www.otonan.com/archive"><span style="color: #555; font-size: 14px;">  過去の記事一覧を見る  </span></a></div>
</div>
 

 

 

中央ボタン風

 

▼こちらをどうぞ

 
<div align="center">
<div style="background: #f1f1f1; margin: 0px; padding: 10px; border-radius: 3px; text-align: center; display: inline-block;"><a style="text-decoration: none;" href="http//www.otonan.com/archive"><span style="color: #555; font-size: 14px;">  過去の記事一覧を見る  </span></a></div>
</div>
 

 

 

 

右寄せボタン風

 

▼こちらをどうぞ

 
<div align="right">
<div style="background: #f1f1f1; margin: 0px; padding: 10px; border-radius: 3px; text-align: center; display: inline-block;"><a style="text-decoration: none;" href="http://www.otonan.com/archive"><span style="color: #555; font-size: 14px;">  過去の記事一覧を見る  </span></a></div>
</div>
 

 

 

▼使用例

 

f:id:otonann:20170309180743p:plain

 

 

私の別サイトで使っています。

▶Grimo[ぐりも] | グリーンをもっと。優しいガーデニングスタイル。

 

 

 

 

最後に

f:id:otonann:20170310200325p:plain

 

 

長い文章の間に、囲み枠が1つあるだけで読みやすくなる時があります。文章の補足に使ったり、読者の方へメッセージを書いたり何かと使えます。

良かったらお使いくださいね。

 

自分でテストした後に公開しましたが、私はその道のプロではないので、ひょっとしたらうまく表示できないかもしれません。大変お手数なんですが、コピペする前の状態をバックアップしてお使いください。

 

 

 

それから、私はpaddingとmarginの違いがいつも分からなくなってしまうんです。 

 

私の覚書もかねて以下に貼っておきますね。

paddingは内側にとる余白、marginは外側にとる余白のことです。

 

f:id:otonann:20170310191144g:plain

出展:マージンとパディングの違い-HOME PAGE ZERO ガイド-

 

 

追記

 

記事公開後に、タイトルと本文の一部を修正しました。

最初の投稿記事で、<fieldset>タグを使った装飾を紹介しましたが、これは本来の<fieldset>の使い方ではありませんでしたので削除しました。

多くの方にコメント頂き大変勉強になりました。ありがとうございました。(2017.3.12)

 

 

また、mini-mono様よりHTMLとCSSについて教えて頂きました。 初心者の方が理解できるよう、分かりやすく書いてくださっていますのでぜひご覧ください。

 

mini-mono.hatenablog.com

 

 

 

読んで下さってありがとう~

オトナンでした。

ではまた (╭ರᴥ•́)☆