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

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

オーバーフローを使いこなそうby スタイルシート・スタイルブック
http://www.stylesheet-stylebook.com/

SEOやアクセシビリティーへの考慮から、最近ではフレームを使う機会がどんどん減

主宰者の執筆したCSSの書籍『スタイルシート・スタイルブック』（翔泳社刊）の発売と同時にオープンした、CSSをみんなで楽しく学べるコミュニティーサイト。CSSのテクニックだけでなく、CSSにまつわる最新情報も随時更新しています。
また、情報交換広場にもたくさんの CSS 関連のサイトのリンク集が用 意されているので、ぜひそちらもチェックしてみてください。

り、ページに別のHTMLを埋め込む場合にはiframeがよく使われるようになってきました。iframeは、長くなりがちなサイドバーをコンパクトにまとめるときに活躍しているのではないでしょうか。しかし、iframeを使うと結局コンテンツを別々のHTMLファイルで管理することになります。そこで、CSSのoverflowプロパティーを使って疑似的にフレームを作る手法を使うと、ページの情報を一括して管理できます。今回は、その疑似フレームを作るテクニックも含めて、マスターすれば表現の自由度がさらに高まるoverflowプロパティーの使いこなしテクニックを3つ紹介します。

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

1

自由だけど構造的

2

Penzion Roza ve Vimperku

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

ソフトもサイトも使いやすく
Quark
http://www.quark.com/

http://www.penzionroza.cz/

チェコにある寄宿舎のサイト。通常のレイアウトスタイル

DTPソフトの老舗Quarkも、サイトをCSSレイアウトに切にとらわれていないトップページの自由なボタン配置が目をり替えて新時代に向かっているようです。ページ上部にあ引きます。一見<div>を使ったように見えるメニューも<ul>

る拡張メニューは、アクションはJavaScriptで行われているを使って構造的なマークアップがされています。スタイルシ

ものの、見た目はすべてCSSで制御されており、情報構造ートを外して見たときのシンプルさには、だれもがきっと驚もリストにしてグループ分けが明確にされています。単にくはず。トップページ以外のページも情報がスッキリまとまCSSレイアウトにしただけでなく、色や文字の大きさの使いっていて、非常に読みやすいサイトになっています。

分けが細かく設定されていて、さすが印刷系の企業といったところでしょうか。

コルクボードに適当に貼り付けられた写真のようなデザインも、スタイルシートで実現したものです。

DTPソフトのデザインとCSS デザインにはもちろん通じるところがある。さすがQuarkといったところですね。

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

110 +++ iNTERNET magazine 2004.12 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D画像をクリッピングしたサムネイルを表示する
1

画像には手を加えずにoverflow: hiddenで一部分だけを表示
Beforeby 長谷川恭久

overflowプロパティーは、コンテンツエリアの広さよりも大きなコンテンツを表示さAfterせるときに有効です。これはもちろん文字情報だけでなく画像にも有効で、用意されたエリアには大き過ぎる画像をクリッピングして表示させることができます。
overflowプロパティーは「scroll」と「auto」という値があり、それらを使うとコンテンツエリアにスクロールバーを表示させること小さなサイズをHTML で指定して縮小表示するのではなく、画像の一部分だけを表示しています。

ができるのですが、「hidden」という値を使えばコンテンツエリア外の情報を見えないようにできます。今回はこの「hidden」
を使って、400×300ピクセルの画像の一部分、80×80ピクセル分だけをクリッピングして表示しています。

HTMLC<div class="thumbnail"><img src="me.jpg" width="400" height="300"
alt="" /></div>

SS.thumbnail{height: 80px;
width: 80px;
overflow: hidden;
position: relative;
border: 10px solid #ccc;}.thumbnail img{
position: relative;
top: -160px;
left: -110px;
}

C S S

テ ク ニ ッ クのクリッピングしたい大きさ（今回は 80 × 80

タイル指定にtopとleftのプロパティーを加えページデザインに合わせるために画像を同ピクセル）に指定したコンテンツエリアを用意ると、画像の中央部分など好きな部分をクリじサイズにそろえる場合などには有効なテクして、そこに「overflow:hidden」を指定します。

ッピング表示できます。ピクセルで制御するニックですが、注意するべき点があります。見こうすることでコンテンツエリア外（つまりだけでなくパーセント指定でも可能です。たた目がクリッピングされているだけなので、実80×80より外）は非表示になり、画像の一部だし、上記のようなHTML構造だと、パーセン際にブラウザーで読み込まれる画像は大きな分だけを表示できます。あとは今回の例のよト指定をした場合は、数値の解釈がブラウザ写真になっていることです。クリッピングしたうに枠線を付けるなどの装飾を加えれば完成

ーによって違うので気をつけた方がいいでし

画像と拡大写真をそれぞれ作る手間が省けてです。

ょう。また、クリッピングの位置をtopとleftの便利なのですが、あまりにたくさんの画像をこ普通に画像をクリッピングすると、指定したプロパティーで指定する場合は、コンテンツのテクニックでサムネイル化してページに並べサイズだけ、画像の左上部分が表示されます

エリアと画像の両方に「position: relative」をるのはおすすめしません。

が、今回のように、画像、つまりimg要素のス入れる必要があります。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.12 +++111余分なspanタグなしでテキスト付きの画像見出しを作る
2

overflow:hiddenで文字を非表示にする
Beforeby 長谷川恭久

CSS Zen Garden

Afterで紹介されている

多くのデザインでは、サイトのタイトルに画像を使うのに、HTML 上はテキストとして h1 要素を作っておいて、<span> に「display:none」というプロパティーを追加してテキストを見えなくして、背景に文字のロゴ画像を貼り付ける方法をとっています。しかし、この方法では、<span>という空箱タグを余分に付け足さなくてはなりません。そこで今回は overflowを使って<span>を追加しなくても見出しな

HTML上は「This is My Website」という文字要素だけですが、ブラウザーでは画像のロゴが表示され、しかも音声ブラウザーなどでも正しく読み上げられます。

どに画像を使う方法を紹介します。
http://www.csszengarden.com/

HTM

L<h1 id="sitename">This is My Website</h1>CSS

h1#sitename {background: #fff url(title.gif) no-repeat 0 0;
font-size: 100%;
overflow: hidden;
padding: 50px 0 0 0;
height: 0px !important; /*モダンブラウザー用の値*/
height /**/:50px; /*IE 5.x用の値*/}

C S S

テ ク ニ ッ ク

<span>をわざわざ追加しなくてもいいようのは、今回のテクニックは有効でしょう。のコードのような「ハック」を使う必要がありまにして、余計なタグを減らすというのもこのテ

このテクニックも「overflow: hidden」を使す 。 最 初 の プ ロ パ テ ィー に 対 し て はクニックを使う理由の1つですが、このテクニいます。貼り付けたい画像の高さに合わせて「!important」を記述して、次の行にある同じプックを使う重 要 なポイントは、文 字 要 素を上の padding の数値を記述することで、文字ロパティーに対してはプロパティーの直後に「display:none」に指定するとその部分は音声をコンテンツエリアの外に押し出して、コンテコメント「/**/」を加えます。わずか 2 行で完成

ブラウザーでは読み上げられなくなるけれど

ンツエリアからはみ出した部分（文字）は非表するハックですが、最後に指定するプロパテも、この方法では正しく読み上げられ、SEO示にする方法です。

ィー名の後にスペースを最低 1 つは空ける必的にもh1として扱われる点です。ページのタ

ただし、最近のブラウザー（モダンブラウザ

要があることと、ハックとして挿入するコメント

イトルの情報を画像だけでなくテキストででもー）
では高さを0pxにしておけばいいのですが、やコロン（:）の後にスペースを入れてはいけなきちんと伝えたいときや、アクセシビリティー

IE 5.5をはじめとした古いブラウザーではこのいことなど、細かい注意が必要です。

を考慮しながらグラフィカルに見せたい場合解釈では有効ではありません。そこで、上記

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

疑似的にフレームのように装飾する
3

overflow:autoで凝ったデザインの部分フレーム

by 長谷川恭久

Beforeoverflowプロパティーの最もポピュラーな使われ方は、おそらく「overflow: auto」とAfter「overflow: scroll」を利用した疑似フレームを作る方法でしょう。コンテンツエリア
1つで簡単に疑似フレームが完成し、コンテンツをコンパクトにまとめることができる優れものですが、単にフレーム化をしただ
けでは読み難くなってしまいます。サイトデザインによって装飾のアプローチはさまざまだと思いますが、今回はこの疑似フレームレイアウトを作るコツを紹介しましょう。

ただ四角くてスクロールするだ
けでない、凝ったデザインの疑似フレームにしてみました。

HTMLpadding: 10px;<div class="flow-layout"><div class="flow-area"><p>ささいなことで懐かしく思うってあると思いますが。
僕は写真の中から……</p></div></div>

CSS.flow-layout{
background: transparent url(frame.gif)
no-repeat 0 0;
height: 190px;
width: 230px;

C S S

テ ク ニ ッ ク}
.flow-area{
background: #fff url(frame-bg.gif)
no-repeat 0 0;
height: 170px;
width: 210px;
overflow: auto;}.flow-area p{margin: 0;
padding: 10px;}の今回のテクニックでは、丸角のレイアウトを使っています。flow-layout の大きさからはみを貼り付けるなど、応用次第で非常に個性的実現するための「flow-layout」と、中の白抜き出すコンテンツがある場合は、枠にスクローなフレームを作れます。もちろん、むやみにの部分を作る「flow-area」の2つの<div>を使ルバーが表示されて、枠内でスクロールでき<div>を増やすのはあまりよくありませんが、っています。

るようになるため、画面上にあらかじめ決めた表現したいレイアウトがあれば実験でもいいレイアウトを形成している「flow-layout」は単に画像が貼り付けてあるだけの装飾枠で、このコンテンツのボックス全体の大きさを指大きさで、どんなサイズのコンテンツでも表示ので挑戦してみるといいでしょう。少なくともできます。

今回のように少しでも工夫すれば、疑似フレ2つの<div>が記述されているので、今回の例のようにそれぞれの background プロパテ定しています。

ームもただスクロールバーがあるボックスではなく、おもしろみが出るのは確かです。

flow-layoutの中に配置した、実際にコンティーに画像を貼り付けることで、表現の幅もなかなか便利な疑似フレームですが、一部ンツが入る「flow-area」にoverflow: autoを指広がるのではないでしょうか。また、<div> ののブラウザーではマウスにあるスクロールホ定することで、この部分を疑似フレームとして数を増やせば、スクロールバーの後ろに画像イールが動作しないので注意しましょう。

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

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この 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.