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

どのように私はの機能をシミュレートできるbackground-size:coverようなHTML要素の上<video>または<img>？ 次のように機能させたい background-size: cover; background-position: center center;

154 javascript  jquery  css 

<input type=file />テキストフィールドなしで「参照」ボタンのみを表示するように要素（またはスクリプト）のスタイルを設定する方法はありますか？ ありがとう 編集：なぜこれが必要なのかを明確にするためです。http://www.morningz.com/?p=5のマルチファイルアップロードコードを使用していますが、値がないため、テキスト入力フィールドは必要ありません。スクリプトは、新しく選択したファイルをページのコレクションに追加するだけです。可能であれば、テキストフィールドがないと見栄えがよくなります。

154 javascript  html  css 

ページ上のすべてのhタグをターゲットにしたい。私はあなたがこのようにそれを行うことができることを知っています... h1, h2, h3, h4, h5, h6 { font: 32px/42px trajan-pro-1,trajan-pro-2; } しかし、高度なCSSセレクターを使用してこれを行うより効率的な方法はありますか？例： [att^=h] { font: 32px/42px trajan-pro-1,trajan-pro-2; } （しかし、これは明らかに機能しません）

154 css  css-selectors 

リストの長い行が折り返されると、順序付けられていないリストからインデントを削除できないようです。私のリストは次のようになります： Windowsユーザーはputtyを使用できます MacユーザーはTerminal.appを使用できます LinuxユーザーはSSH userid@ourserver.comポート22を使用できます ...........>または、Cyber​​duckのようなSFTPプログラムを使用して、それを........................... ..............> ourserver.com、ポート22 （ドットはインデントを示します） 私はたくさんの解決策を読み、テキストインデント、リストスタイルを使用してマージンとパディングをゼロに設定しようとしましたが、何も機能しません。問題は、リストの上に中央揃えする必要がある見出しがあるため、マージンをautoに設定してから、下のリストをめちゃくちゃにしていることだと思います。しかし、たとえ親div内に2つのdivを配置しても機能しません。 ここにHTML / CSSがあります（他のすべてのソリューションが失敗する原因となっている設定がある場合は、すべてを含めました） <div id="info"> <p><strong>Did you know you can SSH directly to ourserver.com?</strong> </p> <ul> <li>Windows users can use putty</li> <li>Mac users can use the <a href="http://www.terminfo.org">Terminal.app</a></li> <li>Linux users can use SSH userid@ourserver.com port 22</li> <li>Or use an SFTP …

154 html  css  html-lists 

私はASP.NETを使用していますが、一部のボタンはリダイレクトのみを行います。むしろ普通のリンクにしたいのですが、見た目の違いにユーザーに気付かれたくないです。アンカー、つまりタグでラップされた画像を検討しましたが、ボタンのテキストを変更するたびに画像エディターを起動する必要はありません。

154 css  button 

のコンテナ<div>がありdisplay: flexます。子供がい<a>ます。 子供を「インライン」に表示するにはどうすればよいですか？ 具体的には、子の幅をその内容によって決定し、親の幅に拡張しないようにするにはどうすればよいですか？ 私が試したこと： 子供をに設定しましたdisplay: inline-flexが、それでも全幅を占有しました。他のすべての表示プロパティも試しましたが、何の効果もありませんでした。 例： .container { background: red; height: 200px; flex-direction: column; padding: 10px; display: flex; } a { display: inline-flex; padding: 10px 40px; background: pink; } <div class="container"> <a href="#">Test</a> </div> コードスニペットを実行する結果を非表示スニペットを展開 http://codepen.io/donpinkus/pen/YGRxRY

154 html  css  flexbox 

私はGoogle PageSpeedのインサイトを使用してサイトのパフォーマンスを試し、改善してきましたが、これまでのところ非常に成功していることが証明されています。スクリプトの延期などはうまく機能しまし.ready()た。ページが完全に読み込まれるまでスクリプトを延期する社内バージョンのjQueryがすでにあったため、その特定の関数をインライン化し、完全なスクリプトをページの最後に移動するだけで済みました。それはうまくいきました。 しかし、チェックリストに残っている黄色い点が1つ残っていることに気づきました。「スクロールせずに見えるコンテンツのレンダリングをブロックするCSSを排除する」。 CSSの設定方法は_.css、一般にページ構造に適用されるスタイルを含む、またはサイト全体で1つか2つ以上の場所で使用されるスタイルを含む1つのグローバルファイルを持つことです。ほとんどのページは、（例えば、関連するCSSファイルを持っparty.phpているparty.cssその特定のページへのスタイルの特定を含みます）。すべてのCSSファイルは無期限にキャッシュされます。ファイル/t=FILEMTIMEが変更されたときにファイルが確実に更新されるようにするために、ファイル名に追加します（後で.htaccessで削除します）。 とにかく、Googleはスクロールせずに見える範囲のコンテンツに必要な重要なスタイルをインライン化することをお勧めします。問題は...まあ、このスクリーンショットを見てください：http : //prntscr.com/1qt49e ご覧のとおり... コンテンツはすべてスクロールせずに見える範囲にあります。特に多くのページをロードする必要があるゲームでは、人々はスクロールを嫌います。そこで、私は1つの画面に収まるようにサイトを設計しました（十分な解像度がある場合）。つまり、すべてのスタイルがスクロールせずに見えるコンテンツに適用されます。それで...解決策はありますか？それとも、ほぼ完璧なスコアに黄色のマークが付いたままですか？

153 css  pagespeed 

HTMLを使用して一部のテキストを太字にしようとしていますが、機能させるのに苦労しています。 これが私が試していることです： Some <bold>text</bold> that I want emboldened. 誰かが私が間違っていることを教えてもらえますか？

153 css  html 

入力フィールドのプレースホルダーの配置をHTMLフォームの中央に配置するにはどうすればよいですか？ 次のコードを使用していますが、機能しません。 CSS-> input.placeholder { text-align: center; } .emailField { top:413px; right:290px; width: 355px; height: 30px; position: absolute; border: none; font-size: 17; text-align: center; } HTML-> <form action="" method="POST"> <input type="text" class="emailField" placeholder="support@socialpic.org" style="text-align: center" name="email" /> <!<input type="submit" value="submit" /> </form>

153 html  css 

どっちがいいの？.hide()は書き出すよりも速いです.css("display", "none")が、違いは何ですか？また、どちらも実際にHTML要素に対して何をしているのですか？

153 javascript  jquery  html  css  show-hide 

なぜdisplay:block;width:auto;私のテキスト入力にdiv要素のように動作し、コンテナの幅を埋めていませんか？ divは自動幅のブロック要素にすぎないという印象を受けました。次のコードでは、divと入力が同じ寸法であってはなりませんか？ 幅を満たす入力を取得するにはどうすればよいですか？入力にパディングとボーダーがあるため、100％の幅は機能しません（最終的な幅は1ピクセル+ 5ピクセル+ 100％+ 5ピクセル+ 1ピクセルになります）。固定幅はオプションではなく、もっと柔軟なものを探しています。 回避策に直接回答することをお勧めします。これはCSSの癖のようであり、理解すると後で役立つ場合があります。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>width:auto</title> <style> div, input { border: 1px solid red; height: 5px; padding: 5px; } input, form { display: block; width: auto; } </style> </head> <body> <div></div> <form> <input type="text" name="foo" /> </form> </body> …

153 html  css 

私はフラッシュやphpを使用していません-シンプルなHTMLレイアウトにカスタムフォントを追加するように求められました。「KGジューンバグ」 ローカルでダウンロードしました-これを達成するための簡単なCSSトリックはありますか？

153 html  css  fonts  webfonts 

CSSでは、どうすればこのようなことができます： width: 100% - 100px; これはかなりシンプルだと思いますが、それを示す例を見つけるのは少し難しいです。

153 html  css 

TL; DR：table-layout: fixed CSSグリッドのようなものはありますか？ 私は、月を表す4x3の大きなグリッドと、日を表す7x6のグリッドがネストされた年表示のカレンダーを作成しようとしました。 カレンダーはページを埋める必要があるため、年グリッドコンテナーの幅と高さはそれぞれ100％になります。 .year-grid { width: 100%; height: 100%; display: grid; grid-template: repeat(3, 1fr) / repeat(4, 1fr); } .month-grid { display: grid; grid-template: repeat(6, 1fr) / repeat(7, 1fr); } これが実際の例です：https : //codepen.io/loilo/full/ryXLpO/ 簡単にするために、そのペンでは毎月31日あり、月曜日から始まります。 また、問題を示すために、途方もなく小さいフォントサイズを選択しました。 グリッドアイテム（=日のセル）は、ページ上に数百個あるため、かなり凝縮されています。そして、日番号のラベルが大きくなりすぎると（左上のボタンを使用してペンのフォントサイズを自由に試してみてください）、グリッドのサイズが大きくなり、ページの本文サイズを超えます。 この動作を防ぐ方法はありますか？ 私は最初に年グリッドの幅と高さを100％と宣言したので、それがおそらく最初のポイントですが、そのニーズに合うグリッド関連のCSSプロパティを見つけることができませんでした。 免責事項： CSSグリッドレイアウトを使用せずに、そのカレンダーのスタイルを設定する簡単な方法があることを知っています。ただし、この質問は、具体的な例を解くというよりは、トピックに関する一般的な知識に関するものです。

153 css  grid-layout  css-grid 

要素がオーバーフローしたかどうかを検出する最も簡単な方法は何ですか？ 私の使用例は、特定のコンテンツボックスの高さを300pxに制限することです。内部のコンテンツがそれよりも高い場合は、オーバーフローで切り捨てます。しかし、オーバーフローしている場合は「詳細」ボタンを表示したいが、そうでない場合はそのボタンを表示したくない。 オーバーフローを検出する簡単な方法はありますか、それともより優れた方法はありますか？

153 javascript  css  overflow