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

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

5
cssを介してテキストの左側に画像を追加します
cssを介してテキストに画像を追加するにはどうすればよいですか？ 私はこれを持っています： <span class="create">Create something</span> そして、cssを使用してその左側に16x16の画像を追加したいと思います。これは可能ですか、それともこの画像を次のように手動で追加する必要があります： <span class="create"><img src="somewhere"/>Create something</span> すべての場所を手動で変更する必要はないので、cssを介して変更したいと思いました。 ありがとう！
83 css 
12
CSSメディアクエリ-ソフトキーボードがCSSの向きのルールを破る-代替ソリューション？
私は複数のタブレットデバイスを使用しています-両方ともAndroid およびiOS。現在、すべてのタブレットで次の解像度のバリエーションがあります。 1280 x 800 1280 x 768 1024 x 768（iPadはもちろん） -iPadにはこの問題はありません デバイスの向きに基づくスタイルを適用する最も簡単な方法は、次の構文を使用してメディアクエリの向きを使用することです。 @media all and (orientation:portrait) { /* My portrait based CSS here */ } @media all and (orientation:landscape) { /* My landscape based CSS here */ } これは、すべてのタブレットデバイスで完全に正常に機能します。しかし、問題は、デバイスがポートレートモードで、ユーザーが任意の入力フィールド（検索など）をタップすると、ソフトキーボードがポップアップすることです。これにより、Webページの表示領域が縮小され、ランドスケープベースのCSSでレンダリングされます。Androidタブレットデバイスでは、キーボードの高さに依存します。したがって、最終的にWebページは壊れているように見えます。したがって、CSS3のオリエンテーションメディアクエリを使用して、オリエンテーションに基づいてスタイルを適用することはできません（ターゲットのオリエンテーションに適したメディアクエリがない限り）。これは、これをエミュレートするフィドルhttp://jsfiddle.net/hossain/S5nYP/5/です-デバイステストには、完全なテストページを使用してください-http：//jsfiddle.net/S5nYP/embedded/result/ これは、デモページから取得した動作のスクリーンショットです。 したがって、この問題に取り組むための代替手段はありますか？ネイティブのCSSベースのソリューションが機能しない場合は、JavaScriptベースのソリューションを利用できます。 http://davidbcalhoun.com/2010/dealing-with-device-orientationで、それに基づいてクラスとターゲットを追加することを提案するスニペットを見つけました。例えば： <html class="landscape"> <body> <h1 class="landscape-only">Element Heading - …
7
ラベルとテキストエリアを揃えるにはどうすればよいですか？
私のコードは次のようになります： XXXXX XXXXX Description: XXXXX が欲しいです： XXXXX Description: XXXXX XXXXX 「説明」は複数行にまたがることがあります。 コード： <p class="DataForm"> <label>Blah blah blah Description:</label> <asp:TextBox ID="txtBlahblahblahDescription" runat="server" TextMode="MultiLine" Rows="8" Columns="50"></asp:TextBox><br/> </p> CSS： .DataForm { } .DataForm label { display: inline-block; font-size: small; margin-left: 5px; width: 5%; min-width: 60px; } .DataForm input { margin-right: 9px; display: inline-block; …
83 html  css  asp.net 
4
@ -moz-document url-prefix（）は何をしますか？
SimonCollisonの新しい 古いレスポンシブWebデザインのCSSには、次のような宣言がいくつかあります。 @-moz-document url-prefix() { .fl { float:left; margin:12px 4px 0 0; padding:0; font-size:65px; line-height:62%; color:#ba1820; } .fs { float:left; margin:12px 4px 10px 0; padding:0; font-size:65px; line-height:62%; color:#ba1820; } } これは実際に何をしますか？@ -moz-document url-prefix（）をグーグルで検索し、userchrome内で使用するための参照を見つけましたが、標準のサイトスタイルシートではありません。 通常、引数として渡されたURLがあり、宣言の内容をそのURLに制限します。ただし、Collyのサイトでは、渡される引数はありません。これは、宣言が現在のURLまたは任意のURLで機能していることを示します。それで、ここで私たちが見ているのは、特定のルールでMozillaのみのブラウザをターゲットにする方法ですか？
83 css  firefox  browser 
20
iPhone WebKitCSSアニメーションはちらつきを引き起こします
これはiphoneサイトです：http： //www.thevisionairegroup.com/projects/accessorizer/site/ 「今すぐプレイ」をクリックすると、ゲームが表示されます。銃がスクロールインします。財布とアクセサリーを上下にスクロールできます。手放すと、所定の位置にカチッとはまることがわかります。そのスナップが発生するのと同じように、ちらつきが発生します。私が使用しているWebkitアニメーションは次のとおりです。 '-webkit-transition': 'none' '-webkit-transition': 'all 0.2s ease-out' '-webkit-transform': 'translate(XXpx, XXpx)' アニメーション化するかどうかに基づいて、最初または2番目のトランジションを選択します。変換は、物事を移動する唯一の方法です。 ただし、最大の問題は、[アイテムを一致させる]をクリックしてから、[もう一度再生]をクリックすることです。銃がアニメートされると、アクセサリー/ハンドバッグの背景全体が白くなります。誰かがなぜこれが起こっているのかについての洞察を私に放射してくれませんか？
30
Google Maps API v3：InfoWindowのサイズが正しくない
Google Maps v3のホームアイコンをクリックすると、InfoWindowがInfoWindowのコンテンツに適切に自動サイズ設定されていないようです。 すべきでないときにスクロールバーを表示します。インフォウィンドウは適切に自動サイズ設定されている必要があります。 理由について何かアイデアはありますか？ リクエストごとに、インフォウィンドウのHTMLを挿入する関連するJavaScript： listing = '<div>Content goes here</div>'; 更新 このバグは問題のGoogleによって処理されました https://issuetracker.google.com/issues/35823659 この修正は、2015年2月にMaps JavaScriptAPIのバージョン3.19で実装されました。
7
HTML <FORM>をインライン要素として表示するにはどうすればよいですか？
これはおそらく基本的なhtml / cssの質問です... 段落テキスト内にインラインで表示したいシンプルなワンボタンフォームがあります。 &lt;p&gt;Read this sentence &lt;form style='display:inline;'&gt; &lt;input style='display:inline;' type='submit' value='or push this button'/&gt; &lt;/form&gt;. &lt;/p&gt; フォームにはstyle = display：inline属性がありますが、フォームの前に改行があります。それを取り除く方法はありますか？ フォーム要素を内部に表示できます&lt;p&gt;か？
83 html  css 
6
CSS：1つの要素にカーソルを合わせると、複数の要素に影響しますか？
ホバリングの問題の方法を探しています。 &lt;div class="section"&gt; &lt;div class="image"&gt;&lt;img src="myImage.jpg" /&gt;&lt;/div&gt; &lt;div class="layer"&gt;Lorem Ipsum&lt;/div&gt; &lt;/div&gt; 現在、画像とレイヤーの両方のクラスに境界線があります。どちらもノーマルとホバーで色が異なります。それを作る方法はありますか？レイヤークラスをホバーすると、レイヤーと画像クラスの両方のホバーボーダーカラーがアクティブになりますか？そしてその逆？
83 css  xhtml  hover 
8
CSSを使用してelement.styleをオーバーライドする
ページビルダーのHTMLページがあり、style属性を要素に直接挿入します。と見なされていることがわかりましたelement.style。 CSSを使用してオーバーライドしたい。要素を一致させることはできますが、オーバーライドしません。 CSSを使用してスタイルをオーバーライドするにはどうすればよいですか？
83 css 
3
CSS3 Flexbox：ディスプレイ：ボックスvs.フレックスボックスvs.フレックス
昨日、CSS3フレックスボックスステートメントを使用するウェブサイトを学校で入手しました。私はそれを前に使ったことがありません。それで私はそれを少しググって、flexboxステートメントの多くの異なるスタイルを見つけました。 何人かの書き込みdisplay: box;、いくつかの使用display: flexbox;、および他のdisplay: flex;。 では、違いは何ですか？どちらを使うべきですか？
83 css  flexbox 
4
一番上にある要素を中央に配置するためにtranslateY（-50％）が必要なのはなぜですか：50％？
このコードは、親要素内でdivを垂直方向に整列するように機能することがわかります。 .element { position: relative; top: 50%; transform: translateY(-50%); } 問題はなぜですか？私が最初に考えたのは、親要素にはビューポート以上のものが含まれているということでした。親ビューポートの高さ100vhと幅を等しくしました100%。それはうまくいきませんでした。私はまだ平行移動または負のマージンオフセットが必要でした。親要素がに設定されているのに、なぜ負のオフセットが必要なのmargin: 0;ですか？私が考慮していないのは計算されたマージンのためですか？
83 html  css 
7
ブートストラップで列を固定位置にする
Bootstrapを使用して、他の.col-lg-9が通常の位置（ページをスクロール可能）である間、それをposition：fixedに配置したいグリッド列class = "col-lg-3"があります。 &lt;div class="row"&gt; &lt;div class="col-lg-3"&gt; Fixed content &lt;/div&gt; &lt;div class="col-lg-9"&gt; Normal scrollable content &lt;/div&gt; &lt;/div&gt; LifeHacker.comの左側の列とまったく同じように 、左側の部分が修正されていることがわかりますが、ページをスクロールします。 ブートストラップv3.1.1を使用しています
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.