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

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

15
テキスト入力要素の境界線の強調表示を削除する方法
HTML要素が「フォーカス」されている（現在選択されている/タブで移動されている）場合、多くのブラウザー（少なくともSafariとChrome）はその周りに青い境界線を配置します。 私が取り組んでいるレイアウトの場合、これは注意をそらすものであり、正しく見えません。 <input type="text" name="user" class="middle" id="user" tabindex="1" /> Firefoxはこれを実行していないようです。少なくとも、次の方法で制御できます。 border: x; 誰かがIEのパフォーマンスを教えてくれるとしたら、私は興味があります。 Safariにこのわずかなフレアを除去させるといいでしょう。
610 css  input  safari  webkit  border 
7
CSSで複数の変換を適用する方法は？
CSSを使用して、複数のアプリケーションを適用するにはどうすればよいtransformですか？ 例：以下では、回転ではなく、移動のみが適用されます。 li:nth-child(2) { transform: rotate(15deg); transform: translate(-20px,0px); }
25
要素にJavaScriptのクラスが含まれているかどうかを確認しますか？
（jQueryではなく）プレーンなJavaScriptを使用して、要素にクラスが含まれているかどうかを確認する方法はありますか？ 現在、私はこれをやっています： var test = document.getElementById("test"); var testClass = test.className; switch (testClass) { case "class1": test.innerHTML = "I have class1"; break; case "class2": test.innerHTML = "I have class2"; break; case "class3": test.innerHTML = "I have class3"; break; case "class4": test.innerHTML = "I have class4"; break; default: test.innerHTML = ""; } …
588 javascript  html  css  dom 
21
CSSは画像のサイズを変更し、アスペクト比を維持します
画像を使用していて、アスペクト比の問題に遭遇しました。 <img src="big_image.jpg" width="900" height="600" alt="" /> あなたが見ることができるとして、height及びwidth既に指定されています。画像のCSSルールを追加しました： img { max-width:500px; } しかし、のためにbig_image.jpg、私が受け取るwidth=500とheight=600。縦横比を維持したまま画像のサイズを変更する方法
577 css  image  aspect-ratio 
30
背景の下に表示されるブートストラップモーダル
私はブートストラップの例から直接モーダルのコードを使用し、bootstrap.jsのみを含めました（bootstrap-modal.jsは含めません）。ただし、私のモーダルは灰色のフェード（背景）の下に表示され、編集できません。 これは次のようになります。 この問題を再現する1つの方法については、このフィドルを参照してください。そのコードの基本的な構造は次のとおりです。 <body> <p>Lorem ipsum dolor sit amet.</p> <div class="my-module"> This container contains the modal code. <div class="modal fade"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-body">Modal</div> </div> </div> </div> </div> </body> body { padding-top: 50px; } .my-module { position: fixed; top: 0; left: 0; } これがなぜであるか、またはこれを修正するために私が何ができるかという考えはありますか？
26
Twitterブートストラップフォームファイル要素のアップロードボタン
Twitterブートストラップ用の豪華なファイル要素のアップロードボタンがないのはなぜですか？青いプライマリボタンがアップロードボタンに実装されていると便利です。CSSを使用してアップロードボタンを調整することもできますか？（操作できないネイティブブラウザ要素のようです）
23
Twitter Bootstrapを使用して中央揃えのコンテンツを取得するにはどうすればよいですか？
私は非常に基本的な例に従っています。スターターページとグリッドシステムを使用して、次のことを期待していました。 <div class="row"> <div class="span12"> <h1>Bootstrap starter template</h1> <p>Example text.</p> </div> </div> コードスニペットを実行する結果を非表示スニペットを展開 ...中央揃えのテキストを生成します。 ただし、それでも左端に表示されます。何が悪いのですか？
27
divにツールチップを追加する
私はこのようなdivタグを持っています： <div> <label>Name</label> <input type="text"/> </div> :hoverdivのツールチップを、できればフェードイン/フェードアウト効果で表示するにはどうすればよいですか。
568 javascript  html  css  tooltip 
21
HTMLテーブルのワードラップ
sとsでword-wrap: break-wordテキストをラップするために使用しています。ただし、テーブルセルでは機能しないようです。1行2列のに設定されたテーブルがあります。列内のテキストは、上記でスタイル設定されていますが、折り返されません。これにより、テキストがセルの境界を越えます。これは、Firefox、Google Chrome、およびInternet Explorerで発生します。divspanwidth:100%word-wrap ソースは次のようになります。 td { border: 1px solid; } <table style="width: 100%;"> <tr> <td> <div style="word-wrap: break-word;"> Looooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooong word </div> </td> <td><span style="display: inline;">Short word</span></td> </tr> </table> コードスニペットを実行する結果を非表示スニペットを展開 上記の長い単語は私のページの境界よりも大きいですが、上記のHTMLでは壊れません。私は、追加の以下の提案を試みたtext-wrap:suppressとtext-wrap:normal、しかし助けでもありません。
566 html  css  html-table 
8
Normalize.cssとReset CSSの違いは何ですか？
CSSリセットとは何か知っていますが、最近、Normalize.cssと呼ばれるこの新しいものについて聞きました Normalize.cssとReset CSSの違いは何ですか？ CSSの正規化とCSSのリセットの違いは何ですか？ CSSリセットの新しい流行語ですか？
565 css  normalize-css 
18
Angular：* ngClassを使用した条件付きクラス
Angularコードの何が問題になっていますか？私は得ています： Cannot read property 'remove' of undefined at BrowserDomAdapter.removeClass ... HTML <ol class="breadcrumb"> <li *ngClass="{active: step==='step1'}" (click)="step='step1; '">Step1</li> <li *ngClass="{active: step==='step2'}" (click)="step='step2'">Step2</li> <li *ngClass="{active: step==='step3'}" (click)="step='step3'">Step3</li> </ol>
3
ブラウザーがCSSセレクターを右から左に一致させるのはなぜですか？
CSSセレクターは、ブラウザーエンジンによって右から左にマッチングされます。したがって、まず子供を見つけ、次に親をチェックして、ルールの残りの部分と一致するかどうかを確認します。 どうしてこれなの？ それは仕様が言っているからというだけですか？ 左から右に評価した場合、最終的なレイアウトに影響しますか？ 私にとって最も簡単な方法は、要素数が最も少ないセレクターを使用することです。したがって、最初にIDを使用します（1つの要素のみを返す必要があるため）。次に、おそらくノードまたはノードの数が最も少ないクラスまたは要素です。たとえば、ページにスパンが1つしかない場合があるため、スパンを参照するルールを使用してそのノードに直接移動します。 ここに私の主張を裏付けるいくつかのリンクがあります http://code.google.com/speed/page-speed/docs/rendering.html https://developer.mozilla.org/en/Writing_Efficient_CSS 親でなければならない子のすべての親ではなく、親の子（多くの場合）をすべて見る必要がないように、このように行われているようです。DOMが深い場合でも、RTLマッチングでは複数のノードではなく、レベルごとに1つのノードのみを参照します。CSSセレクターLTRまたはRTLを評価する方が簡単/高速ですか？
7
CSSを使用してdivを垂直方向にスクロール可能にする
この <div id="" style="overflow:scroll; height:400px;"> コードスニペットを実行する結果を非表示スニペットを展開 与えdivユーザーが水平方向と垂直方向の両方にスクロールすることができること。divが垂直方向にのみスクロールできるように変更するにはどうすればよいですか？
560 html  css 
21
残りの幅を埋めるためにdivを展開します
2列のdivレイアウトが必要です。それぞれのレイアウトの幅を変えることができます。 div { float: left; } .second { background: #ccc; } <div>Tree</div> <div class="second">View</div> コードスニペットを実行する結果を非表示スニペットを展開 「ツリー」divが必要なスペースを埋めた後、「ビュー」divを利用可能な幅全体に拡張したい。 現在、私の「ビュー」divは、それが含むコンテンツにサイズ変更されています。両方のdivが高さ全体を占める場合も良いでしょう。 免責事項を複製しない： float：leftが設定されて いる場合、divを最大幅に拡張します。左側の幅が固定されているためです。 divのヘルプ-divを残りの幅に 合わせます
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.