疑似クラス,hoverなどをaタグ以外でも使えるようにする。

(1)以下のサイトでcsshover.htcをダウンロード
http://peterned.home.xs4all.nl/csshover.html#changes

(2)任意の場所にアップロード
(3)cssに以下のように記述(パスは実行するhtmlファイルからcsshover.htcへのパス)

body { behavior:url("csshover.htc"); }
そのほか動かない場合の対処などは以下のサイトで
http://d.hatena.ne.jp/sa90/20080403/1207653253

(4)また普通の要素にマウスポインタを表示させたい時は以下の
CSSを加える。
<style> cursor:pointer;/*リンクポインタが表示される*/ </style>
<参考URL>
http://www.htmq.com/style/cursor.shtml

CSSだけでギャラリーを作る。マウスオーバーで画像切り替え

画像のマウスオーバーで、離れた位置に拡大画像を表示する

clear:both;やclearfixの代わりにoverflowでfloatの周り込みの解除する。

floatの周り込みの解除方法。
overflowを使うのが今の所スマートな感じがする。


.overflow{ _zoom: 1;/*IE6用*/ overflow: hidden; }

以上の記述をfloatを解除したい要素に指定する。

clear:borth;は空divなどの余計な空要素を作るし
clearfixは効かない事も多いのでこれが簡潔でいいかも。

2枚の画像を重ねるCSS。（マスクに使用）

白の穴空きpng画像をマスクにつかって
下には正方形の写真を配置。

2つのimg画像をdivでくくって
divにposition:relative;
マスクの方(2枚目の画像)にabsoluteをかける。

参考サイト

自由な形で自由な形をhoverさせる。DreamweaverとCSSで実装。

1. hover前の画像をhtmlに読み込む

2. その画像にDreamweaverのareamap機能を使って
hoverさせる選択範囲を指定する。

3.hover後の画像をスワップイメージなどで挿入する。


完成。

<参考サイト>
http://www.inclover-inc.com/pocket/px/coding/html/eid161.html
http://www.geocities.jp/margin0px/sample/mapimg.html

特定のhtmlをIE意外で表示、非表示を設定出来るIEの独自拡張。

<!--[if IE ]>
   <p>この表示はIEだけで見えます。</p>
<![endif]-->


<!--[if IE 6 ]>
   <p>この表示はIE6だけで見えます。</p>
<![endif]-->


<!--[if lte IE 6 ]>
   <p>この表示はIE6以下で見えます。</p>
<![endif]-->


<![if !IE ]>
   <p>この表示はIE以外のブラウザで見えます。</p>
<![endif]>


<![if !IE 6 ]>
   <p>この表示はIE6以外のブラウザで見えます。</p>
<![endif]>

リストマークの画像のずれを修正する(backgroundでリストマーク指定)

(例) 

li {
    padding-left: 12px;
    background: url(hogehoge.gif) no-repeat 0px 0.5em;
    list-style: none;
}

padding-left は画像を配置する分の余白です。
url の後ろの指定は順に

background-repeat（画像の繰り返し表示）

background-position-x（X軸方向の開始位置）

background-position-y（Y軸方向の開始位置）

ie6、7バグ。が階段状になる

li a {

display:block;

float:left;

width:100px;

}

だと階段状に表示されるバグがある。
なので以下のようにすると解決する。

li a {

display:block;

width:100px;

}

li {

display:block;

float:left;

}

<参考URL>
http://docs.yumeka.org/bg_g/709.html

ie6 でposition:fixed;を実装する。

<!--[if lt IE 7]> 
<style type="text/css">
 #fixed {
  position: absolute;
  top: expression(eval(document.documentElement.scrollTop+50));
  left: 100px;
 }
</style>
<![endif]-->

をhtmlに表記、cssや数値は状況によって変える。

body {
  background: url(null) fixed;
}

スタイルシートに記述する。

これだけ。。

検索フォームをCSSでデザインするサンプル

dreamweaver テンプレート使い方

・テンプレート機能を使ってみよう 
パート1：「編集可能領域」と「オプション領域」の使い方

・ドリ、テンプレート関連まとめサイト
http://blog.cgfm.jp/garyu/archives/1198 

Google mapsカスタマイズ。

Google mapsをカスタマイズする。

<マーカーをオリジナルのものにする>

フォームを作る。html

http://www.tagindex.com/html_tag/form/form.html

HTMLメールの作り方

【制作の流れ】
（１）htmlメールの画像は絶対パスにする。
※重要、iPhoneなどでリンクボタンを効かせるには画像は絶対パスである必要がある。
相対パスにすると表示はされるがメールに添付される形になりクリックすると画像扱いになる。

（２）制作したhtmlメールをサーバーにあげる
（３）safariの「ファイル」>「このページの内容をメールで送信する」でhtmlメールを
作成。


(参考URL)http://www.bulanco.net/blog/2008/12/htmlmail.html

※Gmailはhtmlメールにうまく対応していない。
もしする時はすべてのマージンをゼロにして、
height、widthを指定し、imgにdisplay:block;をかける。

(ex.)
<table width="700" height="1687" border="0" cellspacing="0" cellpadding="0">
<td><img style="display:block" src="images/index_02.jpg" alt="" width="700" height="120" border="0"></td>