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

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

3
フレックスベースと幅の違いは何ですか?
これに関する質問と記事がありましたが、私が知る限り、決定的なことは何もありません。私が見つけることができた最高の要約は flex-basisを使用すると、他の要素が計算される前に、要素の初期/開始サイズを指定できます。パーセンテージまたは絶対値のいずれかです。 ...それ自体は、フレックスベースが設定されている要素の動作についてはあまり説明していません。フレックスボックスについての私の現在の知識では、なぜそれが幅を説明できなかったのかわかりません。 フレックスベースと実際の幅がどのように異なるかを知りたいのですが。 幅をフレックスベースに(またはその逆に)置き換えると、視覚的に何が変わりますか? 両方を異なる値に設定するとどうなりますか?同じ値の場合はどうなりますか? 幅またはフレックスベースのどちらかを使用すると、もう一方を使用する場合と大幅に異なる特別なケースはありますか? flex-wrap、flex-grow、flex-shrinkなどの他のフレックスボックススタイルと組み合わせて使用​​した場合、幅とフレックス基準はどのように異なりますか? 他の重要な違いはありますか? 編集/説明:この質問は、「厳密にフレックスベースのプロパティセットとは何ですか?」で別の形式で尋ねられました。しかし、フレックスベースと幅(または高さ)の違いをより直接比較または要約するとよいと感じました。
224 css  flexbox  width 

30
Font Awesomeが機能せず、アイコンが四角で表示される
だから私はマーケティングページのプロトタイプを作ろうとしていて、Bootstrapと新しいFont Awesomeファイルを使っています。問題は、アイコンを使用しようとすると、ページにレンダリングされるすべてが大きな四角形になることです。 ここでは、ファイルをヘッドに含める方法を示します。 <head> <title>Page Title</title> <link rel="stylesheet" href="css/bootstrap.css"> <link rel="stylesheet" href="css/bootstrap-responsive.css"> <link rel="stylesheet" href="css/font-awesome.css"> <link rel="stylesheet" href="css/app.css"> <!--[if IE 7]> <link rel="stylesheet" href="css/font-awesome-ie7.min.css"> <![endif]--> </head> そして、これがアイコンを使おうとする私の例です: <i class="icon-camera-retro"></i> しかし、すべてが大きな正方形でレンダリングされます。誰かが何が起こっているのか知っていますか?

4
CSS-オーバーフロー:スクロール; -常に垂直スクロールバーを表示しますか?
だから現在私は持っています: #div { position: relative; height: 510px; overflow-y: scroll; } ただし、一部のユーザーにとって、そこにさらに多くのコンテンツがあることは明らかだとは思いません。彼らは私のdivが実際により多くのコンテンツを含んでいることを知らずにページを下にスクロールすることができました。私は高さを510pxにして一部のテキストを切り取り、一部のページではより多くのコンテンツがあるように見えますが、すべてのページで機能するわけではありません。 私はMacを使用しています。ChromeとSafariでは、垂直スクロールバーは、マウスがDivの上にあり、アクティブにスクロールしたときにのみ表示されます。常に表示させる方法はありますか?
224 css  macos  scroll  overflow 

17
印刷プレビューに背景色が表示されない
ページを印刷しようとしています。そのページで、私はテーブルに背景色を与えました。印刷プレビューをクロムで表示すると、背景色のプロパティが反映されません... だから私はこのプロパティを試しました: -webkit-print-color-adjust: exact; それでも色は表示されません。 http://jsfiddle.net/TbrtD/ .vendorListHeading { background-color: #1a4567; color: white; -webkit-print-color-adjust: exact; } <div class="bs-docs-example" id="soTable" style="padding-top: 10px;"> <table class="table" style="margin-bottom: 0px;"> <thead> <tr class="vendorListHeading" style=""> <th>Date</th> <th>PO Number</th> <th>Term</th> <th>Tax</th> <th>Quote Number</th> <th>Status</th> <th>Account Mgr</th> <th>Shipping Method</th> <th>Shipping Account</th> <th style="width: 184px;">QA</th> <th id="referenceSO">Reference</th> <th id="referenceSO" style="width: …

18
CSS:表のセルを切り捨てますが、可能な限り適合させます
フレッドに会います。彼はテーブルです: <table border="1" style="width: 100%;"> <tr> <td>This cells has more content</td> <td>Less content here</td> </tr> </table> フレッドのアパートはサイズを変更するという奇妙な習慣を持っているため、他のすべてのユニットを押しのけてウィットフォード夫人のリビングルームを忘却に追いやらないように、コンテンツの一部を非表示にする方法を学びました。 <table border="1" style="width: 100%; white-space: nowrap; table-layout: fixed;"> <tr> <td style="overflow: hidden; text-overflow: ellipsis">This cells has more content</td> <td style="overflow: hidden; text-overflow: ellipsis">Less content here</td> </tr> </table> これは機能しますが、フレッドは、彼の右のセル(ニックネームはCelldito)が少しスペースをあきらめた場合、左のセルはほとんど切り捨てられないだろうというしつこい感じを持っています。彼の正気を保存できますか? 要約すると、どのようにしてテーブルのセルが均等にオーバーフローし、それらがすべて空白をあきらめた場合にのみですか?

7
2つのdivを並べて表示-流体表示
2つのdivを並べて配置し、次のCSSを使用しようとしています。 #left { float: left; width: 65%; overflow: hidden; } #right { overflow: hidden; } HTMLはシンプルで、ラッパーdivに左と右の2つのdivがあります。 <div id="wrapper"> <div id="left">Left side div</div> <div id="right">Right side div</div> </div> StackOverflowや他のサイトでもより良い方法を探すために何度も試みましたが、正確なヘルプが見つかりませんでした。 したがって、コードは一見問題なく動作します。問題は、幅(%)を増やすと、左側のdivが自動的にパディング/マージンを取得することです。したがって、幅が65%の場合、左側のdivにはパディングまたはマージンがあり、右側のdivと完全に揃っていません。次に、ページを拡大すると、右側のdivが左側のdivの下にスライドします。 注:すみません、たくさん検索しました。この質問は何度も尋ねられましたが、それらの答えは私を助けていません。私の場合、何が問題なのかを説明しました。 私はそれに対する修正があることを望みます。 ありがとうございました。 編集:申し訳ありませんが、HTMLの問題です。左側と右側の両方に2つの「ボックス」divがあり、%でパディングがあり、幅が広いため左側がより多くのパディングを示していました。申し訳ありませんが、上記のCSSは完璧に動作し、その流動的な表示と修正が行われています。間違った質問をして申し訳ありません...
222 css  html  fluid-layout  fluid 


12
HTMLでティアドロップを作成するにはどうすればよいですか?
このような形状を作成してWebページに表示するにはどうすればよいですか? スケーリングでぼやけてしまうので、画像は 使いたくない 私はCSSで試しました: .tear { display: inline-block; transform: rotate(-30deg); border: 5px solid green; width: 50px; height: 100px; border-top-left-radius: 50%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; } <div class="tear"> </div> コードスニペットを実行する結果を非表示スニペットを展開 それは本当に台無しになりました。 そして、私はSVGで試しました: <svg viewBox="0 100 100"> <polygon points="50,0 100,70 50,100 0,70"/> </svg> コードスニペットを実行する結果を非表示スニペットを展開 形は取れましたが、底が曲がっていませんでした。 HTMLページで使用できるようにこの形状を作成する方法はありますか?
222 html  css  svg  css-shapes 


17
HTMLリストスタイルタイプのダッシュ
ダッシュ(つまり-または– –または— —)を使用してHTMLでリストスタイルを作成する方法はありますか? <ul> <li>abc</li> </ul> 出力: - abc 私はそのようなことでこれを行うことが思い浮かびましたが、私li:before { content: "-" };はそのオプションの短所を知りません(そしてフィードバックが非常に義務付けられます)。 より一般的には、リストアイテムに一般的な文字を使用する方法を知っていてもかまいません。
222 html  css  xhtml  html-lists 

16
IDとクラスの違いは何ですか?
CSS <div class="">との違いは何<div id="">ですか?使用しても大丈夫<div id="">ですか? 私はさまざまな開発者がこれを両方の方法で行っているのを見ています。私は独学しているので、実際にそれを理解したことはありません。
222 html  css  class  id 

13
ユーザーが上にスクロールしない限り、オーバーフローdivを下にスクロールし続ける
大きさが300ピクセルしかないdivがあり、ページの読み込み時にコンテンツの下部までスクロールしたい。このdivにはコンテンツが動的に追加されており、下にスクロールし続ける必要があります。ユーザーが上にスクロールすることを決定した場合、ユーザーが再び下にスクロールするまで、下にジャンプしたくない ユーザーが上にスクロールしない限り、一番下までスクロールしたままのdivを設定できます。ユーザーが下にスクロールすると、新しい動的コンテンツが追加された場合でも、一番下に表示される必要があります。これを作成するにはどうすればいいですか。
222 javascript  jquery  html  css  scroll 

11
レスポンシブブートストラップナビゲーションバーのコンテンツを中央に配置
コンテンツをブートストラップナビゲーションバーの中央に配置することに問題があります。私はブートストラップ3を使用しています。多くの投稿を読みましたが、使用したCSSまたはメソッドは私のコードでは機能しません!私は本当にイライラしているので、これは私の最後の選択肢のようなものです。何か助けていただければ幸いです! <!DOCTYPE html> <html> <head> <title>Navigation</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="css/style.css" rel="stylesheet" media="screen"> </head> <body> <div class="container"> <nav class="navbar navbar-default" role="navigation"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> …

4
<fieldset>のサイズが正しくありません。削除できない `min-width:min-content`があるようです
問題 私が持っている&lt;select&gt;その場所の1 &lt;option&gt;のテキスト値が非常に長いです。私がしたい&lt;select&gt;、それがその表示されたテキストをカットする場合であっても、その親よりも幅が広いことはありませんので、サイズを変更します。max-width: 100%それを行う必要があります。 サイズ変更前: サイズ変更後に必要なもの: ただし、このjsFiddleの例をロードし、結果パネルの幅をの幅よりも小さくなるようにサイズ変更する&lt;select&gt;と、内の選択が&lt;fieldset&gt;その幅を縮小できないことがわかります。 サイズ変更後に実際に表示されるもの: ただし、aの&lt;div&gt;代わりにaを使用&lt;fieldset&gt;した同等のページは適切にスケーリングされます。1つのページにとが隣接していると、それを確認して変更をより簡単にテストできます。また、周囲のタグを削除すると、サイズ変更が機能します。タグは何とかブレークに水平方向のサイズ変更を引き起こしています。&lt;fieldset&gt;&lt;div&gt;&lt;fieldset&gt;&lt;fieldset&gt; &lt;fieldset&gt;CSSルールがあるかのように行為がありますfieldset { min-width: min-content; }。(min-content手段は、大体、最小幅オーバーフローに子供を起こさないこと。)私が交換した場合&lt;fieldset&gt;と&lt;div&gt;でmin-width: min-content、それはまったく同じに見えます。それでもmin-content、私のスタイル、ブラウザのデフォルトスタイルシート、またはFirebugのCSSインスペクタに表示されるルールはありません。&lt;fieldset&gt;FirebugのCSS InspectorとFirefoxのデフォルトのスタイルシートforms.cssに表示されるすべてのスタイルをオーバーライドしようとしましたが、それは役に立ちませんでした。特にオーバーライドしてmin-width、width何もしませんでした。 コード フィールドセットのHTML: &lt;fieldset&gt; &lt;div class="wrapper"&gt; &lt;select id="section" name="section"&gt; &lt;option value="-1"&gt;&lt;/option&gt; &lt;option value="1501" selected="selected"&gt;Sphinx of black quartz, judge my vow. The quick brown fox jumps over the lazy dog.&lt;/option&gt; &lt;option value="1480"&gt;Subcontractor&lt;/option&gt; &lt;option value="3181"&gt;Valley&lt;/option&gt; &lt;option value="3180"&gt;Ventura&lt;/option&gt; …
221 html  width  fieldset  css 

6
チェックされたラジオボタンのラベルのCSSセレクター
チェックされたラジオボタンのラベルにcss(3)スタイルを適用することは可能ですか? 次のマークアップがあります。 &lt;input type="radio" id="rad" name="radio"/&gt; &lt;label for="rad"&gt;A Label&lt;/label&gt; 私が望んでいたのは label:checked { font-weight: bold; } 何かをするでしょうが、悲しいかな(私が期待したように)しません。 この種の機能を実現できるセレクターはありますか?それが役立つ場合は、divなどで囲むことができますが、最善の解決策は、ラベルの「for」属性を使用することです。 アプリケーションのブラウザーを指定できるので、クラスcss3などのベストを使用してください。
221 forms  css 

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