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

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


5
ハイフンの後の改行なし
ハイフンの後の改行を、-すべてのブラウザーと互換性のあるケースバイケースで防止したいと考えています。 例: 私はこのテキストを持っています: 3-3/8"これはHTMLでこれです: 3-3/8” 問題は、行の終わり近くで、ハイフンが原因で、完全な単語のように扱うのではなく、改行して次の行に折り返されることです... 3- 3/8" 「ゼロ幅ノーブレイク文字」を挿入しようとしましたが、運がありません... 3-3/8” 私はこれをSafariで確認しており、すべてのブラウザで同じになると考えています。 以下は、私のdoctype文字エンコーディングです... <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> ハイフンの後の改行を防ぐ方法はありますか?ページ全体に当てはまる解決策は必要ありません...機能するものを除いて、「ゼロ幅の改行なし文字」のように、必要に応じて挿入できるものだけです。 こちらがデモです。ハイフンで改行するまで枠を狭くしてください。 http://jsfiddle.net/RagKH/


21
ブートストラップ4は、navbarアイテムを右に揃えます
ナビゲーションバーのアイテムを右に揃えるにはどうすればよいですか? ログインして右に登録したいのですが。しかし、私が試みたすべてが機能していないようです。 これは私がこれまでに試したことです: <div>周辺の<ul>属性:style="float: right" <div>周辺の<ul>属性:style="text-align: right" <li>タグでこれら2つのことを試しました !important最後に追加してそれらすべてをもう一度試しました に変更さnav-itemれnav-rightました<li> にpull-sm-rightクラスを追加しました<li> にalign-content-endクラスを追加しました<li> これは私のコードです: <div id="app" class="container"> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand" href="#">Navbar</a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> …


14
JavaScriptで<style>タグを作成する方法は?
&lt;style&gt;JavaScriptを使用してHTMLページにタグを挿入する方法を探しています。 これまでに見つけた最良の方法: var divNode = document.createElement("div"); divNode.innerHTML = "&lt;br&gt;&lt;style&gt;h1 { background: red; }&lt;/style&gt;"; document.body.appendChild(divNode); これはFirefox、Opera、Internet Explorerで機能しますが、Google Chromeでは機能しません。また&lt;br&gt;、IEの前面が少し醜いです。 誰もが&lt;style&gt;タグを作成する方法を知っていますか いいです Chromeで動作しますか? または多分 これは私が避けるべき非標準的なものです 動作している3つのブラウザーは素晴らしいですが、とにかく誰がChromeを使用していますか?
336 javascript  html  css 

4
CSS3 calcを使用したそれほど積極的でないコンパイル
レス私は(使用していることをコンパイラOrangeBitsとドットなし1.3.0.5は)積極的に翻訳しています body { width: calc(100% - 250px - 1.5em); } に body { width: calc(-151.5%); } これは明らかに望ましくありません。Lessコンパイラーに信号を送って、コンパイル中に属性を本質的に無視する方法があるかどうか疑問に思っています。Lessのドキュメントと両方のコンパイラのドキュメントを検索しましたが、何も見つかりませんでした。 LessまたはLessコンパイラはこれをサポートしていますか? そうでない場合、CSSエクステンダーはありますか?

17
「display:none」は画像の読み込みを妨げますか?
すべてのレスポンシブなWebサイト開発チュートリアルでは、display:noneCSSプロパティを使用してコンテンツをモバイルブラウザーにロードしないようにして、Webサイトのロードを高速化することを推奨しています。本当ですか?ないdisplay:none画像を読み込まないか、それはまだモバイルブラウザ上でコンテンツをロードしていますか?モバイルブラウザーに不要なコンテンツを読み込まないようにする方法はありますか?

12
jquery変更クラス名
tdタグのIDを指定して、tdタグのクラスを変更したい: &lt;td id="td_id" class="change_me"&gt; ... 他のdomオブジェクトのクリックイベント内でこれを実行できるようにしたいと思います。tdのIDを取得してそのクラスを変更するにはどうすればよいですか?
336 jquery  css 


12
CSSでonclickエフェクトを使用できますか?
クリックで変更したい画像要素があります。 &lt;img id="btnLeft"&gt; これは機能します: #btnLeft:hover { width:70px; height:74px; } しかし、私が必要なのは: #btnLeft:onclick { width:70px; height:74px; } しかし、それは明らかに機能しません。onclickCSSで(JavaScriptを使用せずに)動作することは可能ですか?
334 html  css  onclick 

19
クラス属性を条件付きで適用するReact Js
次のような親コンポーネントから渡される内容に応じて、このボタングループを条件付きで表示および非表示にしたいと思います。 &lt;TopicNav showBulkActions={this.__hasMultipleSelected} /&gt; .... __hasMultipleSelected: function() { return false; //return true or false depending on data } .... var TopicNav = React.createClass({ render: function() { return ( &lt;div className="row"&gt; &lt;div className="col-lg-6"&gt; &lt;div className="btn-group pull-right {this.props.showBulkActions ? 'show' : 'hidden'}"&gt; &lt;button type="button" className="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false"&gt; Bulk Actions &lt;span …

4
背景画像をdivに合わせる
次のdivに背景画像がありますが、画像が途切れます。 &lt;div style='text-align:center;background-image: url(/media/img_1_bg.jpg);background-repeat:no-repeat;width:450px;height:900px;' id="mainpage" align="center"&gt; 背景画像を切り取らずに表示する方法はありますか?

10
Bootstrapでコンテナーを垂直方向に中央揃えするにはどうすればよいですか?
containerdivをの内部で垂直方向に中央揃えしjumbotron、ページの中央に設定する方法を探しています。 .jumbotronスクリーンの完全な高さと幅に適合しなければなりません。.containerdivが幅を持っている1025pxし、ページ(縦中央)の真ん中にする必要があります。 このページでは、ジャンボトロンの垂直方向の中央にコンテナーを配置するとともに、ジャンボトロンを画面の高さと幅に適合させます。どうすればそれを達成できますか? .jumbotron { height:100%; width:100%; } .container { width:1025px; } .jumbotron .container { max-width: 100%; } &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt; &lt;div class="jumbotron"&gt; &lt;div class="container text-center"&gt; &lt;h1&gt;The easiest and powerful way&lt;/h1&gt; &lt;div class="row"&gt; &lt;div class="col-md-7"&gt; &lt;div class="top-bg"&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class="col-md-5 iPhone-features" style="margin-left:-25px;"&gt; &lt;ul class="top-features"&gt; &lt;li&gt; &lt;span&gt;&lt;i class="fa fa-random simple_bg top-features-bg"&gt;&lt;/i&gt;&lt;/span&gt; …

19
CSSでサイズ変更およびトリミングされた画像を表示する
サイズ比が異なっていても、特定の幅と高さのURLから画像を表示したい。したがって、サイズを変更し(比率を維持)、画像を希望のサイズにカットします。 私はhtml imgプロパティでサイズを変更でき、でカットできbackground-imageます。 どうすれば両方できますか? 例: この画像: サイズが800x600ピクセルで、200x100ピクセルのイメージのように表示したい img私は画像のサイズを変更することができます200x150px: &lt;img style="width: 200px; height: 150px;" src="http://i.stack.imgur.com/wPh0S.jpg"&gt; それは私にこれを与えます: &lt;img style="width: 200px; height: 150px;" src="https://i.stack.imgur.com/wPh0S.jpg"&gt; コードスニペットを実行する結果を非表示スニペットを展開 とbackground-image私は画像の200x100ピクセルをカットすることができます。 &lt;div style="background-image: url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"&gt;&amp;nbsp;&lt;/div&gt; くれます: &lt;div style="background-image:url('https://i.stack.imgur.com/wPh0S.jpg'); width:200px; height:100px; background-position:center;"&gt;&amp;nbsp;&lt;/div&gt; コードスニペットを実行する結果を非表示スニペットを展開 どうすれば両方できますか? 画像のサイズを変更して、必要なサイズにカットしますか?

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