タグ付けされた質問 「css」

CSS（Cascading Style Sheets）は、HTML（HyperText Markup Language）、XML（Extensible Markup Language）ドキュメント、および色、レイアウト、フォントを含む（これらに限定されない）SVG要素の外観とフォーマットを記述するために使用される表現スタイルシート言語です。とアニメーション。また、画面、紙、音声、またはその他のメディアで要素をレンダリングする方法についても説明します。

13
：active疑似クラスはモバイルサファリでは機能しません
iPhone / iPad / iPod上のWebkitでは、<a>タグを：active疑似クラスに指定しても、要素をタップしてもトリガーされません。これをトリガーするにはどうすればよいですか？コード例： <style> a:active { background-color: red; } </style> <!-- snip --> <a href="#">Click me</a>
4
入力と選択フィールドの幅を等しくする方法
フォームには、1つの選択フィールドと2つの入力フィールドがあります。これらの要素は垂直方向に整列しています。残念ながら、これらの要素の幅を同じにすることはできません。 これが私のコードです： <select name="name1" style="width:198px"> <option>value1</option> <option>value2</option> </select><br/> <input type="text" name="id1" style="width:193px"><br/> <input type="text" name="id2" style="width:193px"> 上記の例の場合、select要素の最適な幅は198または199 pxです（もちろん、193pxを試しましたが、違いは大きなものです）。これらの要素の幅は同じではないため、解像度に依存します（さまざまなコンピューターやブラウザーによって異なります（場合によっては、約1ピクセルまたは2ピクセルの違いと思います）。これらの要素をdivまたはテーブルの行に設定しようとしましたが、役に立ちません。 Q：これらの要素の幅を正確に等しくするにはどうすればよいですか？
4
Twitter Bootstrap：navbarのテキスト
Twitterブートストラップのドキュメントによると、「テキストの文字列を<p>タグで囲んで、適切なリーディングとカラーにする」ことができるはずです。これを行うと、その下のどのレベルでnavbarも、どのnavbarクラスも継承しません。文字列を<a>タグでラップするとレンダリングされますが、アンカーにすることはできません。 私がレンダリングしようとしている文字列はです"Logged in as ... "。
9
html（+ css）：改行の優先場所を示します
HTMLテーブルセルに表示する次のテキストがあるとします。 Honey Nut Cheerios, Wheat Chex, Grape-Nuts, Rice Krispies, Some random cereal with a very long name, Honey Bunches of Oats, Wheaties, Special K, Froot Loops, Apple Jacks そして、コンマの1つの後で優先的に改行します。 HTMLレンダラーに指定された場所で改行を試みるように指示する方法はありますか。そして、改行しないスペースを使用せずに、いずれかのスペースの後で改行を試みる前にそれを行いますか？改行しないスペースを使用すると、無条件に幅が大きくなります。行折り返しアルゴリズムが最初にコンマを使用して行を収めることができなかった場合に、スペースの1つの後に改行を入れたいのですが。 <span>要素でテキストフラグメントをラップしてみましたが、それは役に立たないようです。 <html> <head> <style type="text/css"> div.box { width: 180px; } table, table td { border: 1px solid; border-collapse: collapse; } …
109 html  css  word-wrap 
7
非常に、非常に、非常に大きなdiv
私のプロジェクト（BigPictu.reまたはbigpicture.js GitHubプロジェクトを参照）の場合、非常に大きな、非常に大きな<div>コンテナに対処する必要があります。 私が使用する単純なアプローチではパフォーマンスが低下するリスクがあることは知っていましたが、それがほとんど存在することを期待していませんでした... Chromeのみ！ この小さなページをテストすると（以下のコードを参照）、パン（クリック+ドラッグ）は次のようになります。 Firefoxで通常/スムーズ Internet Explorerでも正常/スムーズ Chromeでは非常に遅い（ほとんどクラッシュする）。 もちろん、（プロジェクトに）コードを追加して、ズームインすると、フォントサイズが非常に大きくなる可能性のあるテキストが非表示になります。それでも、なぜFirefoxとInternet ExplorerはChromeではなく正しく処理するのですか？ JavaScript、HTML、またはCSSで、すべてのアクションに対してページ全体（ここでは幅10000ピクセル）をレンダリングしないようにブラウザに指示する方法はありますか？（現在のビューポートのみをレンダリングします！） <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> html, body { overflow: hidden; min-height: 100%; } #container { position: absolute; min-height: 100%; min-width: 100%; } .text { font-family: "Arial"; position: absolute; } </style> </head> <body> <div id="container"> <div …
11
HTML要素のドラッグアンドドロップを無効にしますか？
私は、フル機能のウィンドウシステムを実装しようとしているWebアプリケーションに取り組んでいます。現在、非常に順調に進んでおり、小さな問題が1つだけ発生しています。アプリケーションの一部（ほとんどの場合、サイズ変更操作をトリガーするはずのウィンドウのコーナーdiv）をドラッグしようとすると、Webブラウザーが賢くなり、何かをドラッグアンドドロップするつもりだと思います。最終的に、ブラウザがドラッグアンドドロップを実行している間、アクションが保留になります。 ブラウザのドラッグアンドドロップを無効にする簡単な方法はありますか？ユーザーが特定の要素をクリックしている間はオフにできるのが理想的ですが、ユーザーが自分のウィンドウのコンテンツでブラウザの通常の機能を引き続き使用できるように、それを再度有効にします。私はjQueryを使用していますが、ドキュメントを閲覧してそれを見つけることができませんでしたが、純粋なjQueryソリューションを知っていれば、それはすばらしいでしょう。 つまり、ユーザーがマウスボタンを押している間は、ブラウザーのテキスト選択機能とドラッグアンドドロップ機能を無効にし、ユーザーがマウスを離したときにその機能を復元する必要があります。
7
片側だけにインセットボックスシャドウを作成する方法は？
どういうわけか、divの片側にインセットボックスシャドウのみを設定することは可能ですか？差し込みについて話していることに注意してくださいここでは、通常の外側のボックスシャドウではなく、ボックスシャドウ。 たとえば、次のJSFiddleでは、インセットシャドウが4辺すべてにさまざまな程度で表示されています。 上部のみに表示するにはどうすればよいですか？または、最大で上下のみですか？ JSFiddle： http ://jsfiddle.net/ahmadka/KFrun/ .box { -webkit-box-shadow: inset 0px 5px 10px 1px #000000; box-shadow: inset 0px 5px 10px 1px #000000; } .text { padding: 20px; } <div class="box"> <div class="text"> Lorem ipsum .... </div> </div> コードスニペットを実行する結果を非表示スニペットを展開
109 css 
12
window.print（）からヘッダーとフッターを削除します
ページの印刷にwindow.print（）を使用していますが、ヘッダーとフッターにページタイトル、ファイルパス、ページ番号、日付が含まれています。それらを削除するには？ プリントスタイルシートも試しました。 #header, #nav, .noprint { display: none; } 助けてください。ありがとう。
109 css  printing 
6
HTML要素のスタイルを変更するjQuery
HTMLのリストがあります <div id="header" class="row"> <div id="logo" class="col_12">And the winner is<span>n't...</span></div> <div id="navigation" class="row"> <ul id="pirra"> <li><a href="#">Why?</a></li> <li><a href="#">Synopsis</a></li> <li><a href="#">Stills/Photos</a></li> <li><a href="#">Videos/clips</a></li> <li><a href="#">Quotes</a></li> <li><a href="#">Quiz</a></li> </ul> </div> CSSの変更時に水平に表示されるように細かく変更されます div#navigation ul li { display: inline-block; } しかし今私はjQueryでそれをしたいので、私は使います： $(document).ready(function() { console.log('hello'); $('#navigation ul li').css('display': 'inline-block'); }); しかし、機能していません。jQueryを使用して要素のスタイルを設定するときに何が悪いのですか？ ありがとう
109 jquery  html  css 
8
CSSの優先順位は何ですか？
私のCSSクラスの1つが他のものをオーバーライドしているように見える理由を理解しようとしています（逆ではありません） ここに私は2つのCSSクラスがあります .smallbox { background-color: white; height: 75px; width: 150px; font-size:20px; box-shadow: 0 0 10px #ccc; font-family: inherit; } .smallbox-paysummary { @extend .smallbox; font-size:10px; } 私の見解では、 <pre class = "span12 pre-scrollable smallbox-paysummary smallbox "> フォント（オーバーラップする要素）が20ではなく10pxと表示される-これが事実である理由を誰かが説明できますか？
109 html  css 
16
番号付きリストの番号をどのようにカスタマイズできますか？
番号付きリストの番号を左揃えにするにはどうすればよいですか？ 1. an item // skip some items for brevity 9. another item 10. notice the 1 is under the 9, and the item contents also line up 番号付きリストの番号の後の文字を変更しますか？ 1) an item また、ol要素でtype属性を使用する代わりに、数字からアルファベット/ローマ数字のリストに変更するためのCSSソリューションがあります。 私は主にFirefox 3で動作する回答に興味があります。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.