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

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

20
CSS3 100vhがモバイルブラウザーで一定ではない
私は非常に奇妙な問題を抱えています...すべてのブラウザーとモバイルバージョンでこの動作が発生しました： ページをロードすると、すべてのブラウザにトップメニューが表示され（たとえば、アドレスバーが表示されます）、ページのスクロールを開始すると上にスライドします。 100vh はビューポートの表示部分でのみ計算される場合があるため、ブラウザバーを上にスライドすると、100vhが増加します（ピクセル単位）。 寸法が変更されたため、すべてのレイアウトが再ペイントおよび再調整されます ユーザーエクスペリエンスに悪影響を与える この問題を回避するにはどうすればよいですか？ビューポートの高さを初めて聞いたときは興奮し、JavaScriptを使用する代わりに固定高さのブロックにそれを使用できると思っていましたが、今、それを行う唯一の方法は、実際にはサイズ変更イベントを伴うJavaScriptだと思います... あなたは問題を見ることができます：サンプルサイト 誰かがCSSソリューションで私を助ける/提案できますか？ 簡単なテストコード： コードスニペットを表示 /* maybe i can track the issue whe it occours... */ $(function(){ var resized = -1; $(window).resize(function(){ $('#currenth').val( $('.vhbox').eq(1).height() ); if (++resized) $('#currenth').css('background:#00c'); }) .resize(); }) *{ margin:0; padding:0; } /* this is the box which should keep constant …
285 html  css  viewport-units 
7
CSSのインラインSVG
CSSでインラインSVG定義を使用することは可能ですか？ 私は次のようなものを意味します： .my-class { background-image: <svg>...</svg>; }
283 css  svg 
6
単一のフレックスボックスアイテムを正当化する方法（justify-contentをオーバーライドする）
あなたは無効にすることができalign-itemsてalign-self、フレックス項目について。justify-contentフレックスアイテムをオーバーライドする方法を探しています。 を使用したflexboxコンテナがありjustify-content:flex-end、最初のアイテムをにしたい場合justify-content: flex-start、どうすればそれができますか？ これはこの投稿で最もよく答えられました：https：//stackoverflow.com/a/33856609/269396
283 css  flexbox 
30
divをコンテナーの下部にフロートさせるにはどうすればよいですか？
float：right（またはleft）を何度も使用して、コンテナーの上部にあるイメージとインセットボックスをフローティングしました。最近、フロートで得られる通常のテキストの折り返し（上と左にのみテキストが折り返される）を使用して、別のdivの右下隅にあるdivをフロートする必要性に直面しました。 フロートにボトム値がない場合でも、これは比較的簡単なはずだと思いましたが、いくつかのテクニックを使用してそれを行うことができず、Webを検索しても絶対配置を使用する以外は何もできませんでしたが、これはありません正しい単語の折り返し動作を指定します。 これは非常に一般的なデザインだと思っていましたが、明らかにそうではありません。誰も提案がない場合は、テキストを別々のボックスに分割し、divを手動で配置する必要がありますが、それはかなり不安定であり、必要なすべてのページで行う必要はありません。 編集：ここに来る人のための単なるメモ。上記の重複としてリンクされている質問は、実際には重複ではありません。インセット要素をテキストで折り返す必要があるため、完全に異なります。実際、ここで最も投票された回答への回答は、リンクされた質問の回答がこの質問への回答として間違っている理由を明らかにしています。とにかく、この問題に対する一般的な解決策はまだないようですが、ここおよびリンクされた質問に投稿された解決策のいくつかは、特定のケースで機能する場合があります。
282 html  css 
6
float：left; 対表示：インライン; vs表示：インラインブロック; vs表示：テーブルセル;
私の質問 これらの方法のいずれかが、プロのWebデザイナーに好まれていますか？ これらの方法のいずれかは、ウェブサイトを描画するときにウェブブラウザによって優先されますか？ これはすべて個人的な好みですか？ 他に見逃しているテクニックはありますか？ 注：上記の質問は、複数列レイアウトの設計に関するものです float：left; http://jsfiddle.net/CDe6a/ これは、列のレイアウトを作成するときにいつも使用する方法で、問題なく動作するようです。ただし、親はそれ自体で崩壊するので、clear:both;後で覚えておく必要があります。私が見つけたもう1つの欠点は、テキストを垂直に配置できないことです。 表示：インライン; これは、親の折りたたみの問題を修正するようですが、空白が追加されます。 http://jsfiddle.net/CDe6a/1/ HTMLから空白を削除することがこの問題を解決する最も簡単な方法のようですが、HTMLに本当にうるさい場合は望ましくありません。 http://jsfiddle.net/CDe6a/2/ 表示：インラインブロック; のように動作するようdisplay:inline;です。 http://jsfiddle.net/CDe6a/3/ 表示：テーブルセル; http://jsfiddle.net/CDe6a/4/ 完璧に動作します。 私の考え： レイアウトを壊す特定の例外のように、たくさんのものを見逃していると私は確信していますが、display:table-cell;最もうまく機能してfloat:left;いるようですclear:both;。私はこれについて多くの記事やブログをウェブで読んだことがあるが、どれも私が私のウェブサイトをレイアウトするときに何を使うべきかについて明確な答えを与えてくれない。
281 html  css  css-float 
9
偶数要素と奇数要素をどのようにスタイルできますか？
CSS疑似クラスを使用して、リストアイテムの偶数および奇数のインスタンスを選択することは可能ですか？ 以下は交互の色のリストを生成することを期待しますが、代わりに青のアイテムのリストを取得します。 <html> <head> <style> li { color: blue } li:odd { color:green } li:even { color:red } </style> </head> <body> <ul> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> <li>ho</li> </ul> </body> </html>
281 html  css  css-selectors 
8
HTMLを水平に非表示にし、垂直にスクロールしない
幅は固定ですが高さは可変のHTMLテキストエリアがあります。overflow:scroll垂直スクロールバーを設定して表示できるようにしたいが、水平スクロールバーは表示したくない。overflow:auto他の事情により使用できません。 CSS2を使用して、垂直スクロールバーのみを表示し、水平スクロールバーは表示しない方法はないことを知っています。水平スクロールバーを非表示にするためにJavaScriptでできることはありますか？
279 html  css  scrollbar 
4
複数のクラスにスタイルを一度に適用するにはどうすればよいですか？
CSSで名前の異なる2つのクラスに同じプロパティを設定します。コードを繰り返したくありません。 .abc { margin-left:20px; } .xyz { margin-left:20px; } <a class="abc">Lorem</a> <a class="xyz">Ipsum</a> コードスニペットを実行する結果を非表示スニペットを展開 両方のクラスが同じことをしているので、それを1つにマージできるはずです。どうやってやるの？
277 css  css-selectors 
14
WebKitとは何ですか？CSSとどのように関連していますか？
最近では、「webkit」というタグの付いた質問が表示されています。このような質問は通常、CSS、jQuery、レイアウト、クロスブラウザーの互換性の問題などに関連するWebベースの質問になる傾向があります。 それでは、この「ウェブキット」とは何であり、CSSとどのように関連していますか？また-webkit-...、さまざまなWebサイトのソースコードに多くのプロパティがあることに気づきました。これら2つは関連していますか？ 更新 これまでの回答から... WebKitは、Safari / Chrome用のHTML / CSS Webブラウザーレンダリングエンジンです。IE / Opera / Firefox用のそのようなエンジンはありますか、また一方を使用することの違い、長所と短所は何ですか？たとえば、FirefoxでWebKit機能を使用できますか？ 究極の質問... WebKitはIEでサポートされていますか？ アップデート2 主要なブラウザはすべて、異なるレンダリングエンジンを使用しています。これが、ブラウザ間の互換性の問題が非常に多い大きな理由だと思います。 それでは、すべてのブラウザが使用する標準のレンダリングエンジンへのプロジェクトや動きはありますか？HTML5は、ブラウザー間の互換性の問題に終止符を打つでしょうか？
9
ボタンを全幅にしますか？
列の幅いっぱいにボタンを配置したいのですが、問題があります... <div class="span9 btn-block"> <button class="btn btn-large btn-block btn-primary" type="button">Block level button</button> </div> ボタンを列と同じ幅にするにはどうすればよいですか？
17
グラデーション枠
私はボーダーにグラデーションを適用しようとしています、これを行うのと同じくらい簡単だと思いました： border-color: -moz-linear-gradient(top, #555555, #111111); しかし、これは機能しません。 誰かが境界線グラデーションを行う正しい方法を知っていますか？
274 css  gradient 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.