4
票
承認済み
兄弟要素がない場合、CSSかJavascriptで指定要素を非表示にできますか?
:has()疑似クラスで条件付けできます。
+次兄弟結合子で直後の要素について指定できます。
:not()疑似クラスで条件を否定できます。
これらを組み合わせることで「直後にsection要素が登場しないh2要素」という条件付けされたスタイル定義が可能です。
h2:not(:has(+ section)) {
display: none;
}
<main>
<...
4
票
承認済み
<div width="100%"></div>内で、できるだけ大きくSVG表示したい時のviewBox属性の設定は?
viewBox は SVG の座標系の中でどの部分を見せるかを指定するもので、静止画ならたいてい固定の値を書きます。デフォルトのサイズや縦横比に影響はありますが、HTMLページ中の表示される大きさを変更するためのものであはりません。
HTMLページ中での大きさを指定するのは <img> と大体同じで、width 属性、height 属性、width CSS プロパティ、height ...
3
票
特定の画面サイズを下回った場合に特定のスタイルを適用したい
レスポンシブの際にテキストの部分を画面幅いっぱいに広げたいのですがうまく広がりません
「レスポンシブの際」を特定のサイズ以下の場合と考えると、まず、以下のメディア クエリーの修正が必要です。
@media (width:896px) {
この場合だと、896px ピッタリの場合のみ定義したスタイルが適用されます。
これを以下のように修正すると、896px ...
3
票
CSS で数字を含めて縦書き表示を実現したい
縦書きにしたい半角数字を<span></span>で囲んでください。
囲った箇所にのみtext-combine-uprightが適用されます。
縦書きの上寄せはtext-align: left;を、右寄せはwidth: 100%;を指定することで実現できます。
テンプレートの例
(問題番号)<br/>
(学習のポイント)<br/>
(問題<...
3
票
承認済み
opacityアニメーションが背景にかからない問題
この回答は、通常不透明な白色とされているキャンバスが、opacity プロパティの変化の過程で透けて表示されない、という問題に対する回答です。もし質問への回答になっていない場合は無視してください。
HTML 文書において、body 要素に設定された background プロパティの計算値は、ルート要素である html 要素へ伝播され、本来の body 要素の background ...
2
票
承認済み
絞り込み検索後の要素間の隙間を無くしたい
「隙間を無くす」という言葉の意味をhtml + cssに落とし込む際にどう考えるかです。例えば高さをゼロ(height: 0;)にすれば見かけ上の隙間はなくなります。
body ul.genre li {
height: 0;
opacity: 0;
}
body:has(select option:checked[data-filter="all"]) ul.genre li,
...
2
票
承認済み
Bootstrapでhover時に他のアイコンへ変えたい
https://ja.stackoverflow.com/a/96867/4236 でも例示しましたが、変えるべきスタイルは content だけで十分です。今回、 background-color まで変えてしまったために黒くなっています。
.bi-person:hover::before {
content: '\F4DA';
}
.bi-bag:hover::before {
...
2
票
承認済み
Bootstrapでhover時に他のアイコンに変えたい
Bootstrap Icons v1.9.1 を使われているようですが、bi-1-circle-fillにはバグがあり、v1.10.0で修正されています。v1.10.0以降を使いましょう。
加えて設定しているCSSセレクタも間違っています。まず、bi-i-circle(アイ)ではなくbi-1-circle(イチ)です。更に::before疑似要素のcontentスタイルを変更する必要があります。
...
2
票
承認済み
フォームのラベルをinputタグの上に表示させるアニメーションを作りたいですがラベルの非表示の切り替え方がわかりません
1つはフォーカスしていないときでもラベルが非表示になっていないことです。
JavaScript コードで <label> に active クラスを付け外ししているので、「.active があるときは表示、ないときは非表示」というスタイルを足しましょう。
2つはラベルが2つありますが、2つとも同じ位置に行ってしまうことです。
現在のコードではどちらの <label> ...
2
票
YouTubeのPremium勧誘ポップアップを消す方法
既存のルールを無理に書き換えなくても
.ytd-popup-container !important {
display: none;
}
というスタイルを挿入してやれば、変更されます。これは一例ですが、厳密には既存のルール定義に対して、詳細度が上回るような定義をするだけです。
一時期タイトルがuserscriptになっていましたが、もっと本質的にはuser cssで実現できる気がします。...
2
票
承認済み
CSS「display:flex;」で、画像の高さを超えるまでは画像の左にテキスト表示、画像の高さを超えた地点から画像の下にもテキスト表示
<svg width=200 height=100 style="float:right;background:red"></svg>
<h3>タイトル</h3>
<p>...
2
票
特定の画面サイズを下回った場合に特定のスタイルを適用したい
解決済みとのことで、参考までに。
特定の画面サイズを下回った場合に、テキストの部分を画面幅いっぱいに広げたい
逆に考えて、画面幅いっぱいに広げておき、特定の画面サイズを上回った場合には幅を制限すればいいのではないでしょうか。
具体的には、 max-widthプロパティで表現できそうな気がします。
1
票
承認済み
画像をクリックしたら表示されるモーダルウィンドウを実装したい
モーダルダイアログには <dialog> を使う
同じような役割の要素が複数ある場合、id属性は付けずに、同一のclassを与える
同じ処理のイベントリスナを複数の要素に付けるのは面倒なので、document や window にイベントリスナを登録する
画像とダイアログの関連付けは、下の例のように DOM の相対位置を利用したり、data-* 属性を利用したり。
...
1
票
dd部分のレイアウトずれの修正方法について教えてください
質問に掲載された HTML, CSS からは、問題を再現できません。
以下のように、「プロモーション企画・制作」、「ソーシャル企画・運営」の項目は、他の項目と同様に行頭位置はそろっています。
1
票
<p>タグの中の各文字列の行頭を揃えたい
行頭を揃えたいのは、以下の青枠の部分でしょうか?
そうであれば、この部分が右寄せになっているので、それを左寄せにすればよいです。
CSS 上のメディアクエリーで指定されていない個所の右寄せを削除します。
.footertext p {
width: 100%;
/* text-align: right; ここを削除 */
}
以下のように行頭がそろいます。
1
票
HTML5とCSS3を使って写真を互い違いに配置した後、横にチャット風メッセージを挿入し、レスポンシブ(スマホ)対応にしたい
デバイスによって Web ページのレイアウトを動的に変える場合、Bootstrap の利用が便利です。
https://getbootstrap.com/
https://getbootstrap.jp/
Bootstrap では、各項目を規則的にレイアウトする場合には、グリッドシステムを使用します。
クラス名に、row, col を指定し、行、列を定義していきます。
https://...
1
票
承認済み
スクロールできるときのhtml要素の高さがブラウザの画面の高さと同じにならないのでなぜですか?
画像のウィンドウのhtml要素の高さはブラウザの画面の高さと同じ高さになる
その認識がそもそも誤解だということです。html 要素は、論理的な html 文書のことであって、ブラウザの画面とは何の関係もありません。
html 要素は、head 要素と body 要素を各 1 個ずつ含むもので、head 要素は文書のメタデータを定義するブロックで、
メモ: <head> ...
1
票
HTML/CSS/JSでまだら模様の波を実装したい
context.fill();を使って単色で塗りつぶしている処理をcontext.drawImage(overImage, 0, 0);で画像を描画する処理に書き換えることで実現できます。
末尾のサンプルコードはリンク先のJavaScriptを書き直した全文です。
変更点をピックアップします。
最初に画像をロードします。
let overImage = new Image();
...
1
票
li タグの要素が重なってしまう
元のコードでは以下の通り margin (=外側の余白) の上下に 0 を指定しているからだとおもいます。
この部分を適切な値に変更してみてください。
(必要箇所のみ引用)
.tab li a{
margin:0 2px;
}
1
票
承認済み
select内に入れるとdata属性が効かないのでしょうか?
:has()疑似クラスを使うとCSSセレクターに条件を設定することができます。:checked疑似クラスはチェックボックスやラジオボタンだけでなく、現在選択されているoption要素にも適用されます。
記述としては冗長になってしまいますが、JavaScriptと違って静的に定義できるところが利点です。
ただし、現時点でFirefoxが正式対応できていないことに注意してください(...
1
票
select内に入れるとdata属性が効かないのでしょうか?
多くのブラウザでは、メニュー <select> 内の <option> では click イベントが発生しません。「<option> はページに表示されているわけではなく、 <select>にデータを与えているだけ」という扱いになるようです。<option> に対するスタイルシートもほとんど無効になります。
<select> ...
1
票
リキッドレイアウトにする際remでのレイアウト
横幅が変更されるとレイアウトが崩れる原因は、おそらく他のスタイルに関連しています。横幅を変更することで、"width" や "padding" の値が相対的に変化し、それがレイアウトに影響を与えている可能性があります。
無効化に投票
関連するタグ
css × 720html × 472
javascript × 205
jquery × 87
twitter-bootstrap × 35
php × 24
sass × 19
ruby-on-rails × 18
wordpress × 17
monaca × 14
font × 11
ios × 10
google-chrome × 9
safari × 9
onsen-ui × 7
vscode × 7
internet-explorer × 7
svg × 7
python × 6
android × 6
ruby × 6
vue.js × 6
reactjs × 5
visual-studio × 4
iphone × 4