HTML/CSS のどんな質問にも必ず優しく答えるスレ 33

2025/01/24(金) 14:07:40.93ID:???
ここは初心者からベテランまで、全ての人を対象に必ず優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
Haml、Sass/Scss、LESS、Stylus、PostCSSなどの関連技術もOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。

回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
HTML/CSS のどんな質問に必ず優しく答えるスレ 32
https://mevius.5ch.net/test/read.cgi/hp/1519547237/

■関連スレ
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.net/test/read.cgi/hp/1626528070/

■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html

■CSS
Selectors Level 4 日本語訳
https://triple-underscore.github.io/selectors4-ja.html
2025/01/24(金) 19:00:25.82ID:???
■Haml
http://haml.info/

■Sass / Scss
https://sass-lang.com/

■LESS
http://lesscss.org/

■Stylus
http://stylus-lang.com/

■PostCSS
http://postcss.org/
2025/01/24(金) 23:38:52.80ID:???
┌─────┐
│ いちもつ ♪│
└∩───∩┘
　 ヽ(`･ω･´)ﾉ
2025/01/25(土) 13:05:08.62ID:???
ねぇ、教えてよ。
ヘッダー全体を opacity: 0.9 で背景を半透明にしたいんだけど、ヘッダー内にある画像も半透明になっちゃう。

.header {
opacity: 0.9;
}

.header img {
opacity: unset;
}

これは効かない。
どうしたらいい？
2025/01/25(土) 14:30:57.63ID:???
したいことは「ヘッダーを半透明にしたい」ではなく「ヘッダーの背景を半透明にしたい」ということでいいかな

やりかたは背景しだいなんだけど、ぱっと思いつくのは
背景が色→rgbaで半透明の色を指定する
背景が画像→擬似要素にしてopacityを設定する
あたりかな

opacity は子要素含めて作用するので、子要素に別の値を指定すると親からくる値にさらに掛け算するような結果になる
unsetでここだけリセット、みたいのはできないと思われる
2025/01/30(木) 23:36:58.45ID:???
凄く初歩的な質問かもしれませんが、<span>がすでに定義してある時に別のフォントデザインも反映したい時の使い分けはどのようにすればいいでしょうか？

例えば私のブログの<span>ですと吹き出しようなデザインになるようにしてあります

ですが他の箇所では吹き出しデザインを出したくなくてただ色を変えたいだけなのです
2025/01/31(金) 00:33:21.86ID:???
セレクターで対象となる要素を選択してスタイルを指定してやればいい
以下AIより

CSSのセレクターは、HTML要素を選択してスタイルを適用するためのパターンです。以下に、一般的なCSSセレクターの種類をいくつか紹介します。

1. **要素セレクター**:
- 特定のHTML要素を選択します。
- 例: `p { color: blue; }` はすべての `<p>` 要素の文字色を青にします。

2. **クラスセレクター**:
- 特定のクラスを持つ要素を選択します。クラス名の前にドット（`.`）を付けます。
- 例: `.example { font-size: 20px; }` は `class="example"` を持つすべての要素に適用されます。

3. **IDセレクター**:
- 特定のIDを持つ要素を選択します。ID名の前にシャープ（`#`）を付けます。
- 例: `#header { background-color: gray; }` は `id="header"` を持つ要素に適用されます。
2025/01/31(金) 00:33:41.61ID:???
4. **属性セレクター**:
- 特定の属性を持つ要素を選択します。
- 例: `[type="text"] { border: 1px solid black; }` は `type` 属性が `text` のすべての要素に適用されます。

5. **子セレクター**:
- 特定の親要素の直下にある子要素を選択します。親要素と子要素の間に `>` を置きます。
- 例: `ul > li { list-style-type: none; }` は `<ul>` の直下にある `<li>` 要素に適用されます。

6. **隣接兄弟セレクター**:
- 特定の要素の直後にある兄弟要素を選択します。要素の間に `+` を置きます。
- 例: `h1 + p { margin-top: 0; }` は `<h1>` の直後にある `<p>` 要素に適用されます。

7. **一般兄弟セレクター**:
- 特定の要素の後にあるすべての兄弟要素を選択します。要素の間に `~` を置きます。
- 例: `h1 ~ p { color: red; }` は `<h1>` の後にあるすべての `<p>` 要素に適用されます。

8. **擬似クラスセレクター**:
- 特定の状態にある要素を選択します。コロン（`:`）を使用します。
- 例: `a:hover { text-decoration: underline; }` はマウスオーバー時のリンクに適用されます。

9. **擬似要素セレクター**:
- 要素の特定の部分を選択します。二重コロン（`::`）を使用します。
- 例: `p::first-line { font-weight: bold; }` は `<p>` 要素の最初の行に適用されます。

これらのセレクターを組み合わせることで、より具体的なスタイルを適用することができます。CSSセレクターを使いこなすことで、効率的にスタイルを管理できるようになります。
2025/01/31(金) 00:37:13.65ID:???
更に、AIに「特定のspan要素にスタイルを適用するにはどうすればいい？」とか聞けば
いくつかの方法を、もっと具体的に教えてくれる
2025/01/31(金) 01:13:48.18ID:???
ありがとうございます
しかし予想してた解よりもだいぶ複雑であった為に読解に難儀している次第であります
撤退も選択肢のうちの一つとして確かなアピールを示しておりそこにカーソルを合わせるのではないかと自分でもヒヤヒヤしています
2025/01/31(金) 01:28:24.26ID:???
<span>や<div>はあちこちで使うから特定用途専用の設計にしない
<span class="fukidasi"><span class="iro">とかちゃんと付けてあげて
<span class="hukidasi iro">とかもできるから
2025/01/31(金) 01:31:08.27ID:???
ブログってことなんで、どこまで自分でHTMLが書けるかわからないんだけど
そういう「ここにはこのスタイル、あそこにはあのスタイル」みたいな使い分けをするためなら、タグ(spanとか)の使い分けではなく、クラス(タグ内にclass="クラス名")によるスタイルの適用が一般的
2025/01/31(金) 01:34:10.40ID:???
>>10
【例】クラスセレクター： highlightという特定のクラス名が付与されたspan要素にCSSでスタイルを適用

HTML
<span class="highlight">このテキストはハイライトされます。</span>

CSS
.highlight {
background-color: yellow; /* 背景色を黄色に */
font-weight: bold; /* 太字に */
}
2025/01/31(金) 02:02:47.83ID:???
>>11,12,13様
ありがとうございます
まさにそういう答えがほしかったのです
つまりクラスを使えばいくらでもスタイルを作れるということですよね？


ちなみに<span class="ここの部分">
ここの部分のアルファベットは規則はありますか？
極端な話<span class="aaaaa">とかでもいいのでしょうか？

Highlightに関しても名前で分かりやすくするためにそのスペルを使っているだけで、
別にabcというスペルでもいいわけですよね？
2025/01/31(金) 02:22:02.47ID:???
クラス名は識別子でしかないから「:」とか「.」なんかのcss内で使われる記号を含まなければなんでもいいよ
無論、わかりやすいに越したことはないが
今後も修正するのであれば特に
2025/01/31(金) 03:04:43.36ID:???
>>14
>>9にあるようにAIに質問した答えのうちの1つの例が>>13だよ
2025/01/31(金) 03:05:54.42ID:???
CSSのクラス名で使ってはいけない文字や書き方について、以下のポイントを挙げます。

### 使用してはいけない文字
1. **数字で始まる**: クラス名は数字で始めることができません。例: `1class`（無効）、`class1`（有効）。

2. **特殊文字**: クラス名の先頭には、アルファベット（a-z, A-Z）またはアンダースコア（`_`）が必要です。以下の特殊文字は先頭に使用できません。
- ハイフン（`-`）
- アットマーク（`@`）
- シャープ（`#`）
- パーセント（`%`）
- ドル記号（`$`）
- アンパサンド（`&`）
- スラッシュ（`/`）
- バックスラッシュ（`\`）
- スペース（空白）

3. **空白**: クラス名に空白を含めることはできません。空白を含む場合は、ハイフンやアンダースコアで区切る必要があります。
2025/01/31(金) 03:06:30.81ID:???
### 書き方の推奨事項

1. **大文字の使用**: CSSではクラス名は大文字と小文字を区別しますが、一般的には小文字を使用することが推奨されます。例: `myClass`（可読性はあるが、一般的には`my-class`が好まれる）。

2. **予約語の使用**: CSSの予約語（例: `important`）や、特定のフレームワークやライブラリで使用されるクラス名（例: `active`, `disabled`など）を避けることが推奨されます。

3. **意味のある名前**: クラス名はその要素の役割やスタイルを示す意味のある名前にすることが重要です。

これらのルールや推奨事項に従うことで、CSSのクラス名が正しく解釈され、スタイルが適用されるようになります。
新着レスの表示
レスを投稿する

5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。
ニューススポーツなんでも実況