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

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

4
CSSでスター付きプロパティはどういう意味ですか？
今日cssファイルを調べていたところ、次のルールセットが見つかりました。 div.with-some-class { display:block; margin:0; padding:2px 0 0 0; *padding:1px 0 0 0; font-size:11px; font-weight:normal; *line-height:13px; color:#3D9AD0; } * paddingと* line-heightで星はどういう意味ですか？ ありがとう。
85 css 
9
実際のRetinaディスプレイを使用せずにWindowsでRetinaのWebサイトをテストするにはどうすればよいですか？
WindowsでRetinaディスプレイをシミュレートして、RetinaなどのHiDPIディスプレイのWebサイトをテストする方法はありますか？ 私はWindowsを標準の24 "1920x1080モニターで実行しています。昨夜友人の真新しい15" Retina MacBook Proで自分のウェブサイトをチェックしたところ、フォントは非常にくっきりとシャープで、直接比較することでロゴの見栄えがさらに悪くなります。 私はこのチュートリアルに従って、自分のWebサイトRetinaを準備しました。 http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs 背景画像がないので、retina.jsアプローチを使用しました。 これが実際に機能するかどうかをテストする方法はありますか？明らかに、友人にRetina Notebookを使用するように依頼することはできますが、それは私にとって実行可能なワークフローではありません。自分の環境で、少なくとも大まかにWebサイトのRetina互換性をテストできるようにしたいと考えています。
6
transform（rotate）を設定すると、z-indexがキャンセルされます。
変換プロパティを使用すると、z-indexがキャンセルされ、前面に表示されます。（-webkit-transformをコメントアウトすると、z-indexは以下のコードで正しく機能します） .test { width: 150px; height: 40px; margin: 30px; line-height: 40px; position: relative; background: white; -webkit-transform: rotate(10deg); } .test:after { width: 100px; height: 35px; content: ""; position: absolute; top: 0; right: 2px; -webkit-box-shadow: 0 5px 5px #999; /* Safari and Chrome */ -webkit-transform: rotate(3deg); /* Safari and Chrome */ transform: …
85 css  z-index  transform 
6
CSSで画像の最大幅を設定する方法
私のウェブサイトでは、ユーザーがアップロードした画像を特定のサイズ（width: 600px）の新しいウィンドウに表示したいと思います。問題は、画像が大きくなる可能性があることです。したがって、これらよりも大きい場合は600px、アスペクト比を維持したままサイズを変更したいと思います。 max-widthCSSプロパティを試しましたが、機能しません。画像のサイズは変更されません。 この問題を解決する方法はありますか？ HTML： <div id="ImageContainerr"> <img src="DisplayImage.do?ad_id=${requestScope.advert.id}" class="Image" /> </div> CSS： img.Image { max-width: 100%;} div#ImageContainer { width: 600px; } max-width: 600px画像の設定も試みましたが、うまくいきません。画像はサーブレットからストリーミングされます（Tomcatのwebappsフォルダーの外部に保存されます）。
2
textareaの下の余分なスペースは、ブラウザによって異なります
textareaタグの下に余分なスペースがあります。さまざまなブラウザで1〜4ピクセル。マークアップは非常に単純です。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <style> body { margin: 0; padding: 0; } .main { background-color: red; } textarea { background-color: gray; resize: none; margin: 0; border: 0 none; padding: 10px; height: 50px; overflow: hidden; } </style> </head> <body> <div class="main"> <textarea></textarea> </div> </body> …
7
ブートストラップテーブルの列をコンテンツに適合させる
Bootstrapを使用して、テーブルを描画しています。右端の列にはボタンがあり、そのボタンに合うように必要な最小サイズにドロップダウンしたいと思います。 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <table class="table table-responsive"> <tbody> <tr> <th>Name</th> <th>Payment Method</th> <th></th> </tr> <tr> <td>Bart Foo</td> <td>Visa</td> <td><a role="button" class="btn btn-default btn-xs" href="/Payments/View/NnrN_8tMB0CkVXt06nkrYg">View</a></td> </tr> </tbody> </table> コードスニペットを実行する結果を非表示スニペットを展開 これは次のようにレンダリングされます。 いくつかのFirebugが強調表示されているため、列の幅は次のように広くなっています。 その列はページに合わせて拡大縮小されますが、ページはより大きな動的幅モードになっています。純粋なCSSでこれを修正する方法はある程度わかっていますが、これらのアプローチのほとんどは、サイトの低幅バージョンで問題を引き起こす可能性があります。 その列をその内容の幅までドロップダウンするにはどうすればよいですか？ （相変わらず-既存のブートストラップクラス>純粋なCSS> Javascript）
4
順序付けされていないリストで箇条書きの代わりにチェックマーク/チェックマーク記号（✓）を使用するにはどうすればよいですか？
リストテキストの前に目盛り記号を追加したいリストがあります。この方法で適用するのに役立つCSSはありますか？ ✓ this is my text ✓ this is my text ✓ this is my text ✓ this is my text ✓ this is my text ✓ this is my text 注：このタイプのHTMLコードでこれが必要です <ul> <li>this is my text</li> <li>this is my text</li> <li>this is my text</li> <li>this is my text</li> <li>this …
4
フレックスアイテムの高さが他のフレックスアイテムと一致するように拡大するのを防ぎます
コンテナ内に2つの要素があり、フレックスボックスを使用して並べています。2番目の要素（.flexbox-2）では、CSSで高さを設定しています。ただし、最初の要素（.flexbox-1）はの高さに一致し.flexbox-2ます。.flexbox-1の高さの一致を停止し.flexbox-2、代わりにその自然な高さを保持するにはどうすればよいですか？ これが私がこれまでに持っているものです（jsFiddleとしても利用可能です） .container { display: -webkit-flex; -webkit-flex-direction: row; } .flexbox-1 { -webkit-flex: 1; border: solid 3px red; } .flexbox-2 { -webkit-flex: 2; border: solid 3px blue; height: 200px; margin-left: 10px; } <div class="container"> <div class="flexbox-1">.flexbox-1</div> <div class="flexbox-2">.flexbox-2</div> </div> コードスニペットを実行する結果を非表示スニペットを展開
85 html  css  flexbox 
5
2つのクラスが1つのdivに割り当てられると、クラスが無効になります
サムネイルギャラリーとなるタグに<div>2つのクラスを適用したいタグを作成していました<div>。その位置のための1つのクラスとそのスタイルのためのもう1つのクラス。このように私はスタイルを適用することができました、私は私に質問をもたらしたいくつかの奇妙な結果を持っていました。 <div>タグに2つのクラスを割り当てることはできますか？もしそうなら、どちらがもう一方を無効にしますか、それともどちらが優先されますか？
85 class  css  html 
8
Bootstrap3.0ポップオーバーとツールチップ
Bootstrapを初めて使用しますが、ポップオーバーとツールチップの機能を動作させるのに問題があります。ドロップダウンとモデルに問題はありませんでしたが、ポップオーバーとツールチップに何かが欠けているようです。 ツールチップが表示されますが、ブートストラップの例のようにスタイルや場所が設定されていません。そして、ポップオーバーはまったく機能していません。 見て、私が欠けているものを教えてください。 <!DOCTYPE html> <html> <head> <title>Bootstrap 101 Template</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet" media="screen"> <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet" media="screen"> <link href="css/font-awesome.min.css" rel="stylesheet" media="screen"> <link href="css/index.css" rel="stylesheet" media="screen"> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE …
9
Bootstrap2でdivを中央に配置する方法は？
http://twitter.github.com/bootstrap/scaffolding.html 私はすべての組み合わせのように試しました： <div class="row"> <div class="span7 offset5"> box </div> </div> または <div class="container"> <div class="row"> <div class="span7 offset5"> box </div> </div> </div> 変更されたスパンとオフセット番号.. しかし、ページの中央に完全に配置された単純なボックスを取得することはできません:( 中央に6列幅のボックスが欲しいだけです... 編集： でやった <div class="container"> <div class="row" id="login-container"> <div class="span8 offset2"> box </div> </div> </div> しかし、ボックスが広すぎるので、span7でそれを行う方法はありますか？ span7 offset2左側にspan7 offset3余分なパディングを与え、右側に余分なパディングを与えます。
10
Twitterブートストラップスクロール可能モーダル
作業中のプロジェクトにTwitterブートストラップを使用しています。 やや長いフォームのモーダルウィンドウがありますが、ウィンドウが小さくなりすぎたときにモーダルがスクロールしませんでした（スクロールできないページから消えた場合）。 これを修正するために、私は次のcssを使用しました .modal { overflow-y:auto; max-height:90%; margin-top:-45%; } これは、Chromeでの希望どおりに機能します（つまり、ウィンドウが十分に大きい場合、フォームはフルサイズですが、ウィンドウが縮小すると、モーダルが縮小してスクロール可能になります）。問題は、IEではモーダルが画面外にあることです。誰かがこの問題に対するより良い解決策を持っていますか？ 私の例はtinyhousemap.comにあります（モーダルを表示するには、ナビゲーションウィンドウの[マップにエントリを追加]をクリックします） ありがとう
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.