Google検索結果の横に表示されるスクリーンショットのギザギザをCSSで表示する
Google検索結果の横に表示されるスクリーンショット上下のギザギザをCSSで表示する方法を紹介します。
１．Google検索結果の横に表示されるスクリーンショットについて
Google検索で、検索結果の横に表示される「＞＞」にマウスをポイントまたはクリックすると、
サイトのスクリーンショットが表示されます。
スクリーンショットの縦幅が長い場合、冒頭に示したとおり、分割したことを示すギザギザが表示されます。
ということで、このギザギザを表示するCSSを調査してみました。
完全に調査できていないかもしれない＆かなり省略していますので、ご利用になる場合はご注意ください。また、ギザギザ画像（透過PNG）は各自でご用意ください。
Google Chrome/Firefox/IE9で表示することを確認しています。IE9は条件付きコメントで振り分けが必要です。
２．ギザギザを表示するCSS
サンプルを作りましたので、表示はそちらからご覧ください。
サンプルのHTML
<div>
<a href="http://user-domain/">
<div class="vssrd">
<div class="vssrdi" style="border-top-width: 1px; border-bottom-width: 0px;">
<img class="vsi" src="test.png" />
</div>
<div class="vstd vstbtm1">
<div class="vsti vstibtm"></div><div class="vsti vstibtm"></div><div class="vsti vstibtm"></div>
</div>
</div>
<div class="vssrd" style="margin-top: 14px;">
<div class="vssrdi" style="border-top-width: 0px; border-bottom-width: 0px;">
<img class="vsi" src="test2.png" />
</div>
<div class="vstd vsttop1">
<div class="vsti vstitop"></div><div class="vsti vstitop"></div><div class="vsti vstitop"></div>
</div>
<div class="vstd vstbtm2">
<div class="vsti vstibtm"></div><div class="vsti vstibtm"></div><div class="vsti vstibtm"></div>
</div>
</div>
</a>
</div>サンプルのCSS
body {
background-color: #fafafa;
}
a img{
border: none;
}
.vssrd {
max-width: 432px;
display: block;
height: auto;
}
.vssrdi {
width: 430px;
border: 1px solid #bbb;
border-bottom-width: 0px;
}
.vstd {
line-height: 0;
position: absolute;
width: 100%;
}
.vsti.vstibtm {
background: url("背景画像のURL") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 9px;
width: 144px;
overflow:hidden;
}
.vsti.vstitop {
background: url("背景画像のURL") no-repeat scroll 0 0 transparent;
display: inline-block;
height: 9px;
width: 144px;
overflow:hidden;
}
.vsi {
width: 100%;
display: block;
height: auto;
}
.vstbtm1 {
top: 231px;
}
.vsttop1 {
top: 251px;
}
.vstbtm2 {
top: 433px;
}ギザギザ画像のHTMLは、次の部分で3つの画像を並べ、インラインブロックまたはインラインに変換して表示しています。
<div class="vstd vstbtm1">
<div class="vsti vstibtm"></div><div class="vsti vstibtm"></div><div class="vsti vstibtm"></div>
</div>div要素が3つあるのは、CSSスプライトの都合で短い画像を3つを並べているみたいです。画像作る際は長いものを1つ作ればいいかもしれません。並べる場合、中のdiv要素は改行しないでください。
表示位置は、次のCSSでtopからの指定で設定しています。Googleの場合はtopの代わりにbottomを設定して、スクロールにも対応しているようです。
.vstbtm1 {
top: 231px;
}
.vsttop1 {
top: 251px;
}
.vstbtm2 {
top: 433px;
}div要素にもstyle属性があり、style要素に書き換えてみたのですが、微妙に表示がずれてしまうようなのでそのままにしています。
CSS「ボックスモデル」の意味
CSSのボックスモデルについて、他の記事とは異なる観点で解説したいと思います。
１．はじめに
いきなりですいませんが、CSSの「ボックスモデル」とは、次のようなものを指します（詳細は色々端折ってます）。
この図は、CSSのボックスモデルの解説では必ずといっていいほど登場します。
ただ、そこにmarginやborder、padding、floatやマージンの相殺といった説明があっても、「結局ボックスモデルって一言でいうと何？」という感じで、それ自体が何を指すものかといった説明がされていないものが多いのではないか？と感じてました（探せばあるのかもしれませんが）。
ということで、ボックスモデル自体の意味について、自分なりに解説してみたいと思います。
認識誤りがありましたらどこかでつぶやいてください。
２．「ボックスモデル」について
まず、ボックスモデルについては、CSS2.1仕様の8章に次のように記述されています。
The CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. （CSSボックスモデルは、ドキュメントツリーの要素のために生成され、視覚的なフォーマット・モデルによってレイアウトされる長方形の箱について述べます。）
ちなみに「ドキュメントツリー」とは、CSS2仕様の3.1の定義で次のように書かれています。
The tree of elements encoded in the source document. Each element in this tree has exactly one parent, with the exception of the root element, which has none. （ソースドキュメントの中でコード化された要素のツリー。親要素を持っていないルート要素を除き、ツリーの要素はそれぞれ1つの親要素を持っています。）
「視覚的なフォーマット・モデル」の詳細については、CSS仕様の「9 Visual formatting model」を参照してほしいのですが、要するに複数のボックスモデルを組み合わせた場合などのレイアウトの概念を示すもののようです。
で、上記の仕様の説明を要約すると、「ボックスモデル」とは次のことのようです。
- 長方形の箱（ボックス）は個々のHTML要素ごとに生成される
- ボックスは視覚的なフォーマット・モデルによってレイアウトされる
３．個人的な見解
２項の内容がボックスモデルを指しているのですが、もう少し抽象的にまとめると、「ボックスモデル」は「HTML文書内に記述した要素に対する考え方・概念を示したもの」という風に捉えています。
前述のとおり、CSSの仕様上、HTML文書内の要素（div要素やp要素など）のひとつひとつが「ボックス」という矩形（くけい＝四角形）の領域を生成します。
この要素ごとに生成されたボックスのスタイル、あるいはボックス同士の組み合わせについてのスタイルに対する考え方が「ボックスモデル」ということになります。
そして、そのモデルの中に、冒頭の図のようなmarginやborder、paddingというプロパティが用意されている、ということです。
４．おわりに
ということで、ボックスモデルの意味ついて考察して、個人的にはすっきりした感じです。
皆さんもご自身の解釈を行い、ボックスモデルの意味について理解をよりいっそう深めてみてはいかがでしょうか。
