スタイルシートの達人を目指して

CSS

テクニック

Blog デザインを ス マ ー ト にかっとばそう！
第3回

blockquoteでオリジナリティーを出すby スタイルシート・スタイルブック
http://www.stylesheet-stylebook.com/

ブログの特徴はいくつかありますが、トラックバックを忘れてはいけません。気にな

主宰者の執筆したCSSの書籍『スタイルシート・スタイルブック』（翔泳社刊）の発売と同時にオープンした、CSSをみんなで楽しく学べるコミュニティーサイト。
「CSSでもっと楽しいことしてみよう」と集まったメンバーが、初心者から上級者まで
幅 広 い 層 に 向 け て、CSS に関するテクニッ
クやQ&A情報などの記事をサイト上で書いています。そのメンバーが、本誌面でCSSテクニックを解説します。

る記事に対する意見や感想を自分のサイトで書き綴ることにより、ネットワークがどんどん広がっていくのもブログの楽しみの1つです。最近は、トラックバックを使った企画モノもいくつか登場してきているので、トラックバックをする機会が増えてきたという人も多いのではないでしょうか。トラックバックをして自分のサイトに書き込むときに必ずといっていいほど使うHTMLタグが、「引用」を示すblockquoteです。今回は、blockquoteの部分をCSSでドレスアップしてみましょう。

今月のイケてるCSSデザインサイト

カッコいいデザインをたくさん見てセンスや技を学ぶのが、デザイン力アップの第一歩！

丸みを帯びたやわらかいデザイン

クールなデザインがあなたのものに

1

Gerablog

2

Ms. Dicks

http://michele.f2o.org/

http://ms-dicks.com/design/

イタリアの学生 Michele Gerarduzziさんのブログサイ

カナダ出身のデザイナーによるブログサイト。サイトデザ

ト。CSSを多用していると、ついつい幾何学的なデザイン

イン自体もすてきですが、ここでは彼女が作ったテンプレーになりがちですが、このサイトは丸みを帯びた画像とグラデトがたくさん掲載されていて、自由にダウンロードして使うこーションを効果的に使うことによって、やわらかいデザインとができます。どれもクオリティーが高くユニークなものばになっています。この連載の第1回でも紹介したミニアイコかりで、音楽や映画をテーマにしたデザインも多数用意さンもうまく使っていて、細かいところまで工夫が凝らされてれています。インスピレーションの元として参考にするもよいます。

し、実際に使ってみるもよしでしょう。

全体のイメージを統 一 する 色 は 、JavaScript で切り替えられるようになっている。

更新はストップした
ものの、大量のデザインテンプレートはそのまま使える。

イケイケデザイン＆テクニック募集中
あなたのイケてるブログサイトやCSSテクニックを募集しています。
「いいデザインができたかも」と思ったら、ガンガン応募してください。イケてるデザインやテクニックは、このコーナーで紹介します。みんなで参考にし合っておもしろいサイト作りましょう！ 応募先：im-ikeike-css@impress.co.jp（スタイルシート・スタイルブックのサイトでも募集しているよ）

138 +++ iNTERNET magazine 2004.07 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

枠線の基本をマスターする1

borderプロパティーによるさまざまなバリエーションの枠線

by 長谷川恭久

blockquote は、他のサイトなどの情報源

Beforeからの情報を「引用」の形で提示するために使うHTMLのタグです。サイトのオリジ

Afterナルの情報と区別できるようにしておくと、読者にとってもわかりやすくていいでしょう。そのために枠線を付けたり背景色を変えたりする方法がよく使われます。
blockquoteに限らず、CSSで枠線を制御するborderプロパティーは、レイアウトデザイン上の非常に大切な要素です。具体的なblockquoteのテクニックに入る前に、枠 線 の 種 類を工夫すれば、さまざまな引用ブロックにできます。

まずは CSS で枠線を引くノウハウをマスターしましょう。線の種類を中心に、CSSで使える枠線のバリエーションを紹介します。

CSS/* 3pxの太さ、実線、黒色 *//* 5pxの太さ、溝枠、黒色 *//* 上下左右に違う枠線を指定 */border: 3px solid #000;

border: 5px groove #000;

border-left: 2px dashed #609;/* 3pxの太さ、点線、黒色 *//* 5pxの太さ、盛り上がり枠、黒色 */border-top: 1px solid #930;

border: 3px dotted #000;

border: 5px ridge #000;

border-bottom: 8px double #03C;/* 3pxの太さ、破線、黒色 *//* 5pxの太さ、盛り上がり、黒色 */border: 3px dashed #000;

border: 5px inset #000;

border-right: 5px ridge #066;/* 3pxの太さ、二重線、黒色 *//* 5pxの太さ、へこみ、黒色 */border: 3px double #000;

border: 5px outset #000;

C S Sのテ ク ニ ッ ク

キ モ

枠線の設定の仕方はいくつかありますが、の指定はサポートされていません。また、幅のです。また、2 つの線の間隔やそれぞれの線

border プロパティーに枠線の幅、スタイル、値を入れないと線が現れない場合があるのでの太さは細かく指定できず、ブラウザーによっ色の順番にスペースで区切って値を指定する注意しましょう。て表示が異なることも理解しておくといいでし

枠線のスタイルは、例に示した 8 種類に加方法が簡単でしょう。

ょう。
上下左右の枠線をすべて同じものにするのえて、非表示のnoneとhiddenが使えます。
border: 幅 種類 色;

色は通常のHTML用の色指定を使えます。

ではなく、それぞれ異なった設定をすることも枠のスタイルに二重線の「double」を指定可能です。それぞれに異なる幅、スタイル、色

枠線の幅は、「ピクセル（px）」で指定するのする場合は、2 本の線とその間隔の合計を枠を設定できるので、左側だけに枠線を引いたが わ かりや す い でしょう。 t h i n（ 細 い ）、

線の幅として設定しなければいけないことにり、下側だけに枠線を引いたりすることで、単medium（中間）、thick（太い）などの値や em注意してください。つまり、3ピクセル以上になる枠線ではないデザイン要素として使うことなどの単位も使えますが、パーセント（%）で設定しないと線が表示されない場合があるのもできます。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.07 +++139

文字列の左揃えを微調整する
2:first-line疑似要素とtext-indentプロパティーによる1行目の指定
Beforeby 長谷川恭久

新聞や雑誌では、文章の最初の1文字や1行目だけを装飾したり細かい文字揃えをAfterしたりすることがありますが、CSSを使えばウェブページでも似たようなことを実現できます。引用文は「"」などの引用符で囲んで示すことが多いので、最初の引用符だけを左端からはみ出させることで、引用の本文がきれいに揃って見えるようにしてみましょう。

1行目の引用符を段落の外に追い出すことで、文字の左端がきれいに揃って見えます。

HTM

L<blockquote><p>"考古学者は夫とするには最高です。 なにしろ妻が古くなればなるほどますます関心を持ってくれますから。"</p></blockquote>}blockquote, blockquote p {text-indent: -0.5em;

CSS}

blockquote{blockquote p:first-line {background-color: #efefef;

font-size: 1.3em;

border-top: 1px solid #ccc;

color: #309

border-bottom: 1px solid #ccc;}

width: 300px;
padding: 20px;

C S S

テ ク ニ ッ ク

段落の 1 行目だけ、文字の大きさや色を変えるには、疑似要素の「:first-line」を対象のセレクターの後ろに続けて指定します。例では
次 の よう に 指 定 して い ま す 。こ れ は 、blockquote 要素の中にあるp要素の1行目に対する指定です。のキ モに対して「a:first-line」のように疑似要素を適用することはできません。
1 行目の「"」マークを左揃えよりもさらに左にはみ出させるには、「text-indent」プロパテ
ィーを使って段落の左インデントを調整します。今回のように左にずらしたい場合は、負の値を記述します。

blockquote p:first-line
text-indent:-0.5em;:first-line疑似要素は「1行目」を指定するものなので、blockquote や段落のようなブロッ
日本語の文章で段落の始めに1文字分だけク要素に対してしか使えません。長くて折り間隔を空ける（字下げする）ために全角空白を返されているからと言って、リンク（<a>〜</a>） 入れたりしますが、「text-indent」プロパティー140 +++ iNTERNET magazine 2004.07 +++を使えばわざわざ入れる必要がありません。
こちらも疑似要素と同様に、ブロックレベルに対してのみ使用できるので注意しましょう。
また、blockquote タグの中にそのまま引用文を書くことがありますが、この書き方は本当は正しい書き方ではありません。本来は例のように p や div などのブロック要素を入れてから文字を書かなければいけないことに注意してください。
<blockquote><p>引用文</p></blockquote>

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

blockquoteの背景を装飾する
3

グラデーションの背景画像と枠線の指定によるデザイン
Beforeby マクラケン直子

blockquoteの背景には色を指定できるだ
けではなく、画像を表示させることも可能です。これを利用してアクセント的にちょAfterっとした装飾を入れたり、サイト全体のデザインに引用部分の統一性を持たせたり、柔軟なアイデアによってさまざまな可能性が広がるはずです。背景画像と枠線の装飾を付けてblockquoteをデザインしてみましょう。

グラデーションの背景画像と枠線で、独特の引用ブロックになります。

HTML<blockquote><p>人は海のようなものである。あるときは穏やかで友好的。<br />あるときはしけて、悪意に満ちている。<br />ここで知っておかなければならないのは、<br />人間もほとんどが水で構成されているということです。
</p></blockquote>CSbackground: url(bg.jpg) repeat-y
top left #FFF;
border-top: 1px solid #39C;
border-right: 4px solid #39C;
border-bottom: 1px solid #39C;
border-left: 4px solid #39C;

S}

blockquote {width: 90%;
padding 0;
margin: 0 0 0 30px;

C S S

blockquote p {padding: 8px 10px;
margin: 0;}

テ ク ニ ッ ク

枠線は左右をborder-rightとborder-left で太く、上下をborder-topとborder-bottom で細く指定することで、デザイン的なアクセントを付けています。
背景のグラデーションは、backgroundプロ
パティーを使って、背景画像、画像の繰り返し方向と初期位置、背景色を一度に定義しています。例では背景画像として幅 400ピクセルのグラデーションのJPEGを配置して、縦方向に繰り返し表示させています。ウィンドウのサイズによっては横幅が 400ピクセル以上に変化することもありえます。したがって、背景画像の右端の色が #FFF（白）となるような画像のキ モを用意して、画像の初期位置を左上に、背景色を#FFFにすることで、常に継ぎ目のない背景を保てるようにしています。横方向のグラデーションを使っているので、blockquote 要素が縦に長くなっても大丈夫なように repeat-yを指定しています。repeat-xを指定すると、ウィンドウのサイズが大きくなったときにグラデーションがおかしくなってしまうので注意しましょう。
初期位置の指定にはキーワードを使いまし
たが、パーセント指定や他の長さの単位を使うこともできます。たとえば、初期位置を右下にしたいときには、次のようにします。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

background { url(bg.jpg) 100% 100% }パーセントや長さの単位を使うときは、先に書いたものから順に水平方向、垂直方向が指定されることを覚えておくといいでしょう。値を1つだけ指定した場合は、水平方向の位置が指定されて、垂直方向は 50%になります。
背景画像を使って装飾をする際には引用文を読むのに邪魔にならないように気をつけなければなりませんが、位置や繰り返し方向などをコントロールして、効果的な表示方法を見つけましょう。

+++ iNTERNET magazine 2004.07 +++141

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバーアーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.