プログラミング css

25

Webアプリに埋め込まれたiframeから境界線を削除するにはどうすればよいですか？iframeの例は次のとおりです。 <iframe src="myURL" width="300" height="300">Browser not compatible.</iframe> ページのコンテンツからiframeのコンテンツへの移行をシームレスにしたいのですが、背景色が同じであると想定しています。対象のブラウザはIE6のみであり、残念ながら他の人のためのソリューションは役に立ちません。

707 html css iframe internet-explorer-6 noborder

20

入力フィールドで：beforeまたは：after疑似要素を使用できますか？

:afterCSS疑似要素をinputフィールドで使用しようとしていますが、機能しません。と一緒に使用するとspan、問題なく動作します。 <style type="text/css"> .mystyle:after {content:url(smiley.gif);} .mystyle {color:red;} </style> これは機能します（「buu！」の後、「もう少し」の前にスマイリーを置きます） <span class="mystyle">buuu!</span>a some more これは機能しません-someValueを赤で着色するだけですが、笑顔はありません。 <input class="mystyle" type="text" value="someValue"> 何が悪いのですか？別の疑似セレクターを使用する必要がありますか？注：はサードパーティのコントロールによって生成されているため、のspan周りにを追加することはできませんinput。

685 html css pseudo-element css-content

15

CSS Explosionの管理

私が取り組んでいるWebサイトはCSSに大きく依存しています。現在、すべてのCSSスタイルがタグごとに適用されているので、将来の変更に対応するために、より多くの外部スタイルに移動しようとしています。しかし今問題は、「CSS爆発」が発生していることに気付いたことです。CSSファイル内のデータを最適に整理および抽象化する方法を決定するのが難しくなっています。 divテーブルベースのウェブサイトから移動して、ウェブサイト内で多数のタグを使用しています。そのため、次のようなCSSセレクターを多数取得しています。 div.title { background-color: blue; color: white; text-align: center; } div.footer { /* Styles Here */ } div.body { /* Styles Here */ } /* And many more */ それほど悪くはありませんが、私は初心者なので、CSSファイルのさまざまな部分を整理するための最良の方法について推奨できるかどうか疑問に思いました。ウェブサイトのすべての要素に個別のCSS属性を設定したくありません。CSSファイルを常に直感的で読みやすいものにしたいのです。私の最終的な目標は、CSSファイルを簡単に使用できるようにし、Web開発の速度を向上させる力を実証することです。このようにして、将来このサイトで作業する可能性のある他の個人も、私が行った方法を取り上げる必要はなく、優れたコーディング手法を使用する習慣に入るでしょう。

682 css organization

12

フレックスアイテムを右揃えする方法は？

「連絡先」を右揃えにするよりフレックスボックス風の方法はありますposition: absoluteか？ .main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <h2>Without title</h2> …

680 html css flexbox

25

「位置：絶対」要素を中央に配置する方法

属性がにposition設定されている要素を中央に配置するときに問題が発生しabsoluteます。画像が中央に配置されない理由を誰かが知っていますか？ body { text-align: center; } #slideshowWrapper { margin-top: 50px; text-align: center; } ul#slideshow { list-style: none; position: relative; margin: auto; } ul#slideshow li { position: absolute; } ul#slideshow li img { border: 1px solid #ccc; padding: 4px; height: 450px; } <body> <div id="slideshowWrapper"> <ul id="slideshow"> <li><img src="img/dummy1.JPG" alt="Dummy 1" …

676 html css css-position centering

5

CSS Flexboxに「justify-items」と「justify-self」プロパティがないのはなぜですか？

フレックスコンテナーの主軸と交差軸を考えます。出典：W3C 主軸に沿ってフレックスアイテムを配置するには、1つのプロパティがあります。 justify-content クロス軸に沿ってフレックスアイテムを配置するには、3つのプロパティがあります。 align-content align-items align-self 上の画像では、主軸は水平で、交差軸は垂直です。これらは、フレックスコンテナのデフォルトの方向です。ただし、これらの方向はflex-direction宿泊施設と簡単に交換できます。 /* main axis is horizontal, cross axis is vertical */ flex-direction: row; flex-direction: row-reverse; /* main axis is vertical, cross axis is horizontal */ flex-direction: column; flex-direction: column-reverse; （交差軸は常に主軸に対して垂直です。）軸の働きを説明する上での私のポイントは、どちらの方向にも特別なものは何もないように見えることです。主軸、交差軸、重要度の点で同じであり、flex-direction簡単に前後に切り替えることができます。では、なぜ交差軸は2つの追加の配置プロパティを取得するのですか？なぜされているalign-contentとalign-items主軸のために一つの特性に統合？主軸がjustify-selfプロパティを取得しないのはなぜですか？これらのプロパティが役立つシナリオ：フレックスコンテナーの隅にフレックスアイテムを配置する #box3 { align-self: flex-end; justify-self: …

675 css flexbox language-lawyer w3c

12

フレックスボックス：水平および垂直に中央揃え

フレックスボックスを使用して、divをコンテナ内で水平方向および垂直方向の中央に配置する方法。以下の例では、水平方向の中央に配置された各行の下（行）に各数値が必要です。 .flex-container { padding: 0; margin: 0; list-style: none; display: flex; align-items: center; justify-content: center; } row { width: 100%; } .flex-item { background: tomato; padding: 5px; width: 200px; height: 150px; margin: 10px; line-height: 150px; color: white; font-weight: bold; font-size: 3em; text-align: center; } <div class="flex-container"> <div class="row"> <span class="flex-item">1</span> …

669 html css flexbox

4

クラスのCSSのワイルドカード*

私がスタイリングしているこれらのdiv .tocolorがありますが、一意の識別子1、2、3、4なども必要なので、別のクラスとして追加しtocolor-1ます。 <div class="tocolor tocolor-1"> tocolor 1 </div> <div class="tocolor tocolor-2"> tocolor 2 </div> <div class="tocolor tocolor-3"> tocolor 3 </div> <div class="tocolor tocolor-4"> tocolor 4 </div> .tocolor{ background: red; } クラスを1つだけにする方法はありtocolor-*ますか。*このCSSのようにワイルドカードを使用しようとしましたが、機能しませんでした。 .tocolor-*{ background: red; }

668 css css-selectors wildcard

30

HTMLのレイアウトにテーブルを使用しないのはなぜですか？[閉まっている]

現在のところ、この質問はQ＆A形式には適していません。事実、参考文献、専門知識によって回答が裏付けられることを期待していますが、この質問は、討論、議論、投票、または拡張ディスカッションを求める可能性があります。この質問を改善でき、再開できると思われる場合は、ヘルプセンターにアクセスしてください。 8年前休業。ロックされています。質問はトピックから外れていますが、歴史的に重要であるため、この質問とその回答はロックされています。現在、新しい回答や相互作用を受け入れていません。 HTMLでのレイアウトにテーブルを使用してはならないというのは一般的な見方のようです。どうして？私はこれについて良い議論を見たことがありません（または正直に言うとまれです）。通常の答えは次のとおりです。コンテンツをレイアウトから分離するのは良いことですが、これは誤った議論です。クリシェ思考。レイアウトにtable要素を使用しても、表形式のデータとはほとんど関係がないのは事実です。だから何？上司は気にしますか？ユーザーは気にしますか？おそらく、私またはWebページのケアを維持する必要のある他の開発者...テーブルの保守性は低下しますか？テーブルを使用する方が、divやCSSを使用するより簡単だと思います。ちなみに、なぜdivまたはspanを使用してコンテンツをレイアウトから分離し、テーブルを使用しないのですか？多くの場合、divのみで適切なレイアウトを取得するには、多くのネストされたdivが必要です。コードの読みやすさそれは逆だと思います。ほとんどの人はHTMLを理解し、CSSを理解する人はほとんどいません。 SEOがテーブルを使用しない方が良いのはなぜですか？誰かがそれであるという証拠を示すことができますか？または、テーブルはSEOの観点から推奨されないというGoogleの声明は？テーブルが遅くなります。追加のtbody要素を挿入する必要があります。これは、最新のWebブラウザー用のピーナッツです。テーブルを使用するとページの速度が大幅に低下するベンチマークをいくつか示してください。レイアウトのオーバーホールはテーブルがなくても簡単です。csZenガーデンを参照してください。アップグレードが必要なほとんどのWebサイトには、新しいコンテンツ（HTML）も必要です。Webサイトの新しいバージョンが新しいCSSファイルのみを必要とするシナリオは、あまりありません。Zen Gardenは素晴らしいWebサイトですが、少し理論的です。CSSの誤用は言うまでもありません。テーブルの代わりにdivs + CSSを使用するための良い議論に本当に興味があります。

665 html css

16

CSSの背景を伸縮する

CSSの背景をコンテナに合わせて拡大または縮小する方法はありますか？

653 html css

10

特定のクラスまたは属性を持たない要素を選択するCSSセレクターを記述できますか？

特定のクラスを持たないすべての要素を選択するCSSセレクタールールを記述したいと思います。たとえば、次のHTMLがあるとします。 <html class="printable"> <body class="printable"> <h1 class="printable">Example</h1> <nav>  </nav> <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a> <p class="printable"> This page is super interresting and you should print it! </p> </body> </html> 「印刷可能」クラスを持たないすべての要素を選択するセレクターを記述したいと思います。この場合、navとa要素です。これは可能ですか？注：これを使用したい実際のHTMLでは、「印刷可能」クラスを持たない要素が多くなります（上記の例ではその逆です）。

645 html css css-selectors

23

位置は固定ですが、コンテナに対して相対的です

私は修正しようとしていますdivので、それは常に画面の上部にくっつきます： position: fixed; top: 0px; right: 0px; ただし、はdiv中央のコンテナ内にあります。使用するposition:fixedとdiv、ブラウザウィンドウの相対位置が修正されます。たとえば、ブラウザの右側に当たるようになります。代わりに、コンテナに対して相対的に修正する必要があります。をposition:absolute基準にして要素を修正するために使用できることはわかっていますがdiv、ページを下にスクロールすると、要素は消失し、のように上部に固定されませんposition:fixed。これを達成するためのハックまたは回避策はありますか？

639 css position css-position fixed

26

HTML / CSSで画像をグレースケールに変換する

だけでカラービットマップをグレースケールで表示する簡単な方法はありHTML/CSSますか？ IE互換である必要はありません（そうでないと思います）。FF3やSf3で動作する場合は、これで十分です。 SVGとCanvasの両方でそれを実行できることはわかっていますが、それは現在、多くの作業のようです。本当に怠惰な人がこれを行う方法はありますか？

619 image css grayscale

11

CSSでFirefoxのみをターゲットにする

条件付きコメントを使用すると、ブラウザ固有のCSSルールでInternet Explorerを簡単にターゲットにできます。  時々、Geckoエンジン（Firefox）が誤動作します。他の単一のブラウザーではなく、CSSルールを使用してFirefoxのみをターゲットにする最善の方法は何ですか？つまり、Internet ExplorerがFirefoxのみのルールを無視するだけでなく、WebKitとOperaも無視する必要があります。注：「クリーン」なソリューションを探しています。JavaScriptブラウザーのスニファーを使用して「firefox」クラスをHTMLに追加しても、私の意見ではクリーンとは言えません。条件付きコメントがIEにのみ「特別」であるように、ブラウザの機能に依存するものを見たいと思います…

616 css firefox css-hack

8

複数のクラスの削除（jQuery）

これを書き換えるより良い方法はありますか？ $('element').removeClass('class1').removeClass('class2'); removeClass();不要なすべてのクラスが削除されるため、使用できません。

615 jquery css

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

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