ブロック要素に枠線を設定しましょう（CSS編集） yozoの気が向いたと記2.0

2006年11月22日

ブロック要素に枠線を設定しましょう（CSS編集）

　記事の中でアピールしたい文章を枠線（border）で囲むと効果的ですね。
記事はコチラ→引用に枠線を設定しましょう（CSS編集）
　blockquote、divなどのブロック要素に、枠線を設定してみようと思います。
ブロック要素について詳しくはコチラ→CSS編集をしましょう
　なお、blockquoteは、他のWebサイトやブログからの引用を表すためのものです。自分の記事ではdivを使うといいでしょう。
なお、この記事の内容は、CSS編集が可能なブログならどのブログでもできます。

ブロック要素に枠線を設定しましょう

下の解説を参考にしてCSSのコードを追加しましょう。なお、クラス名はご自分でわかりやすい名称にしてください。（半角英数文字で小文字を使用しましょう。）

margin→枠全体の余白を設定します。
padding→枠線と枠内の文章や画像との余白は設定します。
background-color→背景色を設定します。
border-style→枠線の種類を設定します。
border-width→枠線の太さを設定します。
border-color→枠線の色を設定します。

CSS編集で追加するコード

/*写真の枠線で文章を囲む*/
.textfrm
{
margin : 15px 20px 15px;
padding: 5px;
background-color:#ffffff;
border-style: solid;
border-width: 2px;
border-color: #DCE3E3 #C1C1C1 #C1C1C1 #DCE3E3;
}

このブロックのソースコード
(この画像を文字を記事に入れるとき、下の通りに入力します。)

divの場合

<div class="textfrm">強調したい文章はここに入れます。</div>

引用（blockquote）の場合

<blockquote class="textfrm" cite="引用したサイトのURI">強調したい引用した文章はここに入れます。</blockquote>

divの場合

強調したい文章はここに入れます。

引用（blockquote）の場合

h1～h6(見出し)、div（範囲）、ｐ（段落）、blockquote（引用）、table（テーブル）、ol（番号付きリスト）、ul(番号なしリスト)、form（フォーム）など一つのまとまった単位になっている要素のことです。
yozoの気が向いたと記2.0の記事CSS編集をしましょうより引用しました。

yozoからのお願い

　この記事のやり方は、yozoが実際にやってみたことを書いているだけです。この記事のやり方だけしかないというものではありませんし、もっと簡単で、すばらしい方法もあると思います。この点をあらかじめご了承ください。
　また、言うまでもないことですが、この記事を参考にされるのでしたら、「CSS編集」は自己責任で行ってください。そして、必ずバックアップを取っておくようにしてくださいね♪
　この記事を参考にされた場合は、結果や感想を、CommentやTrackbackしていただけたら、うれしいです。もちろん、「これではおかしいのでは？」とか「こうしたほうが良い。」というご指摘やご指導もありがたく頂戴したいと思っています。よろしくご協力ください。　m(_ _)m

↓　ぽちっと応援お願いします♪ m(_ _)m

↓yozoの気が向いたと記2.0の関連記事紹介

↓　ぽちっと応援お願いします♪ m(_ _)m

スレッドテーマ:カスタマイズ:ブログ

メイン

≪New 枠線（border）の上にボックスを配置しましょう。（CSS編集） | Top | 次は『つ』です＠BlogPetしりとり Old≫

トラックバックURL

このエントリーのトラックバックURL:

トラックバック

≫ ブログ内検索を枠線(border)で囲む設定(CSS) from yolipの学舎
　ブログ内検索として設置したGoogleのサイト検索ブロックを枠線（border）で囲んで見やすくしてみました。枠線（border）の色を「上と左」(#DCE3E3)、「下と右」(#C1C1C1)で変えてフレームっぽくするようにしています。ブログ内検索設置の記事→Googleのサイト検索をブログ [Read More]

yozoさん、今晩は～。　体調回復しましたか～？
w(￣o￣)w オオー!これは、使えそうですね～。
σ(・_・)は、点線ばかりだったので、実線もほしいと思っていたので、
助かります～＾＾
次回、記事に囲めるものがあったら、やってみますね～・・・・
って、σ(￣∇￣;)わて?にできるじゃろか～？？？（不発・・・ﾌﾟｽﾌﾟｽ

Posted by 凸　ねこ at 2006.11.22 19:23 | edit

引用はblockquoteしか使っていないウッキですm(_ _"m)
ｙｏｚｏさん( ^-^)ﾉ(* ^-^)ﾉこんばんわぁ♪

(￣ω￣;)ｴｰﾄｫ...以前（たぶんｙｏｚｏさんにご挨拶したきっかけだったかと･･･）
スクロールバーを引用に設置して･･･色々パターンを作らせていただいたんですが･･･
ちゃんと違いを勉強した方がよさそうですね∑(〃ﾟｏﾟ〃) !!
ありがとうございましたm(_ _"m)
度々お邪魔して読み返させて頂こうと思いまっす♪ご了承くださいね＾＾

Posted by ウッキ at 2006.11.22 21:31 | edit

＞blockquoteは、他のWebサイトやブログからの引用を表すためのものです。自分の記事ではdivを使うといいでしょう。

知りませんでした！ココログではすべてblockquoteでやってました(^^;

そのままタグで出来るかな？次回のエントリではこれを試してみますね。そうなのかぁ・・・

なんだかまだまだいっぱい出てきそうで・・・た、楽しみです＼(;゜∇゜)/

Posted by ととろ at 2006.11.23 00:15 | edit

ｙｏｚｏさん、こんばんわ

やっと、復活しました。
ＬＯＶＥＬＯＧで、四角で囲む方法があるのですが、ちょっと、直さなければならない部分があるので、この方法だと、簡単でいいです。
連想バトンで、「可愛い人」に名前を書いてくださり、うれしい限りです。
最近、旦那さんも、「可愛い」と言ってくれないので、とてもとても、嬉しいです。

Posted by ネーちゃん at 2006.11.23 00:43 | edit

＞凸ねこさん、こんばんはー♪

＞yozoさん、今晩は～。　体調回復しましたか～？
ご心配かけちゃいました。ごめんなさいm(_ _)m　お気遣いありがとーございまっす♪
ここ数日は体調よりも、ちょっと忙しくドタバタしてましたよ(ﾟｰﾟ;Aｱｾｱｾ

＞σ(・_・)は、点線ばかりだったので、実線もほしいと思っていたので、助かります～＾＾
ふふふ・・・点線はborder-style: solid;がborder-style: dotted;になっているんですよ。同じ色や太さで実線がほしかったら、コピペして、class名を変更し、dotted→solidに変更したらＯＫですよ。お試しあれ。(*^-^)

＞次回、記事に囲めるものがあったら、やってみますね～・・・・
って、σ(￣∇￣;)わて?にできるじゃろか～？？？（不発・・・ﾌﾟｽﾌﾟｽ
あはは・・・大丈夫ですよ。blockquoteが使えていましたからね。同じですからね。気楽に遊んでみてくださいませ♪それと困ったときはここにでもコメントくださいね♪　m(_ _)m

Posted by 凸ねこさんへ at 2006.11.23 18:35 | edit

＞ウッキさん、こんばんはー♪

＞引用はblockquoteしか使っていないウッキですm(_ _"m)
他のサイトの引用ですから、それでいいのですよ♪yozoは引用だけでなく、自分の記事のためにも、たくさん流用しています。(^-^;どちらでも、問題はないようなのですが、正しく使う方がいいだろうと思って、これからはdivとblockquoteを分けるようにしました。CSSのclassは、この記事のように、どちらでも同じように使えますからね。変更は不要と思ってます。(^○^)
ただし、もしもCSSコードがblockquote.type1というクラスだったら、下のようにdiv用に同じ名前で「.type1」を下のように「,」（カンマ）で区切って追加してください。
blockquote.type1,.type1
{
省略
}
こうすれば、divでもclass="type1"が使用できますよ。
お手数かけまして申し訳ありません。m(_ _)m

＞スクロールバーを引用に設置して･･･色々パターンを作らせていただいたんですが･･･
繰り返しになりますが、同じclassを設定したら、divでもblockquoteでも見た目は同じになりますよ。色々作ったというパターンは両方で使えますからね。（念のため♪）

＞度々お邪魔して読み返させて頂こうと思いまっす♪ご了承くださいね＾＾
どうぞ♪どうぞ♪ご遠慮なく活用してやってくださいませ。m(_ _)m

Posted by ウッキさんへ at 2006.11.23 18:48 | edit

＞ととろさん、こんばんはー♪

＞知りませんでした！ココログではすべてblockquoteでやってました(^^;
(≧▽≦;)ｱﾁｬｰきっとyozoの記事を参考にされたからですよね。申し訳ありませんでした。m(_ _)m　blockquoteでも、divでも見た目は変わりませんし、もちろんエラーにもなりませんから、yozoも引用以外にたくさん流用していたのですよ。(＞▽＜;; ｱｾｱｾ
ココログでしたら、style="～"で設定していましたよね。その場合は、そのままblockquoteをdivに置き換えるだけでＯＫです。今までのはそのままでも問題ないと思いますが、今後はdivでの使用をお薦めとさせていただきますね♪　m(_ _)m

＞なんだかまだまだいっぱい出てきそうで・・・た、楽しみです＼(;゜∇゜)/
あとは、今のところ、ブロック要素のセンタリングくらいですね。こちらは鋭意記事を作成中なのです。またまたIE6.0のバグと絡むことになります。┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･

Posted by ととろさんへ at 2006.11.23 19:11 | edit

＞ネーちゃんさん、こんばんはー♪

＞やっと、復活しました。
おお！そうですか♪それはよかったです♪待望のおNEWで
登場されたのですね。(^○^) ｵﾒﾃﾞﾄｰｺﾞｻﾞｲﾏｯｽ♪(*⌒ｰ⌒)o∠★:ﾟ*PAN!

＞ＬＯＶＥＬＯＧで、四角で囲む方法があるのですが、ちょっと、直さなければ
＞ならない部分があるので、この方法だと、簡単でいいです。
ネーちゃんさんならCSS編集は慣れてますもんね♪お時間ある問にでも設定して遊んでみてくださいね。たくさん自分なりにいじれるようになってるはずですよ。(*^-^)

＞最近、旦那さんも、「可愛い」と言ってくれないので、とてもとても、嬉しいです。
あらら・・・そーなのですか♪旦那さんもいけませんなぁ～♪　(≧▽≦)
きっと(//∇//(//∇//(//∇//) ﾃﾚﾃﾚなのでしょうね。気持ちはよくわかりますよ(^○^)

Posted by ネーちゃんさんへ at 2006.11.23 19:25 | edit

yozoさん、こんばんは♪(＾▽＾)/
blockquoteは引用かぁ。確かにそうですよね。
実はよく分からずに見た目だけを考えてdivとblockquoteを使っていました。(^^;;
確かにきちんと使いわけたほうが、読んでいただく方に分かりやすい記事になりますものね。
私もきちんと使い分けるようにしたいと思います♪
とってもためになる記事をありがとうございました!!(o*。_。)oペコッ

Posted by まゆび at 2006.11.24 00:08 | edit

お久しぶりにコメントさせて頂きます。
非常に分かりやすく参考になります。またお伺い致します。

ポチ

Posted by 天邪鬼マインドのくぅ at 2006.11.24 09:13 | edit

yozoさん、.｡ﾟ+.(,,･ω･,,)ﾉ｡+.ﾟｵﾊｮ～ｩ!!
またまた勉強させていただいております。
> なお、blockquoteは、他のWebサイトやブログからの引用を表すためのものです。自分の記事ではdivを使うといいでしょう。
そうなんですよね、わかっていながらついつい・・・編集画面に楽なボタンがついているのでblockquoteを使ってしまっています(･ω･;A)ｱｾｱｾ…気をつけなくちゃ～φ(･ω･*)ﾌﾑﾌﾑφ(｡_｡*)ﾒﾓﾒﾓ
やっと来月、リニューアルの打合せが出来そうで、その時の為にもしっかり頭に叩き込んでおきたいと思いました(｡･ω･｡)ゞピッ♪
いつもためになる記事をありがとうございます～(´･ω･)(´-ω-)(´_　_)ﾍﾟｺﾘ
（もちろん、マイブックマーク行きですw）

Posted by モンビッケ at 2006.11.24 10:55 | edit

＞まゆびさん、おはよーございまっす♪

＞実はよく分からずに見た目だけを考えてdivとblockquoteを使っていました。(^^;;
あらら・・・まゆびさんもそーでしたか？(≧▽≦;)ｱﾁｬｰ
エキブロやFC2でも記事投稿欄に引用（blockquote）の挿入ボタンがありますよね。ついつい使ってしまう方も多いと思います（yozoもそうでした。）現段階でXHTMLのチェックでも、エラーになっていなかったので、そのままにしていましたよ。┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･
yozoも今後は心を入れ替えてちゃんと区別して使用したいと思っています。m(_ _)m

Posted by まゆびさんへ at 2006.11.24 10:57 | edit

＞くぅさん、おはよーございまっす♪
わぁ♪遊びに来てくださったんですか！ﾜｰｲ♪ﾍ(ﾟ∇ﾟﾍ)v^ｰﾟ)v ﾍ(ﾟｰﾟﾍ)ﾉﾟ∇^)ﾉﾜｰｲ♪
ありがとーございまっす♪yozoの方こそ、ついついご無沙汰しちゃってすみません。m(_ _)m

＞非常に分かりやすく参考になります。またお伺い致します。
ありがとーございまっす♪大変励みになります。
あらためて今後ともよろしくお願いしまっす。m(_ _)m

Posted by 天邪鬼マインドのくぅさんへ at 2006.11.24 11:00 | edit

＞モンビッケさん、おはよーございまっす♪

＞またまた勉強させていただいております。
いつも応援してくださって、ありがとーございまっす♪本当に励みになっています。　m(_ _)m

＞わかっていながらついつい・・・編集画面に楽なボタンがついているのでblockquoteを
＞使ってしまっています(･ω･;A)ｱｾｱｾ…気をつけなくちゃ～φ(･ω･*)ﾌﾑﾌﾑφ(｡_｡*)ﾒﾓﾒﾓ
そーなんですよね。yozoもはじめはちゃんと引用のみにしていましたが、ついつい、混同して使用していましたよ。┐(￣ヘ￣）┌ ﾔﾚﾔﾚ･･･

＞やっと来月、リニューアルの打合せが出来そうで、その時の為にも
＞しっかり頭に叩き込んでおきたいと思いました(｡･ω･｡)ゞピッ♪
おお！そろそろ忙しいのもピークというわけですね。Ｖ(○⌒∇⌒○) ｲｴｰｲ
無理のないようにしてくださいね。リニューアル楽しみにしてまっす。((o(*^^*)o))わくわく

Posted by モンビッケさんへ at 2006.11.24 11:05 | edit

yozoさん、こんにちは。こちらの記事のCSSコードはとても便利ですね。ブロック要素にはどうしても枠線をつけたくなるyolipなのです。サンプルのコードもあって、とてもわかりやすい解説になっています。今後も枠線の設定を変更するときなどに活用させてください。
　勝手ながら、紹介記事からトラバ入れさせていただきました。　m(_ _)m

Posted by yolip at 2007.03.24 12:24 | edit

＞yolipさん、こんばんはー♪

＞ブロック要素にはどうしても枠線をつけたくなる
⊂((〃￣ー￣〃))⊃ ふふふ　枠線囲みをするのはyozoもですよ♪
やっぱり囲まないと落ち着かない・・・なぁ～んてね。（ΦωΦ）ふふふ･･･

＞サンプルのコードもあって、とてもわかりやすい解説になっています。
yolipさんにそのように仰っていただけると、とても励みになりまっす。
いつもyozoこそ色々とアドバイスいただき助かっていますよ。(ﾟ-ﾟ*)(｡｡*)ｳﾝｳﾝ

追伸：記事での紹介とトラバありがとーございまっす♪
こちらからもお返しのトラバ入れさせていただきました。m(_ _)m

Posted by yolipさんへ at 2007.03.26 17:01 | edit

yozoの気が向いたと記2.0

BlogPet、季節、時事、日々の出来事etcをつづっています。コメントしていただけると、とてもうれしいです♪

スポンサーサイト