トップ > CSSリファレンス > リファレンス 宣言 ◆ !important (C1/e4/N6/Fx1/Ch1/Op3.5/Sa1)
以下のように指定するとfloatをclearできる模様。 <div class="Box1"> <div class="L">something long text</div> <p>something short text</p> </div> .Box1{ width:400px; overflow:hidden; } .L{ width:130px; float:left; } overflow:hiddenでfloatをclearしたサンプル これで:afterでゴニョゴニョやったりclear:bothを利用しなくてもfloatがクリアできるみたいです。以下のページで知りました。 画像が消えたり、繰り返さなかったり系が解決しそうなこと overflow:hiddenって、飛び出たのクリップされるんでないの? しかし、普通に考えると、これでなぜfloatがクリアできるかは甚だ疑問です
IE7で拡大・縮小時にレイアウトが重なってしまったり、IEでフロートした要素がはみ出てしまったりとIE独自のCSSのバグがいくつかあります。 これは、IEのhasLayoutが原因のひとつとなっているので、それを回避する方法を考察します。 hasLayoutとは IEでのCSSのバグを回避するhasLayoutの値 CSSのバグに効果のあるhasLayoutの指定方法 hasLayoutの参考ページ hasLayoutとは hasLayoutとは、オブジェクトがレイアウトを持っているかどうかを示すものです。 hasLayoutの値はread-onlyのため読み込みのみ可能で、falseとtrueがあります。 hasLayoutの値(read-only) false デフォルト値。 オブジェクトがレイアウトを持っていない。 true オブジェクトがレイアウトを持っている。 IEでのCSSのバ
thickboxをさわり始めていたら、lightBoxの案件が発生しました。(おしい。) thickboxはまた別の機会に。(フォーム入力の確認画面をポップアップしたいなと考えてます。) 大きなカスタマイズはなかったのですが、3点ほど修正しました。 『最初からnext, prev表示をしたい場合』 マウスが画像の右側にのるとNextがでるのですが、 慣れてない人にとってはわからずに閉じてしまうことがあります。 そこで常にNextやPrevリンクを表示するようにします。 やり方は単純でlightbox.cssを変更します。 Link部に画像を指定してあげるだけです。 hover部と画像を切り替えることでより見やすくなります。 #prevLink { left: 0; float: left; } #nextLink { right: 0; float: right; }
今さらながら、Webページ内の要素に対して、要素の透明度/透過度をCSSのみで指定する方法について。 久々にCSSのみで透明度の指定が必要になる場面があったのですが、記述方法をすっかり忘れていたのでここにメモとして残しておきます。 CSSで透明度を指定するには「opacity」というプロパティを使用しますが、ブラウザによって記述が変わるので下記の様な形になります。 ◆CSS div { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } 『filter:alpha(opacity=50);』 これはIE向けの指定。 “50”というのは透明度が“50%”ということ。 透過無しの状態“100%”を指定する際は「filter:alpha(opacity=100);」。 『-moz-opacity: 0.5;』 これはFiref
最近、cssでよく使用しているのがclearfixです。 親ボックス内で子ボックスをフロートする場合、親ボックスの背景画像が表示されなかったり親ボックスのマージンがなくなってしまったりと問題がありました。 clearfixを使ってからは、結構スムーズにCSSを設定できるようになりました。 ソースは以下です。 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-table; min-height: 1%; } /* Hides from IE-mac \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* End hid
分類に関する大まかな説明です。一部例外もありますので、詳細については各要素のページで確認してください。 子要素はインライン要素のみ インライン要素(および文字列)のみを直接の子要素として配置できる要素。 子要素はブロックレベル要素とインライン要素 ブロックレベル要素、およびインライン要素を直接の子要素として配置できる要素。 子要素は文字列のみ 文字列のみを配置できる要素。 子要素は特定の要素のみ 特定の要素のみを直接の子要素として配置できる要素。 子要素は空 内容を持たない要素。 子要素はスクリプトのみ スクリプトのみを配置できる要素。スクリプト内では、ブロックレベル要素、インライン要素ともに配置が可能。 その他 area要素、およびブロックレベル要素を直接の子要素として配置できる要素。 ※この一覧には、ブラウザ独自の拡張要素は掲載していません。
font-familyプロパティは、フォントの種類を指定する際に使用します。 フォントの種類はカンマ( , )で区切って複数の候補を並べることができます。 複数の候補を記述しておくことで、先に記述した順にユーザー環境で利用可能なものが選択され、 より多くのユーザーに対して自分のイメージに近いフォントで表示させることができます。 指定したフォントがユーザーの環境にインストールされていない場合には、ブラウザで設定されたデフォルトのフォントで表示されます。 ■値 フォント名で指定 「MS ゴシック」や「MS 明朝」のようにフォント名で指定します。フォント名にスペースが含まれている場合には、ダブルクォーテーション( " )またはシングルクォーテーション( ' )で囲むようにしてください。 キーワードで指定 フォントの種類を表すキーワードで指定します。 sans-serif …… ゴシック系のフォン
A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page. Download the example html file and css file The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers. We must clear the mind of the past. Web enlightenment
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く