Search type | Search syntax |
---|---|
タグ | [タグ] |
完全一致 | "ここの単語" |
作成者 |
user:1234 user:me (あなたの) |
スコア |
score:3 (3+) score:0 (なし) |
回答 |
answers:3 (3+) answers:0 (なし) isaccepted:yes hasaccepted:no inquestion:1234 |
閲覧数 | views:250 |
コード | code:"if (foo != bar)" |
セクション |
title:リンゴ body:"リンゴ オレンジ" |
URL | url:"*.example.com" |
セーブ | in:saves |
状態 |
closed:yes duplicate:no migrated:no wiki:no |
種類 |
is:question is:answer |
除外 |
-[タグ] -リンゴ |
高度な検索の詳細については、ヘルプ ページをご覧ください。 |
CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。
7
票
承認済み
DOMが書き換わった後ブラウザはどのように再描画していますか?
基本的には、DOM, HTML, CSS の仕様に準拠する範囲で不要な処理をしない、の積み重ねです。
大まかには「DOM変更→スタイル計算→レイアウト→ペイント→コンポジション」というステップがあります。以下のような処理はどのブラウザエンジンもやっているのではないかと思います。 …
5
票
承認済み
クラス名にコロン(:)は許可されているのでしょうか?
https://drafts.csswg.org/selectors/
https://drafts.csswg.org/css-syntax-3/
https://html.spec.whatwg.org/multipage/
https://dom.spec.whatwg.org/ …
4
票
承認済み
各国言語(日本語、英語、ドイツ語、・・・)のOS毎(win、mac)の標準ゴシックフォントを知りたい
実際に欲しいのは CSS 標準の sans-serif フォントファミリーか、system-ui フォントファミリーではないでしょうか。こういった総称フォントファミリー名を指定すると、ブラウザが表示する言語に従って適切なフォントを選んでくれます。 …
4
票
承認済み
複数行のテキスト:positionで場所固定すると、全行にあった下線が消えてしまう
ですから、文字に下線が付いているのではなくて、CSS box の下の方に背景画像としてグラデーションが描かれています。display: inline の場合は改行が入ると CSS box が複数に別れて、それぞれの CSS box に背景画像が描画されます。
position: absolute を付けると、display: inline は無効になってブロック扱いになります。 … 解決策としてはHTMLを変更するか、CSS で(グラデーションではなく)下線を引くといいかもしれません。 …
4
票
承認済み
<div width="100%"></div>内で、できるだけ大きくSVG表示したい時のviewBox属性の設定は?
HTMLページ中での大きさを指定するのは <img> と大体同じで、width 属性、height 属性、width CSS プロパティ、height CSS プロパティなどです。
viewBox を適切に指定して、<svg> に width や height などを指定しなければ使える広さいっぱいに広がると思います。 …
3
票
承認済み
CSS のwidth定義(%指定)について、親要素・兄弟要素との関係をおさらいしたい
テーブルセル幅をパーセント指定したい場合は、table-layout: fixed の指定とともに、width を指定する必要があります。そうしないと、セルの幅を計算するための基準となる包含ブロックの幅が定まりません。
例:
table {
table-layout: fixed;
width: 100%;
...
}
3
票
CSSだけでdisplay: noneをかけた要素の大きさを保持したい
CSSのボックスツリーから外れるため、他のプロパティもいっさい効力がなくなります。親のボックスで大きさを確保するしかありません。
visibility: hidden や opacity: 0 で消すのはいかがでしょうか。 …
3
票
inputタグにてplaceholderの文字サイズを小さくした時の、Chromeの挙動がおかしい
Google Chrome はプレースホルダを周辺のベースラインに沿って配置するようなので、おかしな動作とは言い難い感じです。
vertical-align: middle も効かないようなので、
気にしないで放置する
Google Chrome のときだけ position:relative; top:-4px を適用するよう工夫する
でいいと思います。
3
票
承認済み
テキストを囲うdiv枠を、文字の長さに応じて常にcssで正円に表示したい
border-radius で円を作るなら、aspect-ratio でボックスが正方形になることを保証して、flexible box でセンタリングするのはいかがでしょうか。
div{
display: inline-flex; /* センタリングのため変更 */
border-radius: 50%;
background-color: yellow;
aspect- …
2
票
承認済み
テキストエリア内の中央で、画像をbackgroundとして使ってそれを丸形で表示させるには
別解:
clip-pathというCSSプロパティがありますが、clip-path: circle(50px); のように指定するとマッチする要素のものが丸く切り取られて表示されます。ただし、これは背景画像ではなくて要素全体(この場合、<textarea>全体)が切り取られますので、clip-pathを指定するだけでは目的の動作にはなりません。 …
2
票
getimageDataを使ってもローカル環境だと画像が上手く読み込めません
基本的には、ウェブサーバで実行する以外に対処不可能です。
Google Chrome と Opera では、ローカルに保存されたページ同士での情報漏洩対策ですべてのローカルファイルが別オリジンだとみなされます。–allow-file-access-from-files という起動オプションを付ければ他のブラウザと同じ挙動になりますが、ユーザに起動オプションを付けて起動しろというのは現実的ではない …
2
票
flexboxの孫要素にheight:100%が効かない理由はなぜですか
flexboxに限らないのですが、今の状況は
flex-child に height 指定がないので、flex-child の高さは flex-childの子供要素 flex-grandchildren の高さで決まります
flex-grandchildren の高さは、flex-child の高さの100%です
相互依存しているため、高さが決まりません。
flex-child に he …
2
票
プルダウン式ボタンの背景色に、"グラデーション"を設定するには
SELECT要素のポップアップメニュー内でのCSSサポートは各ブラウザ・プラットフォームでまちまちで、
iOS/OSX の Safari ではまったくサポートしていない
Android/OSX の Google Chrome ではまったくサポートしていない
それ以外の Google Chrome では単色のみサポートしていてグラデーションは不可
などなどです。 …
2
票
CSS のwidth定義(%指定)について、親要素・兄弟要素との関係をおさらいしたい
問題を再現できる完全なコードを示すとより回答しやすいと思います。
input要素のマージンだと思われます。マージンは親要素の値を継承しません。
完全なスタイルがわからないので推測ですが、box-sizing プロパティはデフォルトで content-box なため、width プロパティの値はボーダーとパディングを除いた幅を指定することになります。そのため、td と input の width …
2
票
承認済み
読み込んだ画像の範囲指定したところを黒く塗りつぶしたい
<canvas> で実装するのがベストかと思います。コードは大きくなりそうなので、方針だけ書きます。
指定された画像を <canvas> に描画する
範囲指定のUIを実装する。clickイベントハンドラで座標を記録して線を描くなど。
範囲指定がおわったら、
指定領域を黒く塗る
toBlob()で画像をエンコードする。
エンコードが終わったら、[保存]ボタンを <a download>で作り …