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

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

8
フォント（@ font-face）がすでにロードされているかどうかを知る方法は？
Font-Awesomeを使用していますが、フォントファイルがロードされていない間、アイコンはで表示されます。 したがって、display:noneファイルがロードされていないときにこれらのアイコンを表示したいと思います。 @font-face { font-family: "FontAwesome"; src: url('../font/fontawesome-webfont.eot'); src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg'); font-weight: normal; font-style: normal; } これらのファイルがロードされ、最終的にアイコンを表示できるようになったことをどのように確認できますか？ 編集： フォントはページ全体の前にロードされる可能性があるため、ページがロードされるとき（オンロード）は話していません。
11
CSS3 box-shadow：insetは片面または両面しか実行できませんか？ボーダートップのように？
css3でのサイド固有の内部シャドウのサポートについて疑問に思っています。 私はこれがサポートされているブラウザでうまく機能することを知っています。 div { box-shadow:inset 0px 1px 5px black; } 私は次のようなことを達成する方法があるかどうかについて興味があります： div { box-shadow-top:inset 0px 1px 5px black; }
80 css 
10
CSSをjQueryダイアログボタンに適用する
そのため、現在、[保存]と[閉じる]の2つのボタンがあるjQueryダイアログがあります。以下のコードを使用してダイアログを作成します。 $dialogDiv.dialog({ autoOpen: false, modal: true, width: 600, resizable: false, buttons: { Cancel: function() { // Cancel code here }, 'Save': function() { // Save code here } }, close: function() { // Close code here (incidentally, same as Cancel code) } }); ただし、このコードを使用すると、両方のボタンが同じ色になります。[キャンセル]ボタンを[保存]とは異なる色にしたいのですが。いくつかの組み込みのjQueryオプションを使用してこれを行う方法はありますか？私はドキュメントからあまり助けを得ませんでした。 作成している[キャンセル]ボタンは事前定義されたタイプですが、[保存]は自分で定義していることに注意してください。それが問題に関係があるかどうかはわかりません。 どんな助けでもいただければ幸いです。ありがとう。 更新：コンセンサスは、ここを移動するための2つの道があるということでした： 以下のようなFirefoxのプラグインを使用してHTMLを点検放火犯、およびjQueryのボタンに適用されていることをCSSクラスを注意し、それらを上書きで刺しを取ります。注：私のHTMLでは、両方のボタンがまったく同じCSSクラスを使用し、一意のIDが使用されていなかったため、このオプションは使用できませんでした。 ダイアログを開いたときにjQueryセレクターを使用して、必要なボタンをキャッチし、CSSクラスを追加します。 2番目のオプションを選択し、jQuery …
2
CSSでメディアクエリの順序が重要なのはなぜですか？
最近、私はより応答性の高いサイトを設計しており、CSSメディアクエリを頻繁に使用しています。私が気付いたパターンの1つは、メディアクエリが定義される順序が実際に重要であるということです。すべてのブラウザでテストしたわけではなく、Chromeでテストしました。この振る舞いの説明はありますか？サイトが正常に機能せず、それがクエリなのか、クエリが書き込まれる順序なのかわからない場合は、イライラすることがあります。 次に例を示します。 HTML <body> <div class="one"><h1>Welcome to my website</h1></div> <div class="two"><a href="#">Contact us</a></div> </body> CSS： body{ font-size:1em; /* 16px */ } .two{margin-top:2em;} /* Media Queries */ @media (max-width: 480px) { .body{font-size: 0.938em;} } /* iphone */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { body {font-size: 0.938em;} } /*if greater than …
6
Bootstrap4を介して列を注文する
デスクトップとモバイルでさまざまな方法で注文したい3つの列があります。現在、私のグリッドは次のようになっています。 <div class="row"> <div class="col-xs-3 col-md-6"> 1 </div> <div class="col-xs-3 col-md-6"> 2 </div> <div class="col-xs-6 col-md-12"> 3 </div> </div> コードスニペットを実行する結果を非表示スニペットを展開 モバイルビューで、次の出力が必要です。 1-3-2 残念ながら、Bootstrap4の.col-md-push-*and.col-md-pull-*クラスでこれを解決する方法がわかりません。
80 css  bootstrap-4  grid 
7
cssの波状の形
この画像をCSSで再作成しようとしています。 繰り返す必要はありません。これは私が始めたものですが、直線があります： #wave { position: absolute; height: 70px; width: 600px; background: #e0efe3; } <div id="wave"></div> コードスニペットを実行する結果を非表示スニペットを展開
80 css  css-shapes 
4
CSSを使用して不均等にDIVを中央に配置する
フレックスボックスを使用して、DIVを別のDIVの中央に配置しています。必要に応じて画面の中央にポップアップするダイアログウィンドウを考えてみてください。 正常に機能しますが、ダイアログの上下のスペースが完全に等しくなく、ダイアログの上下に残りのスペースの40％と60％があると、見栄えがよくなります。内部のテキストの量によってダイアログの高さが変わるため、注意が必要です。 たとえば、ブラウザの高さが1000ピクセルで、ダイアログウィンドウの高さが400ピクセルの場合、残りの垂直方向のスペース（600ピクセル）をダイアログの上240ピクセル、下360ピクセルにしたいとします。私はJavaScriptでそれを行うことができますが、CSSでいくつかの巧妙な方法があるかどうか知りたいです。#dialogBox DIVに下マージンを追加しようとしましたが、ダイアログの高さがブラウザーの高さに近づくと機能しません。 #dialogBoxPanel { position:absolute; display:flex; align-items:center; justify-content:center; left:0px; top:0px; width:100%; height:100%; } #dialogBox { width:350px; } <div id="dialogBoxPanel"> <div id="dialogBox">Text</div> </div> コードスニペットを実行するHide resultsスニペットを展開
23 html  css  flexbox  centering 
10
同じ背景色を持つ3つのdiv間の奇妙なギャップを削除するにはどうすればよいですか？
私はこの問題にかなり長い間取り組んでいます。この問題は、モバイルデバイス（AndroidおよびiOS）で確認できます。一部のデバイスでは、少しズームインする必要がある場合があります。PCでは、モバイルモードに切り替えるときにChromeブラウザーでこのバグを再現することもできます。以下は、バグを再現するために使用するコードです。 <!DOCTYPE html> <html lang="en"> <head> <style> .top { height: 100px; background-color: #553213; } .middle { height: 100px; background-color: #553213; } .bottom { height: 100px; background-color: #553213; } </style> </head> <body> <div style="width:300px; height: 300px"> <div class="top"></div> <div class="middle"></div> <div class="bottom"></div> </div> </body> </html> コードスニペットを実行する結果を非表示スニペットを展開 期待される結果は、＃553213色で満たされるdivになります。ただし、一部のモバイルデバイスでは、これらの3つのdivの間に追加の線（またはギャップ）が表示されます。 Om my iPhone 私のPCでは、モバイルモードでChromeブラウザを使用しています …
23 html  css 
7
以前に設定した境界線の色を削除します
function validate() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; if (username == "") { document.getElementById("message").innerHTML = "USERNAME CANNOT BE EMPTY"; document.getElementById("username").style.borderColor = "red"; return false; } if (password == "") { document.getElementById("message").innerHTML = "PASSWORD CANNOT BE EMPTY"; document.getElementById("password").style.borderColor = "red"; return false; } } #username:focus { background-color: yellow; …
20 javascript  html  css 
8
2つのHTMLページが同一に見えることをどのように証明できますか？
たとえば、私はこれを持っています： <pre> sun<br/>     mercury <br/>     venus <br/>         earth <br/>         mars <br/>             jupiter <br/>     saturn <br/> </pre> コードスニペットを実行する結果を非表示スニペットを展開 この： <div style="font-family:monospace"> <div style="text-indent: 0">sun</div> <br/> <div style="text-indent: 4ch">mercury</div> <br/> <div style="text-indent: 4ch">venus</div> <br/> <div style="text-indent: 8ch">earth</div> <br/> <div style="text-indent: 8ch">mars</div> <br/> <div style="text-indent: 12ch">jupiter</div> <br/> <div style="text-indent: 4ch">saturn</div> <br/> </div> コードスニペットを実行する結果を非表示スニペットを展開 …
19 html  css  acid3 
5
垂直にスクロールするときに水平スクロールを許可しない（およびその逆）
overflow-xとにoverflow-y設定したリストがありますauto。さらに、モメンタムスクロールを設定したので、を使用してタッチスクロールがモバイルでうまく機能しwebkit-overflow-scrolling: trueます。 ただし、問題は、垂直にスクロールするときに水平スクロールを無効にする方法がわからないことです。左上または右上にスワイプするとテーブルが斜めにスクロールするため、ユーザーエクスペリエンスが非常に低下します。ユーザーが垂直方向にスクロールしているときは、ユーザーが垂直方向のスクロールを停止するまで、水平方向のスクロールは絶対にしたくない。 私は以下を試しました： JS： offsetX: number; offsetY: number; isScrollingHorizontally = false; isScrollingVertically = false; //Detect the scrolling events ngOnInit() { this.scrollListener = this.renderer.listen( this.taskRows.nativeElement, 'scroll', evt => { this.didScroll(); } ); fromEvent(this.taskRows.nativeElement, 'scroll') .pipe( debounceTime(100), takeUntil(this.destroy$) ) .subscribe(() => { this.endScroll(); }); } didScroll() { if ((this.taskRows.nativeElement.scrollLeft != this.offsetX) …
10
ラップアラウンドで同じサイズのdivを作成する
上と下に画像とテキストを含むメニューシステムを作成しようとしています。データは動的です。メニューシステムを表示して、各画像が他の画像から等距離になり、水平方向と垂直方向の両方で画像のグリッドに整列するようにしたいと考えています。 問題はテキストです。テキストが画像より長い場合、divは拡大されます。ただし、画像が互いに等間隔に配置されなくなるため、見苦しいギャップが生じます。 これを回避するための最善の方法は、他の各divに大きいdivのサイズを採用させることだと思います。ただし、これをどのように行うかはわかりません。 flex-wrapプロパティを使用してflexboxで試しました。うまく折り返していますが、各画像を等距離で並べる方法を見つけることができませんでした。 これを達成するにはどうすればよいですか？ 私のコードは次のとおりです： #outer { display: flex; } #main { display: flex; justify-content: space-between; flex-wrap: wrap; border: solid black 25px; border-radius: 25px; width: 450px; height: 500px; padding: 20px; } .section { background-color: #ddd; padding: 15px; } .label, .icon { text-align: center; } <div id="outer"> <div id="main"> <div …
17 html  css  flexbox 
2
等間隔の破線の円を作成するにはどうすればよいですか？
CSSで点線の円を作りたかったので、以下の手順で作成しました。 この処理で破線の円を表示することはできましたが、破線の終点と始点の間隔が狭くなり、間隔が均一でなくなりました。 .c { width: 500px; height: 500px; border-width: 15px; border-style: dashed; border-radius: 600px; } <div class="c"></div> コードスニペットを実行する結果を非表示スニペットを展開 ギャップを均一にする方法はありますか？ダッシュ間のギャップも制御できますか？ CSSだけではそれが不可能な場合は、JavaScriptなどを使用することを検討しています。
16 javascript  html  css 
8
Ctrl +クリックを使用して複数のセルを選択する方法
数字の表があります。テーブルのセルをクリックすると、アクティブ状態が切り替わります。1つのセルを選択してcrtlを押し、別のセルを選択すると、1番目と2番目のセルがアクティブになります。それを実装する方法？ codepen https://codepen.io/geeny273/pen/GRJXBQP <div id="grid"> <div class="cell">1</div> <div class="cell">2</div> <div class="cell">3</div> <div class="cell">4</div> <div class="cell">5</div> <div class="cell">6</div> </div> const grid = document.getElementById("grid") grid.onclick = (event) => { event.stopPropagation(); const { className } = event.target; if (className.includes('cell')) { if (className.includes('active')) { event.target.className = 'cell'; } else { event.target.className = 'cell active'; …
16 javascript  html  css 
1
JESTテストのgetComputedStyle（）がChrome / Firefox DevToolsの計算されたスタイルに異なる結果を返すのはなぜですか
material-uiにMyStyledButton基づくカスタムボタン（）を作成しました。 Button import React from "react"; import { Button } from "@material-ui/core"; import { makeStyles } from "@material-ui/styles"; const useStyles = makeStyles({ root: { minWidth: 100 } }); function MyStyledButton(props) { const buttonStyle = useStyles(props); const { children, width, ...others } = props; return ( <Button classes={{ root: buttonStyle.root }} …
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.