引用する 【<blockquote>タグ】

ブログが作りたい!HTML入門 > 引用する 【<blockquote>タグ】

引用する 【<blockquote>タグ】

引用する 【<blockquote>タグ】

引用する

今回は、引用するタグ「<blockquote>タグ」です。

お話は、次の順番で進みます。


引用するタグ(<blockquote>タグ)とは?

<blockquote>タグは、誰かの文章を引用する場合に使用するタグです。引用する文字列を、<blockquote>~</blockquote>で囲みます。

<blockquote>~</blockquote>

ちなみに、ブロックレベルでの引用なので、「blockquote」なのかと思います。quoteは「引用」を意味する英単語です。


実習 <blockquote>タグ

1:引用する

(01)

それでは、シリコンバレーの格言と言われている文章を引用します。(参照:「ウェブ時代5つの定理」P93)

Aクラスの人は、Aクラスの人と一緒に仕事をしたがる。Bクラスの人は、Cクラスの人を採用したがる。

これをHTMLコードにすると、次のようになります。

(02)

ブラウザで表示してみましょう。

ブラウザで表示

<blockquote>タグを使うと、上下左右にスペースが入ることが分かると思います。

ただ、これだけだと、人間の目では引用であることが分かり難いためか、CSSによって枠線で囲む人が多いようです。

前の記事へ
次の記事へ

次回予告

次回は、無料写真素材「空(そら)」をご紹介します。

ちょっと慣れないことをして、お疲れの人もいらっしゃるのではないかしら、ひと休憩した後で、CSS入門に入ります。


関連記事

HTMLに関連する記事を、ご紹介します。

作成日:2008/04/01 更新日:2008/04/01

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

はじめましてこんにちわ

クマさん、はじめましてこんにちわ!
カスタマイズど素人の私にとってビジュアル的で簡潔な説明がわかりやすいクマさんのブログは重宝させてもらっています。

質問があるのですがよろしいでしょうか?
<blockquote>タグを使う場合にCSSによって枠線で囲みたいと考えているのですが、どのようにカスタマイズすればよいのかわかりません。ご教示していただけないでしょうか。
ブログはfc2で共有テンプレート名brepo-right-redを使用しています。お手数かけますがどうぞよろしくお願いいたします。

はじめまして、こんにちは!

sprawlさん、はじめまして!(・∀・)/へろー
コメントありがとうございます。

うわ~、不親切な記事ですね~。(´Д`;)ひー
誰が書いたんでしょうね。顔が見てみたい。

あたしだよっ。(;´Д`)とほほ


それでは、さっそくお答えいたします。

【1】基本的な書き方

ただ枠線で囲みたいということであれば、
次のコードをCSSに書き加えれば、OKです。

blockquote {
border: 1px solid #444;
}

でも、これだと文字と枠線の距離が近くて、窮屈になるので、
内側に余白を入れてあげると良いと思います。

blockquote {
border: 1px solid #444;
padding: 0.5em;
}


【2】書き加える場所

テンプレートbrepo-right-redには、
blockquoteに関する記述がないようです。

ですので、修正(書き直す)ではなく、
追加(書き加える)することになります。

書き加える場所は、CSSの一番最後に、
分かりやすくまとめて書いていくと良いかもしれません。

例えば、↓こんな感じです。

/* sprawl追加 */
blockquote {
border: 1px solid #444;
padding: 0.5em;
}


【3】枠線の色を変える場合

枠線の色を変えたいときは、#444のところを変更します。

例えば、見出しの罫線と同じ色にするのであれば、
次のようになります。

/* sprawl追加 */
blockquote {
border: 1px solid #AA0000;
padding: 0.5em;
}


色見本参考→http://kumacrow.blog111.fc2.com/blog-entry-191.html


【4】枠線の太さを変える

枠線の太さを変えたいときは、1pxのところを変更します。
太い方が良い場合は、数値を大きくしてください。

例えば、2pxにするなら、次のようになります。

/* sprawl追加 */
blockquote {
border: 2px solid #444;
padding: 0.5em;
}


borderについては、↓こちらをご覧ください。
http://kumacrow.blog111.fc2.com/blog-entry-266.html


【5】枠線を点線に変える

枠線を実線以外に変えたいときは、solidのところを変更します。
例えば、実線を点にするなら、次のようになります。

/* sprawl追加 */
blockquote {
border: 1px dotted #444;
padding: 0.5em;
}

あるいは、次のように太さと色を変えると、
かわいい感じになります。

/* sprawl追加 */
blockquote {
border: 4px dotted #AA0000;
padding: 0.5em;
}


【6】枠線の右と下の太さだけ変える

枠線の右と下の太さだけ変えたいときは、
次のようになります。

/* sprawl追加 */
blockquote {
border: 1px solid #444;
border-right: 3px solid #444;
border-bottom: 3px solid #444;
padding: 0.5em;
}


以上です。

感謝!ありがとうございます

クマさん、こんにちは。

丁寧な解説ありがとうございます。教えていただいたようにCSSをいじくったら枠で囲めました!
HTMLに引用タグを記述してからCSSをカスタマイズしてみたんですが上手くいかなくて・・・いまいちHTMLとCSSの関係性を理解できていないんです。恥ずかしながら(汗)

Addclipsをブログ記事内に埋め込んで表示位置を変えたいけどでわからない、使用中のテンプレートが個別記事表示だとヘッダーのブログ名がなぜかエントリー記事のタイトル名に変わってしまうなどカスタマイズ課題の山積みですがご親切にお答えいただき本当にありがとうございます。

HTMLとCSSの関係性

sprawlさん、こんばんは!(・∀・)/
コメントありがとうございます。


枠線で囲めたようで、良かったです。
何よりでござる。ヾ(*´∀`*)ノわーい

HTMLとCSSの関係性・・・。
うーん、慣れだと思うんですけどね~。

あまり難しく考えずに、あーしたい、こーしたいということを、
やり続けていれば、自然に理解できるのではないかしら。

時間が解決してくれると思いますが、
どうでしょうね~。(*'‐'*)

ちなみに私は、何度かの挫折を味わいつつ、
その後、さらに1年くらいかかっています。

ブラウザによって表示が違うのも、
ビギナーのうちは、かなり混乱しましたからねー。(´Д`;)

必ずしも簡単なことではないので、

ある程度のレベルに達するには、
それなり時間を要するかもしれません。

あるいは、本腰入れてやるのであれば、
本を購入してしまった方が早いかもしれませぬ。


Addclipsの表示位置の指定については、
おおまかには、次のような感じでしょうか。

1:HTMLの方で、Addclipsのコードを、divタグで囲む。
2:divタグに適当なクラス名を付ける。(例:class="addclips")

3:CSSの方で、addclipsの指定をする。

.addclips {
(marginとかの記述)
}


ヘッダーのブログ名については、
HTMLの方で、次のような記述があると思います。

<!--permanent_area-->
<h1><%sub_title>:<%blog_name></h1>
<div class="d"><%sub_title>のページです。</div>
<!--/permanent_area-->


それで、このh1タグがそのページの見出しになるので、
ここを変えます。

例えば、ブログ名だけで良いのであれば、次のような形です。

<h1><%blog_name></h1>


これは、FC2ブログの変数タグを理解しないと、
何のことやら分からないかと思います。

参考→http://kumacrow.blog111.fc2.com/blog-entry-310.html

本、購入します!

クマさん、こんばんは

不躾な疑問に親切なお答えありがとうございます。さっそく試してみます。変数タグもクセものですね(汗)
でも、クマさんがおっしゃるとおりカスタマイズして地球が滅びるわけではない(笑)のでトライ&エラーで根気よく取組みます。

クマさんのコメントへの丁寧な対応には頭が下がります。見習わなきゃ!

FC2ブログ変数タグ

sprawlさん、こんにちは!(・∀・)/ぐもに
コメントありがとうございます。

ですねー、変数タグは曲者です。(´Д`;)
ちょっと感覚をつかむまで、大変やもしれませぬ。

表示するタグ、条件タグ、繰り返すタグなど、
役割を認識するだけでも、けっこう大変。

でも、バックアップさえとっておけば、
何も怖いことはないですから。

そう、地球も滅びないし。(;´Д`)

習得には、おっしゃる通り、根気が必要かもしれませぬ。
頑張ってねーん。ヾ(*´∀`*)ノ

コメントは、お気軽に!(´▽`)♪

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/253-ece12615
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて