<br style="clear:both;" /> を使わないfloatクリア(IE対応)

複雑なデザインのサイトをコーディングしていてfloatを多用すると、クリアするのをを忘れたりすることがあって、その原因を探すのに無駄な時間を使ってしまうことがあります。floatをクリアする方法として一番楽なのは<br style="clear:both;" />を用いた方法です。しかしこの方法も完璧ではありません。例えばリストを使った時などです。

続きを読む »

  • この記事をtwitterでつぶやく
  • この記事をはてなブックマークに追加
  • この記事をYahoo!ブックマークに登録
  • この記事をクリップ!
  • この記事をdeliciousにブックマーク
  • Google Bookmarks

CSSの背景画像をランダムに表示

CSSのbackground-imageをランダムに表示させることが出来たら良いなと思っていたのですが、とても手軽に実現する方法がありました。Desgin Walkerさんで配布されているrotator.phpです。

CSSのバックグラウンド画像をランダムに表示してみる

続きを読む »

  • この記事をtwitterでつぶやく
  • この記事をはてなブックマークに追加
  • この記事をYahoo!ブックマークに登録
  • この記事をクリップ!
  • この記事をdeliciousにブックマーク
  • Google Bookmarks

Mac版 IE5のCSS対策 専用CSS もしくは除外

Mac版 IE5はCSSでレイアウトしたサイトにとってかなりの難関です。
既にサポートされていないし、使用者も殆どいない筈ですがゼロではありません。そんな環境で見ている方が悪いと切り捨てるのは簡単ですが、そんな人にも見てほしいと思うならMac版 IE5だけに適応するCSSを作るか、もしくはMac版 IE5だけCSSを適応せずにHTMLだけで見せる、という方法があります。

前者は専用のCSSをCSSハックなどしてを作る手間がありますが、レイアウトを殆ど意図した通りに表示させることが可能でしょう。後者は多少読みにくくなりますが、CSSはレイアウトを決めているだけですので、情報だけなら十分HTMLで伝えることが出来ます。

続きを読む »

  • この記事をtwitterでつぶやく
  • この記事をはてなブックマークに追加
  • この記事をYahoo!ブックマークに登録
  • この記事をクリップ!
  • この記事をdeliciousにブックマーク
  • Google Bookmarks

1emを10pxにする方法

一般的なブラウザはデフォルトの文字サイズが16ピクセルになっています。
ですから「%」や「em」で文字サイズを指定するとそれが何ピクセルにあたるのか、直感的に分かりません。しかしブラウザのデフォルトの文字サイズを10ピクセルにしてしまえば、「1.3em=13px」、「2em=20px」というように分かりやすくなります。方法は実に簡単でbodyに対して以下の一行を加えるだけです。

body { font-size: 62.5%; }

上記を加えるだけでCSSの編集中文字サイズの指定が直感的に行えるようになります。

  • この記事をtwitterでつぶやく
  • この記事をはてなブックマークに追加
  • この記事をYahoo!ブックマークに登録
  • この記事をクリップ!
  • この記事をdeliciousにブックマーク
  • Google Bookmarks

フリーでValidなCSS/XHTMLテンプレート

テンプレート

CSS/XHTMLのテンプレートを配布します。

テンプレートサンプル

CSS/XHTMLともにValidでSEOにも少し気をつかっています。
さらにメールフォームも同梱しています(サンプル
PHPが利用出来るサーバーでご利用頂けます。
Docodemo HeadlineさんのPHPフォームを利用させて頂いています。)

利用は無料です。

使用条件

1.アダルト不可です(商用サイトはご相談下さいメールフォーム
2.下部のAirNXへのリンクは外さないで下さい。

ダウンロード

近々、MovableTypeやWordpressのテンプレートへの対応も考えています。

  • この記事をtwitterでつぶやく
  • この記事をはてなブックマークに追加
  • この記事をYahoo!ブックマークに登録
  • この記事をクリップ!
  • この記事をdeliciousにブックマーク
  • Google Bookmarks