--年--月--日

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
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(範囲)、p(段落)、blockquote(引用)、table(テーブル)、ol(番号付きリスト)、ul(番号なしリスト)、form(フォーム)など一つのまとまった単位になっている要素のことです。

yozoの気が向いたと記2.0の記事CSS編集をしましょうより引用しました。


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

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング


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

↓ ぽちっと応援お願いします♪ m(_ _)m
人気blogランキング

スポンサーサイト

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

メイン

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

トラックバックURL


コメント

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

コメント

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

( ̄ω ̄;)エートォ...以前(たぶんyozoさんにご挨拶したきっかけだったかと・・・)
スクロールバーを引用に設置して・・・色々パターンを作らせていただいたんですが・・・
ちゃんと違いを勉強した方がよさそうですね∑(〃゚ o ゚〃) !!
ありがとうございましたm(_ _"m)
度々お邪魔して読み返させて頂こうと思いまっす♪ご了承くださいね^^

コメント

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

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

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

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

コメント

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

コメント

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

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

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

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

コメント

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

>引用は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

コメント

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

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

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

コメント

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

>やっと、復活しました。
おお!そうですか♪それはよかったです♪待望のおNEWで
登場されたのですね。(^○^) オメデトーゴザイマッス♪(*⌒ー⌒)o∠★:゚*PAN!

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

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

コメント

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

コメント

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

ポチ

コメント

yozoさん、.。゚+.(,,・ω・,,)ノ。+.゚オハョ~ゥ!!
またまた勉強させていただいております。
> なお、blockquoteは、他のWebサイトやブログからの引用を表すためのものです。自分の記事ではdivを使うといいでしょう。
そうなんですよね、わかっていながらついつい・・・編集画面に楽なボタンがついているのでblockquoteを使ってしまっています(・ω・;A)アセアセ…気をつけなくちゃ~φ(・ω・*)フムフムφ(。_。*)メモメモ
やっと来月、リニューアルの打合せが出来そうで、その時の為にもしっかり頭に叩き込んでおきたいと思いました(。・ω・。)ゞピッ♪
いつもためになる記事をありがとうございます~(´・ω・)(´-ω-)(´_ _)ペコリ
(もちろん、マイブックマーク行きですw)

コメント

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

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

コメント

>くぅさん、おはよーございまっす♪
わぁ♪遊びに来てくださったんですか!ワーイ♪ヘ(゚∇゚ヘ)v^ー゚)v ヘ(゚ー゚ヘ)ノ゚∇^)ノ ワーイ♪
ありがとーございまっす♪yozoの方こそ、ついついご無沙汰しちゃってすみません。m(_ _)m

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

コメント

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

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

>わかっていながらついつい・・・編集画面に楽なボタンがついているのでblockquoteを
>使ってしまっています(・ω・;A)アセアセ…気をつけなくちゃ~φ(・ω・*)フムフムφ(。_。*)メモメモ
そーなんですよね。yozoもはじめはちゃんと引用のみにしていましたが、ついつい、混同して使用していましたよ。┐( ̄ヘ ̄)┌ ヤレヤレ・・・

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

コメント

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

コメント

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

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

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

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

コメントする

お楽しみ:
サイト管理者にのみ通知する

チェックするとコメントプレビューがオンになります。

ご利用のブラウザ、設定ではご利用になれません。


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。