ブログの文章を枠で囲む方法(HTMLのdivタグ style属性で色、太さ、線種など自由自在に)

ブログの文章を枠で囲む方法(HTMLのdivタグ
style属性で色、太さ、線種など自由自在に)

シェアする

  • このエントリーをはてなブックマークに追加

ブログの文章の一部をいろいろな枠で囲むHTMLタグ。  出典:自己ブログ「ネットビジネス研Q室」より移転しました。

Frame Florence
パブリックドメイン 出典:ウィキメディア・コモンズ (Wikimedia Commons)

たとえばこんなタイトルつきの枠囲いがあります。

 注記:

 たとえば「注記」のような、本文の流れとは別のことを書きたいときなど、
タイトルつきの枠で囲っておけば、本文の流れを邪魔することなく必要なことを書くことができます。
ほかには追記:などを書くにも使いやすいスタイルです。

タイトルつきの枠をHTMLコードで表現するには、このようにタグを使います。

<fieldset><legend>タイトル</legend>枠の中の文章</fieldset>
(ブログに表記するために、半角の「<」や「>」を全角に変えています。)

このようなタイトルつき枠囲いは<fieldset>タグを使いますが、
一般的に装飾のために枠囲いをするときは<div>タグを使うのがもっとも使いやすいです。

<fieldset>タグでも枠囲いはできますが、<fieldset>には「フォーム要素をグループ化する」という意味がよくわからない目的があります。
テンプレートのCSS(スタイルシート)で<fieldset>の表示方法が指定されている場合もあり、<fieldset>タグではねらい通りの枠線が表現できないということもあります。

 

<div>タグを使って枠線で囲む基本

<div style=”border-style: solid ; border-width: 1px;”>枠線で囲まれる本文</div>

このタグで、このような表示になります。

枠線で囲まれる本文

つまりこれからやろうとするのは、CSSをいじらずに、HTMLコードの<div>タグにstyle属性でいろいろなスタイルを直接指定してしまうというわけです。

ここで指定してあるスタイルが、
border-style: solid;(枠線を実線にする)

border-width: 1px;(枠線の太さを1pxにする)

区切りに「;」をつければいろいろなスタイルをいくつも設定できます。

枠線の種類

border-style: solid; で、線の種類を設定します。

実線 ⇒ solid
点線 ⇒ dotted
破線 ⇒ dashed
二重線 ⇒ double
線無し ⇒ none
 

<div style=”border-style: dotted ; border-width: 3px;”>点線で文章を囲む</div>

     

点線で文章を囲む

枠内の余白

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: red; で、枠線の色を設定できます。

色の指定 red はカラーネームを使っていますが、カラーコードの#ff0000を使うこともできます。

カラーネームやカラーコードを調べるには、
たとえばこのようなサイトが参考になります。
カラーチャート/カラーネーム 147色 – TAG index Webサイト新しいウィンドウで開く

<div style=”border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red;“>枠線の色を赤に設定</div>

     

枠線の色を赤に設定

枠内の文字色

color: green; で、枠内の文字色を設定できます。

<div style=”border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red; color: green;“>枠内の文字色を緑に設定</div>

     

枠内の文字色を緑に設定

枠内の背景色

background-color: lavender; で、枠内の背景色(塗り潰し)を設定できます。

<div style=”border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red; color: green; background-color: lavender;“>枠内の背景色をラベンダーに設定</div>

     

枠内の背景色をラベンダーに設定

枠の横幅

width: 400px; で、文字枠の横幅を設定できます。

<div style=”border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red; color: green; background-color: lavender; width: 400px;“>枠の横幅を400pxに設定</div>

     

枠の横幅を400pxに設定

 

HTML5/CSS3で新しく使えるようになったstyle属性

HTML5/CSS3では、新しく角丸や影付き(ドロップシャドウ)などが使えるようになりました。

Internet Explorer 8 などの、HTML5/CSS3に対応していないブラウザでは表示することができませんが、表示されないのは角丸や影付きの部分だけで、それ以外の装飾はそのまま表示されます。

世界の3割ぐらいの人には伝わらない装飾ですが、表示されない場合もあることをふまえた上で使ってみるのもおもしろいと思います。

枠のコーナーを丸くする(HTML5/CSS3)

border-radius: 10px; で、枠に角丸をつけることができます。

<div style=”border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red; color: green; background-color: lavender; width: 400px; border-radius: 10px;“>枠の角を丸くする</div>

     

枠の角を丸くする

IE8の方のために画像で表示しておきます。
HTML5/CSS3のブラウザではこう見えています。

角丸

枠に影をつける(HTML5/CSS3)

box-shadow: 5px 5px 5px #AAA; で、枠に影をつけることができます。

<div style=”border-style: solid ; border-width: 1px; padding: 10px 5px 10px 20px; border-color: red; color: green; background-color: lavender; width: 400px; border-radius: 10px; box-shadow: 5px 5px 5px #AAA;“>枠に影をつける(ドロップシャドウ)</div>

     

枠に影をつける(ドロップシャドウ)

画像

ドロップシャドウ

 

<blockquote>タグは装飾目的で使用しない方がいい。

<blockquote>タグを使って枠線を表示する方法が、いろいろなブログで紹介されています。

しかし、<blockquote>タグは本来「引用」のためのタグです。

引用以外の目的で<blockquote>タグを使用すると、
HTMLタグを見てブログを読んでいるGoogleのクローラー視覚障害者用の読み上げソフトなどをダマすことにもなってしまいます。

それにたとえば、このブログでは引用とわかるように装飾する設定をCSSでしてあるので、<blockquote>タグがついている部分はこうなってしまいます。

blockquote要素で、引用部分を示すことができます。
この要素は、長めの文書を引用する際に使用します(段落ごと引用する場合など)。短い文章を引用する場合は、この要素ではなく q要素を使用します。

via: HTMLタグ/テキスト・フォントタグ/引用文を示す(長文) – TAG index Webサイト 新しいウィンドウで開く

枠囲いする目的で<blockquote>タグを使用するのは、あまり好ましくないと思います。

 

 

スポンサードリンク

水村亜里on  クリエイティブ・コモンズ 表示 - 継承 4.0 国際

初めて当ブログに訪れた方や何度か当ブログにお越しいただいているみなさま。
もしブログの内容を気に入っていただけましたら
RSSリーダーの登録よろしくお願いします。
Live Dwango Readerに登録 rss  コメントのRSS⇒rss

Google+ツイッターでも、更新案内を流しています。

RSSリーダーとは?⇒ RSSってなんなの?

  リンク切れ、動画削除などを発見されましたら、コメントで教えていただけると非常にありがたいです。

posted by +水村亜里(ミナムラ アサト) メール info@minamura.jp

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

この投稿のトラックバックURL「http://minamura.jp/nomad/2014/11/28/q005/trackback/」

コメント

  1. より:

    最初にやつですが、</legend>で閉まっていません

  2. より:

    最初に⇒最初の

  3. 水村 亜里 より:

    >某さん
    ご指摘ありがとうございます。
    訂正させていただきました。

  4. 杏奈 より:

    初めまして杏奈といいます
    メールアドレス入力フォームに枠線と色を付ける方法がどこを探しても見つからず、
    というか理解と応用が出来ず..(*_*)(笑)

    水村さんのサイトに来たのですが
    すぐに枠線と色を変更することが出来ました!
    役に立つ記事をありがとうございました(≧◇≦)

    杏奈

  5. 水村 亜里 より:

    >杏奈さん
    コメントありがとうございます。
    お役に立てて幸いです。

  6. ymm より:

    知りたかった情報をピンポイントで丁寧に詳しく解説してくださっていて、感動しました!
    htmlで、コーナーを丸くしたりシャドウをつけたりもできるんですね。
    これからもいろいろ勉強させていただきます。
    大変役立つ記事を、ありがとうございました!!

  7. 水村 亜里 より:

    >ymmさん
    コメントありがとうございます。

コメントをどうぞ

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