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

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

8
CSS FlexBoxレイアウトで画像の自動サイズ変更とアスペクト比の維持？
以下のように表示されるCSSフレックスボックスレイアウトを使用しました。 画面が小さくなると、次のようになります。 問題は、元の画像からのアスペクト比を維持しながら、画像のサイズが変更されないことです。 純粋なCSSとフレックスボックスレイアウトを使用して、画面が小さくなった場合に画像のサイズを変更することはできますか？ これが私のhtmlです： <div class="content"> <div class="row"> <div class="cell"> <img src="http://i.imgur.com/OUla6mK.jpg"/> </div> <div class="cell"> <img src="http://i.imgur.com/M16WzMd.jpg"/> </div> </div> </div> 私のCSS： .content { background-color: yellow; } .row { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-orient: horizontal; -moz-box-orient: horizontal; box-orient: horizontal; flex-direction: row; -webkit-box-pack: center; -moz-box-pack: …
96 html  css  flexbox 
5
translateZ（0）に関連するCSSパフォーマンス
多くのブログが、transform: translateZ(0)アニメーションとトランジションを高速化するためにを使用して、要素が3Dであると考えるようにGPUを「トリック」することでパフォーマンスの向上を表現しています。この変換を次のように使用することに意味があるかどうか疑問に思っていました。 * { -webkit-transform: translateZ(0); -moz-transform: translateZ(0); -ms-transform: translateZ(0); -o-transform: translateZ(0); transform: translateZ(0); }
6
float：left divを中央に揃えますか？
画像のグループをページ全体に水平に表示したい。各画像の下にいくつかのリンクがあるため、各画像/リンクグループの周りにコンテナを配置する必要があります。 私が欲しいものに最も近いのは、それらをfloat：leftのdivに配置することです。問題は、コンテナーが左ではなく中央に揃うようにすることです。どうすればこれを達成できますか？
96 html  css 
4
ASP.NETのdivの分離コードファイルでCSSスタイルをどのように変更しますか？
私のaspxページのコードビハインドのデータベーステーブルから取得した情報に基づいて、divのCSSスタイル属性を変更しようとしています。以下は基本的に私がやろうとしていることですが、エラーが発生します。 Aspx： <div id="testSpace" runat="server"> Test </div> 分離コード： testSpace.Style = "display:none;" testSpace.Style("display") = "none"; 何が悪いのですか？
96 c#  asp.net  css 
2
IDにピリオドを含むCSSセレクター
HTML仕様では、IDにピリオド（。）を使用できます。 <img id="some.id" /> ただし、CSS IDセレクタールールを使用しても正しく一致しません。 #some.id { color: #f00; } IDセレクタのCSS仕様では、このケースについては触れられていません。タグ名とクラスセレクターの組み合わせを使用していると思いますか？たとえば、CSSルールは、のようなクラス名を持つa.classNameすべてのアンカータグ（<a>）に適用されます。className<a class="className"></a> ピリオドを含むIDでHTML要素を参照する外部CSSファイルルールを作成することは可能ですか？ CSS仕様ではCSSの「識別子」にピリオドが有効な文字として含まれていないと規定されているため、私はそうは思いません。これは、HTML仕様とCSS仕様の間の根本的な不一致ですか？別のタイプのCSS選択を使用する唯一の選択肢はありますか？これを確認または否定するより賢い人はいますか？ （単純化するために、HTMLのid属性からピリオドを削除しますが、これはシステム生成のIDであるため、この場合は変更することができません。）
4
<ul>の<li>要素を垂直方向に整列させる方法は？
私は横型で、縦型の&lt;ul&gt;中央に配置する必要があり&lt;li&gt;ます。私のマークアップは以下です。それぞれ&lt;li&gt;に境界線があり、アイテムとその内容を垂直方向の中央に配置する必要があります。助けてください; CSSは初めてです。 &lt;?xml version="1.0" encoding="UTF-8" ?&gt; &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; .toolbar li { border: solid 1px black; display: block; float: left; height: 100px; list-style-type: none; margin: 10px; vertical-align: middle; } .toolbar li.button { height: 50px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="toolbar"&gt; …
96 css 
9
CSS：高さを指定せずに2つの要素を互いの上に配置する方法は？
お互いの上に正確に配置する必要がある2つのDIVがあります。ただし、これを行うと、含まれているDIVが高さがないように動作するため、書式設定がすべて失敗します。これは予想される動作だと思いますが、position:absoluteこれらの2つの要素を互いの上に配置し、コンテンツが伸びるときにコンテナを伸ばす方法を見つける必要があります。 の左上端は、の左上端に.layer2正確に位置合わせする必要がありますlayer1 &lt;!-- HTML --&gt; &lt;div class="container_row"&gt; &lt;div class="layer1"&gt; Lorem ipsum... &lt;/div&gt; &lt;div class="layer2"&gt; More lorem ipsum... &lt;/div&gt; &lt;/div&gt; &lt;div class="container_row"&gt; ...same HTML as above. This one should never overlap the .container_row above. &lt;/div&gt; /* CSS */ .container_row {} .layer1 { position:absolute; z-index: 1; } .layer2 { position:absolute; z-index: 2; …
96 css 
8
divに合わせるための画像サイズの調整（ブートストラップ）
特定のサイズのdivに収まるように画像を取得しようとしています。残念ながら、画像はそれに適合しておらず、代わりに、十分に大きくないサイズに比例して縮小しています。画像を画像の中に収めるにはどうすればよいかわかりません。 これで十分なコードがない場合は、追加で提供させていただきます。見落としているその他のエラーを修正することもできます。 ここにHTMLがあります &lt;div class="span3 top1"&gt; &lt;div class="row"&gt; &lt;div class="span3 food1"&gt; &lt;img src="images/food1.jpg" alt=""&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span3 name1"&gt; heres the name &lt;/div&gt; &lt;/div&gt; &lt;div class="row"&gt; &lt;div class="span3 description1"&gt; heres where i describe and say "read more" &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; 私のCSS .top1{ height:390px; background-color:#FFFFFF; margin-top:10px; } .food1{ background-color:#000000; …
6
：first-childが期待どおりに機能しない
私が最初に選択しようとしているh1内部のA divと呼ばれるクラスではdetail_container。h1this内の最初の要素である場合は機能しますが、このdiv後に来る場合ulは機能しません。 &lt;style type="text/css"&gt; .detail_container h1:first-child { color:blue; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="detail_container"&gt; &lt;ul&gt; &lt;li&gt;&lt;/li&gt; &lt;li&gt;&lt;/li&gt; &lt;/ul&gt; &lt;h1&gt;First H1&lt;/h1&gt; &lt;h1&gt;Second H1&lt;/h1&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; 私が持っているCSS h1は、これがどこにあっても最初に選択するという印象を受けましたdiv。どうすれば機能させることができますか？
11
入力type = fileを画像で置き換える
多くの人のように、私は醜いをカスタマイズしたいと思いますinput type=file、そしてそれはいくつかのハックやなしではそれができないことを知っていますjavascript。しかし、私の場合、ファイルのアップロードボタンは画像（jpeg | jpg | png | gif）をアップロードするためだけのものなのでclickable、入力タイプのファイル（「ダイアログボックスを表示し、送信されたページに同じ$ _FILEを入力します）。 私はここにいくつかの回避策を見つけました、そしてこれも興味深いものです（しかしChrome = /では動作しません）。 ファイルボタンにスタイルを追加したいときはどうしますか？あなたがそれについて何らかの見解を持っているなら、ただ答えボタンを押してください;）
96 css  image  file  button  input 
8
アイコンを円の中に配置する
複数の&lt;img&gt;要素を別の要素の周りの円に配置し、それらの要素をすべてクリック可能なリンクにする方法を教えてください。下の図のようにしたいのですが、その効果をどのようにして実現するかわかりません。 これは可能ですか？
96 html  css 
13
Bootstrap 4レスポンシブテーブルは100％幅を占有しません
Bootstrap 4を使用してWebアプリを構築していて、奇妙な問題が発生しています。Bootstrapのテーブルレスポンシブクラスを利用して、モバイルデバイスでテーブルを水平方向にスクロールできるようにしたいと考えています。デスクトップデバイスでは、テーブルは含まれているDIVの幅の100％を占める必要があります。 .table-sensitiveクラスをテーブルに適用するとすぐに、テーブルが水平方向に縮小し、幅の100％を占有しなくなります。何か案は？ これが私のマークアップです： &lt;!DOCTYPE html&gt; &lt;html lang="en" class="mdl-js"&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="apple-mobile-web-app-capable" content="yes"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt; &lt;meta name="application-name" content=""&gt; &lt;meta name="theme-color" content="#000000"&gt; &lt;link rel="stylesheet" href="/css/bundle.min.css"&gt; &lt;/head&gt; &lt;body&gt; &lt;div class="container-fluid no-padding"&gt; &lt;div class="row"&gt; &lt;div class="col-md-12"&gt; &lt;table class="table table-responsive" id="Queue"&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;&lt;span span="sr-only"&gt;Priority&lt;/span&gt;&lt;/th&gt; &lt;th&gt;Origin&lt;/th&gt; &lt;th&gt;Destination&lt;/th&gt; &lt;th&gt;Mode&lt;/th&gt; …
96 css  bootstrap-4 
7
2つのCSSクラスを単一の要素に適用する方法
2つのクラスを単一のdivまたはspanまたは任意のhtml要素に適用できますか？例えば： &lt;a class="c1" class="c2"&gt;aa&lt;/a&gt; 私は試しましたが、私の場合c2は適用されません。両方のクラスを一度に適用するにはどうすればよいですか？
96 html  css 
6
CSS3トランジション-フェードアウト効果
純粋なCSSで「フェードアウト」効果を実装しようとしています。これがフィドルです。私はオンラインでいくつかの解決策を調べましたが、オンラインでドキュメントを読んだ後、スライドアニメーションが機能しない理由を理解しようとしています。ポインタはありますか？ .dummy-wrap { animation: slideup 2s; -moz-animation: slideup 2s; -webkit-animation: slideup 2s; -o-animation: slideup 2s; } .success-wrap { width: 75px; min-height: 20px; clear: both; margin-top: 10px; } .successfully-saved { color: #FFFFFF; font-size: 20px; padding: 15px 40px; margin-bottom: 20px; text-align: center; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; background-color: #00b953; } @keyframes …
13
ブートストラップ要素100％幅
100％色のブロックを交互に作成したいと思います。「理想的な」状況は、現在の状況だけでなく、添付ファイルとして示されています。 必要なセットアップ： 現在： 私の最初のアイデアは、divクラスを作成し、背景色を付け、幅を100％にすることでした。 .block { width: 100%; background: #fff; } ただし、これは明らかに機能しないことがわかります。コンテナエリアに限定されています。コンテナを閉じようとしましたが、それも機能しませんでした。
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.