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

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

9
divのアスペクト比を維持しながら、CSSで画面の幅と高さを塗りつぶしますか？
16:9ビデオのように、ほぼ横長に固定されたアスペクト比を持つ、まとめるサイトがあります。 利用可能な幅と利用可能な高さを満たすために、それを中央に配置して拡大させたいですが、どちらの側でも大きくなることはありません。 例えば： 縦長の薄いページでは、高さを維持しながらコンテンツを全幅に拡大します。 短い幅のページでは、コンテンツが高さいっぱいに広がり、幅が比例します。 私が見てきた2つの方法があります。 正しいアスペクト比の画像を使用してコンテナを拡張divしますが、主要なブラウザ間で同じように動作させることができませんでした。 比例した下パディングを設定しますが、これは幅に対して相対的にのみ機能し、高さは無視します。幅が広くなるにつれて、垂直スクロールバーが表示されます。 私はあなたがJSでこれを非常に簡単に行うことができることを知っています、しかし私は純粋なCSSソリューションが欲しいです。 何か案は？
8
<input>フィールドのwidth：auto
初心者向けのCSS質問。「利用可能なスペースを埋める」width:autoというdisplay:block要素を考えました。ただし、&lt;input&gt;要素の場合はそうではないようです。例えば： &lt;body&gt; &lt;form style='background-color:red'&gt; &lt;input type='text' style='background-color:green;display:block;width:auto'&gt; &lt;/form&gt; &lt;/body&gt; 次に2つの質問： width：autoが意味する正確な定義はありますか？CSSの仕様は曖昧に思えますが、関連するセクションを見逃したのかもしれません。 入力フィールドに対して期待される動作を実現する方法はありますか。他のブロックレベル要素のように利用可能なスペースを埋めますか？ ありがとう！
122 css 
7
div内のspan要素を水平方向に中央揃えするにはどうすればよいですか
私は2つのリンク「view website」と「view project」を周囲のdivの中央に配置しようとしています。誰かがこれを機能させるために私がする必要があることを指摘できますか？ JSフィドル：http : //jsfiddle.net/F6R9C/ HTML &lt;div&gt; &lt;span&gt; &lt;a href="#" target="_blank"&gt;Visit website&lt;/a&gt; &lt;a href="#"&gt;View project&lt;/a&gt; &lt;/span&gt; &lt;/div&gt; CSS div { background:red;overflow:hidden } span a { background:#222; color:#fff; display:block; float:left; margin:10px 10px 0 0; padding:5px 10px }
122 css 
12
パラメータによるキャッシュ無効化
運用展開でバストをキャッシュしたいのですが、そうするためのシステムを考え出すために多くの時間を無駄にしないでください。私の考えは、現在のバージョン番号を持つcssおよびjsファイルの最後にparamを適用することでした： &lt;link rel="stylesheet" href="base_url.com/file.css?v=1.123"/&gt; 2つの質問：これはキャッシュを効果的に壊しますか？paramはこれが動的コンテンツであることを示しているので、paramはブラウザにそのURLからの応答を決してキャッシュしないようにしますか？
122 javascript  html  css  caching 
5
CSS3変換が機能しない
メニュー項目を10度回転して変形しようとしています。CSSはFirefoxで機能しますが、ChromeとSafariで効果を再現できませんでした。IEはこのCSS3プロパティをサポートしていないので、問題ありません。 私は次のCSSを使用しました： li a { -webkit-transform:rotate(10deg); -moz-transform:rotate(10deg); -o-transform:rotate(10deg); } 誰かが私が間違っているところを提案してくれませんか？ ありがとう。
122 html  css 
4
フェードイン効果のある要素を追加する[jQuery]
var html = "&lt;div id='blah'&gt;Hello stuff here&lt;/div&gt;" $("#mycontent").append(html).fadeIn(999); これは機能していないようです。 コンテンツが追加されたときにクールな効果が欲しいだけです。 注：「mycontent」全体ではなく、新しい「何とか」のdivだけをフェードインさせたいです。
121 javascript  jquery  html  css 
3
SCSS / SASSでパーセントを計算する
計算によって幅をパーセンテージでscs​​sに設定したいのですが、エラーになります。 "...- width：（4/12）％"の後の無効なCSS：予期された式（たとえば、1px、太字）は ";"でした 私は何かしたいです $my_width: (4/12)%; div{ width: $my_width; } そこに％記号を追加するにはどうすればよいですか？ pxとemで同じ質問
121 css  sass 
7
角度2 ngIfおよびCSSトランジション/アニメーション
私はdivをCSSを使用して角度2で右からスライドインさせたいです。 &lt;div class="note" [ngClass]="{'transition':show}" *ngIf="show"&gt; &lt;p&gt; Notes&lt;/p&gt; &lt;/div&gt; &lt;button class="btn btn-default" (click)="toggle(show)"&gt;Toggle&lt;/button&gt; [ngClass]のみを使用してクラスを切り替え、不透明度を利用する場合、問題なく動作します。しかし、liはその要素を最初からレンダリングしたくないので、最初にngIfで「非表示」にしますが、その後、遷移は機能しません。 .transition{ -webkit-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; -moz-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; -ms-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out ; -o-transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; transition: opacity 1000ms ease-in-out,margin-left 500ms ease-in-out; margin-left: 1500px; width: 200px; opacity: …
18
プロトタイプを使用してテキストエリアを自動サイズ調整する方法は？
現在、勤務先の会社の社内販売アプリケーションに取り組んでおり、ユーザーが配送先住所を変更できるフォームを持っています。 メインアドレスの詳細に使用しているtextareaがその中のテキストの領域を占めるだけで、テキストが変更された場合は自動的にサイズが変更される場合は、もっと見栄えがよくなると思います。 これが現在のスクリーンショットです。 何か案は？ @クリス 良い点ですが、サイズを変更する理由があります。私はそれが占める領域がそれに含まれる情報の領域であることを望みます。スクリーンショットからわかるように、固定テキスト領域がある場合、垂直方向のスペースがかなり大きくなります。 フォントを減らすことはできますが、大きくて読みやすいアドレスにする必要があります。テキスト領域のサイズを小さくできるようになりましたが、3行または4行（1行は5行）の住所行がある人には問題があります。ユーザーがスクロールバーを使用する必要があるのは、大したことではありません。 私はもう少し具体的であるべきだと思います。私は垂直方向のサイズ変更をした後、幅はそれほど重要ではありません。これで発生する唯一の問題は、ウィンドウの幅が小さすぎると（スクリーンショットで確認できるように）、ISO番号（大きな「1」）がアドレスの下にプッシュされることです。 それはギミックを持つことではありません。それは、ユーザーが編集できるテキストフィールドを用意することで、不要なスペースを取りませんが、その中にすべてのテキストが表示されます。 誰かが問題に取り組む別の方法を思いついたとしても、私もそれを受け入れます。 コードが少し変わっているため、コードを少し変更しました。入力した文字が考慮されないため、キーアップ時にアクティブになるように変更しました。 resizeIt = function() { var str = $('iso_address').value; var cols = $('iso_address').cols; var linecount = 0; $A(str.split("\n")).each(function(l) { linecount += 1 + Math.floor(l.length / cols); // Take into account long lines }) $('iso_address').rows = linecount; };
8
個々のセルに色を付けずに、CSSを使用してテーブルの列に色を付けることはできますか？
列のスパンにずっと色を付ける方法はありますか？以下の開始例を参照してください。 &lt;table border="1"&gt; &lt;tr&gt; &lt;th&gt;Motor&lt;/th&gt; &lt;th colspan="3"&gt;Engine&lt;/th&gt; &lt;th&gt;Car&lt;/th&gt; &lt;th colspan="2"&gt;Body&lt;/th&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;4&lt;/td&gt; &lt;td&gt;5&lt;/td&gt; &lt;td&gt;6&lt;/td&gt; &lt;td&gt;7&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;7&lt;/td&gt; &lt;td&gt;1&lt;/td&gt; &lt;td&gt;2&lt;/td&gt; &lt;td&gt;3&lt;/td&gt; &lt;td&gt;4&lt;/td&gt; &lt;td&gt;5&lt;/td&gt; &lt;td&gt;6&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; コードスニペットを実行する結果を非表示スニペットを展開 そして、たとえば、「エンジン」と「ボディ」スパンの下にあるすべてのセルを含む、より良い方法（コードが少なく、個別のカラーリングではない）を着色する方法を探しています #DDD &lt;style&gt; .color { background-color: #DDD } &lt;/style&gt; &lt;table border="1"&gt; &lt;tr&gt; &lt;th&gt;Motor&lt;/th&gt; &lt;th colspan="3" class="color"&gt;Engine&lt;/th&gt; &lt;th&gt;Car&lt;/th&gt; &lt;th colspan="2" …
121 html  css 
4
フレックスボックスの列を左右に揃える方法は？
典型的なCSSでは、2つの列の一方を左右に、もう一方の間隔を空けてフロートさせることができます。フレックスボックスでどうすればいいですか？ http://jsfiddle.net/1sp9jd32/ #container { width: 500px; border: solid 1px #000; display: -webkit-flex; display: -ms-flexbox; display: flex; } #a { width: 20%; border: solid 1px #000; } #b { width: 20%; border: solid 1px #000; height: 200px; } &lt;div id="container"&gt; &lt;div id="a"&gt; a &lt;/div&gt; &lt;div id="b"&gt; b &lt;/div&gt; &lt;/div&gt; コードスニペットを実行する結果を非表示スニペットを展開
121 html  css  flexbox 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.