プログラミング css

14

CSSだけで上付き文字を作成するにはどうすればよいですか？外部リンクを上付き文字でマークするスタイルシートがありますが、文字を正しく配置するのに苦労しています。私が現在持っているものは次のようになります： a.external:after { font-size: 50%; vertical-align: top; content: "+"; } しかし、それは機能しません。当然、私は<sup>-tag contentを使用しますが、HTMLが許可される場合のみです...

320 css

11

メディアクエリは、画面ではなくdiv要素に基づいてサイズ変更できますか？

メディアクエリを使用して、div要素が含まれている要素のサイズに基づいて要素のサイズを変更したいと思います。画面サイズdivは、Webページ内のウィジェットのように使用されるだけで、サイズが異なるため、使用できません。更新これで現在行われている作業があるようです：https : //github.com/ResponsiveImagesCG/cq-demos

317 css media-queries

23

CSS3のborder-radiusプロパティとborder-collapse：collapseは混合しません。border-radiusを使用して、角が丸い折りたたみテーブルを作成するにはどうすればよいですか？

編集-元のタイトル：（折りたたみ、丸みを帯びたコーナーテーブルを作成するためborder-collapse:collapseにCSS）を達成する別の方法はありますか？テーブルの境界線を折りたたむだけでは根本的な問題は解決されないことが判明したので、議論をより反映するようにタイトルを更新しました。 CSS3 border-radiusプロパティを使用して、角が丸いテーブルを作成しようとしています。私が使用しているテーブルスタイルは次のようになります。 table { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px } ここに問題があります。border-collapse:collapseプロパティも設定したいのですが、設定するとborder-radius機能しなくなります。border-collapse:collapse実際に使用しなくても同じ効果を得ることができるCSSベースの方法はありますか？編集：ここで問題を説明する簡単なページを作成しました（Firefox / Safariのみ）。問題の大部分は、コーナーを丸くするようにテーブルを設定しても、コーナーtd要素のコーナーに影響しないことです。テーブルがすべて1色の場合はtd、最初の行と最後の行でそれぞれ上隅と下隅を丸めることができるので、これは問題にはなりません。ただし、見出しとストライプを区別するためにテーブルの背景色を変えているので、内側のtd要素にも丸い角が表示されます。提案されたソリューションの概要：丸い角を持つ別の要素でテーブルを囲むと、テーブルの四角い角が「にじむ」ため、機能しません。ボーダーの幅を0に指定しても、テーブルは折りたたまれません。ボトムtdゼロにCELLSPACINGを設定した後、まだ直角の角。代わりにJavaScriptを使用すると、問題を回避できます。可能な解決策：テーブルはPHPで生成されるので、外側のth / tdsのそれぞれに異なるクラスを適用し、各コーナーを個別にスタイル設定できます。あまりエレガントではなく、複数のテーブルに適用するのが少し面倒なので、私はこれをしたくないので、提案を続けてください。考えられる解決策2は、JavaScript（具体的にはjQuery）を使用してコーナーのスタイルを設定することです。この解決策も機能しますが、私が探しているものはまだ十分ではありません（私はうるさいです）。2つの予約があります。これは非常に軽量なサイトです。JavaScriptを最小限に抑えたいと思います border-radiusを使用することの私にとっての魅力の一部は、優雅な低下と漸進的な強化です。丸みを帯びたすべての角にborder-radiusを使用することで、CSS3対応のブラウザーでは常に丸みを帯びたサイトになり、他のブラウザーでは一貫して正方形のサイトになりたいと思っています（私はIEを見てます）。今日、CSS3でこれを実行する必要がないように思えるかもしれませんが、私には理由があります。また、この問題はw3c仕様の結果であり、CSS3のサポートが不十分ではないため、CSS3がより広範囲にサポートされている場合でも、どのソリューションも関連性があり有用です。

317 html css rounded-corners html-table

10

モバイルWebページでズームを「無効」にするにはどうすればよいですか？

私は、基本的にいくつかのテキスト入力を備えた大きなフォームであるモバイルWebページを作成しています。しかし（少なくとも私のAndroid携帯電話では）、入力をクリックするたびに、ページ全体がそこでズームし、ページの残りの部分が見えなくなります。モバイルWebページでこの種のズームを無効にするHTMLまたはCSSコマンドはありますか？

316 html css mobile

8

CSSを使用して複数の背景画像を使用できますか？

2つの背景画像を使用することは可能ですか？たとえば、1つの画像を上部で繰り返して（repeat-x）、別の画像をページ全体で繰り返し（繰り返し）、ページ全体で1つの画像を上部で繰り返す画像の後ろに配置したいとします。 htmlとbodyの背景を設定することで、2つの背景画像に望ましい効果が得られることがわかりました。 html { background: url(images/bg.png); } body { background: url(images/bgtop.png) repeat-x; } これは「良い」CSSですか？より良い方法はありますか？また、3つ以上の背景画像が必要な場合はどうなりますか？

316 css background-image

10

Div幅100％-固定ピクセル数

テーブルやJavaScriptを使用せずに次の構造を実現するにはどうすればよいですか？白い境界線はdivの端を表しており、質問には関係ありません。中央の領域のサイズは変化しますが、正確なピクセル値があり、構造全体がそれらの値に従ってスケーリングされます。単純化するために、「中央の100％-n px」の幅を上部中央と下部中央のdivに設定する方法が必要です。クリーンなクロスブラウザソリューションに感謝しますが、それが不可能な場合は、CSSハックで対応できます。ここにボーナスがあります。私が苦労して、テーブルまたはJavaScriptを使用してしまう別の構造。少し異なりますが、新しい問題が発生します。主にjQueryベースのウィンドウシステムで使用していますが、レイアウトをスクリプトに含めず、1つの要素（中央の要素）のサイズのみを制御したいと考えています。

316 html css height width

15

JavaScriptを使用してCSSファイルをロードする方法

JavaScriptを使用してCSSスタイルシートをHTMLページにインポートすることは可能ですか？もしそうなら、それはどのように行うことができますか？ PS JavaScriptは私のサイトでホストされますが、ユーザー<head>が自分のWebサイトのタグを挿入できるようにして、サーバーでホストされているCSSファイルを現在のWebページにインポートできるようにする必要があります。（cssファイルとjavascriptファイルの両方が私のサーバーでホストされます）。

316 javascript html css dhtml

3

中央に1つのフレキシブルな列を持つ2つの固定幅の列をどのように持つことができますか？

左と右の列の幅が固定されている3列のフレックスボックスレイアウトを設定しようとしています。中央の列は、利用可能なスペースを埋めるために曲がっています。列の寸法を設定しても、ウィンドウが縮小するにつれて、列は縮小しているように見えます。誰でもこれを達成する方法を知っていますか？さらに、ユーザーの操作に基づいて右の列を非表示にする必要があります。その場合、左の列は固定幅のままですが、中央の列が残りのスペースを埋めます。 #container { display: flex; justify-content: space-around; align-items: stretch; max-width: 1200px; } .column.left { width: 230px; } .column.right { width: 230px; border-left: 1px solid #eee; } .column.center { border-left: 1px solid #eee; } <div id="container"> <div class="column left"> <p>Anxiety was a blog series that ran in the …

316 html css flexbox

6

最初の直接の子専用のCSSセレクターはありますか？

私は次のhtmlを持っています <div class="section"> <div>header</div> <div> contents <div>sub contents 1</div> <div>sub contents 2</div> </div> </div> そして次のスタイル： DIV.section DIV:first-child { ... } なんらかの理由で、スタイルが「サブコンテンツ1」 <div>と「ヘッダー」に適用されていることがわかりません<div>。スタイルのセレクターは、「セクション」というクラスを持つdivの最初の直接の子にのみ適用されると思いました。セレクタを変更して必要なものを取得するにはどうすればよいですか？

315 html css css-selectors

1

フレックスアイテムが過去のコンテンツサイズを縮小しないのはなぜですか？

フレックスボックスの列が4つあり、すべてが正常に動作しますが、列にテキストを追加して大きなフォントサイズに設定すると、フレックスプロパティにより、列が必要以上に広くなります。私が使用しようword-break: break-wordとしましたが、それでも役に立ちましたが、列のサイズを非常に小さい幅に変更すると、テキストの文字が複数行に分割され（1行に1文字）、それでも列の幅は1文字のサイズより小さくなりません。このビデオを見てください（最初は最初の列が最小ですが、ウィンドウのサイズを変更すると、それが最も広い列になります。フレックス設定を常に尊重したいので、フレックスサイズ1：3：4：4）私は知っています、フォントサイズと列のパディングをより小さく設定することは助けになります... 使用できませんoverflow-x: hidden。 JSFiddle .container { display: flex; width: 100% } .col { min-height: 200px; padding: 30px; word-break: break-word } .col1 { flex: 1; background: orange; font-size: 80px } .col2 { flex: 3; background: yellow } .col3 { flex: 4; background: skyblue } .col4 { …

313 html css flexbox

8

Firefox用のカスタムCSSスクロールバー

CSSでスクロールバーをカスタマイズしたい。私はこのWebKit CSSコードを使用します。これはSafariとChromeでうまく機能します。 ::-webkit-scrollbar { width: 15px; height: 15px; } ::-webkit-scrollbar-track-piece { background-color: #C2D2E4; } ::-webkit-scrollbar-thumb:vertical { height: 30px; background-color: #0A4C95; } Firefoxで同じことをするにはどうすればよいですか？ jQueryを使用して簡単に実行できることはわかっていますが、実行可能な場合は純粋なCSSで実行することをお勧めします。誰かの専門家のアドバイスに感謝します！

313 css firefox webkit scrollbar

15

アンカー（リンク）の下線を削除するにはどうすればよいですか？

とにかく（CSSで）、ページで紹介されているテキストとリンクの下線を避けるためにありますか？

313 html css underline

21

ダイナミックテキストのサイズを自動調整して、固定サイズのコンテナーを埋める

ユーザーが入力したテキストを固定サイズのdivに表示する必要があります。フォントサイズを自動的に調整して、テキストができるだけボックスに入るようにする必要があります。つまり-divが400px x 300pxの場合。ABCを入力すると、それは本当に大きなフォントになります。彼らが段落を入力すると、それは小さなフォントになります。私はおそらく最大フォントサイズ（おそらく32px）から始めたいと思います。テキストが大きすぎてコンテナーに収まらない場合は、フォントサイズを収まるまで縮小します。

312 jquery html css

10

プレーンなJavaScriptでdivの高さを取得する

OverаэтотвопросестьответынаStack Overflowнарусском：УзнатьвысотуэлеменеачерезJavascript、еслионапропеевера jQueryを使用せずにdivの高さを取得する方法に関するアイデアはありますか？私はこの質問のためにStack Overflowを検索していましたが、すべての回答がjQueryを指しているよう.height()です。私のような何かをしようとしたmyDiv.style.height私のdivは、その持っていた場合でも、それは何も返さないwidthし、heightCSSで設定を。

312 javascript html css

9

<hr>タグの太さを変更するにはどうすればよいですか

<hr>CSSで横罫線（）の太さを変更したい。私はそれがHTMLのようにできることを知っています- <hr size="10"> しかし、こちらのMDNで言及されているように、これは非推奨であると聞いています。CSSで使用してみましたheight:1pxが、厚みは変わりません。<hr>線を0.5px太くしたい。 UbuntuでFirefox 3.6.11を使用しています

312 html css user-interface

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

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