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

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

2

特定の画面サイズを下回った場合に特定のスタイルを適用したい

解決済みとのことで、参考までに。 特定の画面サイズを下回った場合に、テキストの部分を画面幅いっぱいに広げたい 逆に考えて、画面幅いっぱいに広げておき、特定の画面サイズを上回った場合には幅を制限すればいいのではないでしょうか。 具体的には、 max-widthプロパティで表現できそうな気がします。
sayuri's user avatar
  • 4.3万
2

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

一時期タイトルがuserscriptになっていましたが、もっと本質的にはuser cssで実現できる気がします。何にせよ、実現方法は質問者さんの好みで選べばいいかなと。 …
sayuri's user avatar
  • 4.3万
0

opacityアニメーションが背景にかからない問題

背景にopacity加工がかからず透明にならない 「透明になる」とはどのような状態を期待されているのでしょうか? 質問コードはbody要素を透明に操作していますが、透明になった結果何が見えることを期待していますか? Webブラウザーの裏側にいるデスクトップ背景が表示されることを期待されているのでしょうか? 当然ながらそのようなことはできません。 質問のコードをそのままに、操作対象をdiv要素と …
sayuri's user avatar
  • 4.3万
0

サイトを丸ごとダウンロードしたい

wgetはJavaScriptを実行しません。JavaScriptで生成されるコンテンツ(によって参照される画像など)はwgetにとって知ることができないため、当然ダウンロードもされません。 参考までにWebブラウザーの設定でJavaScriptを無効化してみることで、wgetから見える世界を確認することができます。
sayuri's user avatar
  • 4.3万
4
承認済み

兄弟要素がない場合、CSSかJavascriptで指定要素を非表示にできますか?

:has()疑似クラスで条件付けできます。 +次兄弟結合子で直後の要素について指定できます。 :not()疑似クラスで条件を否定できます。 これらを組み合わせることで「直後にsection要素が登場しないh2要素」という条件付けされたスタイル定義が可能です。 h2:not(:has(+ section)) { display: none; } <main> <h2>あ</h2 …
sayuri's user avatar
  • 4.3万
0

ボタンのhoverが効かない

hover以前にスタイルが何も適用できていないのでは? 原因はhtmlが間違っています。“”(全角)ではなく""(半角)を使う必要があります。 .cart { display: block; background-color: #000; padding: 1rem 3rem; } .cart a { color: #fff; font-size: 1.6rem; …
sayuri's user avatar
  • 4.3万
2
承認済み

Bootstrapでhover時に他のアイコンへ変えたい

.bi-person:hover::before { content: '\F4DA'; } .bi-bag:hover::before { content: '\F174'; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css
sayuri's user avatar
  • 4.3万
2
承認済み

Bootstrapでhover時に他のアイコンに変えたい

加えて設定しているCSSセレクタも間違っています。まず、bi-i-circle(アイ)ではなくbi-1-circle(イチ)です。更に::before疑似要素のcontentスタイルを変更する必要があります。 … .header-icon .bi-1-circle:hover::before { content: '\F796'; } <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> <div class="header-icon"> …
sayuri's user avatar
  • 4.3万
2
承認済み

絞り込み検索後の要素間の隙間を無くしたい

「隙間を無くす」という言葉の意味をhtml + cssに落とし込む際にどう考えるかです。例えば高さをゼロ(height: 0;)にすれば見かけ上の隙間はなくなります。 … また既存のバージョンでもlayout.css.has-selector.enabledフラグを有効化することで対応します。このフラグはNightlyビルドやBetaビルドでは既に有効化済みです。 …
sayuri's user avatar
  • 4.3万
1
承認済み

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

:has()疑似クラスを使うとCSSセレクターに条件を設定することができます。:checked疑似クラスはチェックボックスやラジオボタンだけでなく、現在選択されているoption要素にも適用されます。 記述としては冗長になってしまいますが、JavaScriptと違って静的に定義できるところが利点です。 …
sayuri's user avatar
  • 4.3万
1

javascriptで同じ処理をまとめる方法

うまくやれば、visibilityの制御はJavaScript不要のCSSだけで実現できる場合もあります、という例。 …
sayuri's user avatar
  • 4.3万
5
承認済み

PC版Safariにおいて背景画像が表示されない

/img/' + prj + '.png)'}); break; } とコードを減らしたり、JavaScriptからは直接スタイルの操作はせず、CSSにあらかじめクラスを定義しておくことでJavaScriptからはクラス操作だけに留めた方がミスを抑えられます。 時代が変わってCSSだけで表現できるようになりつつあるのでご参考までに。 … CSSセレクタの:has()を使うことで条件付きでスタイルを適用できます。:has()はほとんどのブラウザーが対応しており、残るFirefoxも上半期に対応予定だそうです。 JavaScriptによるロジックでなく、CSSによる状態として定義できる点は大きいです。背景画像は用意できないので、背景色で実装例を。 …
sayuri's user avatar
  • 4.3万
3

Web開発のポートフォリオ作成手順と学習内容について

ポートフォリオが 自己アピールや商品アピールなどのために、主に実績をまとめた資料のこと。特に作家などが就職活動や自己の能力紹介などのために、作品集をまとめたものを指す。 の意味なら、SQLやAWSの知識は必要ありません。既にSQLやAWSの知識を持っているならば、それを紹介すればいいと思います。
sayuri's user avatar
  • 4.3万
2
承認済み

あるセレクタの直下かつ先頭というCSSセレクタはありますか?

CSSセレクタでは、ElementやAttrは扱えますが、それ以外のNodeを扱うものは用意されていません。 ここで質問の例において、<span> Elementと兄弟になっているテキストの部分はTextNodeと呼ばれ、ElementでもAttrでもありません。 このため、CSSセレクタではTextNodeの存在・不存在どちらも表現することはできないと思われます。 …
sayuri's user avatar
  • 4.3万
3
承認済み

表示されているフォントを知る方法はありますか?

Elementsタブを開き、右側のComputedタブを開くと、一番下にRendered Fontsが記載されています。
sayuri's user avatar
  • 4.3万

15 30 50 件 / ページ