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

ボタンを作成して、標準のボタン画像の代わりに自分の画像を挿入しようとしました。ただし、標準ボタンの灰色の境界線はそのまま残り、黒いボタンの画像の外側に表示されます。 ボタンからこの灰色の境界線を削除する方法を誰かが知っているので、それは単なる画像そのものですか？ありがとうございました。

109 html  css  button 

ScrollIntoView（）を使用して、リストで強調表示されたアイテムをスクロールして表示します。下にスクロールすると、ScrollIntoView（false）は完全に機能します。しかし、上方向にスクロールすると、ScrollIntoView（true）によってページ全体が少し移動し、意図したとおりに移動します。ScrollIntoView（true）を使用するときにページ全体が移動しないようにする方法はありますか？ これが私のページの構造です- #listOfDivs { position:fixed; top:100px; width: 300px; height: 300px; overflow-y: scroll; } <div="container"> <div="content"> <div id="listOfDivs"> <div id="item1"> </div> <div id="item2"> </div> <div id="itemn"> </div> </div> </div> </div> listOfDivsはajax呼び出しからのものです。モバイルサファリの使用。 よろしくお願いします！

109 javascript  css 

位置：スティッキーは一部のモバイルブラウザーで機能するようになりました。メニューバーをページと共にスクロールさせ、ユーザーがスクロールすると常にビューポートの上部に固定することができます。 しかし、現在「固定」されているときに、固定メニューバーを少しだけスタイル変更したい場合はどうでしょうか。たとえば、ページと一緒にスクロールするときはいつでもバーの角を丸くしたいかもしれませんが、バーがビューポートの上部にくっついたらすぐに、上部の丸い角を取り除き、その下に小さなドロップシャドウを追加しますそれ。 現在固着::stuckしている要素をターゲットにするための何らかの種類の疑似セレクター（など）はposition: sticky ありますか？または、ブラウザーベンダーはパイプラインでこのようなものを持っていますか？そうでない場合、どこでリクエストすればよいですか？ NB。モバイルでは通常scroll、ユーザーが指を離したときにイベントが1つしか取得されないため、JavaScriptソリューションは適していません。そのため、JSはスクロールのしきい値を超えた正確な瞬間を知ることができません。

109 css  css-selectors  css-position 

閉まっている。この質問はスタックオーバーフローのガイドラインを満たしていません。現在、回答を受け付けていません。 この質問を改善してみませんか？Stack Overflowのトピックとなるように質問を更新します。 6年前休業。 この質問を改善する 私は可能な限り多くのCSSと最小限のJS（状態のみなど）を使用するツリー（ディレクトリツリーなど）の作成に取り組んでおり、ブートストラップ用の既存の優れたツリープラグインがあるかどうか知りたいまたはjquery-uiブートストラップ。 参考のため、またはこの質問について混乱している人のために、ブートストラップ用のdynatreeのようなものを探しています。

108 javascript  jquery  twitter-bootstrap  css  jquery-ui 

下の画像のようにテキストの周囲に境界線を組み込む方法はありますか？

108 text  css 

IE7とIE8は疑似要素（::afterまたは::first-letter）のダブルコロン表記をサポートしていないため、また、最近のブラウザー:afterは後方互換性のためにシングルコロン表記（たとえば）をサポートしているため、シングルコロン表記のみを使用する必要があります。 IE8の市場シェアがごくわずかなレベルまで下がって、コードベースを見つけて置き換えますか？または両方を含める必要があります： .foo:after, .foo::after { /*styles*/ } IE8ユーザー（貧しい人々）のことを気にすると、doubleだけを使用するのはばかげているように見えます。

108 css  internet-explorer-8  css-selectors  internet-explorer-7  pseudo-element 

私は次のコードを持っています： <div class="table"> <div class="row"> <div class="cell">Cell</div> <div class="cell">Cell</div> </div> <div class="row"> <div class="cell colspan2">Cell</div> </div> </div> <style> .table { display: table; } .row { display: table-row; } .cell { display: table-cell; } .colspan2 { /* What to do here? */ } </style> かなり簡単です。要素のcolspan（またはcolspanと同等のもの）を追加するにはどうすればよいdisplay: table-cellですか？

108 html  css 

垂直配置要素の一般的なトリックは、次のCSSを使用することです。 .item { position:absolute; top:50%; margin-top:-8px; /* half of height */ height: 16px; } Chromeのようにメトリックビューで表示すると、次のようになります。 ただし、要素の上にカーソルを置いたときに表示される視覚的なマージンはありません。つまり、マージンは境界の「外側」にあり、視覚化できます。しかし、負のマージンは表示されません。彼らはどのように見え、それが違うのは何ですか？ なぜmargin-top:-8px 同じで はないのmargin-bottom:8pxですか？ つまり、負のマージンはどのように機能し、その背後にある直感は何ですか。彼らはどうやってmargin-top < 0アイテムを「盛り上げる」（の場合）？

108 css  margin 

私はTwitterからBootstrapを始めたばかりで、カスタマイズの「ベストプラクティス」は何かと思っています。CSSテンプレート（Bootstrapなど）のすべての機能を活用し、完全に（そして簡単に）変更可能で、持続可能にする（つまり、次のバージョンのBootstrapがTwitterからリリースされたときに、私が使用しないシステムを開発したい）最初からやり直す必要があります。 たとえば、上部のナビゲーションに背景画像を追加します。これには3つの方法があるようです。 bootstrap.cssの.topbarクラスを変更します。多くの.topbarアイテムがあり、それらを必ずしもすべて同じ方法で変更する必要がないため、私は特にこれが好きではありません。 私の背景画像を使用して新しいクラスを作成し、両方のスタイル（新しい要素とブートストラップを要素に適用）を適用します。これにより、スタイルの競合が発生する可能性があります。これは、.topbarクラスを個別のクラスにストリップし、カスタムクラスによって踏まれていない部分のみを使用することで回避できます。繰り返しますが、これには必要以上に多くの作業が必要であり、柔軟性がありますが、Twitterが次の記事をリリースするときにbootstrap.cssを簡単に更新することはできません。 .LESSの変数を使用して、カスタマイズを実現します。オフハンドこれは良いアプローチのように見えますが、.LESSを使用していません。クライアントでのcssのコンパイルとコードの持続可能性について懸念があります。 私はBootstrapを使用していますが、この質問はどのcssテンプレートにも一般化できます。 事前に入力いただきありがとうございます。

108 css  twitter-bootstrap  bootswatch 

公式のCSS3 :checked疑似クラスがあることは知っていますが、:unchecked疑似クラスはありますか？それらは同じブラウザーをサポートしていますか？ Sitepointのリファレンスでは言及されていませんが、このwhatwg仕様（それが何であれ）は言及しています。 :checkedと:not()疑似クラスを組み合わせると同じ結果が得られることはわかっていますが、私はまだ興味があります。 input[type="checkbox"]:not(:checked) { /* styles */ } 編集： w3cは同じ手法を推奨します チェックされていないチェックボックスは、否定疑似クラスを使用して選択できます。 :not(:checked)

108 css  css-selectors  pseudo-class 

次のドロップダウンがあります <label class="dropdown-toggle" role="button" data-toggle="dropdown" data-target="#"> Action <b class="caret"></b></label> <ul class="dropdown-menu" role="menu" aria-labelledby="lang-selector" id="lang-selector"> dropdown content goes here </ul> ドロップダウンの左上隅がテキストの左下隅（アクション）ですが、ドロップダウンの右上隅の位置がテキストの右下の位置にあることを願っています。どうやってやるの？

108 css  twitter-bootstrap  drop-down-menu 

固定幅フォントを使用する場合、HTML要素の幅を文字数で指定したい。 「em」の単位はM文字の幅を想定しているので、これを使用して幅を指定できるはずです。これは例です： <html> <head> <style> div { font-family: Courier; width: 10em; } </style> </head> <body> <div> 1 3 5 7 9 1 3 5 7 9 1 </div> </body> </html> ブラウザの行が10ではなく15列目で途切れるので、結果は私が望んだものとは異なります。 1 3 5 7 9 1 3 5 7 9 1 （UbuntuのFirefoxとChromiumの結果） ウィキペディアの記事によると、「em」は必ずしもMの幅とは限らないため、「em」ユニットはこれを信頼できないようです。

108 css  font-size 

それ自体のパーセンテージでimgのサイズを変更しようとしています。たとえば、画像を50％にサイズ変更して、画像を半分に縮小したいとします。しかし、適用するwidth: 50%;と画像のサイズがコンテナ要素（親要素<body>など）の50％になるように変更されます。 問題は、JavaScriptまたはサーバー側を使用せずに、画像のサイズを自分自身の割合で変更できるかどうかです。（画像サイズの直接の情報はありません） 私はあなたがこれを行うことができないと確信していますが、インテリジェントなCSSのみのソリューションがあるかどうかを確認したいだけです。ありがとう！

108 html  css  image 

CSSトランジションをbackground-position以外のすべてのプロパティに適用したいと思います。私はそれをこのようにしようとしました： .csstransitions a { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; } .csstransitions a { -webkit-transition: background-position 0s ease 0s; -moz-transition: background-position 0s ease 0s; -o-transition: background-position 0s ease 0s; -ms-transition: background-position 0s ease 0s; transition: background-position …

108 css  css-transitions 

Angular2コンポーネントがあるとしましょう //home.component.ts import { Component } from 'angular2/core'; @Component({ selector: "home", templateUrl: "app/components/templates/home.component.html", styleUrls: ["app/components/styles/home.component.css"] }) export class HomeComponent { public width: Number; public height: Number; } このコンポーネントのテンプレートhtmlファイル //home.component.html <div class="home-component">Some stuff in this div</div> そして最後に、このコンポーネントのcssファイル //home.component.css .home-component{ background-color: red; width: 50px; height: 50px; } ご覧のとおり、クラスには2つのプロパティwidthとがありheightます。幅と高さのcssスタイルを幅と高さのプロパティの値に一致させ、プロパティが更新されると、divの幅と高さが更新されるようにしたいと思います。これを達成する適切な方法は何ですか？

108 css  angular