テーブルの行を削除・追加しても、自動的に連番になる方法NEW!
テーブルの行を削除または追加しても、自動的に番号を振り直す方法です。CSSを使った方法とJavascriptを使った方法の2種類を用意しました。
http://www.webbibo.com/stylesheet/table/renban.html
09.08.29
CSS(スタイルシート)で連番・項目名などを付ける
CSS(スタイルシート)を使って、サイトマップやQ&A、契約文書などの各項目の頭に数字やマーク、文字をつける方法
http://www.webbibo.com/stylesheet/list_menu/counter.html
09.08.28
印刷時の改ページ部分を指定する方法
ページを印刷すると自分の意図しない箇所で途切れてしまう時、page-break-beforeやpage-break-afterを使って、印刷時の改ページ部分を制御します。
http://www.webbibo.com/stylesheet/print/page-break.html
09.08.16
CSS(スタイルシート)だけでグラデーションを表現する方法のまとめ
CSS(スタイルシート)でグラデーションを表現する方法をブラウザ別の一覧表にしてみました。
http://www.webbibo.com/stylesheet/image/css-grad.html
09.07.31
ページの文字コードとは違う任意の文字コードをformから送信する方法
UTF-8のページで、EUC-JPにエンコードしたデータをformから送信したい場合の処理の仕方。
http://www.webbibo.com/stylesheet/form/accept-charset.html
09.07.10
floatを使わずにinline-blockで横並びにする方法
ボックスを横並びにする場合floatを使いますが、その中で高さが違うボックスが混ぜっている場合、そこでレイアウトが崩れてしまいます。これを崩れないようにする方法を紹介します。
http://www.webbibo.com/stylesheet/layout/inline-block.html
09.07.07
Firefoxのバージョン別CSSハック一覧表
Firefox 1.5・2・3のバージョン別CSSハック一覧表です。
http://www.webbibo.com/stylesheet/hack/ff_hack.html
09.07.01
CSSと画像で引用(blockquote)を見栄えよく表示する
引用を見栄えよく表示するCSSサンプルです。
http://www.webbibo.com/stylesheet/layout/blockquote-css.html
09.06.17
外部リンクや各ファイルに合ったアイコンを自動的につける
CSSで外部リンク、PDF、Excel、Word、zipファイルへのリンクにアイコンを自動的に付ける方法です。
http://www.webbibo.com/stylesheet/font/link_icon.html
09.05.11
サイズの異なる文字が上下の行に重なるのを防ぐ
同じ行内にサイズの違う文字が含まれてた際に、文字が上下の行に重なるのを防ぐ方法。
http://www.webbibo.com/stylesheet/font/lineheight.html
09.01.08
テキストにグラデーション効果をつける
テキストにグラデーション効果をつける方法。
http://www.webbibo.com/stylesheet/font/text_gradient.html
08.09.28
FireFoxのname属性のリンクを消す(a:hoverを適用させない)方法
<a name="">を使用したときに、CSSのリンク指定が影響してフォント色や背景色が変わったりすることがあります。これを防ぐ方法を紹介します。
http://www.webbibo.com/stylesheet/font/ff_name.html
08.08.19
ブラウザ別デフォルトフォントサイズ一覧表
各ブラウザのデフォルトフォントサイズを表にしてみました。
http://www.webbibo.com/stylesheet/font/default_font.html
08.06.24
フォント100.01%指定でフォントサイズの継承問題を解決
フォントサイズをemで指定した場合、IEでフォントサイズ継承の問題がでます。これを回避するにはbody要素にfont-size: 100.01%を指定します。
http://www.webbibo.com/stylesheet/font/font_100-01.html
07.09.16
フォント62.5%指定でemフォントをpx単位で計算できるようにする
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
フォントサイズ比較一覧表
絶対指定、相対指定をしたフォントを並べた一覧表。簡単な表ですがフォントサイズを比較するのに便利だと思います。
http://www.webbibo.com/stylesheet/font/font_inspect.html
07.09.06
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
ページの文字コードとは違う任意の文字コードを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・7で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
テーブルの行を削除・追加しても、自動的に連番になる方法NEW!
テーブルの行を削除または追加しても、自動的に番号を振り直す方法です。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
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
IE6とモダンブラウザにmin-widthを疑似的に指定する方法
最小幅を指定する「min-width」をIE6にも適用させる方法です。
http://www.webbibo.com/stylesheet/layout/min_width.html
09.05.15
画像を使わずにCSSだけで角丸を作る方法、PART2
2行目以降を字下げする場合に使えるテクニック。注意書きや箇条書きなどを書くときに使えます。
http://www.webbibo.com/stylesheet/layout/round2.html
09.02.05
画像を使わずにCSSだけで角丸を作る方法、PART1
画像を使わずにCSSだけで角丸を実現させる方法です。 わざわざ角丸画像を作らなくて済むので、手っ取り早く角丸を作りたい時に使えるテクニックです。
http://www.webbibo.com/stylesheet/layout/round.html
08.11.10
フッターを画面下部に固定する方法(Opera 9.51対策含む)
フッターを画面下部に固定する方法はOpera 9.51だとレイアウトが崩れることがわかりました。これを解決する方法です。
http://www.webbibo.com/stylesheet/layout/footer_fixed.html
08.07.26
数個おきのブロックにclearを指定して横並びをclearする方法
CSS3で定義されているnth-child()疑似クラスを使って、指定した数個おきにclearする方法です。nth-child()疑似クラスは未サポートのブラウザが多いので、これをJavascriptで実現する方法も載せています。
http://www.webbibo.com/stylesheet/layout/nth-child.html
08.07.15
印刷時の改ページ部分を指定する方法
ページを印刷すると自分の意図しない箇所で途切れてしまう時、page-break-beforeやpage-break-afterを使って、印刷時の改ページ部分を制御します。
http://www.webbibo.com/stylesheet/print/page-break.html
09.08.16
リンク先のアドレスを表示させ印刷する方法
リンク先のアドレスを印刷物上で確認したい場合、CSSでリンク部分にそのアドレスも付けて印刷させる方法。
http://www.webbibo.com/stylesheet/print/link_address.html
09.02.15
IEで背景画像が印刷されない時の解決方法
IE6で「背景の色とイメージを印刷する」にチェックをしても、背景画像が印刷されない時の解決方法。
http://www.webbibo.com/stylesheet/print/ie_bg.html
08.09.17
Firefoxでページが切れて、印刷ができない(改ページせずに消える)
Firefoxで印刷プレビューした時、1ページ目は正常に表示されるのですが、2ページ目以降、ページが切れて表示されない現象があります。これを解決する方法。
http://www.webbibo.com/stylesheet/print/overflow_ff.html
08.09.09
Firefoxのバージョン別CSSハック一覧表
Firefox 1.5・2・3のバージョン別CSSハック一覧表です。
http://www.webbibo.com/stylesheet/hack/ff_hack.html
09.07.01
プロパティでのCSSハック一覧表
プロパティの前後に"_"(アンダースコア)や"#"などを付けることでCSSを特定のブラウザだけに適用させる技。
http://www.webbibo.com/stylesheet/hack/property.html
09.05.18
セレクタでのCSSハック一覧表
「セレクタ」の前後に"*"や"+"などを付けることでCSSを特定のブラウザだけに適用させる技。一般的に「プロパティ:値」レベルのハックよりこちらのハックが使われているケースが多い。
http://www.webbibo.com/stylesheet/hack/selector.html
09.05.18
CSSプロパティを記述する際の順番のサンプル
人によって様々な書き方があるCSSプロパティの順番。今回は参考になりそうなサンプルを紹介します。
http://www.webbibo.com/stylesheet/hack/property_order.html
09.04.28
簡単にできる最新のブラウザに対応したフロート解除方法
簡単にできる最新のブラウザだけに対応したフロート解除方法。
http://www.webbibo.com/stylesheet/hack/modern_clear.html
08.11.20
IEで疑似的に子供セレクタを実現
ある要素の直接の子要素にだけCSSで指定をしたい場合、子供セレクタ 「 div > p 」 を使う。しかし、IEは未対応。これを擬似的にIEで実現させる方法。
http://www.webbibo.com/stylesheet/hack/ie_child.html
07.07.11
floatを解除するclearfixの書き方
CSSでは欠かせないテクニック(ハック?) 親ボックス内で子ボックスをフロートする場合、「親ボックスの背景画像が表示されない」、「親ボックスのマージンがなくなる」、「親ボックスから子ボックスがはみ出す」等の解決方法に。
http://www.webbibo.com/stylesheet/hack/clearfix.html
07.07.11
条件分岐コメント(Conditional Comments)
IEの独自機能。IEのみに適用可能なHTMLの記述、またCSSファイルをIEのみに適用できる。IEのバージョンの上下で分岐もできる。
http://www.webbibo.com/stylesheet/hack/conditional.html
07.06.28