プログラミング css

5

ブートストラップの「col-md-4」、「col-xs-1」、「col-lg-2」の数字の意味

新しいBootstrapのグリッドシステム、特に次のクラスと混同しています。 col-lg-* col-md-* col-xs-* （*はある数を表します）。誰かが以下を説明できますか？その数はグリッドをどのように揃えていますか？これらの数字の使い方は？彼らが実際に何を表していますか？

439 css twitter-bootstrap twitter-bootstrap-3 grid

19

CSSが偽の要素で動作するのはなぜですか？

私のクラスで、私は遊んでいて、CSSが構成要素で動作することを発見しました。例： imsocool { color:blue; } <imsocool>HELLO</imsocool> コードスニペットを実行する結果を非表示スニペットを展開私の教授がこれを使用しているのを初めて見たとき、彼は構成要素が機能していることを少し驚き、構成要素をすべてID付きの段落に変更することを勧めました。なぜ私の教授は私が作り上げた要素を使用することを望んでいないのですか？彼らは効果的に働きます。また、なぜ彼は構成要素が存在し、CSSで動作することを知らなかったのですか。彼らは珍しいですか？

438 html css

16

位置を中央揃え：固定要素

position: fixed;画面の中央に動的な幅と高さのポップアップボックスを作成します。私margin: 5% auto;はこれに使用しました。なければposition: fixed;、それはではなく、垂直、水平に罰金を中央に配置します。を追加した後position: fixed;も、水平方向の中央に配置されません。これが完全なセットです： .jqbox_innerhtml { position: fixed; width: 500px; height: 200px; margin: 5% auto; padding: 10px; border: 5px solid #ccc; background-color: #fff; } <div class="jqbox_innerhtml"> This should be inside a horizontally and vertically centered box. </div> コードスニペットを実行するHide resultsスニペットを展開 CSSでこのボックスを画面の中央に配置するにはどうすればよいですか？

438 css css-position centering

17

CSS（jQuery SVG画像の置き換え）を使用してSVG画像の色を変更する方法

StackаэтотвопросестьответынаStack Overflowнарусском これは、私が思いついた便利なコードの自己Q＆Aです。現在、SVG画像を埋め込み、CSSを介してSVG要素にアクセスする簡単な方法はありません。JS SVGフレームワークを使用するにはさまざまな方法がありますが、ロールオーバー状態のシンプルなアイコンを作成するだけの場合は、非常に複雑です。これが私が思いついたものです。これは、WebサイトでSVGファイルを使用する最も簡単な方法だと思います。それは、初期のテキストからイメージへの置換方法からその概念を取り入れていますが、私が知る限り、SVGに対して行われたことはありません。これは質問です： JS-SVGフレームワークを使用せずにSVGを埋め込み、その色をCSSで変更するにはどうすればよいですか？

437 jquery css svg

10

左、中央、または右揃えのアイテムを備えたブートストラップNavBar

ではブートストラップ、右に左にロゴA、中央のメニュー項目、およびロゴBを持つナビゲーションバーを作成する最もプラットフォームフレンドリーな方法は何ですか？これが私がこれまでに試したものであり、ロゴAが左側に、メニュー項目が左側のロゴの隣に、ロゴBが右側にあるように配置されます。 <div class="navbar navbar-fixed-top navbar-custom "> <div class="container" > <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#"><span class="navbar-logo">Logo_A</span></a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Home</a></li> <li><a href="#about">Menu Item 1</a></li> <li><a href="#contact">Menu Item 2</a></li> <li><a href="#about">Menu Item 3</a></li> …

437 html css twitter-bootstrap bootstrap-4 navbar

5

CSSは必要なければスクロールバーを隠す

私はどのように隠すことができるかを理解しようとしています overflow-y:scroll;必要でない場合にどうすればいます。つまり、私はWebサイトを構築していて、投稿が表示されるメイン領域があり、コンテンツが現在の幅を超えない場合はスクロールバーを非表示にしたいと考えています。また、2つ目の質問です。投稿が現在の幅を超えたときに幅が自動的に増加し、コンテンツがボックスから出ないようにしたいと思います。誰にもこれを行う方法の手掛かりがありますか？投稿エリア： .content { height: 600px; border-left: 1px solid; border-right: 1px solid; border-bottom: 1px solid; font-size: 15px; text-align: justify; line-height: 19px; overflow-y:scroll; } メインWebサイトコンテナー： .container { margin: 0 auto; width: 757px; margin-top: 30px; text-align: center; }

435 html css

20

ボタンをクリックしてjQueryを使用してクリップボードにコピー

div内のテキストをクリップボードにコピーするにはどうすればよいですか？divがあり、テキストをクリップボードに追加するリンクを追加する必要があります。これに対する解決策はありますか？ <p class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p> <a class="copy-text">copy Text</a> テキストのコピーをクリックしてからCtrl+ を押すVと、貼り付ける必要があります。

433 jquery html css

7

background-color：noneは有効なCSSですか？

次のCSSが有効かどうか誰かに教えてもらえますか？ .class { background-color:none; }

431 css background-color

12

ボディに設定されたCSS3グラデーションの背景は伸縮せず、代わりに繰り返されますか？

<body>合計300ピクセルの高さのコンテンツを言います。 <body>使っている背景-webkit-gradientや-moz-linear-gradient 次に、ウィンドウを最大化し（または単に300pxより高くします）、グラデーションの高さをちょうど300px（コンテンツの高さ）にし、残りのウィンドウを埋めるまで繰り返します。これはwebkitとgeckoの両方で同じであるため、これはバグではないと想定しています。しかし、グラデーションのストレッチを繰り返しではなくウィンドウ全体に拡大する方法はありますか？

430 css gradient

15

CSSにパディングが存在する場合、オーバーフローせずにTextAreaの幅を100％にするにはどうすればよいですか？

次のCSSおよびHTMLスニペットがレンダリングされています。 textarea { border:1px solid #999999; width:100%; margin:5px 0; padding:3px; } <div style="display: block;" id="rulesformitem" class="formitem"> <label for="rules" id="ruleslabel">Rules:</label> <textarea cols="2" rows="10" id="rules"/> </div> コードスニペットを実行する結果を非表示スニペットを展開問題は、テキスト領域が親よりも8px広くなる（境界線の2px +パディングの6px）ことです。境界線とパディングを引き続き使用しながら、の合計サイズをtextarea親の幅に制限する方法はありますか？

426 html css stylesheet

8

フレックスボックス内のテキストを垂直に配置するにはどうすればよいですか？

flexboxを使用して一部のコンテンツを垂直方向に整列させたいのですが、うまくいき<li>ません。オンラインで確認しましたが、多くのチュートリアルでは、実際align-items:centerには親のフレックス設定から取得するラッパーdivを使用していますが、この追加の要素を切り取ることはできないのでしょうか。リストアイテムの高さが動的になるため、このインスタンスではflexboxを使用することにしました%。 * { padding: 0; margin: 0; } html, body { height: 100%; } ul { height: 100%; } li { display: flex; justify-content: center; align-self: center; background: silver; width: 100%; height: 20%; } <ul> <li>This is the text</li> </ul> コードスニペットを実行する結果を非表示スニペットを展開

424 html css flexbox

16

レスポンシブな画像調整センターブートストラップ3

Bootstrap 3を使用してカタログを作成します。製品画像はタブレットで表示すると、サイズが小さく（500x500）、ブラウザーでの幅が767ピクセルであるため、見苦しく見えます。画面中央に配置したいのですが、どういうわけかできません。誰が問題を解決する手助けをしますか？

423 html css image twitter-bootstrap alignment

13

100％幅のHTMLテーブル、tbody内の垂直スクロール

<table>幅を100％に設定し、<tbody>垂直スクロールの内側にのみ高さを設定するにはどうすればよいですか？ table { width: 100%; display:block; } thead { display: inline-block; width: 100%; height: 20px; } tbody { height: 200px; display: inline-block; width: 100%; overflow: auto; } <table> <thead> <tr> <th>Head 1</th> <th>Head 2</th> <th>Head 3</th> <th>Head 4</th> <th>Head 5</th> </tr> </thead> <tbody> <tr> <td>Content 1</td> <td>Content 2</td> <td>Content 3</td> …

423 html css vertical-scrolling

14

@ font-faceがwoffファイルで404エラーをスローするのはなぜですか？

@font-face私の会社のサイトで使用していますが、機能しているか見栄えが良いです。FirefoxとChromeを除いて、.woffファイルに404エラーがスローされます。IEはエラーをスローしません。フォントをルートに配置しましたが、cssフォルダー内のフォントを試し、フォントの完全なURLを指定しました。これらのフォントをcssファイルから削除すると、404が表示されないので、構文エラーではないことがわかります。また、fontsquirrelsツールを使用して@font-faceフォントとコードを作成しました。 @font-face { font-family: 'LaurenCBrownRegular'; src: url('/laurencb-webfont.eot'); src: local('☺'), url('/laurencb-webfont.woff') format('woff'), url('/laurencb-webfont.ttf') format('truetype'), url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FontinSansRegular'; src: url('/fontin_sans_r_45b-webfont.eot'); src: local('☺'), url('/fontin_sans_r_45b-webfont.woff') format('woff'), url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg'); font-weight: normal; font-style: normal; }

422 css http-status-code-404 font-face woff

8

z-indexが固定位置で機能しない

私が持っているdivデフォルトの位置（すなわち付きposition:static）とdivでfixed位置を。要素のz-indexを設定した場合、固定要素を静的要素の背後に配置することは不可能のようです。 #over { width: 600px; z-index: 10; } #under { position: fixed; top: 5px; width: 420px; left: 20px; border: 1px solid; height: 10%; background: #fff; z-index: 1; } <!DOCTYPE html> <html> <body> <div id="over"> Hello Hello HelloHelloHelloHelloHello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello </div> <div …

422 css z-index

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

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