-
Web制作
-
HTML/CSS のどんな質問にも優しく答えるｽﾚ 53
-
UPLIFTで広告なしで体験しましょう！快適な閲覧ライフをお約束します！
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■関連スレ
Webサイト制作初心者用質問スレ part253
[S] http://mevius.5ch.ne...d.cgi/hp/1626528070/
■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
http://triple-unders...o/selectors4-ja.html
前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 52
https://mevius.5ch.n...d.cgi/hp/1692784333/ - コメントを投稿する
-
> windows、chrome系でハードウェアアクセラレーションオンだと-webkit-text-stroke無くても白い縁出てる
ハードウェアアクセラレーションオフとFirefoxはブレンドされて縁が青っぽくなってる
やはり、おま環だから気にすんなって話か -
検証用にどうぞ
https://jsfiddle.net/74gwjukf/ -
cssはapiテストに直接関係していないが、echoapiのmy frontendとシームレスに連携する機能により、スタイリングとの統合性が向上している。 -
grid layout について教えてください・・・
A B Cと3カラム横並びのグリッドを作った、ブラウザ幅を縮めるときに
「A幅が完全に縮みきってから、次はB幅が縮まり出す」ことをしたいのですが
どういたプロパティを指定すれば良いですか？
Chat GPTで調べたところ
grid-template-columnsで幅を指定するときにminmaxで指定し、するとminの数値が小さい順に小さくなると
出たのですが、同じ事をやってもどうしてもAが縮まり出すのとほぼ同時にBも一緒に縮まり出します
grid-template-columns: minmax(30px, 300px) minmax(300px, 600px) minmax(350px, 400px);
と書いたら、Aのmin30pxが30pxまで縮んでから、次はBがmin300pxまで縮まって欲しいです。 -
>>6
横からだけど勉強になったよありがとう
最初gridコンテナに直接クエリを設定してしまって、grid-template-columnsが制御できなくてハマった
ラップしたdivにコンテナクエリを設定したら制御できるようになった -
<img src="abc#123.jpg">のようにファイル名に#が入っていると画像が表示されません。できればファイル名を変えたくないのてすが、何か対処法はあるのでしょうか？
-
ハッシュとクエスチョンはファイル名に使っちゃだめなのねん
-
>>10
やっぱりだめてすかね。ブラウザに直接画像ファイルをD&Dすると表示されるので、HTMLの仕様なのかな？ -
htmlというかwebの仕様
D&Dで表示できるのはローカルパスだから
urlエンコーディングやApache側の設定で表示できるようにすることもできるけど邪道なのでやめよう
#はアンカーリンク、?はクエリパラメータ用の文字列として予約されているので大人しくハイフンやアンダースコアにしよう -
>>12
了解しました。ファイル名の方を修正します。ありがとうごさいました。 -
<img src="abc%23123.jpg">
-
>>14
おおっ、ありがとう。愛してる。 -
htmlってなんでここまで廃れたんだろうな
-
え？
-
スレが廃れたって意味だよね？
-
自分の頭が廃れたのに気づいてないとか
-
誰もhtmlを使わなくなったのは確か
ノーコードWeb制作が増えて来たしな -
え？
-
StudioのネタがXで流れてくるけど
さっぱり勉強する気になれない
本当に主流になるんかな -
リセットCSSを探しています
スタイルのリセットは最低限でいいので、とりあえず読み込み速度重視だと
（使用しないタグにまでリセット範囲を拡大するとページ読み込み速度が遅くなるそうなので）
下記の内、どれがいいでしょうか？
A (more) Modern CSS Reset
A Modern CSS Reset
CSS Remedy
EllyLoel/reset.css
HTML5 Boilerplate
HTML5 Reset Stylesheet
Josh's Custom CSS Reset
Minimal CSS
Normalize.css
Reboot.css
The Modern CSS Reset
The New CSS Reset
destyle.css
modern-normalize
reset.css (@acab)
reseter.css
ress
sanitize.css
※もちろん、今の1Gbpsを超えるような通信環境だと
人間には分からないレベルだと思いますが、一応、速度重視ということで。。 -
とにかく軽く最低限なのがdestyle
モダンに寄せたいなら The New CSS Reset -
全部試してChromeの開発者ツールで確認すりゃいいよ
-
こういうのは
単純にリセットCSSのファイルサイズだけじゃ比較できない
っていう理解でOK？ -
速度という点でも全称セレクタなどはパフォーマンスとしては悪いけど
問題はそんなことより上書きしやすい詳細度になってるか、バグがないかだと思うわ -
AIでコード生成ができるみたいだけど
失業する人が増えるのか？ -
そうかもしれませんね！
-
生成できてもコードの意味を理解してないと仕事にならんだろ
-
CMSのときもxdやfigmaがCSS吐き出せるようになったときもノーコード流行のときもコーディングオワタお前ら失業ーとか言ってる人いたでしょ
化石なので丁重に扱おう -
Figma/Amplify連携はいくつかやってきたけど
デザイナが、というか客がわかってる人じゃないと、なかなかうまくいかんなあ -
テーブルの列を非表示にするコードをAIに書いてもらったら、colタグをdisplay:noneしろと言われたが、動かないからなんで？って聞いたら、colタグにdisplay:noneは効きませんvisibility:collapseを使ってくださいとか言われた
知ってたなら最初からそう言えや？？😾 -
なんでかはわからんがどの生成aiもcssはまじで使えない
jsやphpみたいなプログラムではめちゃくちゃ役立つのに -
プログラムはそれ自体が設計書みたいなもんだからな
cssはただの文字列の集まりでclass名もcssの中ではなんの意味もない -
>>38
わからないならわからなくていい -
俺もわからん
-
> なんでかはわからんがどの生成aiもcssはまじで使えない
→ cssはただの文字列の集まりでclass名もcssの中ではなんの意味もない
> jsやphpみたいなプログラムではめちゃくちゃ役立つのに
→ プログラムはそれ自体が設計書みたいなもんだからな
性質の異なるのをなぜ並べる？
単にレスの内容にそのまま回答しただけだろ
わざわざバカどもに教えてやったぞ -
AIでコード生成はClaudeは大分使えるようになってる感じかな
学習して進化するのがAIだから1年前とは別モノになる -
なぜかCodePen上では再現しないんですが、Android Chromeでのみ発生する問題(仕様？)があり、理由や解決策を教えていただきたいです。
(使っているChromeバージョンは134.0.6998.136)
画像1枚目のように、ページ自体がスクロールするぐらいの高さがありその内部の下方にスクロール可能なコンテンツのエリア(ブロック)があります。(検証用に2つ並べていますが、実際には1つです)
全体表示している時はスワイプでスクロール可能なのですが、画像2枚目のようにピンチアウトして拡大表示したとき、なぜかborder-radiusがあるほうはスクロールができず、ページ側がスクロールしてしまいます。
なお検証用にborder-radiusありなしを並べていますが、この状態だと下のブロックをスクロールさせようとすると、上のブロックがスクロールします。
(実際にはスクロール可能なブロックは1つしか設置しませんが、border-radiusあり、なしで挙動が変わります)
iPhone Safariや、古いAndroidのChromeでは問題ありませんでした。
これは単にChromeのバグなのでしょうか？
現状はborder-radiusを止めれば回避できるのですが、なんでその違いで変わるのか理由もわからず困っています。
https://i.imgur.com/OGqNZNn.jpeg
https://i.imgur.com/iD3TKLf.jpeg
codepenソースコード
https://codepen.io/raaaaa/pen/vEYPYgj -
面白い（面白くない） うちでもなるわ
Chrome 135.0.07049.38
border-radius:0にすると問題ない 不思議 -
iOSのChromeでは再現しなかった
Claudeに聞いたら対策をいくつか提案されたけどどれでも解決しなかったよ -
やはり単にバグなんでしょうかね。
border-radiusの有無でスクロールの挙動が変わるというのは本来無いですよね…
動きとしては要素の後ろ側をスクロールしようとする感じですね -
初歩的な質問で恐縮です。
div等要素の内側(直下)にimgタグで画像を表示している状態で、このdiv要素のbackground-colorを指定しても下位側のimgの画像の方が手前に出てきてしまうのですが、そういうものですか？
divのbeforeにposition:absoluteでblockの疑似要素を作ってそこでbackground-colorを指定すると、imgより手前に背景色がきます。
原則的にタグの親子順序で見えると思ったのですが違うのでしょうか？ -
dom構造としては親でもbackgroundは文字通り背景なのでその挙動が仕様です
中にimgでと疑似要素でもなく色をつけたdivなどを入れても同じですね -
ありがとうございます。
なるほど、backgroundはあくまで背景なのですね。
要素単位で上下関係があると勘違いしていました。
↑今すぐ読める無料コミック大量配信中！↑
