2009年10月アーカイブ: 大阪 ホームページ制作 Signature! - STUDY STYLE -

2009年10月31日

clearfix クリアフィックス 使い方


すぐ忘れるので備忘。

クリアフィックス
.clearfix

外側のBOX

内包する右側、左側にFLOATさせて並べたBOXがあった場合、FLOATを解除するために

「外側のBOX」にクラス.clearfixを付与。

CSSコードは

.clearfix:after {
  content: ".";  /* 新しい要素を作る */
  display: block;  /* ブロックレベル要素に */
  clear: both;
  height: 0;
  visibility: hidden;
}

.clearfix {
  min-height: 1px;
}

* html .clearfix {
  height: 1px;
  /*\*//*/
  height: auto;
  overflow: hidden;
  /**/
}

firefox、safari (clear:both)
IE7 (高さ指定で画像表示のバグを利用)
IE6 (高さ指定で画像表示のバグを利用、min-heightサポートなし)

の順に指定されている。


2009年10月17日

リンク先のサムネイルをプレビュー表示させるjavascript

ツールチップ形式でリンク先やサムネイル画像を拡大表示させることができると、閲覧者はページ遷移なしにリンク先や画像のイメージをつかむことができます。

クリックなしにイメージをつかめるというのは、結果的にクリックへ誘導させることができる可能性もあります。

そこで見つけたのが、リンクや縮小画像にウスオーバーするとそのリンク先のサイトの画像サムネイルや拡大画像ががツールチップのようにポップアップするjQueryのプラグインです。



拡大したときの画像や、リンク先のスクリーンショットの画像は自分で用意しなければなりません。

画像はともかくリンク先のスクリーンショットまで用意するのは面倒です。

そこで、無料のサイトのスクリーンショットのサムネイル作成サイトを利用して連携させると、もっと手軽に導入することができます。

サムネイル作成サービス HeartRails Capture

などを使います。使い方詳細はサイトを見て欲しいのですが、このプラグインで表示させる画像は「rel="ファイル名"」という記述を<a>要素にいれます。

そこで、

rel="http://capture.heartrails.com/180x150(縦横サイズ)/?見せたいリンク先URL"

というような記述を入れると、わざわざスクリーンショットを撮らなくても、サムネイル画像を表示させることができます。
上記サイトは英語なので日本語で解説しているサイトを併記します。


ツールチップとして、デザインもシンプルですし、かなり有効に使えるのではないかと思います。

2009年10月 2日

CSSでチェックボックスと文字の高さを揃える

えー大雑把な性格ですが、微妙な「ズレ」が気になったりするほうです。

今回はCHECKBOXとその横に並ぶ文字列が微妙に高さが違うのが気になりました。

CSS指定で

input { vertical-align: middle; }

以上で解決(笑)

どの要素にvertical-align: middleを指定するかが、ポイントです。

チェックボックスを内包する要素ではなく、直接チェックボックスにCSSを指定します。