CSS（スタイルシート）

CSSによるフォント指定がない場合、ブラウザはfont-sizeを16pxで表示します。これを利用してbody要素にfont-size: 62.5％を予め指定しておくと、「0.625 * 16px = 10px」つまり「10px = 1em」という様に、emフォントをpx単位で計算できるようにする方法。

http://www.webbibo.com/stylesheet/font/font_625.html

07.09.15

CSSフォント・リンク一覧をもっと見る

CSS（スタイルシート）だけでグラデーションを表現する方法のまとめ

CSS（スタイルシート）でグラデーションを表現する方法をブラウザ別の一覧表にしてみました。

http://www.webbibo.com/stylesheet/image/css-grad.html

09.07.31

画像に半透明のキャプションや著作者のクレジットをつけるCSS

画像に半透明のキャプションや著作者のクレジットをつけるCSSです。

http://www.webbibo.com/stylesheet/image/image-caption.html

09.06.08

リンクがついた画像の下線を消す方法

リンク内の画像にある下線を消す方法です。

http://www.webbibo.com/stylesheet/image/img_underline.html

09.03.17

文字量によって背景を伸縮させるタイトルバー

タイトルなどに使う背景画像を文字量によって伸縮させる方法です。

http://www.webbibo.com/stylesheet/image/elastic_bg.html

09.03.11

背景画像をリサイズ（拡大・縮小）させる方法

CSSで背景画像をリサイズする方法です。なかなか思いつかないテクニックですが、なかなか使う機会もないテクニックです。

http://www.webbibo.com/stylesheet/image/bg_dimension.html

08.05.26

背景画像のちらつきを発生させないロールオーバー

CSSで背景画像のちらつきを発生させないロールオーバーの作り方です。

http://www.webbibo.com/stylesheet/image/flicker_over.html

08.05.11

IE6でロールオーバー時の背景画像のちらつきを解消する

IE6にてロールオーバー効果を付けた背景画像にマウスカーソル（ポインタ）をあわせると、ちらついたり砂時計のマークが表示されたりします。これを解消する方法。

http://www.webbibo.com/stylesheet/image/bg_flickr.html

08.02.14

画像の周りに写真風の枠をつける

画像の周りに写真風の枠をつけるテクニックです。

http://www.webbibo.com/stylesheet/image/photoframe.html

08.01.25

CSSイメージ・背景一覧をもっと見る

リストとボーダーでシンプルなサイトマップを作る

リストとボーダーでサイトマップを作成する方法です。

http://www.webbibo.com/stylesheet/list_menu/list_sitemap.html

09.10.15

水平型リストで画像を並べた時の隙間を消す6つの方法

リストタグで水平に並べた場合、li要素とli要素の間に隙間が生じます。この隙間を消す方法。6つ目のfont-sizeを使った方法を追加（09.09.08）

http://www.webbibo.com/stylesheet/list_menu/h_list_space.html

09.09.08

CSS（スタイルシート）で連番・項目名などを付ける

CSS（スタイルシート）を使って、サイトマップやQ&A、契約文書などの各項目の頭に数字やマーク、文字をつける方法

http://www.webbibo.com/stylesheet/list_menu/counter.html

09.08.28

垂直型リストで画像を並べた時の隙間を消す方法

画像をリストで並べた場合、画像の下に隙間が生じます。この隙間を消す方法。

http://www.webbibo.com/stylesheet/list_menu/list_img_space.html

08.05.28

リストタグを使用した際にIEで生じる隙間を消す

リストタグを使用してメニューを作ったりする際にFirefox、Safari等で見るとちゃんと隙間なくメニューの間が詰まってるのに、IEだけに変な隙間が入る事があります。それを解決する方法。

http://www.webbibo.com/stylesheet/list_menu/list_space.html

08.05.25

dtとddを横並びにしたメニューのサンプル5個

dlのdt,ddを横並びにしたサンプルを作ってみました。会社概要のページ・個人のプロフィールページ・Q&Aなどを作る際の参考に。

http://www.webbibo.com/stylesheet/list_menu/dtdd_yoko.html

08.02.27

CSSリスト・メニュー一覧をもっと見る

ページの文字コードとは違う任意の文字コードをformから送信する方法

UTF-8のページで、EUC-JPにエンコードしたデータをformから送信したい場合の処理の仕方。

http://www.webbibo.com/stylesheet/form/accept-charset.html

09.07.10

inputボタン（送信ボタン）を画像にするCSS

inputボタンの背景に画像を指定する方法。フォーム内容をGET送信で送りつつ、ボタンのx,y座標は表示したくない場合に使えます。

http://www.webbibo.com/stylesheet/form/input_image_btn.html

08.08.27

各ブラウザでのフォーム（inputボタン）の位置や大きさを合わせる

IE6、IE7、Firefox、Opera、Safariで表示した時のフォーム（inputボタン）の位置や大きさを合わせるテクニック。

http://www.webbibo.com/stylesheet/form/input_position.html

08.06.10

IE6・７でinputタグに余計なマージンが発生するバグの対処

margin-leftとwidth指定したブロック要素の直下にinputやtextareaがある場合に余計なマージンが発生します。この対処方法。

http://www.webbibo.com/stylesheet/form/input_margin.html

08.06.04

IE7のページズームをするとフォームとその横のテキストが重なる現象を解決

IE7のページズーム機能を使ってページを拡大するとフォームコントロールとあとに続くテキストが重なってしまう現象の解決方法です。

http://www.webbibo.com/stylesheet/form/form_text.html

08.05.02

CSSフォーム一覧をもっと見る

Firefoxでのテーブルボーダー1pxのズレを無くす方法

border-collapseを使って、tableにborderを付けたらFirefoxではtableのサイズが指定した幅より1pxはみ出します。その解決方法。

http://www.webbibo.com/stylesheet/table/collapse-firefox.html

10.01.05

テーブルの行を削除・追加しても、自動的に連番になる方法

テーブルの行を削除または追加しても、自動的に番号を振り直す方法です。CSSを使った方法とJavascriptを使った方法の2種類を用意しました。

http://www.webbibo.com/stylesheet/table/renban.html

09.08.29

tableとcaptionのmarginについて

tableとcaptionのmarginはブラウザ間で表示に差異があります。クロスブラウザで表示するにはどうしたらいいのか、調べました。

http://www.webbibo.com/stylesheet/table/caption-margin.html

09.05.30

CSS のフォントサイズ指定が table に反映されない問題を解決

body等にフォントサイズを指定したら、そのサイズがテーブル内に反映されない問題を解決。

http://www.webbibo.com/stylesheet/table/table_font.html

08.08.03

テーブルの表示スピードを速くさせる

表の1行目の列幅を決定させることで、表のレンダリング速度を向上させる方法です。

http://www.webbibo.com/stylesheet/table/table_fixed.html

08.04.30

テーブルのセル間の境界線を重ねる方法

通常、テーブルのセル間は離れて表示されますが、CSSを使って境界線を重ねて表示させる方法です。

http://www.webbibo.com/stylesheet/table/collapse.html

08.04.24

テーブルで1行おきに背景色を変える。

テーブルで1行おきに背景色を変えて見やすくする方法です。行を追加・削除しても1行おきに背景色が変わったままです。Javascriptを使って簡単に実現できます。

http://www.webbibo.com/stylesheet/table/trcolor.html

08.04.22

CSSテーブル・表一覧をもっと見る

1px欠けの角丸ボックスをCSSだけで作る方法

CSSだけで1px欠けの角丸を作る方法です。シャープなボックスに少し柔らかい印象を与えてくれます。

http://www.webbibo.com/stylesheet/layout/1pxcorner.html

09.12.03

テキストボックスを画像の下に回り込ませない方法

画像のサイズが変わっても、隣接するテキストボックスは画像の下に回り込まず、なおかつ、テキストボックスのサイズが画像に合わせて自動的に変わる方法です。

http://www.webbibo.com/stylesheet/layout/text_wrap.html

09.10.21

CSSでボックスの内容物を上下中央揃えにする方法3種。

CSSだけでボックス内のテキスト・画像・ブロックなどを上下中央揃えにする方法です。

http://www.webbibo.com/stylesheet/layout/vertical.html

09.10.15

floatを使わずにinline-blockで横並びにする方法

ボックスを横並びにする場合floatを使いますが、その中で高さが違うボックスが混ぜっている場合、そこでレイアウトが崩れてしまいます。これを崩れないようにする方法を紹介します。

http://www.webbibo.com/stylesheet/layout/inline-block.html

09.07.07

CSSと画像で引用（blockquote）を見栄えよく表示する

引用を見栄えよく表示するCSSサンプルです。

http://www.webbibo.com/stylesheet/layout/blockquote-css.html

09.06.17

SEOを考慮した3カラムレイアウトのテンプレート

SEO的に検索エンジンに読ませたい内容をHTMLの先頭にもっていきたいところですが、3カラムの場合、どうしても<div>タグで左カラムと中カラムを1回囲まないと中カラムのメインコンテンツを先頭にもっていくことができません。ですが、ネガティブマージンを使えばその<div>タグを使わなくても簡単に3カラムのCSSレイアウトができます。

http://www.webbibo.com/stylesheet/layout/search_3column.html

09.05.28