CSS Tips スタイルシートテクニック

  • 更新情報

  • CSSフォント・リンク

  • CSSイメージ・背景

  • CSSリスト・メニュー

  • CSSフォーム

  • CSSテーブル・表

  • CSSレイアウト・ボックス

  • CSSプリント・印刷

  • CSSハック・条件分岐

12345678 次へ >

テーブルの行を削除・追加しても、自動的に連番になる方法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

12345678 次へ >

外部リンクや各ファイルに合ったアイコンを自動的につける

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(スタイルシート)だけでグラデーションを表現する方法のまとめ

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イメージ・背景 一覧をもっと見る

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

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

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

09.08.28

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

リストタグで水平に並べた場合、li要素とli要素の間に隙間が生じます。この隙間を消す方法。display:table-cell;を使った方法を追加(09.04.29)

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

09.04.29

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

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

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・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

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

テーブルの行を削除・追加しても、自動的に連番になる方法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

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

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

CSSレイアウト・ボックス 一覧をもっと見る

印刷時の改ページ部分を指定する方法

ページを印刷すると自分の意図しない箇所で途切れてしまう時、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

CSSプリント・印刷 一覧をもっと見る

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

CSSハック・条件分岐 一覧をもっと見る

おすすめCSSサイト

あわせて読みたいブログパーツ

RSSアイコンWebデザイン便利クリップ

Wonderwall | Celebrity News on MSN Entertainment | Celebrity Photos & Gossip
Wonderwall | Celebrity News on MSN Entertainment | Celebrity Photos & Gossip
MSNが提供するセレブニュースサイト「WONDERWALL」。一見、Flash一つで表現していると思いきや、複数のFlashを横に並べ、JavaScriptを使ってFlashの間にHTMLを挿入できるようにしています。なかなか面白い造りになっています。
2009/08/29 10:02
Color Scheme Designer 3
Color Scheme Designer 3
WEBベースのカラースキームジェネレーターです。選択したパレットでWEBサイトを作った場合のサンプルページが見れるのが嬉しいです。
2009/08/28 14:49
Honda | エコグランプリ | Formula E
Honda | エコグランプリ | Formula E
3Dのドライブシミュレーション。燃費効率がいいスピードの出し方やブレーキの仕方でスコアが決まります。エコドライブを身に付けるのに、いい練習になりそうです。
2009/08/24 01:25
Q-BLOCK : Create 3D Pixel Art Online
Q-BLOCK : Create 3D Pixel Art Online
3Dのドット絵が簡単に描けるWebツールです。これは役に立ちますね!
2009/08/23 02:56
もっと見る»

更新情報RSSアイコン

閉じる