Category Archives : スタイルシート(CSS)

テーブルのヘッダー固定とoverfow-xを混在させると動かない - 2020/05/09(Sat)
画面をスクロールしたときに、テーブルのヘッダー（th）を固定させる、というパターンがあると思います。エクセルなどの表計算ソフトでいうと、「ウインドウ枠の固定」に該当するものです。最近のブラウザを対象にした実装では、以下のように、position:sticky を th要素 に設定すると、簡単に固定できます。※th要素、に限らず、固定したい列・行で固定できます。nth-child(n)を使うかたちです。CSSのposition: stickyでテーブルの...
CSS list-style-imageの挙動 - 2013/06/26(Wed)
リスト(ul,li)を使用すると、ul要素で表示される「・」(IE、Fxデフォルト)を画像に変えることができます。CSSプロパティの list-style-image を使えば解決…しそうなものですが、IE6.0とFirefoxでは表示の挙動が異なります。もっと具体的には、画像の位置が異なります。...
CSS widthとheightはどこを指すか - 2013/06/26(Wed)
スタイルシート (CSS)において、width、heightはどこからどこまでを指しているのか。…ということに迷うことが多かったため、図にしてみました。...
CSS3のグラデーションを自動生成してくれるツール - 2012/05/20(Sun)
CSS3のグラデーションを自動生成してくれるツールの備忘録。各ブラウザに対応したCSSを自動生成してくれるので楽チン。http://grad3.ecoloniq.jp/...
div要素などを縦横中央に配置する方法と、問題点 - 2009/04/19(Sun)
以下のようなHTMLで、wrapperを縦横中央、つまり、ブラウザ画面の中央に表示したい、ということがあるかと思います。【HTML】<body><div id="wrapper">縦横中央配置したい要素</div></body>よく紹介されているものとして、以下のような方法があります。（１）対象の要素を絶対配置(position:abusolute）（２）上50%、左50&の位置に配置（top:50%;left:50%）（３）対象の要素の幅（width）、高さ（height）...
IE6　textareaのバグ - 2008/09/12(Fri)
はまったのでメモ。IE6（Internet Explorer6）でtextareaの親に当たるいずれかのブロック要素にmarginが指定されていると、なぜかそのtextareaにも引き継がれてしまう、というもの。<div id="oya1"> <div id="oya2"><textarea>テキストエリア</textarea></div></div>このとき、oya1 {margin: 10px 20px 30px 40px}とか、oya2 {margin: 10px 20px 30px 40px}としていると、なぜかtextarea周り...
IE6でhoverとmax-width - 2008/03/07(Fri)
ホームページ（ウェブサイト）を作成するとき、デザインの面でInternetExplorer6(IE6)がa要素以外でhoverに対応していないこと、max-width、min-widthに対応していないことに不便を感じることが多々あるかと思います。 hoverについては、a要素を使うべきではないところにでもa要素を使うことで何とかしのげますが、あまり良いことではありません。 max-width、min-widthについては、JavaScriptを使えば対応可能ですが、多少の...
アンダースコアハック - 2007/01/11(Thu)
CSSのプロパティ(width など)の前にアンダースコア(_)が入ると、通常は定義されていないプロパティであると認識されて無視されます。しかし、Windows版Internet Explorer 6(IE6.0、IE6.0 SP2)では正常な指定として読み込んでしまうバグを利用し、IE6.0にだけ指定したいプロパティを読み込ませるCSSハックをアンダースコアハックと言います。...
IEで文字が消えるバグ - 2006/09/14(Thu)
先日も書いたのですが、IE(Internet Explorer：インターネットエクスプローラ)で紅葉テンプレートを表示したとき、何故か文字が消えてしまうという減少が発生しました。原因は、IEのバグ。背景色(background)を指定したブロック要素Ａ内に、フロートした要素Ｂがあるとき、ブロック要素Ａ内の文字列が消える、というもの。→背景色が指定された要素内にフロートがあるときに要素内の文字が消える(IE6)。背景色を指定したブロック要...