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

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

4
IE6で1つの（CSS）ディメンションを使用して画像をスケーリングするときに縦横比を維持する方法は？
ここに問題があります。画像があります： <img alt="alttext" src="filename.jpg"/> 高さや幅が指定されていないことに注意してください。 特定のページでサムネイルのみを表示したい。HTMLを変更できないため、次のCSSを使用します。 .blog_list div.postbody img { width:75px; } （ほとんどのブラウザーで）アスペクト比が維持された均一な幅のサムネイルのページを作成します。 ただしIE6では、画像はCSSで指定されたサイズでのみ拡大縮小されます。「自然な」高さを保持します。 これは問題を説明するページのペアの例です： サムネイルを表示するリスト フルサイズの画像を表示する単一のブログ投稿。 私はすべての提案にとても感謝していますが、（クライアントが選択したプラットフォームの制限により）HTMLの変更を伴わない何かを探していることを指摘したいと思います。CSSはJavaScriptよりも望ましいでしょう。 編集：画像のサイズとアスペクト比が異なることを言及する必要があります。
10
Bootstrapでトグルボタンを作成する方法
私は最初にHTML、CSS、JavaScriptでWebアプリを作成しましたが、Bootstrapでも再度作成するよう求められました。私はそれですべてうまく行きましたが、元々持っていたトグルボタンの代わりにラジオ（元はチェックボックス）ボタンに戻ったWebアプリのトグルボタンがありました。 ボタンのコードは次のとおりです。 <label> Notifications <span class='toggle'> <input type='radio' class='notifications' name='notifications' id='notifications' /> </span> </li> <label> Preview <span class='toggle'> <input type='radio' class='preview' name='preview' id='preview' /> </span> </li> HTMLページがリンクされているJavaScriptおよびCSSファイルは次のとおりです。 <script src = 'jqtouch.js'></script> <script src="jquery.js"></script> <script src="js/bootstrap.js"></script> <link href="css/bootstrap.css" rel="stylesheet"> <link href="css/bootstrap-responsive.css" rel="stylesheet"> トグルボタンを元に戻すためにコードを変更する方法はありますか？
4
小さなデバイスのTwitterブートストラップ非表示要素
私はこのコードを持っています： <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 4</li> <li>Text 5</li> <li>Text 6</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 7</li> <li>Text 8</li> <li>Text 9</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 10</li> <li>Text 11</li> <li>Text 12</li> </ul> …
4
CSS：固定された高さのコンテナー内のdivのスクロールバーを取得する方法
次のマークアップがあります。 <div class="FixedHeightContainer"> <h2>Title</h2> <div class="Content"> ..blah blah blah... </div> </div> CSSは次のようになります。 .FixedHeightContainer { float:right; height: 250px; width:250px; } .Content { ??? } そのコンテンツのため、の高さdiv.Contentは通常、によって提供されるスペースよりも大きくなりdiv.FixedHeightContainerます。現時点では、div.Content陽気に底から伸びていますdiv.FixedHeightContainer-私が望むものではありません。 div.Content高さが高すぎて収まらない場合にスクロールバーを取得するように指定するにはどうすればよいですか（できれば垂直のみですが、うるさくありません）。 overflow:autoそしてoverflow:scroll、いくつかの奇妙な理由で、何もしないされています。
3
ページまたはコンテンツの下部のフッター、どちらか低い方
私は次の構造を持っています： <body> <div id="main-wrapper"> <header> </header> <nav> </nav> <article> </article> <footer> </footer> </div> </body> <article>JavaScriptを使用してコンテンツを動的にロードします。このため、<article>ブロックの高さが変わる可能性があります。 欲しい <footer>のブロックは、コンテンツがたくさんあるページの下部にある、またはブラウザウィンドウの下部にコンテンツが存在する場合にのみ数行します。 現時点ではどちらか一方しかできませんが、両方はできません。 だから誰も私がこれを行う方法を知っていますか- <footer>どちらが低いかに応じて、ページ/コンテンツの下部または画面の下部に固執するようにします。
92 css  html  footer 
3
CSSでフォントファミリー名を引用符で囲む必要がありますか？
次のように、CSSのfont-familyプロパティに複数の単語を含むフォント名を引用符で囲むことが "ベストプラクティス"と見なされていたと聞いたことがあります。 font-family: "Arial Narrow", Arial, Helvetica, sans-serif; とりあえず、引用を削除してみましたが"Arial Narrow"、SafariとFirefoxではレンダリングに問題はありません。 それで、この経験則には何らかの論理がありますか、それとも単なる神話ですか？現在のバージョンに適用されなくなった古いブラウザーの問題でしたか？私はこれを長い間続けてきたので、それが実際に必要であるかどうか考えるのをやめませんでした。
1
印刷スタイル：画像が改ページにまたがらないようにする方法
印刷スタイルシートを作成するときに、画像が複数のページにまたがるのではなく、常に1つのページだけにあるようにする方法はありますか。画像はページよりもはるかに小さくなりますが、ドキュメントフローに基づいて、最終的にページの下部に配置され、分割されます。私が見ている行動の例は以下の通りです： Page 1 | | | (text text text) | | (text text text) | | ________________ | | | Top of image | | |____________________| ------page break------ ____________________ Page 2 | | Rest of image | | | |________________| | | … | 私が欲しいもの Page 1 | | | …
4
CSSアニメーションプロパティはアニメート後も残る
CSSアニメーションプロパティを完了後も保持しようとしていますが、これは可能ですか？ これは私が達成しようとしていることです... 要素は、ユーザーがページに到達すると非表示になり、3秒後（または何でも）、フェードインし、アニメーションが完了するとそこにとどまります。 ここにフィドルの試みがあります... http://jsfiddle.net/GZx6F/ 保存用のコードは次のとおりです... <h2>Test</h2> <style> @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 0.9; } } h2 { animation: fadeIn 1s ease-in-out 3s; } </style> 私はjQueryでこれを行う方法を知っています...それはこのようになるでしょう... <h2>test</h2> <script> $(document).ready(function(){ $('h2').hide().delay(3000).fadeIn(3000) }); </script>
3
デフォルトでテキストエリアのスクロールバーを下に設定するにはどうすればよいですか？
ユーザー入力が送信されるときに動的に再読み込みされるテキストエリアがあります。数秒ごとに更新されます。このtextarea内のテキストの量がtextareaのサイズを超えると、スクロールバーが表示されます。ただし、スクロールバーは実際には使用できません。下にスクロールを開始すると、数秒後にテキスト領域が更新され、スクロールバーが一番上に戻ります。スクロールバーをデフォルトで最下部のテキストを表示するように設定します。誰かがそうする方法についてのアイデアを持っていますか？
4
<h1>タグの後の改行を削除しますか？
&lt;h1&gt;タグの後に改行を削除すると問題が発生します。印刷するたびに改行が追加されるため、次のように&lt;h1&gt;Hello World!&lt;/h1&gt; &lt;h2&gt;Hello Again World!&lt;/h2&gt;印刷されます。 Hello World! Hello Again World! CSSでどのタグを変更する必要があるかわかりませんが、パディングやマージンと関係があると思います できれば、垂直方向のパディングも維持したいと考えています。
3
要素をクリックできないようにする（その背後にあるものをクリックする）
ユーザーがタッチスクリーン（モバイル）をスクロールしているときにページをオーバーレイする固定画像があります。 その画像を「クリック不可」または「非アクティブ」などにしたいので、ユーザーがその画像をタッチしてドラッグした場合でも、画像がないかのようにその後ろのページがスクロールして、インタラクションが「ブロック」されます。 これは可能ですか？必要に応じて、私が言っていることを例示するスクリーンショットを提供することを試みることができます。 ありがとう！
92 html  css  mobile  scroll  touch 
8
CSSアニメーションで省略記号をアニメーション化する方法はありますか？
省略記号をアニメーション化しようとしていますが、CSSアニメーションで可能かどうか疑問に思っていました... だからそれは Loading... Loading.. Loading. Loading... Loading.. そして基本的にはそのように続けます。何か案は？ 編集：このように：http：//playground.magicrising.de/demo/ellipsis.html
6
不透明度のある「同等の」色を見つける
背景色に「リボン」が別の単色で表示されているとします。ここで、リボンを部分的に透明にして、細部をブレンドできるようにしますが、それでもリボンを背景上で「同じ色」に保ちます。 リボンの色の100％未満の特定の不透明度/アルファについて、背景の不透明度が100％の色と同じである必要があるRGB値を（簡単に）決定する方法はありますか？ これが写真です。背景はrgb(72, 28, 97)、リボンrgb(45, 34, 70)です。rgba(r, g, b, a)この無地と同じように見えるようにリボンにaが欲しいです。
92 css  colors 
3
CSSセレクター（IDにはテキストの一部が含まれています）
質問があります。私はこのような要素を持っています： &lt;a&gt; id = someGenerated Some：Same：0：nameの要素 &lt;a&gt; id = someGenerated Some：Same：0：surnameの要素 &lt;a&gt; id = someGenerated Some：Same：1：nameの要素 &lt;a&gt; id = someGenerated Some：Same：1：surnameの要素 名前を取得するにはCSSセレクターが必要です。問題は、どうやって入手したらいいのかわからないことです。私は試しましたa[id*='Some:Same']-それはすべての&lt;a&gt;要素を返しました。idがnameで終わる要素を取得した後。しかし、私はこの考えが好きではありません。他のセレクターでもできると思います。
6
iOS入力シャドウを削除します
iOS（Safari 5）では、入力要素（上部の内側の影）について次のことを行う必要があります。 トップシャドウを削除したいのですが、バグ-webkit-appearanceが保存されません。 現在のスタイルは次のとおりです。 input { border-radius: 15px; border: 1px dashed #BBB; padding: 10px; line-height: 20px; text-align: center; background: transparent; outline: none; -webkit-appearance: none; -moz-appearance: none; }
92 ios  css  input 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.