TopCSS > 2012年9月
2012年9月18日

Google検索結果の横に表示されるスクリーンショットのギザギザをCSSで表示する

September 18,2012 1:55 AM
Tag:[, ]
Permalink

Google検索結果の横に表示されるスクリーンショット上下のギザギザをCSSで表示する方法を紹介します。

スクリーンショット上下のギザギザ

1.Google検索結果の横に表示されるスクリーンショットについて

Google検索で、検索結果の横に表示される「>>」にマウスをポイントまたはクリックすると、

Google検索結果

サイトのスクリーンショットが表示されます。

サイトのスクリーンショットが表示

スクリーンショットの縦幅が長い場合、冒頭に示したとおり、分割したことを示すギザギザが表示されます。

分割したことを示すギザギザを表示

ということで、このギザギザを表示するCSSを調査してみました。

完全に調査できていないかもしれない&かなり省略していますので、ご利用になる場合はご注意ください。また、ギザギザ画像(透過PNG)は各自でご用意ください。

Google Chrome/Firefox/IE9で表示することを確認しています。IE9は条件付きコメントで振り分けが必要です。

2.ギザギザを表示する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要素に書き換えてみたのですが、微妙に表示がずれてしまうようなのでそのままにしています。

Comments [0] | Trackbacks [0]
2012年9月11日

CSS「ボックスモデル」の意味

September 11,2012 1:55 AM
Tag:[, ]
Permalink

CSSのボックスモデルについて、他の記事とは異なる観点で解説したいと思います。

1.はじめに

いきなりですいませんが、CSSの「ボックスモデル」とは、次のようなものを指します(詳細は色々端折ってます)。

ボックスモデル

この図は、CSSのボックスモデルの解説では必ずといっていいほど登場します。

ただ、そこにmarginやborder、padding、floatやマージンの相殺といった説明があっても、「結局ボックスモデルって一言でいうと何?」という感じで、それ自体が何を指すものかといった説明がされていないものが多いのではないか?と感じてました(探せばあるのかもしれませんが)。

ということで、ボックスモデル自体の意味について、自分なりに解説してみたいと思います。

認識誤りがありましたらどこかでつぶやいてください。

2.「ボックスモデル」について

まず、ボックスモデルについては、CSS2.1仕様の8章に次のように記述されています。

8 Box model

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の定義で次のように書かれています。

3.1 Definitions

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要素ごとに生成される
  • ボックスは視覚的なフォーマット・モデルによってレイアウトされる

3.個人的な見解

2項の内容がボックスモデルを指しているのですが、もう少し抽象的にまとめると、「ボックスモデル」は「HTML文書内に記述した要素に対する考え方・概念を示したもの」という風に捉えています。

前述のとおり、CSSの仕様上、HTML文書内の要素(div要素やp要素など)のひとつひとつが「ボックス」という矩形(くけい=四角形)の領域を生成します。

この要素ごとに生成されたボックスのスタイル、あるいはボックス同士の組み合わせについてのスタイルに対する考え方が「ボックスモデル」ということになります。

そして、そのモデルの中に、冒頭の図のようなmarginやborder、paddingというプロパティが用意されている、ということです。

4.おわりに

ということで、ボックスモデルの意味ついて考察して、個人的にはすっきりした感じです。

皆さんもご自身の解釈を行い、ボックスモデルの意味について理解をよりいっそう深めてみてはいかがでしょうか。

Comments [0] | Trackbacks [0]
Now loading...
Recent Entries
ギターに入った猫
掲載広告募集
Styles
Font Size
Default
For defective color vision
Gray Scale
RGB Color
Search this site

このブログをメールで購読する by:FeedBurner

AMN
Categories
Monthly Archives
2021年
2020年
2019年
2018年
2017年
2016年
2015年
2014年
2013年
2012年
2011年
2010年
2009年
2008年
2007年
2006年
2005年
2004年
2003年
BlogPeople
Syndicate this site
FeedBurner(RSS1.0/RSS2.0/Atom)
Counter
これまでのアクセス
Powered by
Movable Type 6.0.3