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

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

15
H1テキストをロゴ画像で置き換える：SEOとアクセシビリティのための最良の方法？
そこにはいくつかの異なるテクニックがあるようですので、私はこれについて「決定的な」答えを得ることを望んでいました... ウェブサイトでは、ホームページにリンクするロゴを作成するのが一般的です。同じことをしたいが、検索エンジン、スクリーンリーダー、IE 6 +、CSSや画像を無効にしているブラウザ向けに最適化します。 例1： h1タグを使用しません。SEOにはあまり良くないですよね？ <div id="logo"> <a href=""> <img src="logo.png" alt="Stack Overflow" /> </a> </div> 例2：これはどこかで見つかりました。CSSは少しハックに見えます。 <h1 id="logo"> <a href="">Stack Overflow</a> </h1> /* css */ #logo { padding: 70px 0 0 0; overflow: hidden; background-image: url("logo.png"); background-repeat: no-repeat; height: 0px !important; height /**/:70px; } 例3：同じHTML、text-indentを使用した異なるアプローチ。これは、イメージの置き換えに対する「ファーク」アプローチです。 <h1 id="logo"> <a …
240 css  xhtml  image  seo 
14
background-sizeに相当するものはありますか：画像要素をカバーして含みますか？
OverаэтотвопросестьответынаStack Overflowнарусском：Естьлианалогbackground-size：img coverдляimg？ 私は多くのページとさまざまな背景画像のあるサイトを持っていて、CSSから次のように表示します。 body.page-8 { background: url("../img/pic.jpg") no-repeat scroll center top #000; background-size: cover; } ただし、<img>要素を使用して1つのページに異なる（フルスクリーン）画像を表示し、上記のbackground-image: cover;プロパティと同じプロパティを設定し ます（画像はCSSから表示できません。HTMLドキュメントから表示する必要があります）。 通常私は使用します： div.mydiv img { width: 100%; } または： div.mydiv img { width: auto; } 画像を完全で応答性の高いものにします。ただし、width: 100%画面が狭くなりすぎると画像が縮小しすぎ（）、下部の画面にボディの背景色が表示されます。もう1つの方法width: auto;は、画像をフルサイズにするだけで、画面サイズに応答しません。 同じように画像を表示する方法はありbackground-size: coverますか？
240 html  image  css 
7
グリフィコンを大きくするにはどうすればよいですか？（サイズを変更しますか？）
地球のグリフィコンを大きくして、ページの大部分をカバーできるようにしたいと思います（ベクター画像です）。ボタンなどにはありません。それはただ一人です。これを行う方法はありますか？ <div class = "jumbotron"> <span class="glyphicon glyphicon-globe"></span> </div>
8
なぜこのインラインブロック要素が押し下げられるのですか？
以下は私のコードです。なぜ #firstDivがすべてのブラウザによって押し下げられているのかを理解したいと思います。どういうわけかそれを上に引っ張るのではなく、なぜ下に押されるのかという事実の内部の仕組みを本当に理解したいです。（そして私は彼らのトップを揃える方法を知っています:)） そして、私はそのoverflow：hiddenがそれを引き起こしていることを知っていますが、それがなぜそのdivを押し下げているのかはわかりません。 body { width: 350px; margin: 0px auto; } #container { border: 15px solid orange; } #firstDiv { border: 10px solid brown; display: inline-block; width: 70px; overflow: hidden; } #secondDiv { border: 10px solid skyblue; float: left; width: 70px; } #thirdDiv { display: inline-block; border: 5px solid yellowgreen; …
238 overflow  css 
12
印刷スタイルシートをデバッグするための提案？
私は最近Webサイトの印刷スタイルシートに取り組んでいて、効果的な方法で調整することに途方に暮れていることに気付きました。画面レイアウトで作業するためのリロードサイクルがあることの1つは次のとおりです。 コードを変更する コマンドタブ リロード しかし、印刷しようとすると、プロセス全体がはるかに困難になります。 コードを変更する コマンドタブ リロード 印刷する 印刷プレビュー画像で目を細める プレビューでPDFを開いてさらに検査する ここで見逃しているツールはありますか？WebKitのインスペクターには「これはページングされたメディアである」というチェックボックスがありますか？Firebug（震え）ができる魔法はありますか？
17
高さ100％のフルスクリーンiframe
iframeの高さ= 100％はすべてのブラウザーでサポートされていますか？ 私はdoctypeを次のように使用しています： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 私のiframeコードで、私が言うなら： <iframe src="xyz.pdf" width="100%" height="100%" /> つまり、残りのページの高さが実際に使用されます（上部に50pxの固定高さの別のフレームがあるため）これはすべての主要なブラウザー（IE / Firefox / Safari）でサポートされていますか？ また、スクロールバーについてはscrolling="no"、私がと言っても、Firefoxで無効なスクロールバーが表示される...スクロールバーを完全に非表示にして、iframeの高さを自動的に設定するにはどうすればよいですか？
8
マージンまたはパディングを親コンテナの高さのパーセンテージとして設定するにはどうすればよいですか？
私はCSSで垂直方向の配置を作成することに頭を悩ませていました .base{ background-color:green; width:200px; height:200px; overflow:auto; position:relative; } .vert-align{ padding-top:50%; height:50%; } <!-- and used the following div structure. --> <div class="base"> <div class="vert-align"> Content Here </div> </div> コードスニペットを実行するHide resultsスニペットを展開 これはこのケースでは機能しているように見えましたが、ベースdivの幅を拡大または縮小すると、垂直方向の配置がスナップすることに驚きました。padding-topプロパティを設定すると、パディングは親コンテナの高さのパーセンテージとして取得されると予想していましたが、これはこの場合のベースですが、上記の50％の値は、幅。:( JavaScriptを使用せずに、パディングやマージンを高さのパーセンテージとして設定する方法はありますか？
9
複数行のフレックスボックスレイアウトで改行を指定する方法
OverаэтотвопросестьответынаStack Overflowнарусском：Flexbox item —переноснановуюстроку 複数行のフレックスボックスで改行する方法はありますか？ たとえば、このCodePenの 3番目のアイテムごとに中断する場合。 .container { background: tomato; display: flex; flex-flow: row wrap; align-content: space-between; justify-content: space-between; } .item { width: 100px; height: 100px; background: gold; border: 1px solid black; font-size: 30px; line-height: 100px; text-align: center; margin: 10px; } .item:nth-child(3n) { background: silver; } <div class="container"> <div …
236 html  css  flexbox 
7
CSS：疑似要素を削除する方法（後、前、…）？
Webページの段落タグのレイアウトにスイッチを使用したいのですが。 私は後の疑似要素を使用します： p:after {content: url("../img/paragraph.gif");} 次に、このCSSコードをページから削除する必要があります。 これはどのように簡単に行うことができますか？ 追加したい： jQueryは既にページで使用されています CSSを含むファイルを含めたり削除したりしたくありません。
7
親コンテナでsvgスケールを作成するにはどうすればよいですか？
サイズがネイティブではない場合、インラインsvg要素のコンテンツスケールが必要です。もちろん、別のファイルにして、そのようにスケーリングすることもできます。 index.html： <img src="foo.svg" style="width: 100%;" /> foo.svg： <svg width="123" height="456"></svg> ただし、CSSを介してSVGにスタイルを追加したいので、外部スタイルをリンクすることはできません。インラインSVGスケールを作成するにはどうすればよいですか？
236 css  html  svg  scaling 
7
url（）の値を引用することは本当に必要ですか？
スタイルシートで次のどれを使用すればよいですか？ /* Example #1: */ background-image: url(image.png); /* Example #2: */ background-image: url("image.png"); /* Example #3: */ background-image: url('image.png'); W3Cは正しい方法として何を指定していますか？
235 css  w3c 
3
sass-自動縮小で監視しますか？
実行する方法はありますか： sass --watch a.scss:a.css しかし、a.css縮小されてしまったのでしょうか？ スタイルシートをコンパイルするときに、別の縮小ステップを実行する必要がないようにするにはどうすればよいですか？
235 css  sass  minify 
21
Twitter Bootstrapを使用して要素を非表示にし、jQueryを使用してそれを表示する方法
このようなHTML要素を作成するとします。 <div id="my-div" class="hidden">Hello, TB3</div> <div id="my-div" class="hide">Hello, TB4</div> <div id="my-div" class="d-none">Hello, TB4</div> そのHTML要素をjQuery / Javascriptで表示および非表示にするにはどうすればよいですか。 JavaScript： $(function(){ $("#my-div").show(); }); 結果：（これらのいずれかで）。 上記の要素を非表示にしたい。 Bootstrapを使用して要素を非表示にし、jQueryを使用して表示する最も簡単な方法は何ですか？
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.