-
Web制作
-
HTML/CSS のどんな質問にも必ず優しく答えるスレ 33
-
UPLIFTで広告なしで体験しましょう！快適な閲覧ライフをお約束します！
ここは初心者からベテランまで、全ての人を対象に必ず優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
Haml、Sass/Scss、LESS、Stylus、PostCSSなどの関連技術もOK
分からない人は何回聞いても結構。質問するときはIDを出すためにメール欄を
age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問に必ず優しく答えるスレ 32
https://mevius.5ch.n...d.cgi/hp/1519547237/
■関連スレ
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.n...d.cgi/hp/1626528070/
■HTML
HTML Living Standard 日本語訳
https://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
https://triple-under...o/selectors4-ja.html - コメントを投稿する
-
■Haml
http://haml.info/
■Sass / Scss
https://sass-lang.com/
■LESS
http://lesscss.org/
■Stylus
http://stylus-lang.com/
■PostCSS
http://postcss.org/ -
┌─────┐
│ いちもつ ♪│
└∩───∩┘
ヽ(`･ω･´)ﾉ -
ねぇ、教えてよ。
ヘッダー全体を opacity: 0.9 で背景を半透明にしたいんだけど、ヘッダー内にある画像も半透明になっちゃう。
.header {
opacity: 0.9;
}
.header img {
opacity: unset;
}
これは効かない。
どうしたらいい？ -
したいことは「ヘッダーを半透明にしたい」ではなく「ヘッダーの背景を半透明にしたい」ということでいいかな
やりかたは背景しだいなんだけど、ぱっと思いつくのは
背景が色→rgbaで半透明の色を指定する
背景が画像→擬似要素にしてopacityを設定する
あたりかな
opacity は子要素含めて作用するので、子要素に別の値を指定すると親からくる値にさらに掛け算するような結果になる
unsetでここだけリセット、みたいのはできないと思われる -
凄く初歩的な質問かもしれませんが、<span>がすでに定義してある時に別のフォントデザインも反映したい時の使い分けはどのようにすればいいでしょうか？
例えば私のブログの<span>ですと吹き出しようなデザインになるようにしてあります
ですが他の箇所では吹き出しデザインを出したくなくてただ色を変えたいだけなのです -
セレクターで対象となる要素を選択してスタイルを指定してやればいい
以下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"` を持つ要素に適用されます。 -
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セレクターを使いこなすことで、効率的にスタイルを管理できるようになります。 -
更に、AIに「特定のspan要素にスタイルを適用するにはどうすればいい？」とか聞けば
いくつかの方法を、もっと具体的に教えてくれる -
ありがとうございます
しかし予想してた解よりもだいぶ複雑であった為に読解に難儀している次第であります
撤退も選択肢のうちの一つとして確かなアピールを示しておりそこにカーソルを合わせるのではないかと自分でもヒヤヒヤしています -
<span>や<div>はあちこちで使うから特定用途専用の設計にしない
<span class="fukidasi"><span class="iro">とかちゃんと付けてあげて
<span class="hukidasi iro">とかもできるから -
ブログってことなんで、どこまで自分でHTMLが書けるかわからないんだけど
そういう「ここにはこのスタイル、あそこにはあのスタイル」みたいな使い分けをするためなら、タグ(spanとか)の使い分けではなく、クラス(タグ内にclass="クラス名")によるスタイルの適用が一般的 -
>>10
【例】クラスセレクター： highlightという特定のクラス名が付与されたspan要素にCSSでスタイルを適用
HTML
<span class="highlight">このテキストはハイライトされます。</span>
CSS
.highlight {
background-color: yellow; /* 背景色を黄色に */
font-weight: bold; /* 太字に */
} -
>>11,12,13様
ありがとうございます
まさにそういう答えがほしかったのです
つまりクラスを使えばいくらでもスタイルを作れるということですよね？
ちなみに<span class="ここの部分">
ここの部分のアルファベットは規則はありますか？
極端な話<span class="aaaaa">とかでもいいのでしょうか？
Highlightに関しても名前で分かりやすくするためにそのスペルを使っているだけで、
別にabcというスペルでもいいわけですよね？ -
クラス名は識別子でしかないから「:」とか「.」なんかのcss内で使われる記号を含まなければなんでもいいよ
無論、わかりやすいに越したことはないが
今後も修正するのであれば特に -
CSSのクラス名で使ってはいけない文字や書き方について、以下のポイントを挙げます。
### 使用してはいけない文字
1. **数字で始まる**: クラス名は数字で始めることができません。例: `1class`（無効）、`class1`（有効）。
2. **特殊文字**: クラス名の先頭には、アルファベット（a-z, A-Z）またはアンダースコア（`_`）が必要です。以下の特殊文字は先頭に使用できません。
- ハイフン（`-`）
- アットマーク（`@`）
- シャープ（`#`）
- パーセント（`%`）
- ドル記号（`$`）
- アンパサンド（`&`）
- スラッシュ（`/`）
- バックスラッシュ（`\`）
- スペース（空白）
3. **空白**: クラス名に空白を含めることはできません。空白を含む場合は、ハイフンやアンダースコアで区切る必要があります。 -
### 書き方の推奨事項
1. **大文字の使用**: CSSではクラス名は大文字と小文字を区別しますが、一般的には小文字を使用することが推奨されます。例: `myClass`（可読性はあるが、一般的には`my-class`が好まれる）。
2. **予約語の使用**: CSSの予約語（例: `important`）や、特定のフレームワークやライブラリで使用されるクラス名（例: `active`, `disabled`など）を避けることが推奨されます。
3. **意味のある名前**: クラス名はその要素の役割やスタイルを示す意味のある名前にすることが重要です。
これらのルールや推奨事項に従うことで、CSSのクラス名が正しく解釈され、スタイルが適用されるようになります。 -
>>15,16,17,18,
詳しくアドバイスありがとうございます
クラス名に記号は使わないほうがよいというのはCSSの記述を漫然と眺めているだけの私でもある程度の予想はつきますので大丈夫でございます
しかしクラスも最近「ははーん、そういうものなのか」という手応えを得た程度のレベルなのでそうした注意も真摯に受け止めておきます
ちなみクラスの記述によるデザインの幅を広げる手法は例えば<p>とか<div>にも極論を言えば無限に使えるということですよね？ -
あと>>13でちょっと気になったんですが
cssを記述する時に
.highlight {
background-color: yellow; /* 背景色を黄色に */
font-weight: bold; /* 太字に */
}
これはなぜ.highlightの記述からはじまるのでしょうか？
span.highlight {
background-color: yellow; /* 背景色を黄色に */
font-weight: bold; /* 太字に */
}
↑
これだと失敗しますか？
この方が分かりやすいというか正確な気がするのですが
もしかしてspanをつけないのは<p>や<div>にも流用できるようにするメリットがあるからなのかな？ -
>>19
> ちなみクラスの記述によるデザインの幅を広げる手法は例えば<p>とか<div>にも極論を言えば無限に使えるということですよね？
その通りだが、実際には以下の点を考慮して適切に使用することが重要
●クラスの数に関する実用的な制限
1. パフォーマンス: クラスを無限に使うことは可能だが、あまりにも多くのクラスを使用すると、CSSのパフォーマンスに影響を与える可能性がある。特に、非常に大規模なプロジェクトでは、スタイルの適用や計算に時間がかかることがある。
2. 可読性: クラスを多く使いすぎると、HTMLが複雑になり、可読性が低下する。これにより、他の開発者がコードを理解しにくくなる可能性がある。
3. メンテナンス: 多くのクラスを使用すると、スタイルの管理が難しくなり、変更や修正が煩雑になることがある。 -
ちなみに、クラスは以下のように複数を定義可能
HTML
<div class="box highlight large"></div>
この場合、box、highlight、largeという3つのクラスがこのdiv要素に適用される
CSS
.box {
padding: 20px;
border: 1px solid #ccc;
}
.highlight {
background-color: yellow;
}
.large {
font-size: 2em;
} -
>>21
ありがとうございます
とても大事注意点ですね
>>22
これは便利ですね
それぞれの装飾を個別に定義しておきそれぞれを半角スペースをあけて記述すれば呼び出して適用できるわけですか
これちなみに例えばフォントサイズを複数定義しておきたい場合は
.large01 {
font-size: 1em;
}
.large 02{
font-size: 2em;
}
.large 03{
font-size: 3em;
}
↑
このような感じでも大丈夫なんですかね？
やはり文字の大きさは強調したかったりもしますし複数用意しておきたいですので
あとemじゃなくてもpxで大丈夫ですよね？emってあまり見慣れないので -
>>20
> これはなぜ.highlightの記述からはじまるのでしょうか？
全体の構造等の条件が分かって無いので最低限の書き方をしてるだけ
必要であれば要素セレクター（この場合span）だけでなく親要素や疑似クラス等を組み合わせてもいい
同じクラス名を持つpやdiv等の要素には全て同じスタイルを適用したいという場合は、クラスセレクターのみで指定すれば作業は少なくて済む
要はケースバイケースで使い分けろってこと
以下AIより
クラスセレクターと要素セレクターを組み合わせる理由
1. 特定の要素に限定: 要素セレクターを追加することで、特定の要素にのみスタイルを適用できます。これにより、同じクラス名を持つ他の要素に影響を与えずにスタイルを調整できます。
2. 可読性の向上: CSSの可読性が向上し、どの要素にどのスタイルが適用されるかが明確になります。
3. スタイルの衝突を避ける: 同じクラス名を持つ複数の要素がある場合、要素セレクターを使うことで、意図しないスタイルの適用を防ぐことができます。
したがって、クラスセレクターのみでも機能しますが、要素セレクターを組み合わせることで、より具体的で意図的なスタイルの適用が可能になります。状況に応じて使い分けることが重要です。 -
>>23
そのCSSを
<div class="large01 large02 large03"></div>
って書きたいってこと？それとも
<div class="box highlight large01"></div>
<div class="box highlight large02"></div>
<div class="box highlight large03"></div>
っていう話？
> このような感じでも大丈夫なんですかね？
いずれにしろ、どうなるかは実際にやってみよう
↓コードを検証するのに便利なサイト
https://jsfiddle.net/ -
>>26
完全に誤記ですねw気をつけます -
>>25
色々と教えていただきありがとうございます
spanが被っていてテキストへの装飾をすると予期せぬ箇所のレイアウトへの干渉が起こる問題を教えていただいたクラスを指定するというやり方でうまくいきました
その際に提示されたサイトでテストをして反映される事を確認してから自分のブログへとコピペしましたら成功しました
かなり基本的だろう知識の欠けている私ですが優しくご指南していただきありがとうございました
たぶんこれからも時々質問しにくると思いますのでその際はよろしくお願いいたす！ -
このスレのエスパー達のおかげでこんな私でもレイアウトの改造ができるようになったぜ！
-
Seesaaブログをやっています
とあるサイトを批判する記事を書きました
当然そのサイトへのリンクを記事に貼り付けるのですが、訪問者がリンクをクリックしてもリファラを飛ばないように出来ますか？
記事内容がそのサイトを批判するものなので、向こうがリファラを辿ってこちらの記事を見に来ると、最悪、名誉棄損などで訴えられるかなと思いまして
できればリファラを飛ばさないようにしたいです
どうすればよいでしょうか？ -
rel="noreferrer"じゃなくて？
-
ネット上に公開しておきながら知られたくないなんてダサい
-
>>34
死ね -
bot避けもしないと検索されちゃうんじゃね
-
初心な質問失礼します！
疑似要素で
p::first-letter
というのがありレイアウト的にいいと思ったのですが、これだと<p>で囲った箇所全てに適用されますよね
それを防ぐためにclassがあると思うのですが、この場合はどのように記述すればよいのでしょうか？ -
AIより抜粋
p::first-letter のように、段落全体に適用される疑似要素を特定のクラスに限定して使用する場合は
クラスセレクタを組み合わせて記述します。具体的には、クラス名を段落セレクタの前に追加します。
p.class-name::first-letter {
/* スタイルの定義 */
} -
>>38
ありがとうございます！
普通にクラスを記述する時と同じ感じでやればいいんですね！
あとついでと言ってはなんですが
超初心者な疑問ですいません
p.class-name::first-letter {
/* スタイルの定義 */
}
この記述は
.class-name::first-letter {
/* スタイルの定義 */
}
このようにp(要素？)をとればp以外のhやspanやdivでも使えるというわけですよね？ -
まぁ、https://jsfiddle.net しか教えないなら、そうかもしれんが
便利なサイトを教えた上に、ちゃんと答えも書いてやってるからな -
もうHTMLとjavascript程度ならAIに聞けば解決するのか
-
>>40
ありがとうございますm(_ _)m -
スマホのChatgptはバグがありますね
質問した内容の文章が少し表現の違うものに勝手に書き換えられて表示される -
質問の仕方が下手なだけでは
-
AIは間違いも言うし間違いを指摘すると「はい、確かにそれは間違いですね。正しくは…」ってまた嘘言ってくる
-
スレ違いかもしれんが助けてほしい・・
htmlでメールフォームを作ったんだけどその後のphpが上手くいかない・・
使ってるテキストエディタはsublime textです。
phpコードはhtmlに埋め込んで直接そのまま書くって形でいいのか
それともcssみたいにphp専用ファイルを作ってそこに書いたらいいのか・・助けてくださいorz -
chatGPTに聞くと正解出るよ
-
それで正解出たら苦労してないよ！！
-
今聞いたら、body内に<?phpで書いてくれたよ
-
うまくいかないを具体的に
-
初級の初級なのにChatGPTに聞いてもわからんってどういうことだよ
-
とりあえずOpenAIのo3-miniに「webサイトに設置するためのPHPで動作するメールフォームのサンプル作って」とか聞いてみ
-
答えが「初心者がPHPでメールフォームやお問い合わせフォームに手を出すのはやめましょう、SNS等のDMで代用することをオススメします」
とかだったら好きになっちゃいそう -
>>47
違う
こちらが書いた文章が勝手に別の文言に変わることがある
これはどういう時に起きるかわかったわ
スマホでChatgptのページのショートカットを待ち受け画面に貼ってから待ち受けから起動すると起きやすい -
スレチですがAndroid用の初心者向きのhtml編集アプリでオススメあったら教えてください。
-
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.n...d.cgi/hp/1626528070/ -
オススメのアプリとかって結局、自分が使いやすいと思う物は自分にしか分からないので
人に尋ねるよりも、DL数の多い人気のアプリを上位から順に試すのが一番手っ取り早い -
VScode for Androidとかどうなんだろ使ったことないけど
-
教えてください！！
xサーバー使ってます、ワードプレスでサイトを作ったのですが、公開の仕方がわかりません！
調べていた感じ、fillezillraをつかいアップロードするそうですが、何をどこから持って来ればいいのかわかりません、、、 -
全く状況が分からんのだがスレ違いなので、もうちょっと状況を整理して以下のいずれかでどうぞ
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.n...d.cgi/hp/1626528070/
WordPress（ワードプレス）その28
https://mevius.5ch.n...cgi/blog/1461783816/
WordPressの困った人のスレ 6
https://mevius.5ch.n...d.cgi/hp/1706433486/ -
作ってるアプリにhtmlで簡単な使い方を
ユーザーに知らせる仕組みを組み込むことをやってる
おおまかにDetailsでクループ分けしていって
プログラム側からDetails.OpenとIDへのジャンプをやるような形
で困ったのは、Detailsの中から外部などに遷移した後
戻ってきたときDetailsがすべて閉じてしまってること
たぶん遷移する時点でdetailsの開閉状態を保存して
戻ってきたことを検知して、Detailsの開閉状態を復元すること？
ここに書いてあるよ的なものでもいいので教えてください -
>>66
ありがとう
状態をSessionStorageってとこに保存して置くってのは分かった
戻ったってことを検出する方法はちょっと分からなかったけど
この方法を検索すると方法が多すぎて逆に分からなかった
window.addEventListener('pageshow',()=>{
var flg=window.performance.navigation.type; // 0-2
とか？ -
※XXXXX-visibility-controlとdivが同列であるとき
例えば XXXXX-visibility-control>div>div>div>div:nth-of-type(n+2):nth-of-type(-n+3)
で最終divの二番目と三番目を恒久的に除去するコードとなります
これを[class*=""]のような条件付けを用いて-visibility-controlが含まれるもの全てを指定したいです
XXXXX-visibility-controlはclassやidなどが無いため上記コードではエラーが生じます
皆様の知恵をお貸しくださいm(vv)m -
adblock関連スレでどうぞ
↑今すぐ読める無料コミック大量配信中！↑
