Skip to main content
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
除外 -[タグ]
-リンゴ
高度な検索の詳細については、ヘルプ ページをご覧ください
でタグ付けされた検索結果
検索オプション answers only not deleted user 3475

CSS(Cascading Style Sheets)とは、HTMLやXMLをどのように装飾するかを規定する仕様。従来のHTMLを、「構造」と「体裁」を分離するために提唱された。CSSでは、各メディアに合わせて表示を変更することが出来るほか、デフォルトの状態から複数のプロパティを上書きしていくことも可能である。

0

htmlのdivとtextのサイズについての質問です

CSSピクセルと物理ピクセルが一致しない環境で、物理ピクセルでのサイズが表示されているようです。Firefoxだと問題ありません。 …
int32_t's user avatar
  • 8,734
1
承認済み

画像をクリックしたら表示されるモーダルウィンドウを実装したい

モーダルダイアログには <dialog> を使う 同じような役割の要素が複数ある場合、id属性は付けずに、同一のclassを与える 同じ処理のイベントリスナを複数の要素に付けるのは面倒なので、document や window にイベントリスナを登録する 画像とダイアログの関連付けは、下の例のように DOM の相対位置を利用したり、data-* 属性を利用したり。 document.a …
int32_t's user avatar
  • 8,734
0
承認済み

cssのdisplay:gridで文字がはみ出てしまう

.line.vertical に vertical-align: top; を追加、でしょうか。 .container { height: 100px; line-height: 2; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: max-content; …
int32_t's user avatar
  • 8,734
0

YouTubeのPremium勧誘ポップアップを消す方法

どうしても既存のルールセットを動的に変更したいなら、document.styleSheets を利用する方法しかないと思われます。 オリジンの異なるスタイルシートの場合は、cssRulesプロパティなどが利用できないので既存のルールセットの書き換えは不可能です。その場合は、同一オリジンのスタイルシートを用意しておき、変更したい内容で上書きするようなルールセットを insertRule() で追加す …
int32_t's user avatar
  • 8,734
0

スマホ(iOS/Android)で見る場合にポートレート表示(縦表示)固定にするWebサイト側の設定方法

Screen Orientation API の lock() で可能なようです。ただし、Chromium 系のブラウザでしか使えないようですね。
int32_t's user avatar
  • 8,734
0
承認済み

overflowとhoverの使い方

2w × h ピクセルのコンテンツを N 個用意します。 参考サイトでは左半分に画像、右半分にテキストが入っています。 それぞれを w × h ピクセルのボックスで囲み、overflow: hidden を指定して右半分を隠します。 そのボックスを横並びに配置します。 JavaScript で、ポインタが触れたボックスだけを 2w の幅に広げます コンテンツの右半分を display: non …
int32_t's user avatar
  • 8,734
2
承認済み

フォームのラベルをinputタグの上に表示させるアニメーションを作りたいですがラベルの非表示の切り替え方がわかりません

1つはフォーカスしていないときでもラベルが非表示になっていないことです。 JavaScript コードで <label> に active クラスを付け外ししているので、「.active があるときは表示、ないときは非表示」というスタイルを足しましょう。 2つはラベルが2つありますが、2つとも同じ位置に行ってしまうことです。 現在のコードではどちらの <label> も position: …
int32_t's user avatar
  • 8,734
4
承認済み

<div width="100%"></div>内で、できるだけ大きくSVG表示したい時のviewBox属性の設定は?

HTMLページ中での大きさを指定するのは <img> と大体同じで、width 属性、height 属性、width CSS プロパティ、height CSS プロパティなどです。 viewBox を適切に指定して、<svg> に width や height などを指定しなければ使える広さいっぱいに広がると思います。 …
int32_t's user avatar
  • 8,734
1

select内に入れるとdata属性が効かないのでしょうか?

多くのブラウザでは、メニュー <select> 内の <option> では click イベントが発生しません。「<option> はページに表示されているわけではなく、 <select>にデータを与えているだけ」という扱いになるようです。<option> に対するスタイルシートもほとんど無効になります。 <select> の change イベントなどで変更を検知するように変更する必要がありま …
int32_t's user avatar
  • 8,734
0

flexが効かない

HTMLでは class="global-nav_items"、CSS では .global-nav_item (sがない)となっています。 ブラウザの開発者ツールで .nav-list の要素を調べると display: flex が適用されていないことが確認できます。 …
int32_t's user avatar
  • 8,734
4
承認済み

複数行のテキスト:positionで場所固定すると、全行にあった下線が消えてしまう

ですから、文字に下線が付いているのではなくて、CSS box の下の方に背景画像としてグラデーションが描かれています。display: inline の場合は改行が入ると CSS box が複数に別れて、それぞれの CSS box に背景画像が描画されます。 position: absolute を付けると、display: inline は無効になってブロック扱いになります。 … 解決策としてはHTMLを変更するか、CSS で(グラデーションではなく)下線を引くといいかもしれません。 …
int32_t's user avatar
  • 8,734
2
承認済み

正円の中でテキストを折り返し表示する場合、正円の中から外へはみ出さないテキスト文字数のカウントの仕方は?

「1文字のフォントサイズ」と「テキスト文字数」が分かれば、そこから外へはみ出さない正円サイズを算出できるかも 厳密に求めるなら、おそらく「円のサイズを仮決めしてから実際に文字を配置して足りるかどうかチェック」で二分探索する必要がある気がします。 簡単にするなら、「文字が占める予想面積の正方形が入る正円よりちょっと大きめ」ぐらいでいいんじゃないでしょうか。Math.sqrt(行の高さ * フォン …
int32_t's user avatar
  • 8,734
3
承認済み

テキストを囲うdiv枠を、文字の長さに応じて常にcssで正円に表示したい

border-radius で円を作るなら、aspect-ratio でボックスが正方形になることを保証して、flexible box でセンタリングするのはいかがでしょうか。 div{ display: inline-flex; /* センタリングのため変更 */ border-radius: 50%; background-color: yellow; aspect- …
int32_t's user avatar
  • 8,734
0
承認済み

background-image が指定された div で、自動的に height を指定する方法を知りたい

縦横比が一定ではないなら、CSSだけではできないと思われます。Image()で対象の画像をロードして naturalWidth naturalHeight から計算して <div> 要素の height プロパティを更新します。 …
int32_t's user avatar
  • 8,734
0
承認済み

縦長画像を含むWebページを印刷すると、画像が2ページ目に出力されてしまう。

https://drafts.csswg.org/css-break/#possible-breaks Some content is not fragmentable, for example many types of replaced elements [CSS2] (such as images or video), scrollable elements, or a single line …
int32_t's user avatar
  • 8,734

15 30 50 件 / ページ