December 2010 Archive

Dreamweaverコードヒントでfont-sizeプロパティのパーセント表記を追加する

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

dw_codehint.png

Dreamweaverはコードビューでコードを記述していると、最初の数文字で入力されるプロパティを予測してツールチップに表示してくれる便利な機能があります。

プロパティに対して値を入力する際に、そのプロパティに対して設定出来る値も一覧表示してくれるので、コーディング時にはこの機能は重宝します。

このコードヒントの機能ですが、configuration/CodeHints/CodeHints.xmlをカスタマイズすることで通常表示されない値を追加することが出来ます。

※カスタマイズは自己責任でお願いします。

Read more

CSS3/jQueryのnth-child()を利用したカラムレイアウト

Posted by poundhound on

  • このエントリーをはてなブックマークに追加
  • Share on Tumblr
  • Clip to Evernote

img_nth_demo01.jpg

商品リストなんかを掲載する場合、ボックスを3カラム/4カラムにレイアウトするケースが多々あると思います。今は3商品しか掲載しないけれど、そのうち4、5、6...と増えていってもレイアウトを維持するためには少々工夫する必要があると思います。


img_nth_demo02.jpg

当然のごとくボックス間にはマージンが存在していて、カラムの最後のボックスのマージンが邪魔...とは言えマージンを0にしたクラスを付加するのもメンテナンス性が落ちるため出来れば避けたい。

ul/li要素でマークアップしてpositionを利用する方法やネガティブマージンを利用する方法があると思います。今回はul/li要素を利用せずにシンプルにdivのみを利用した方法を紹介します。マークアップは次の通り。

Read more