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