デザイン

仕事でページを作る必要があり、その際に角丸テーブルを作りましたので、そのやり方をご紹介。

基本的にborder-radiusを使いますので、IE8以下は非対応ですが、IE8以下へはJavascriptライブラリなどで適宜対応してください。

なおここでは、シンプルな3行3列のテーブルを考えています。また前提として、幅100px、高さ30pxとしています。

“CSS3で角丸テーブルを作る”の詳細は »

CSS3から、box-shadowというプロパティが追加されたわけですが、実際に使ってみてこりゃ便利と思いましたので、備忘録も兼ねて記事に。

何が便利と思ったのかというと、例えば、固定幅のサイトの最外部に影を簡単に付けられるということが挙げられるかと思います。
今までは、その影をそれ用の画像を作って、リピートさせて表示というのをやっていましたが、box-shadowであればちょこちょこコードを書くだけで済むと。

“CSS3のbox-shadowをメモ”の詳細は »

ウェブアンケートとか、テーブルを使ったフォームでよくあるもので、例えば以下のようなコードで書かれるものです。

これのテーブルセル内をクリックすると、チェックボックスなりラジオボタンなりがon状態にする方法です。

フォームを弄る必要があって、調べていたのですが、フォームをグループ化するのに便利な、fieldsetタグなるものがあるのを思い出しました。

というわけで、fieldsetタグについてのメモになります。

Microsoftが、IE6、7の強制アップデートを表明しましたが、XPでは最新でもIE8までなっております。IE9は多少増しになりましたが、頻繁にアップデートされるChromeやFirefoxのように、最新のものに対応していないという、制作側からしたら泣きたくなるような状況がまだまだ続きます。

というわけで、IEを最新のものに対応させるJavascriptライブラリをご紹介。

HTMLの中にliタグがあります。このliタグには、CSSのlist-style-imageで、○とか●とかの部分を、画像にすることができます。

ただ、list-style-imageで画像を指定すると、画像の位置がおかしくなる場合があります。

前から気になっていた、Web制作の現場で使うjQueryデザイン入門ですが、こちらを読んでみて、非常に入門に適した本だと思いました。

以前、Tableタグを学ぶで書いた、tableタグの内部でスクロールバーを表示させる方法ですが、こちらのものより、よりシンプルな方法を見つけたのでご紹介いたします。

ウェブサイトに欠かせないものになっているCSS。そのCSSに追加しておくと便利な物を紹介してみようと思います。

HTMLを触り始めてから4、5年経過していますが、昨日まで知らなかったのでご紹介。

　今までtableタグには何らかの形（widthもしくはCSS）で幅を指定していたのですが、tableタグ自体に指定するより、thタグtdタグに指定した方がレイアウト的にかなり綺麗になるということに気づきました。