inputのfocus時にplaceholderの値を非表示にする
inputのplaceholder(プレースホルダー)のテキスト色を変更するでご紹介した内容を踏まえて、修正するだけ。 focus時にplaceholder(・・・
CSS
CSS
CSSに関する記事は、40件あります。
CSSに関する備忘録。
inputのplaceholder(プレースホルダー)のテキスト色を変更する
いろいろ調べると、疑似クラス「:placeholder」と「:placeholder-shown」というのにいきつく。 ちょっとハマってしまったので備忘録。ハマ・・・
CSS
マルチカラムをCSS3で実装
CSS3で利用できるマルチカラムについて再確認。 カラムサンプル カラム 幅を指定 column-width: 150px; columns: 150p・・・
CSS
borderで背景画像を表示する border-image
border-imageは、一枚の画像で9スライスのデザインが実現できちゃうという優れもの。 残念ながらIE8以下で適用できず、実際にはまだ使えないかなーという・・・
CSS
text-shadowを極める
text-shadowプロパティは、その名から想像するとおり、テキストに影をつける（ドロップシャドウ）ことができます。 仕様 text-shadow:右方向 下・・・
CSS
box-shadowを極める
box-shadowプロパティは、その名から想像するとおり、ボックスエリアに影をつける（ドロップシャドウ）ことができます。 仕様 外側にドロップシャドウ bo・・・
CSS
背景画像の拡大・縮小 → background-size !
W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加されて・・・
CSS
floatとvertical-align? → display:table-cell; !
上図のように、2カラムレイアウトにおいて、左右のコンテンツ長さが任意で、短い方のカラムの縦位置を長い方のカラムのセンタリングする場合、どうしましょうって話。何・・・
CSS
適用されるCSS [CSS初心者向け]
「CSSは記述しているのに適用されない」という質問が多々あるので、あらためて基本をざっくり。 CSSを指定する方法として、大きく分けて2通りの考えをマスターする・・・
CSS
ブラウザ表示領域の上部（ヘッダー）と下部（フッター）を固定する
コンテンツの量に関わらず、スクロールしても、ヘッダーとフッターは常にブラウザ上に表示されるようにする。 ポイント htmlとbodyに高さ100%を指定する ・・・
CSS
IE7の拡大機能、仕様？バグ？
IE7でブラウザの右下にある数値を変えて拡大してみる。見事にレイアウトが崩れる場合がある。 IE7の拡大時のレンダリングは、Operaと同じように、bodyその・・・
CSS
リストとナビゲーション「横」編
xhtmlソース <div> <ul> <li>navi1</li> <li>navi2</・・・
CSS
リストとナビゲーション「縦」編
(x)htmlにテキストを記入し、CSSでマウスオーバー時に背景画像を変更させる。 xhtmlソース <div> <ul> <l・・・
CSS
floatを利用した段組み例3
xhtmlの書き順 #cont2（#cont2in） → #cont1 → #cont3 （#cont1と#cont2の書き順はどちらでもよい） widthの・・・
CSS
floatを利用した段組み例2
xhtmlの書き順 #cont2 → #cont1 → #cont3 （#cont1と#cont2の書き順はどちらでもよい） #cont1and2{ f・・・
CSS
floatを利用した段組み例1
xhtmlの書き順 #cont1 → #cont2 → #cont3 #cont1{ float:left; width:○○px; } #cont2{・・・
CSS
positionを利用した3段組み
3段組み #wrapper{ width:○○px; } #container{ position:relative; width:100%; } #con・・・
CSS
positionを利用した2段組み
2段組み #wrapper{ width:○○px; } #container{ position:relative; width:100%; } #con・・・
CSS
レイアウト全体を画面のセンターに設定する
本来であれば #wrapper{ width:○○px; margin:0 auto; } の設定だけで充分なのだが、これだとIE5が対応せず左寄せのままで・・・
CSS
デフォルトで設定すべき事項
下記に示す全称セレクタを用いた初期化方法の流行りは影を潜め始め、現在は「必要な要素のみに適切なスタイルを示す」方法が流行りはじめているらしいことを聞いた。ただ、・・・
CSS
line-heightとimgによるWinIEバグ
line-heightを指定してる中にimgが含まれると、WinIE(IE7では修正されている)では行間が狭くなる。 <ul> <li>・・・
CSS
float段組みした場合のclear設定の方法
.group{ overflow:auto !important; overflow /**/:hidden; } または .group{ overflo・・・
CSS
コンテンツの量によってフッターの位置を変える
具体的には、ブラウザ表示領域（ファーストビュー）とコンテンツ高さを比較して、コンテンツ高さの方が短い場合、フッターは下部に固定。コンテンツ高さの方が長い場合、ス・・・
CSS
emを使ってpx感覚で操作する
文字サイズをemで指定する アクセシビリティに配慮して文字サイズ指定にpx指定を行わない（固定にしない）。そこでデフォルトサイズを10pxになるよう%指定する。・・・
CSS
tableのこと【CSS編】
テーブルタグの初期設定 table{ border-collapse:collapse; font-size:100%; } セルとセルの間を空けるかどう・・・
CSS
font-family フォントファミリー
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",&quo・・・
CSS
Internet Explorer 7対策
html>body モダンブラウザ用 *;first-child+html*:first-child+html IE7のみ用 ちなみに、 <!-・・・
CSS
dlを使って、dtとddを横並びにする
dl{ width:○○px; } dt{ float:left; width:△△px; } dd{ margin-left:△△px; } float・・・
CSS
高さをコントロールする
とはいえ、正確にコントロールできるわけではないが、縦幅を認識させたいときに有効。 html,body{ height:100%; } 高さの％指定は親要素に・・・
CSS
フォントサイズ
アクセシビリティの観点から文字サイズは固定しない方がいい。 ただ、IE以外のモダンブラウザではフォントサイズを固定しても、実際にはブラウザで拡大表示が可能だ。更・・・
CSS
リキッドレイアウトで画像の背景に一工夫
<div class="bg-cover"><img /></div> 画像を取り囲むdiv上にbg・・・
CSS
リスト「画像」とナビゲーション「横」編
xhtmlソース <div> <ul><!-- --><li><img alt="navi1" />・・・
CSS
ロールオーバーで画像を切り替える
様々なやり方があるが、どれがベストなんだろう？ 気にするポイントは、検索エンジン的に問題がないか？アクセシビリティは確保されているか？ソースが読みづらくないか？・・・
CSS
背景やボーダーが意図した表示をしないとき
そのボックスにfloat付きの子ボックスが含まれていないか？ そのボックス（または親ボックス）内で回り込みを解除されているか？ 解除できる要素がなく親ボックス・・・
CSS
imgのvertical-align
縦方向のレイアウト崩れ防止、ブラウザによる見え方を統一するため、vertical-alignは「top」の設定がおすすめ。ちなみにデフォルトはbaseline・・・
CSS
文字間
/*¥*/ letter-spacing:0.1em; /**/ letter-spacingの指定はMacIE5ではバグがでてしまうため、ハックを利用して・・・
CSS
floatの使用上の注意
floatとwidthはペアで使用する CSS2.1の勧告候補ではwidthなしでも自動的に幅がフィットされる。しかし、Mac IE5ではうまく表示されない。 ・・・
CSS
ブラウザによるwidthプロパティの解釈の違い
正しいCSSを記述しているにもかかわらず、表示が崩れることがある。ブラウザによる解釈の違い（バグ）が原因であるが、IE5や古いブラウザにバグが見られる。・・・
CSS
Windows/Mac IE version4の排除
@important "test.css"; ポイントは@importantを設定し、1ファイルかますこと。ただし、この設定ではMacI・・・
CSS
MacIEだけを分離するハック
/*¥*/ MacIE以外 /*/ MacIE用 */ どのブラウザでもOK MacIE以外だけに設定したい場合やMacIEのみに設定したい場合でも、コメント・・・
CSS