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

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

22
バックグラウンドでCSS画像をストレッチおよびスケーリング-CSSのみ
ブラウザのビューポートのサイズに応じて、背景画像を伸縮させたい。 Stack Overflowで、たとえばCSSのストレッチやスケーリングの背景など、問題を解決するいくつかの質問を見てきました。うまくいきますがbackground、imgタグではなく、を使って画像を配置したいと思います。 その1つにimgタグが配置され、CSSを使用してimgタグに割り当てられます。 width:100%; height:100%; それは機能しますが、その質問は少し古く、CSS 3では背景画像のサイズ変更がかなりうまく機能すると述べています。この例を最初に試してみましたが、うまくいきませんでした。 background-image宣言でそれを行う良い方法はありますか？
853 css  background 
21
ボディにブラウザの高さの100％を持たせる
ブラウザの高さを100％にしたい。CSSを使用してそれを行うことはできますか？ を設定してみましたheight: 100%が、うまくいきません。 ページの背景色をブラウザウィンドウ全体に設定したいのですが、ページのコンテンツが少ない場合、下部に醜い白いバーが表示されます。
844 html  css  height 
30
CSSを使用してチェックボックスのスタイルを設定する方法
以下を使用してチェックボックスのスタイルを設定しようとしています： <input type="checkbox" style="border:2px dotted #00f;display:block;background:#ff0000;" /> コードスニペットを実行する結果を非表示スニペットを展開 ただし、スタイルは適用されません。チェックボックスには、デフォルトのスタイルが引き続き表示されます。特定のスタイルを指定するにはどうすればよいですか？
831 html  css  checkbox 
15
CSS 100％高さとパディング/マージン
HTML / CSSを使用して、親要素の100％の幅または高さ、あるいはその両方を持ち、適切なパディングまたはマージンがある要素を作成するにはどうすればよいですか？ 「適切な」とは、親要素が200px高く、指定height = 100%した場合、親要素の中央にうまく配置された、すべての側面に高い要素がpadding = 5px必要になることを期待することを意味します。190pxborder = 5px 今、私はそれが標準のボックスモデルがそれが機能することを指定する方法ではないことを知っています（理由を正確に知りたいのですが...）、それで明白な答えは機能しません： #myDiv { width: 100% height: 100%; padding: 5px; } しかし、私には、任意のサイズの親に対してこの効果を確実に生成する方法がいくつかあるに違いないように思えます。誰かがこの（一見単純な）タスクを達成する方法を知っていますか？ ああ、そして記録のために、私はIEの互換性にそれほど興味がないので、（うまくいけば）物事が少し簡単になるはずです。 編集：例が求められたので、ここに私が考えることができる最も簡単なものがあります： <html style="height: 100%"> <body style="height: 100%"> <div style="background-color: black; height: 100%; padding: 25px"></div> </body> </html> 次に、ページがスクロールバーを必要とするほど大きくなることなく、すべてのエッジに25ピクセルのパディングが表示されるようにブラックボックスを表示します。
813 css 
9
not：first-childセレクタ
私が持っているdivいくつか含むタグulタグを。 最初のulタグにのみCSSプロパティを設定できます： div ul:first-child { background-color: #900; } ただし、ul最初のタグを除いて、他の各タグのCSSプロパティを設定しようとする次の試みは機能しません。 div ul:not:first-child { background-color: #900; } div ul:not(:first-child) { background-color: #900; } div ul:first-child:after { background-color: #900; } CSSで「最初の要素を除く各要素」を記述するにはどうすればよいですか？
811 css  css-selectors 
21
ChromeのCSSカスタムスタイルボタンから青い枠を削除
Webページで作業していて、カスタムスタイルの<button>タグが必要です。CSSで、私は言った：border: none。これでサファリでは完全に機能しますが、クロムでは、ボタンの1つをクリックすると、その周りに迷惑な青い境界線が表示されます。私は思っbutton:active { outline: none }たりbutton:focus { outline:none }動作しますが、どちらも行いません。何か案は？ これは、クリックされる前の状態（およびクリックされた後も表示されるようにする方法）です。 そして、これは私が話している国境です： ここに私のCSSがあります： button.launch { background-color: #F9A300; border: none; height: 40px; padding: 5px 15px; color: #ffffff; font-size: 16px; font-weight: 300; margin-top: 10px; margin-right: 10px; } button.launch:hover { cursor: pointer; background-color: #FABD44; } button.change { background-color: #F88F00; border: none; height: 40px; padding: …
811 css  google-chrome 
28
div内の要素を垂直方向に整列させる方法は？
2つの画像とh1。それらはすべて、div内で互いに隣接して垂直方向に整列する必要があります。 画像の1つをabsolutediv内に配置する必要があります。 これがすべての一般的なブラウザで機能するために必要なCSSは何ですか？ <div id="header"> <img src=".." ></img> <h1>testing...</h1> <img src="..."></img> </div>
30
フレックスボックスアイテム間の距離を設定するより良い方法
コンテナmargin: 0 5px上.itemとmargin: 0 -5pxコンテナ上で使用しているフレックスボックスアイテム間の最小距離を設定するには 私にとってはハックのように見えますが、これを行うためのより良い方法を見つけることができません。 例 #box { display: flex; width: 100px; margin: 0 -5px; } .item { background: gray; width: 50px; height: 50px; margin: 0 5px; } <div id='box'> <div class='item'></div> <div class='item'></div> <div class='item'></div> <div class='item'></div> </div> コードスニペットを実行する結果を非表示スニペットを展開
781 css  flexbox 
26
hr要素の色を変更する
hrCSSを使用してタグの色を変更したい。以下で試したコードは機能していないようです： hr { color: #123455; }
778 html  css 
30
IMGとCSSの背景画像を使用する場合
この質問の答えはコミュニティの努力です。この投稿を改善するには、既存の回答を編集してください。現在、新しい回答や相互作用を受け入れていません。 IMGCSS background-imageとは逆に、HTML タグを使用して画像を表示する方が適切な状況はどれですか。 要因には、アクセシビリティ、ブラウザサポート、動的コンテンツ、またはあらゆる種類の技術的な制限や使いやすさの原則が含まれます。
15
なぜpxではなくemですか？
ピクセルではなくemを使用してスタイルシートでサイズと距離を定義する必要があると聞きました。問題は、CSSでスタイルを定義するときにpxではなくemを使用する必要があるのはなぜですか？これを説明する良い例はありますか？
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.