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

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

13
CSSで<select>メニューの<option>を非表示にする方法は?
私はクロームが、それはそう、私は非表示にすることができないことを実現しました&lt;option&gt;で&lt;select&gt;。Firefoxはそうします。 &lt;option&gt;検索条件に一致するを非表示にする必要があります。Chromeウェブツールではdisplay: none;、JavaScriptによって正しく設定されていることがわかり&lt;select&gt;ますが、メニューをクリックすると表示されます。 &lt;option&gt;メニューをクリックしたときに、検索条件に一致するを表示しないようにするにはどうすればよいですか?ありがとう!
103 javascript  jquery  css  dom 

4
jQueryのデータ属性値による要素の検索
私は以下のようないくつかの要素を持っています: &lt;a class="slide-link" href="#" data-slide="0"&gt;1&lt;/a&gt; &lt;a class="slide-link" href="#" data-slide="1"&gt;2&lt;/a&gt; &lt;a class="slide-link" href="#" data-slide="2"&gt;3&lt;/a&gt; (ゼロ)のdata-slide属性値を持つ要素にクラスを追加するにはどうすればよい0ですか? 私は多くの異なる解決策を試しましたが、何もうまくいきませんでした。例: $('.slide-link').find('[data-slide="0"]').addClass('active'); 何か案が?


7
絶対配置された要素を中央に揃える方法は?
2つのキャンバスを重ねて2層のキャンバスにしようとしています。 私はここで例を見ました: &lt;div style="position: relative;"&gt; &lt;canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"&gt;&lt;/canvas&gt; &lt;canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"&gt;&lt;/canvas&gt; &lt;/div&gt; しかし、両方のキャンバスを画面の中央に揃えるように設定したいと思います。の値を設定した場合left(iPadでapsを実行しているように)画面の向きを変更しているときに定数として、キャンバスは画面の中央にとどまらず、動作方法が変わります &lt;div align="center"&gt; 誰か助けてもらえますか?
103 css  html5-canvas 

7
テーブルの列のサイズ
ではBootstrap 3、テーブル列のタグに適用col-sm-xxしてサイズを変更できます。ただし、これはブートストラップ4では機能しません。ブートストラップ4でこのようなことを実現するにはどうすればよいですか?ththead &lt;thead&gt; &lt;th class="col-sm-3"&gt;3 columns wide&lt;/th&gt; &lt;th class="col-sm-5"&gt;5 columns wide&lt;/th&gt; &lt;th class="col-sm-4"&gt;4 columns wide&lt;/th&gt; &lt;/thead&gt; 特にテーブルにデータを追加する場合は、適切なサイズが設定されていない場合にコードプライを確認します。これがどのように実行されるかを確認してください。 &lt;div class="container" style="border: 1px solid black;"&gt; &lt;table class="table table-bordered"&gt; &lt;thead&gt; &lt;tr class="row"&gt; &lt;th class="col-sm-3"&gt;3 columns wide&lt;/th&gt; &lt;th class="col-sm-5"&gt;5 columns wide&lt;/th&gt; &lt;th class="col-sm-4"&gt;4 columns wide&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td&gt;123&lt;/td&gt; &lt;td&gt;456&lt;/td&gt; &lt;td&gt;789&lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; …


10
背景画像を拡大してdivを満たす方法
背景画像を別のdivに設定したいのですが、私の問題は次のとおりです。 画像サイズは固定(60px)です。 さまざまなdivのサイズ divの背景全体を埋めるように背景画像を拡大するにはどうすればよいですか? #div2{ background-image:url(http://s7.static.hootsuite.com/3-0-48/images/themes/classic/streams/message-gradient.png); height:180px; width:200px; border: 1px solid red; } ここでコードを確認してください。


10
CSSを使用して派手な矢を作る方法?
わかりましたので、これを使用して三角形を作成できることを誰もが知っています: #triangle { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } そして、それは三角形で塗りつぶされた固体を生成します。しかし、このように中空の矢印のような三角形をどのように作成しますか?
102 html  css  css-shapes 


7
ルビーなしのSassまたはCompass?
RubyなしでSassやCompassなどを使用する方法はありますか? 私はグーグルとこのサイトを見回していて、何も見つけることができません、どんな助けもいただければ幸いです。ありがとうございました
102 css  sass  compass-sass 

10
テーブルを使用せずにこのHTMLレイアウトを実行できますか?
わかりました、1〜2週間前に単純なレイアウトの問題がありました。つまり、ページのセクションにはヘッダーが必要です。 +---------------------------------------------------------+ | Title Button | +---------------------------------------------------------+ かなりシンプルなもの。テーブルの憎しみはWebの世界で引き継がれているようですが、テーブルの代わりにHTMLフォームに定義リスト(DL、DD、DT)タグを使用する理由を尋ねたときに思い出しました。 これで、テーブルとdivs / CSSの一般的なトピックが以前に説明されました。次に例を示します。 DIV対表 ; そして DIVではなくテーブル。 したがって、これはレイアウト用のCSSとテーブルについての一般的な議論を意図したものではありません。これは単に1つの問題の解決策です。私はCSSを使用して上記のさまざまな解決策を試しました: ボタンまたはボタンを含むdivの右にフロートします。 ボタンの相対位置。そして 相対+絶対位置。 これらの解決策はどれも、さまざまな理由で満足できるものではありませんでした。たとえば、相対的な配置により、コンテンツの下にドロップダウンメニューが表示されるというZ-indexの問題が発生しました。 だから私は戻って行くことになりました: &lt;style type="text/css"&gt; .group-header { background-color: yellow; width: 100%; } .group-header td { padding: 8px; } .group-title { text-align: left; font-weight: bold; } .group-buttons { text-align: right; } &lt;/style&gt; &lt;table …
102 html  css  layout 

4
別のdivの下側の近くにdivを配置する
私は外側のdivと内側のdivを持っています。内側のdivを外側のdivの下部に配置する必要があります。 外側のdivは伸縮自在です(幅:たとえば70%)。インナーブロックも中央に配置する必要があります。 記述されたメイクアップの簡単なモデルを下の写真に示します。
102 html  css  layout 

3
CSSだけで<option>をスタイルする方法は?
注:この質問は、カスタムドロップダウンの作成に関するものではありません。&lt;option&gt;CSSのselect要素内で要素をスタイリングする可能性についてのみです ブラウザーの互換性&lt;option&gt;を持つ&lt;select&gt;要素のsをどのようにスタイルできますか?ドロップダウンをに変換してに変換する多くのJavaScriptの方法を知っています&lt;li&gt;。 &lt;select class="select"&gt; &lt;option selected&gt;Select&lt;/option&gt; &lt;option&gt;Blue&lt;/option&gt; &lt;option &gt;Red&lt;/option&gt; &lt;option&gt;Green&lt;/option&gt; &lt;option&gt;Yellow&lt;/option&gt; &lt;option&gt;Brown&lt;/option&gt; &lt;/select&gt; CSSだけで何ができるのか、IE9 +、Firefox、Chromeと互換性があるのか​​と尋ねています。 私はこのようなスタイルにしたい、またはできるだけ近づけたいです。 ここでhttp://jsfiddle.net/jitendravyas/juwz3/3/を試してみましたが、Chromeではフォントの色以外のスタイルは表示されませんが、Firefoxではさらに多くのスタイルが表示されます。Chromeで境界線とパディングを機能させる方法は?
102 css  html-select 

3
Retinaディスプレイ、高解像度の背景画像
これはばかげた質問のように聞こえるかもしれません。 このCSSスニペットを通常の表示に使用する場合(box-bg.png200px x 200pxです)。 .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } このようなメディアクエリを使用してRetinaディスプレイをターゲットにすると(@ 2x画像が高解像度バージョンになります); @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { .box{background:url('images/box-bg@2x.png') no-repeat top left;} } .box新しい高解像度の背景画像と一致させるために、div のサイズを400px x 400px に2倍にする必要がありますか?

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.