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

**Name_Not_Found** · 2025/01/24(金) 14:07:40.93

ここは初心者からベテランまで、全ての人を対象に必ず優しく答えるスレです

類似質問、重複質問、丸投げ大いに結構。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

**Name_Not_Found** · 2025/01/31(金) 01:13:48.18

ありがとうございます
しかし予想してた解よりもだいぶ複雑であった為に読解に難儀している次第であります
撤退も選択肢のうちの一つとして確かなアピールを示しておりそこにカーソルを合わせるのではないかと自分でもヒヤヒヤしています

**Name_Not_Found** · 2025/01/31(金) 01:28:24.26

<span>や<div>はあちこちで使うから特定用途専用の設計にしない
<span class="fukidasi"><span class="iro">とかちゃんと付けてあげて
<span class="hukidasi iro">とかもできるから

**Name_Not_Found** · 2025/01/31(金) 01:31:08.27

ブログってことなんで、どこまで自分でHTMLが書けるかわからないんだけど
そういう「ここにはこのスタイル、あそこにはあのスタイル」みたいな使い分けをするためなら、タグ(spanとか)の使い分けではなく、クラス(タグ内にclass="クラス名")によるスタイルの適用が一般的

**Name_Not_Found** · 2025/01/31(金) 01:34:10.40

>>10
【例】クラスセレクター： highlightという特定のクラス名が付与されたspan要素にCSSでスタイルを適用

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

CSS
.highlight {
background-color: yellow; /* 背景色を黄色に */
font-weight: bold; /* 太字に */
}

**Name_Not_Found** · 2025/01/31(金) 02:02:47.83

>>11,12,13様
ありがとうございます
まさにそういう答えがほしかったのです
つまりクラスを使えばいくらでもスタイルを作れるということですよね？

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

Highlightに関しても名前で分かりやすくするためにそのスペルを使っているだけで、
別にabcというスペルでもいいわけですよね？

**Name_Not_Found** · 2025/01/31(金) 02:22:02.47

クラス名は識別子でしかないから「:」とか「.」なんかのcss内で使われる記号を含まなければなんでもいいよ
無論、わかりやすいに越したことはないが
今後も修正するのであれば特に

**Name_Not_Found** · 2025/01/31(金) 03:04:43.36

>>14
>>9にあるようにAIに質問した答えのうちの1つの例が>>13だよ

**Name_Not_Found** · 2025/01/31(金) 03:05:54.42

CSSのクラス名で使ってはいけない文字や書き方について、以下のポイントを挙げます。

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

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

3. **空白**: クラス名に空白を含めることはできません。空白を含む場合は、ハイフンやアンダースコアで区切る必要があります。

**Name_Not_Found** · 2025/01/31(金) 03:06:30.81

### 書き方の推奨事項

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

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

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

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

**Name_Not_Found** · 2025/01/31(金) 11:14:55.28

>>15,16,17,18,
詳しくアドバイスありがとうございます
クラス名に記号は使わないほうがよいというのはCSSの記述を漫然と眺めているだけの私でもある程度の予想はつきますので大丈夫でございます
しかしクラスも最近「ははーん、そういうものなのか」という手応えを得た程度のレベルなのでそうした注意も真摯に受け止めておきます

ちなみクラスの記述によるデザインの幅を広げる手法は例えば<p>とか<div>にも極論を言えば無限に使えるということですよね？

**Name_Not_Found** · 2025/01/31(金) 11:20:47.12

あと>>13でちょっと気になったんですが
cssを記述する時に

.highlight {
background-color: yellow; /* 背景色を黄色に */
font-weight: bold; /* 太字に */
}

これはなぜ.highlightの記述からはじまるのでしょうか？

span.highlight {
background-color: yellow; /* 背景色を黄色に */
font-weight: bold; /* 太字に */
}

↑
これだと失敗しますか？
この方が分かりやすいというか正確な気がするのですが

もしかしてspanをつけないのは<p>や<div>にも流用できるようにするメリットがあるからなのかな？

**Name_Not_Found** · 2025/01/31(金) 12:04:21.63

>>19
> ちなみクラスの記述によるデザインの幅を広げる手法は例えば<p>とか<div>にも極論を言えば無限に使えるということですよね？

その通りだが、実際には以下の点を考慮して適切に使用することが重要

●クラスの数に関する実用的な制限
1. パフォーマンス: クラスを無限に使うことは可能だが、あまりにも多くのクラスを使用すると、CSSのパフォーマンスに影響を与える可能性がある。特に、非常に大規模なプロジェクトでは、スタイルの適用や計算に時間がかかることがある。
2. 可読性: クラスを多く使いすぎると、HTMLが複雑になり、可読性が低下する。これにより、他の開発者がコードを理解しにくくなる可能性がある。
3. メンテナンス: 多くのクラスを使用すると、スタイルの管理が難しくなり、変更や修正が煩雑になることがある。

**Name_Not_Found** · 2025/01/31(金) 12:17:13.08

ちなみに、クラスは以下のように複数を定義可能

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;
}

**Name_Not_Found** · 2025/01/31(金) 12:34:33.10

>>21
ありがとうございます
とても大事注意点ですね

>>22
これは便利ですね　
それぞれの装飾を個別に定義しておきそれぞれを半角スペースをあけて記述すれば呼び出して適用できるわけですか

これちなみに例えばフォントサイズを複数定義しておきたい場合は

.large01 {
font-size: 1em;
}

.large 02{
font-size: 2em;
}

.large 03{
font-size: 3em;
}

↑
このような感じでも大丈夫なんですかね？
やはり文字の大きさは強調したかったりもしますし複数用意しておきたいですので

あとemじゃなくてもpxで大丈夫ですよね？emってあまり見慣れないので

**Name_Not_Found** · 2025/01/31(金) 12:36:21.25

>>20
> これはなぜ.highlightの記述からはじまるのでしょうか？

全体の構造等の条件が分かって無いので最低限の書き方をしてるだけ
必要であれば要素セレクター（この場合span）だけでなく親要素や疑似クラス等を組み合わせてもいい
同じクラス名を持つpやdiv等の要素には全て同じスタイルを適用したいという場合は、クラスセレクターのみで指定すれば作業は少なくて済む
要はケースバイケースで使い分けろってこと

以下AIより

クラスセレクターと要素セレクターを組み合わせる理由
1. 特定の要素に限定: 要素セレクターを追加することで、特定の要素にのみスタイルを適用できます。これにより、同じクラス名を持つ他の要素に影響を与えずにスタイルを調整できます。
2. 可読性の向上: CSSの可読性が向上し、どの要素にどのスタイルが適用されるかが明確になります。
3. スタイルの衝突を避ける: 同じクラス名を持つ複数の要素がある場合、要素セレクターを使うことで、意図しないスタイルの適用を防ぐことができます。

したがって、クラスセレクターのみでも機能しますが、要素セレクターを組み合わせることで、より具体的で意図的なスタイルの適用が可能になります。状況に応じて使い分けることが重要です。

**Name_Not_Found** · 2025/01/31(金) 12:48:35.69

>>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/

**Name_Not_Found** · 2025/01/31(金) 13:00:17.12

>>23
ちなみに.large 02と.large 03の「e」と「0」の半角スペースは誤記だと思うんだけど
誤動作の原因になる上に見つけにくいので、手癖なら気を付けた方がいい

**Name_Not_Found** · 2025/01/31(金) 13:30:32.47

>>24
詳しく教えていただきありがとうございます
色々と事情によって使い分けろという事ですね
あとでじっくり読解したいと思います

>>25
これですと下のような使い方ですね
やっぱり色々なテキストの装飾がしたいからです
HTMLだけならばタグを使って簡単にテキストの装飾は可能なのですが、どうやら今の時代はHTMLタグでの装飾はあまり受け入れられないのでcss記述が必要というわけです

**Name_Not_Found** · 2025/01/31(金) 13:32:42.85

>>26
完全に誤記ですねw気をつけます

**Name_Not_Found** · 2025/01/31(金) 18:43:15.02

>>25
色々と教えていただきありがとうございます
spanが被っていてテキストへの装飾をすると予期せぬ箇所のレイアウトへの干渉が起こる問題を教えていただいたクラスを指定するというやり方でうまくいきました
その際に提示されたサイトでテストをして反映される事を確認してから自分のブログへとコピペしましたら成功しました

かなり基本的だろう知識の欠けている私ですが優しくご指南していただきありがとうございました
たぶんこれからも時々質問しにくると思いますのでその際はよろしくお願いいたす！

**Name_Not_Found** · 2025/01/31(金) 18:44:33.90

このスレのエスパー達のおかげでこんな私でもレイアウトの改造ができるようになったぜ！

**Name_Not_Found** · 2025/02/12(水) 01:22:37.58

Seesaaブログをやっています
とあるサイトを批判する記事を書きました
当然そのサイトへのリンクを記事に貼り付けるのですが、訪問者がリンクをクリックしてもリファラを飛ばないように出来ますか？

記事内容がそのサイトを批判するものなので、向こうがリファラを辿ってこちらの記事を見に来ると、最悪、名誉棄損などで訴えられるかなと思いまして
できればリファラを飛ばさないようにしたいです

どうすればよいでしょうか？

**Name_Not_Found** · 2025/02/12(水) 01:35:44.01

rel="noreferrer"じゃなくて？

**Name_Not_Found** · 2025/02/12(水) 02:01:18.64

ネット上に公開しておきながら知られたくないなんてダサい

**Name_Not_Found** · 2025/02/12(水) 13:10:31.38

>>32
ありがとうございます
まさしくこれでした

>>33
訴えられることはほぼないとは思いますが、リスクは限りなくゼロにしておきたいです
やっぱり、安全圏から石を投げつけたいじゃないですか

**Name_Not_Found** · 2025/02/12(水) 23:25:26.43

>>34
死ね

**Name_Not_Found** · 2025/02/13(木) 06:32:52.71

bot避けもしないと検索されちゃうんじゃね

**Name_Not_Found** · 2025/02/20(木) 20:49:29.27

初心な質問失礼します！

疑似要素で
p::first-letter
というのがありレイアウト的にいいと思ったのですが、これだと<p>で囲った箇所全てに適用されますよね
それを防ぐためにclassがあると思うのですが、この場合はどのように記述すればよいのでしょうか？

**Name_Not_Found** · 2025/02/21(金) 00:48:42.82

AIより抜粋

p::first-letter のように、段落全体に適用される疑似要素を特定のクラスに限定して使用する場合は
クラスセレクタを組み合わせて記述します。具体的には、クラス名を段落セレクタの前に追加します。

p.class-name::first-letter {
/* スタイルの定義 */
}

**Name_Not_Found** · 2025/02/21(金) 15:05:16.31

>>38
ありがとうございます！
普通にクラスを記述する時と同じ感じでやればいいんですね！

あとついでと言ってはなんですが
超初心者な疑問ですいません

p.class-name::first-letter {
/* スタイルの定義 */
}

この記述は

.class-name::first-letter {
/* スタイルの定義 */
}

このようにp(要素？)をとればp以外のhやspanやdivでも使えるというわけですよね？

**Name_Not_Found** · 2025/02/22(土) 17:03:43.18

>>39
疑問に思った事や思いつきは、質問する前に
こういうWebサービスを使って自分で試してみよう

https://jsfiddle.net/ukgaf2w3/

**Name_Not_Found** · 2025/02/23(日) 02:08:41.76

あーあ、みんな思ってても>>1に反するから言わなかったのに
>>39を書いてる時間でメモ帳とブラウザだけでテストできるだろとか言いたくても言えないのがこのスレだよ

**Name_Not_Found** · 2025/02/23(日) 14:53:25.46

まぁ、https://jsfiddle.net しか教えないなら、そうかもしれんが
便利なサイトを教えた上に、ちゃんと答えも書いてやってるからな

**Name_Not_Found** · 2025/02/23(日) 21:00:46.29

もうHTMLとjavascript程度ならAIに聞けば解決するのか

**Name_Not_Found** · 2025/02/25(火) 16:38:51.46

>>40
ありがとうございますm(_ _)m

**Name_Not_Found** · 2025/02/25(火) 16:45:24.92

>>43
ChatGPTでは解決できずにClaudeで解決できた
Claudeのほうがweb屋さんには向いてる？

**Name_Not_Found** · 2025/03/05(水) 15:53:39.17

スマホのChatgptはバグがありますね
質問した内容の文章が少し表現の違うものに勝手に書き換えられて表示される

**Name_Not_Found** · 2025/03/09(日) 17:27:49.17

質問の仕方が下手なだけでは

**Name_Not_Found** · 2025/03/09(日) 20:31:05.43

AIは間違いも言うし間違いを指摘すると「はい、確かにそれは間違いですね。正しくは…」ってまた嘘言ってくる

**Name_Not_Found** · 2025/03/17(月) 11:51:57.96

スレ違いかもしれんが助けてほしい・・
htmlでメールフォームを作ったんだけどその後のphpが上手くいかない・・
使ってるテキストエディタはsublime textです。
phpコードはhtmlに埋め込んで直接そのまま書くって形でいいのか
それともcssみたいにphp専用ファイルを作ってそこに書いたらいいのか・・助けてくださいorz

**Name_Not_Found** · 2025/03/17(月) 11:55:12.53

chatGPTに聞くと正解出るよ

**Name_Not_Found** · 2025/03/17(月) 12:28:30.24

それで正解出たら苦労してないよ！！

**Name_Not_Found** · 2025/03/17(月) 12:59:23.56

今聞いたら、body内に<?phpで書いてくれたよ

**Name_Not_Found** · 2025/03/17(月) 14:11:28.69

うまくいかないを具体的に

**Name_Not_Found** · 2025/03/17(月) 14:55:17.08

初級の初級なのにChatGPTに聞いてもわからんってどういうことだよ

**Name_Not_Found** · 2025/03/17(月) 15:26:32.73

とりあえずOpenAIのo3-miniに「webサイトに設置するためのPHPで動作するメールフォームのサンプル作って」とか聞いてみ

**Name_Not_Found** · 2025/03/17(月) 16:55:05.81

答えが「初心者がPHPでメールフォームやお問い合わせフォームに手を出すのはやめましょう、SNS等のDMで代用することをオススメします」
とかだったら好きになっちゃいそう

**Name_Not_Found** · 2025/03/23(日) 17:47:46.58

>>47
違う
こちらが書いた文章が勝手に別の文言に変わることがある
これはどういう時に起きるかわかったわ
スマホでChatgptのページのショートカットを待ち受け画面に貼ってから待ち受けから起動すると起きやすい

**Name_Not_Found** · 2025/03/26(水) 12:09:07.39

スレチですがAndroid用の初心者向きのhtml編集アプリでオススメあったら教えてください。

**Name_Not_Found** · 2025/03/26(水) 21:03:13.63

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

**Name_Not_Found** · 2025/03/26(水) 21:19:43.07

オススメのアプリとかって結局、自分が使いやすいと思う物は自分にしか分からないので
人に尋ねるよりも、DL数の多い人気のアプリを上位から順に試すのが一番手っ取り早い

**Name_Not_Found** · 2025/03/27(木) 02:03:04.42

VScode for Androidとかどうなんだろ使ったことないけど

**Name_Not_Found** · 2025/04/03(木) 02:36:12.55

教えてください！！
xサーバー使ってます、ワードプレスでサイトを作ったのですが、公開の仕方がわかりません！
調べていた感じ、fillezillraをつかいアップロードするそうですが、何をどこから持って来ればいいのかわかりません、、、

**Name_Not_Found** · 2025/04/03(木) 03:48:46.84

全く状況が分からんのだがスレ違いなので、もうちょっと状況を整理して以下のいずれかでどうぞ

Webサイト制作初心者用質問スレ part253
https://mevius.5ch.net/test/read.cgi/hp/1626528070/
WordPress（ワードプレス）その28
https://mevius.5ch.net/test/read.cgi/blog/1461783816/
WordPressの困った人のスレ 6
https://mevius.5ch.net/test/read.cgi/hp/1706433486/

**Name_Not_Found** · 2025/04/03(木) 06:06:54.02

>>62
そこから解らないなら
xserverの管理画面にwordpress簡単インストールてのが用意されてるから
それでインストールした後にwordpressの管理画面からインポートしたら？

**Name_Not_Found** · 2025/04/05(土) 22:35:20.40

作ってるアプリにhtmlで簡単な使い方を
ユーザーに知らせる仕組みを組み込むことをやってる

おおまかにDetailsでクループ分けしていって
プログラム側からDetails.OpenとIDへのジャンプをやるような形

で困ったのは、Detailsの中から外部などに遷移した後
戻ってきたときDetailsがすべて閉じてしまってること

たぶん遷移する時点でdetailsの開閉状態を保存して
戻ってきたことを検知して、Detailsの開閉状態を復元すること？

ここに書いてあるよ的なものでもいいので教えてください

**Name_Not_Found** · 2025/04/05(土) 23:45:27.98

こういう話？

ページ遷移してもdetailsを開きっぱなしにするJS #JavaScript - Qiita
https://qiita.com/mai_ne__/items/6e58d8a1df94a829e67f

**Name_Not_Found** · 2025/04/06(日) 01:27:33.26

>>66
ありがとう

状態をSessionStorageってとこに保存して置くってのは分かった
戻ったってことを検出する方法はちょっと分からなかったけど
この方法を検索すると方法が多すぎて逆に分からなかった

window.addEventListener('pageshow',()=>{
var flg=window.performance.navigation.type; // 0-2
とか？

**Name_Not_Found** · 2025/04/27(日) 13:03:14.87

※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

**Name_Not_Found** · 2025/04/28(月) 04:09:11.29

adblock関連スレでどうぞ

**Name_Not_Found** · 2025/05/03(土) 16:15:31.90

**Name_Not_Found** · 2025/05/03(土) 17:08:39.96

#bbbに
display:inline-block;
width:calc(100% - 50px);
を追記

**Name_Not_Found** · 2025/05/03(土) 17:43:36.18

ただし#aaaの幅や高さ、#bbbのleftやtop、文字サイズはそのまんまとします。

この一行で察した

**Name_Not_Found** · 2025/05/03(土) 21:29:08.98

>>71
それらを追加して試してみたけど
文字の折り返しはされていたけど文字がない空白部分も緑色になっていました。

**Name_Not_Found** · 2025/05/03(土) 23:32:59.83

wrapのどれか

**Name_Not_Found** · 2025/05/05(月) 15:36:30.85

#bbbの幅は親の幅で決まるから、#bbbをブロックで囲んで
そのブロックに>>71でいいだろ

**Name_Not_Found** · 2025/05/06(火) 16:09:10.86

初心者ですがよろしくお願いします。tableについてわからなくなりました。
<table border="1">
<tr><td colspan="3" rowspan="2">
セル1
</td><td colspan="3" rowspan="2">
セル2
</td></tr>
<tr><td colspan="2" rowspan="1">
セル3
</td><td colspan="2" rowspan="1">
セル5
</td><td colspan="2" rowspan="1">
セル6
</td></tr></table>

こうすると一行目が縦長のセルが２つ、二行目が普通の縦幅のセルが３つ並ぶと思ったのに、改行されず一行になってしまいます
すみませんがどこが間違っているのか教えてもらえますか

**Name_Not_Found** · 2025/05/06(火) 16:16:13.51

横方向が
1行目　2つのセル
2行目　3つのセル
ってことなら
rowspanは全部いらないです
Safariだと幅が均等にならないかもなので
適宜cssで調整

**Name_Not_Found** · 2025/05/06(火) 17:51:50.95

>>76
rowspanはセル内の行数ではなく、そのセルがtrいくつ分にまたがるかという意味です

76 · 2025/05/06(火) 18:50:30.89

>>77 >>78
rowspanを全部やめて、縦長にしたいセルにサイズを指定したらすっきりきれいにできました
うれしい
ありがとうございました

**Name_Not_Found** · 2025/05/07(水) 01:27:01.38

LibreのCalcとかセルの結合状態もTable構造でコピーしてくれるから楽だよ
EXCELも同じことができるかは知らない
最近使うこともないけど豆知識

**ペンギン** · 2025/05/07(水) 02:59:10.94

マジで丸投げしたいんだけど、今日の朝までに学校の課題の架空のウェブサイト作らないといけなくて、
代わりに書いてくれないか？
HTMLとCSSだけで科学教室のサイトだわ
テンプレ化するだけでもいいからそれっぽいの誰か作ってくれないか？？

**ペンギン** · 2025/05/07(水) 03:04:40.27

作ってほしい項目が何個かあって、
科学教室で学べる事（３つ画像付き）
教室一覧１～３月まで（１～１２月は別ページ）（画像、物理・化学などのタグ、文章のセット）
開催している大学への誘導
お問い合わせフォーム
他必要そうなものがあれば書いてほしい。
全体的に青ベースで子供向けなポップな感じにしたい

**Name_Not_Found** · 2025/05/07(水) 03:54:31.64

copilotかgeminiに頼めばいいと思う

**ペンギン(上の人と同一人物)** · 2025/05/07(水) 04:14:01.60

なるほどAIか使ってみるか
6割くらいは自分で頑張った

**Name_Not_Found** · 2025/05/12(月) 13:07:16.24

サイト側の都合でheightが付与されており、それで強制的に無駄な余白を生じている場合
max-heightと!important;で上限を設けるのが一番楽なのですが、併用されるページの多さに使用できず

このheightプロパティ効果そのものを削除することは出来ませんかねえ
長年の悩みです^^;

**Name_Not_Found** · 2025/05/12(月) 13:18:18.89

autoの差し込みで削除＝解除出来ました！！！
お騒がせしましたm(vv)m
autoはmarginなどの左右位置調整で良い思い出がなく（便利ではあるが）盲点でした
コラージュ的な発想ですなｗ
自己解決すみません

**Name_Not_Found** · 2025/05/12(月) 20:55:42.17

そもそもheightの初期値がauto
値が指定されてないプロパティは、全て初期値が設定されている
値が指定されていない状態を作り出したければ今回のように
初期値を指定すればいいので、削除するって発想が間違い

**Name_Not_Found** · 2025/05/20(火) 12:26:44.19

css変数ってsassのfunctionと併用できない？
--headerheight:px2vw(88)
みたいなことやるとpx2vw(88)がそのまま展開されてしまう？

**Name_Not_Found** · 2025/05/20(火) 22:47:38.22

CSS変数（カスタムプロパティ）とSassの関数は、併用することができますが、いくつかの注意点があります。

1. スコープの違い： CSS変数はブラウザで解釈されるもので、Sassはコンパイル時に処理されます。そのため、Sassの関数で生成した値をCSS変数に代入することはできますが、逆にCSS変数をSassの関数に渡すことはできません。
2. 使用例：
・ Sassの変数を使ってCSS変数を定義することができます。
・例えば、Sassの変数を使って色を定義し、それをCSS変数に代入することができます。
　-----
$primary-color: #3498db;

:root {
--main-color: #{$primary-color}; // Sassの変数をCSS変数に代入
}

.example {
color: var(--main-color);
}
　-----
3. 動的な値： CSS変数は動的に変更可能ですが、Sassの関数はコンパイル時に値を決定します。したがって、CSS変数を使うことで、JavaScriptなどで動的にスタイルを変更することが可能です。

このように、CSS変数とSassの関数は併用できますが、それぞれの特性を理解して使うことが重要です。

**Name_Not_Found** · 2025/05/20(火) 23:53:40.23

>>88
--headerheight: #{px2vw(88)};

88 · 2025/05/21(水) 01:18:30.27

ありがちょー

**Name_Not_Found** · 2025/05/22(木) 00:59:04.77

失礼いたします。
.htaccessについて質問です。

サイト内のhtmlへのアクセスを全て同名のphpページにリダイレクトさせたいのですが、どのように記述すればよいでしょうか。

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME}.php -f
RewriteRule ^(.*)\.html$ \$1.php [R=301,L]

このようにしてもうまくいきません。
どなたかよろしくご教示お願いします。

**Name_Not_Found** · 2025/05/22(木) 01:02:54.09

いまどきそのレベルのことはAIに聞けばいいのでは⋯

**age** · 2025/05/22(木) 01:13:43.38

申し訳ございません。聞いたうえで上の記述を指定されたのですが、聴き方が悪いのか正しい答えが引き出せない、または正しい答えなのに何か勘違いしてしまっているのか、効果がありません。
個別ファイルのリダイレクト自体は成功するのですが一括化したくて・・

94 · 2025/05/23(金) 06:40:59.89

解決しました。ありがとうございました。

**Name_Not_Found** · 2025/05/26(月) 18:10:44.85

borderの指定した範囲だけ線を表示しないようにするにはどうやればいいんですか？
何がやりたいかと言うと、タブ切り替えを作るときタブのラベル部分と下のボックス部分の重なった境界線だけ線が表示されないようにしたいんです。
position:absoluteでラベル部分をボックスの線の上に重ねればいいと思うかもしれないけど、これだと半透明にするとボックスの線が目立っちゃうので

**Name_Not_Found** · 2025/05/26(月) 18:30:48.17

divを入れ子にして
消したい線の部分だけグラデーションってのはどう？

* {
box-sizing: border-box;
}
.box_wrap {
border: solid 10px blue;
border-radius: 30px 30px 0 0;
border-bottom: none;
height: 80px;
}
.box {
border-image: linear-gradient(90deg, blue 50%, transparent 50%, transparent) 1;
border-bottom: solid 10px;
height: 70px;
}

**Name_Not_Found** · 2025/05/26(月) 20:29:33.13

>>97
やってみたけどうまくできませんでした。
borderのaピクセル目からbピクセル目までを透明にするコマンドはないのかな？

**Name_Not_Found** · 2025/05/26(月) 20:44:57.50

何がうまくいかなかったかわからないけど
border-image: linear-gradient(90deg, blue 50px, transparent 50px, transparent) 1;
とすればpx刻みもいけます

https://jsfiddle.net/f3e61yu5/

**Name_Not_Found** · 2025/05/30(金) 10:07:21.65

初心者ですがよろしくお願いします
cssのclassに関する質問です

例えば自分用のurl控えブックマーク集みたいなリンク集を作っている場合、リンク先のIPで記録した物があるとします

・<a href="IP/index.html
・<a href="IP/admin/setup_html
・<a href="IP/syslog.html

３つともIPの部分は同じです
リンク先のIPが変わった時、３つを個別に修正するのは手間なので、cssのclassを使ってIP部分だけをcssに登録し、IPが変わった時はcssを修正したら全てに反映するかなと思いやってみたのですが、どうやって記述するのか調べてもよくわかりませんでした
すみませんがよろしくお願いします

**Name_Not_Found** · 2025/05/30(金) 10:43:33.09

サイト埋め込んだXが表示されずに
Tweets by ○○○_info
とリンクテキスト表示だけになったのですが原因わかりますか？
サイトは変更してないので
Xの仕様が変わったのでしょうか？

**Name_Not_Found** · 2025/05/30(金) 12:27:55.94

>>100
属性セレクターは試した？
https://developer.mozilla.org/ja/docs/Web/CSS/Attribute_selectors

**Name_Not_Found** · 2025/05/30(金) 16:14:10.73

>>100
javascript案件？

**Name_Not_Found** · 2025/05/30(金) 16:21:29.75

> ３つを個別に修正するのは手間なので

それだけのためにスクリプトか何かを追加するぐらいなら、個人的にはエディタ使って
当該IP（ドメインじゃなくて？）を新しいものに一括置換だなぁ

**Name_Not_Found** · 2025/05/30(金) 23:12:35.71

まあ3つくらいの修正なら手動でやったても大した手間じゃねえだろだよなｗ

**Name_Not_Found** · 2025/05/31(土) 07:16:05.18

>>100
CSSで解決すべきことではないというのが答え
属性セレクタも属性の内容を書き換えるものではない
エディタで一括置換かスクリプトを使いましょう

**Name_Not_Found** · 2025/05/31(土) 16:47:27.26

ここが最新正規スレ？
どこで聞くべき質問か分からんからとりあえずここで聞く。
はてなブログでMathJaxを使用できるようにして、｢$m$｣と入力してレンダリングしようとしたら、数式として｢m｣と表示されるのではなく、そのまんま｢$m$｣と表示される。
これは、はてなブログの仕様のせいで、｢$m $｣と入力したら、所望の｢m｣が出力される、というところまでは解明できた。が、こんなその場しのぎの回避方法は嫌。
｢$m$｣だと駄目になってしまう問題を根源的に解決したい。
どうすればいいか、どこで聞くべか、よろしく。

**Name_Not_Found** · 2025/05/31(土) 18:24:43.35

ここら辺りで

+ JavaScript の質問用スレッド vol.126 +
https://mevius.5ch.net/test/read.cgi/hp/1439005423/
JavaScript ライブラリ総合質問所 vol.5
https://mevius.5ch.net/test/read.cgi/hp/1465399470/
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.net/test/read.cgi/hp/1626528070/

尚、HTML編集モードとか見たまま編集モードでダメなら慣れる以外に解決方法は無い気が

**Name_Not_Found** · 2025/05/31(土) 19:12:18.66

>>107
以下もはてなブログでの例:
上手くレンダリングされない例→｢$距離空間$｣
普通にレンダリングされる例→｢$距離空$｣、｢$離空間$｣

全く意味分からん