0から目指すWebマスター Web制作に関する備忘録
検索

CSS

CSSに関する記事は、40件あります。

CSSに関する備忘録。

inputのfocus時にplaceholderの値を非表示にする

inputのplaceholder(プレースホルダー)のテキスト色を変更するでご紹介した内容を踏まえて、修正するだけ。 focus時にplaceholder(・・・

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