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

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

30
残りの画面スペースの高さをdivで埋める
コンテンツを画面全体の高さいっぱいにしたいWebアプリケーションに取り組んでいます。 このページには、ロゴを含むヘッダーとアカウント情報があります。これは任意の高さになる可能性があります。content divでページの残りの部分を一番下まで埋めてほしい。 ヘッダーdivとコンテンツがありdivます。現時点では、次のようなレイアウトにテーブルを使用しています。 CSSとHTML #page { height: 100%; width: 100% } #tdcontent { height: 100%; } #content { overflow: auto; /* or overflow: hidden; */ } <table id="page"> <tr> <td id="tdheader"> <div id="header">...</div> </td> </tr> <tr> <td id="tdcontent"> <div id="content">...</div> </td> </tr> </table> コードスニペットを実行する結果を非表示スニペットを展開 ページの高さ全体が埋められ、スクロールは必要ありません。 content divの内部では、設定top: 0;によりヘッダーのすぐ下に配置されます。コンテンツは、高さが100%に設定された実際のテーブルになる場合があります。header内部contentに置くと、これは機能しません。 を使用せずに同じ効果を達成する方法はありtableますか? …
1910 html  css  html-table 

13
SCSSとSassの違いは何ですか?
私が読んでいることから、Sassは変数と数学のサポートによりCSSをより強力にする言語です。 SCSSとの違いは何ですか?同じ言語になっているのでしょうか?似てる?違う?
1902 css  sass 

20
CSS三角形はどのように機能しますか?
OverаэтотвопросестьответынаStack Overflowнарусском:CSSаксоздатьтреугольникиCSS? CSS Tricks- CSSの形状にはたくさんの異なるCSS形状があり、私は特に三角形に戸惑っています。 #triangle-up { width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent; border-bottom: 100px solid red; } <div id="triangle-up"></div> コードスニペットを実行する結果を非表示スニペットを展開 どのようにそしてなぜそれは機能しますか?

30
チェックボックスとそのラベルを一貫してクロスブラウザに配置する方法
これは、CSSのマイナーな問題の1つであり、常に悩まされています。Stack Overflowの周りの人々はどのようにして垂直方向に整列checkboxesし、labels一貫してクロスブラウザですか?私はサファリ(通常使用して、それらを正しく合わせるたびvertical-align: baselineにinput)、彼らは完全にオフにFirefoxとIEでいます。Firefoxで修正すると、SafariとIEは必ず混乱します。フォームをコーディングするたびに、これに時間を浪費しています。 これが私が使用する標準コードです: <form> <div> <label><input type="checkbox" /> Label text</label> </div> </form> コードスニペットを実行する結果を非表示スニペットを展開 私は通常、Eric Meyerのリセットを使用するため、フォーム要素のオーバーライドは比較的クリーンです。あなたが提供しなければならないヒントやトリックを楽しみにしています!

30
HTML + CSSをPDFに変換する[終了]
閉まっている。この質問はスタックオーバーフローのガイドラインを満たしていません。現在、回答を受け付けていません。 この質問を改善してみませんか? Stack Overflowのトピックとなるように質問を更新します。 3年前休業。 Firefox 3およびIE 7で適切にレンダリングされるHTML(XHTMLではない)ドキュメントがあります。これは、かなり基本的なCSSを使用してスタイルを設定し、HTMLで適切にレンダリングします。 私はそれをPDFに変換する方法を探しています。私が試してみました: DOMPDF:テーブルに大きな問題がありました。私は大きな入れ子になったテーブルを除外しましたが、それは役に立ちました(128Mのメモリを消費する前に死んでしまいました-これはphp.iniでのメモリの制限です)が、テーブルを完全に混乱させ、取得できないようです画像。テーブルは基本的なものであり、さまざまなポイントに線を追加するためのボーダースタイルがいくつかあります。 HTML2PDFとHTML2PS:実際にこれでうまく運んだ。一部の画像(すべての画像はGoogleチャートのURLです)をレンダリングし、テーブルのフォーマットははるかに優れていましたが、まだ理解していない複雑な問題があり、不明なnode_type()エラーが発生し続けているようです。ここからどこに行くべきかわからない。そして Htmldoc:これは基本的なHTMLでは問題なく動作するようですが、CSSをほとんどサポートしていないため、HTMLですべてを実行する必要があります(Htmldocランドではまだ2001年であることに気づきませんでした...)。 私はHtml2Pdf Pilotと呼ばれるWindowsアプリを試してみましたが、実際にはかなりまともな仕事をしましたが、少なくともLinux上で実行でき、理想的にはWebサーバー上のPHPを介してオンデマンドで実行できるものが必要です。 何が欠けていますか、またはこの問題を解決するにはどうすればよいですか?
1628 php  html  css  pdf  pdf-generation 

16
divをクリックして基本要素に移動
私が持っているdiv持っているbackground:transparentと一緒に、border。この下にdiv、もっと要素があります。 現在、オーバーレイの外側をクリックすると、基になる要素をクリックできますdiv。ただし、オーバーレイを直接クリックすると、基になる要素をクリックできませんdiv。 これdivをクリックして、下にある要素をクリックできるようにしたいと考えています。
1592 css 


30
「選択」ボックスのプレースホルダーを作成するにはどうすればよいですか?
私はうまく機能しているテキスト入力用のプレースホルダーを使用しています。しかし、selectboxにもプレースホルダーを使用したいと思います。もちろん、私はこのコードを使用することができます: <select> <option value="">Select your option</option> <option value="hurr">Durr</option> </select> ただし、「オプションを選択してください」はライトグレーではなく黒で表示されます。したがって、私のソリューションはCSSベースである可能性があります。jQueryも問題ありません。 これにより、ドロップダウンのオプションがグレーになります(矢印をクリックした後)。 option:first { color: #999; } 問題は、人々はどのようにしてセレクトボックスにプレースホルダーを作成するのかということです。しかし、それはすでに答えられています、乾杯。 これを使用すると、選択された値は常に(実際のオプションを選択した後でも)灰色になります。 select { color: #999; }

30
「div」コンテナに合わせて画像のサイズを自動変更するにはどうすればよいですか?
幅の高さの比率を維持しながら、小さな画像を小さな幅のdivコンテナーに収まるように、大きな画像をどのように自動サイズ変更しますか? 例:stackoverflow.com-画像がエディターパネルに挿入され、画像が大きすぎてページに収まらない場合、画像は自動的にサイズ変更されます。
1513 html  css  image  autoresize 

30
div内で画像を垂直方向に配置する方法
コンテナ内で画像をどのように配置できますdivか? 例 私の例<img>では<div>、class ="frame「: <div class="frame" style="height: 25px;"> <img src="http://jsfiddle.net/img/logo.png" /> </div> .frameの高さは固定されており、画像の高さは不明です。それが.frame唯一の解決策であれば、新しい要素を追加できます。Internet Explorer 7以降、WebKit、Geckoでこれを実行しようとしています。 こちらのjsfiddleを参照してください。 .frame { height: 25px; /* Equals maximum image height */ line-height: 25px; width: 160px; border: 1px solid red; text-align: center; margin: 1em 0; } img { background: #3A6F9A; vertical-align: middle; max-height: 25px; max-width: 160px; …

30
CSS表示プロパティの遷移
私は現在、CSSの「メガドロップダウン」メニューを設計しています。基本的には通常のCSS専用のドロップダウンメニューですが、さまざまなタイプのコンテンツが含まれています。 現時点では、CSS 3の遷移は「display」プロパティには適用されないようです。つまり、display: noneからdisplay: block(または任意の組み合わせ)への遷移は一切実行できません。 上記の例の2段目のメニューを、誰かがトップレベルのメニュー項目の1つにカーソルを合わせたときに「フェードイン」する方法はありますか? visibility:プロパティでトランジションを使用できることは承知していますが、それを効果的に使用する方法は考えられません。 私も高さを使用してみましたが、それはひどく失敗しました。 JavaScriptを使用してこれを達成するのは簡単なことでもありますが、CSSだけを使用するように自分自身に挑戦したかったので、少し不足していると思います。
1448 css  css-transitions 

30
すべてのブラウザーでdivを垂直方向に中央揃えにする方法は?
divCSSを使用して垂直方向に中央揃えにします。テーブルやJavaScriptは必要ありませんが、純粋なCSSだけが必要です。いくつかの解決策を見つけましたが、それらのすべてにInternet Explorer 6のサポートがありません。 <body> <div>Div to be aligned vertically</div> </body> divInternet Explorer 6を含むすべての主要なブラウザーで垂直方向に中央揃えするにはどうすればよいですか?


7
CSS calc()関数のSass変数
calc()Sassスタイルシートで関数を使用しようとしていますが、いくつか問題があります。これが私のコードです: $body_padding: 50px body padding-top: $body_padding height: calc(100% - $body_padding) 変数の50px代わりにリテラルを使用すると、body_padding必要なものが正確に得られます。ただし、変数に切り替えると、次のようになります。 body { padding-top: 50px; height: calc(100% - $body_padding); } calc関数内の変数を置き換える必要があることをSassに認識させるにはどうすればよいですか?
1346 css  sass  css-calc 

24
CSSだけで<select>ドロップダウンをスタイルするにはどうすればよいですか?
CSSのみでスタイルを設定する方法はありますか &lt;select&gt;ドロップダウンますか? &lt;select&gt;JavaScriptを使用せずに、人間が可能な限りフォームのスタイルを設定する必要があります。CSSでこれを行うために使用できるプロパティは何ですか? このコードは、すべての主要なブラウザーと互換性がある必要があります。 Internet Explorer 6、7、および8 Firefox サファリ 私はJavaScript:例でそれを作ることができることを知っています。 そして、私は単純なスタイリングについて話しているのではありません。CSSだけで何ができるのか知りたい。 Stack Overflowで同様の質問を見つけました。 そして、これはDoctype.comにあります。

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