タグ:

CSS3で角丸テーブルを作る

角丸テーブルをCSS3を使って実現する

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

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

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


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

CSS3のbox-shadowをメモ

box-shadowについてのメモ。

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

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


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

テーブルセルをクリックするとinputにチェックが入るCSSの書き方

モダンブラウザで実装可能な、フォームを便利にするテク。IEはダメだけど。

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

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


“テーブルセルをクリックするとinputにチェックが入るCSSの書き方”の詳細は »

IEでもCSSやHTML5に対応できるJavascriptライブラリ

JSライブラリを使って、IEでもCSS3やHTML5を。

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

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


“IEでもCSSやHTML5に対応できるJavascriptライブラリ”の詳細は »

リストタグの画像はbackgroundで指定したほうがいい

リストの画像は、backgroundで指定すると吉

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

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


“リストタグの画像はbackgroundで指定したほうがいい”の詳細は »

table内をCSSだけでスクロール表示させる

tableとCSSだけで作る、テーブル内スクロール表示用のコード。

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


“table内をCSSだけでスクロール表示させる”の詳細は »

追加しておくと便利なCSS

CSSにクラスを追加することで、手軽に装飾ができるようになります。

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


“追加しておくと便利なCSS”の詳細は »

綺麗なtableタグレイアウトには、幅を指定しない方がいい

tableタグは、tdとthに幅を指定してやると、綺麗にレイアウトできる。

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

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


“綺麗なtableタグレイアウトには、幅を指定しない方がいい”の詳細は »

Tableタグを学ぶ

本日、仕事でやったことなのですが忘れないうちにメモ。

僕は基本的に、HTMLやCSSはあらかた理解しているのですが、Tableタグ関係とFormタグ関係は苦手です。

というのも、今の時代、サイトのレイアウトテーブルなんて使いませんし、プログラムもほとんど触ったことがないのでフォームタグなんて使いません。

そんな状況で受けた本日の研修では、テーブルタグを使ったデータ表示をやりましたので、復習も兼ねて情報を載せておきます。


“Tableタグを学ぶ”の詳細は »