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