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

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

10
幅に合わせるCSS背景画像、高さは比例して自動スケーリングする必要があります
私が持っています body { background: url(images/background.svg); } 望ましい効果は、この背景画像の幅がページの幅と同じになり、高さが比率を維持するように変更されることです。たとえば、元の画像が偶然にも100 * 200(任意の単位)であり、本文の幅が600pxである場合、背景画像は高さが1200pxになるはずです。ウィンドウのサイズが変更されると、高さが自動的に変更されます。これは可能ですか? 現時点では、Firefoxは高さを調整して幅を調整しているようです。これはおそらく、高さが最長の寸法であり、トリミングを回避しようとしているためでしょうか?私が欲しい縦にトリミングし、その後、スクロール:なし水平方向の繰り返しを。 また、Chromeは画像を中央に配置してbackground-repeat:repeatいます。明示的に指定された場合でも、繰り返しは行われません。これがデフォルトです。
365 html  css 



3
複数のクラスに基づいて要素を選択します
2つのクラスがあるタグに適用するスタイルルールがあります。JavaScriptなしでこれを実行する方法はありますか?言い換えると: <li class='left ui-class-selector'> とクラスの両方が適用されている場合にのみ、スタイルルールを適用します。li.left.ui-class-selector
360 css  css-selectors 

22
Font Awesome Iconsのアイコンの色、サイズ、影のスタイルを設定する方法
Font Awesomeのアイコンからアイコンの色、サイズ、影をどのようにスタイルできますか? たとえば、Font Awesomeのサイトでは、いくつかのアイコンは白で表示され、一部は赤で表示さCSSれますが、そのようにスタイルを設定する方法については表示されません...

10
ダウンロードせずにブラウザでプレビューを表示するために、GithubのHTMLページを通常のレンダリングされたHTMLページとして表示するにはどうすればよいですか?
上http://github.com開発者は、プロジェクトのHTML、CSS、JavaScriptと画像ファイルを保持します。ブラウザでHTML出力を確認するにはどうすればよいですか? この例:https : //github.com/necolas/css3-social-signin-buttons/blob/master/index.html これを開くと、作成者のコードのレンダリングされたHTMLが表示されません。ページをソースコードとして表示します。 レンダリングされたHTMLとして直接表示することは可能ですか?それ以外の場合は、結果を確認するためだけに常にZIP全体をダウンロードする必要があります。
355 html  css  git  github  github-pages 

12
フローティングエレメントを中央に配置するにはどうすればよいですか?
私はページネーションを実装していますが、それを中央に配置する必要があります。問題は、リンクをブロックとして表示する必要があるため、フロートさせる必要があることです。しかし、その後はtext-align: center;機能しません。leftのラッパーdivパディングを指定することでそれを実現できますが、すべてのページに異なる数のページが含まれるため、機能しません。これが私のコードです: .pagination { text-align: center; } .pagination a { display: block; width: 30px; height: 30px; float: left; margin-left: 3px; background: url(/images/structure/pagination-button.png); } .pagination a.last { width: 90px; background: url(/images/structure/pagination-button-last.png); } .pagination a.first { width: 60px; background: url(/images/structure/pagination-button-first.png); } <div class='pagination'> <a class='first' href='#'>First</a> <a href='#'>1</a> <a href='#'>2</a> <a href='#'>3</a> …
354 css-float  center  css 

12
div要素を右揃えするにはどうすればよいですか?
私のhtmlドキュメントの本体は、ボタン、フォーム、キャンバスの3つの要素で構成されています。ボタンとフォームを右揃えにし、キャンバスを左揃えにします。問題は、最初の2つの要素を位置合わせしようとすると、互いにフォローせず、代わりに水平に隣接していますか?、これまでのコードはここにあります。右側のボタンの直後にフォームをフォローします間にスペースがありません。 #cTask { background-color: lightgreen; } #button { position: relative; float: right; } #addEventForm { position: relative; float: right; border: 2px solid #003B62; font-family: verdana; background-color: #B5CFE0; padding-left: 10px; } <!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <script type="text/javascript" src="timeline.js"></script> <link rel="stylesheet" href="master.css" type="text/css" media="screen" /> </head> <body bgcolor="000" …
351 css  html 


30
モーダルを開いたときにBODYがスクロールしないようにする
Webサイトのモーダル(http://twitter.github.com/bootstrapから)を開いているときにマウスホイールを使用しているときに、体のスクロールを停止したいのですが。 モーダルが開かれたときに以下のJavaScriptを呼び出そうとしましたが、成功しませんでした $(window).scroll(function() { return false; }); そして $(window).live('scroll', function() { return false; }); 私たちのウェブサイトはIE6のサポートを落としましたが、IE7 +は互換性がある必要があります。
346 javascript  jquery  css  scroll 

27
ReactJSコンポーネントに複数のクラスを追加する方法
私はReactJSとJSXを初めて使用し、以下のコードに少し問題があります。 classNameそれぞれの属性に複数のクラスを追加しようとしていますli: <li key={index} className={activeClass, data.class, "main-class"}></li> 私のReactコンポーネントは: var AccountMainMenu = React.createClass({ getInitialState: function() { return { focused: 0 }; }, clicked: function(index) { this.setState({ focused: index }); }, render: function() { var self = this; var accountMenuData = [ { name: "My Account", icon: "icon-account" }, { name: "Messages", …

16
svg要素の色を変更する方法は?
このテクニックhttp://css-tricks.com/svg-fallbacks/を使用してsvgの色を変更したいのですが、これまではできませんでした。私はこれをCSSに入れましたが、何があっても私のイメージは常に黒です。私のコード: .change-my-color { fill: green; } <svg> <image class="change-my-color" xlink:href="https://svgur.com/i/AFM.svg" width="96" height="96" src="ppngfallback.png" /> </svg> コードスニペットを実行する結果を非表示スニペットを展開
346 css  svg 

9
テキスト入力を編集不可にするにはどうすればよいですか?
だから私はテキスト入力を持っています <input type="text" value="3" class="field left"> ここに私のCSSがあります background:url("images/number-bg.png") no-repeat scroll 0 0 transparent; border:0 none; color:#FFFFFF; height:17px; margin:0 13px 0 0; text-align:center; width:17px; これに設定やトリックはありますか?代わりにレーベルを作ることを考えていましたが、スタイリングはどうですか?それらをどのように変換し、より良い方法がありますか、それが唯一の方法ですか?
344 html  css  html-input 

26
Bootstrap 3の列からパディングを削除する
問題: Bootstrap 3でcol-md- *の左右のパディング/マージンを削除します。 HTMLコード: <div class="col-md-12"> <h2>OntoExplorer<span style="color:#b92429">.</span></h2> <div class="col-md-4"> <div class="widget"> <div class="widget-header"> <h3>Dimensions</h3> </div> <div class="widget-content" id=""> <div id='jqxWidget'> <div style="clear:both;margin-bottom:20px;" id="listBoxA"></div> <div style="clear:both;" id="listBoxB"></div> </div> </div> </div> </div> <div class="col-md-8"> <div class="widget"> <div class="widget-header"> <h3>Results</h3> </div> <div class="widget-content"> <div id="map_canvas" style="height: 362px;"></div> </div> </div> </div> </div> …

29
CSSのレスポンシブフォントサイズ
Zurb Foundation 3グリッドを使用してサイトを作成しました。各ページには大きいh1: body { font-size: 100% } /* Headers */ h1 { font-size: 6.2em; font-weight: 500; } <div class="row"> <div class="twelve columns text-center"> <h1> LARGE HEADER TAGLINE </h1> </div> <!-- End Tagline --> </div> <!-- End Row --> コードスニペットを実行する結果を非表示スニペットを展開 ブラウザのサイズをモバイルサイズに変更すると、大きなフォントが調整されず、大きなテキストに対応するためにブラウザに水平スクロールが含まれます。 私は上のことに気付きましたZurb財団3タイポグラフィの例のページそれを圧縮して展開されているように、ヘッダがブラウザに適応します。 私は本当に明白なものを見逃していますか?どうすればこれを達成できますか?

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.