HTML/CSS のどんな質問にも優しく答えるｽﾚ 51
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 50
https://mevius.5ch.net/test/read.cgi/hp/1645774968/
■関連スレ
Webサイト制作初心者用質問スレ part253
https://mevius.5ch.net/test/read.cgi/hp/1626528070/
■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html ページの左端と右端にそれぞれ画像１と２を背景画像として設置したい
body{
background-position:left;
background-image:url(./test1.png);
background-repeat:repeat-y;
background-position:right;
background-image:url(./test2.png);
background-repeat:repeat-y;
}
こんな感じでやってもできませんでした。
どうやればうまくできますか？ >>5
それだと各プロパティが上書きされるだけなので1つにまとめる
body{
background-position:left, right;
background-image:url(./test1.png), url(./test2.png);
background-repeat:repeat-y;
}
最後は同じ値なので2つ目は省略可 再現可能なコードも示さずにYouTubeで現象だけ見せてくるって
初めてのパターン どこを見せればいいですか？
多分英数字が連続する文字列ではラップされずにサイズが大きくなってしまいそれによって大本のdivのサイズも伸縮してるからのような気がします >>10
目星が付いてるなら、該当の要素にoverflow-wrapでも追加してみたら？ >>13
追加してみたのですが全く言うことを効きませんでした
記事タイトルのhにつけたりその上にdivつけてそいつにつけたり色々やったのですが全く言うことを聞いてくれず… それバグではないよ
設定したらどうよ？
word-break: break-all; バグじゃない
word-wrapプロパティを調べよう
めんどくせーもん落とさせるのはやめよう
該当部分だけjsfiddleに展開しよう なんかよくわかりませんが回答ありがとうございます
それらは要素のCSSに直書きで大丈夫ですかね？ word-breakもword-wrapも試してみましたがダメでした。
https://jsfiddle.net/r3mxnkoh/
jsfiddleでは大丈夫なのですがなぜでしょうか。 セレクタが間違ってて当てるべきところに当たってないんじゃないの
ちゃんとdeveloper toolで当たってるか確認するくせつけよう >>20
そうかもしれません…
とりあえずガチャガチャやってたらなんとかなりました
ご協力感謝します input type="text" にrequiredを付けたのですがsubmitできてしまいます。ブラウザはPCのChromeです。
<form action="/login" method="post">
<input type="text" required />
<button type="submit">Submit</button>
</form>
10年以上HTMLやっててこれは初めてなので不思議。なんででしょうか？ <input type="text" required="required"> >>22で効かないなら、>>22に書かれてる以外の箇所に問題があるわけで
他に余計な属性付与してたりするとrequired属性が無視される場合もあるし
もうちょっと情報出そう やはりおかしいですよね
HTML丸ごと上げるわけにもいかないし、他にどういう情報出せばよさそうでしょう それなら、最小限にしぼったHTML書いて検証してみなよ JSはたくさん使われているのでJSが怪しそうです、formやinputの属性いじったりしてるのかな…
やはり地道に切り分けていくしかなさそうですね、この案件にそんな時間はないのでこのまま迷宮入りかな 個人で管理してるのなら好きにすればええけど
納品物ならエラーは取り除かんとまずいよと釘を指しとくで >>22,29
たぶんbuttonのclickイベになんか定義してあるんやろね
checkValidity()入れるかonsubmitに処理を移すかでいけると思うけど、
他の人が書いてるならそっちに頼む方が早そう 素人なのでスレ違いだったらごめんなさい
クローム等のwebブラウザを旧バージョンにさかのぼっていくと
ある所でツイッター等のはめ込み動画が再生出来なくなります
（再生ボタンが押せない、動画画面が真っ黒のまま等）
これはどういう技術？が関係しているのでしょう
またyoutubeは相当昔のバージョンにさかのぼっても再生が可能です
再生の可、不可を分けているポイントは何でしょうか？ コントロールバーの再生ボタン押しても変わらない？
昔はコントロールバー経由かjsでオンオフ切り替えないと動画中央などのクリックで再生させる機能は無かった覚えがあるよ > クローム等のwebブラウザを旧バージョンにさかのぼっていくと
> ある所でツイッター等のはめ込み動画が再生出来なくなります
何故、手がかりとなるかもしれないそのVerを書かないのか >>33-34
お二方レスありがとう
バージョンはクロームの49.0.2623.112
>昔はコントロールバー経由かjsでオンオフ切り替え
jsとはから今ググりながら調べてます >>32
Chrome開発者ツールのコンソールを見ると、動作不良が起きている状況が残っているかもしれない
それをヒントに調べれば、ネックになっているのがコーデックなのか他の技術なのかわかるんでないかな
ただ、いまはOSもブラウザも「常に最新」が前提になってるので、好奇心を満たす以外に調べる意味はないような… >>33
コントールバー自体が表示されませんでした…
>>36レスありがとう
>Chrome開発者ツールのコンソールを見ると
なるほど、ちょっと時間かけて調べてみようと思います
>好奇心を満たす以外に
そうですね、好奇心が一番です
あと使ってないvistaの32bitのpcが出てきたので
web動画を見るくらいできたら良いなと思って >>37
サポート終了したOSでネットに繋ぐのはあまりおすすめしないな
OS上げられないなら処分してFireTVの足しにした方がいいと老婆心ながら >>38
そうですよね懐かしくてついつい。オフライン用にしておきます controls属性つけても表示できない？
って聞こうと思ったがWeb動画を見るって話から察するに
自分で作ったWebサイトのデバッグの話じゃないのよ、、、スレチじゃん カンプをコーディングで起こすときに余白の値を効率よく把握する方法ないですか？
XDでちまちまoption押して余白測って実装して、ディベロッパーツールで確認をひたすら繰り返してますが、
いつも抜けありデザイナーに怒られます… 自分も抜けるから
印刷して紙に鉛筆等で数値やアクション等、メモ書きしてるよ
他の人はどうやってるんだろ？ 変な値を設定してるとかならともかく
忘れてるならデザインとブラウザ並べて眺めれば気付かないか カンプの上に計測値を目立つテキストでメモしておいて、reset.cssで全要素の余白ほかを0にしてからスタイリングやね
なんなら要素の初期背景色も変な色にしておくと漏れがひと目で
計測を楽にしたいって話なら、がんばれとしか… カンプを画像に出力してChromeのアドオン使って画像と作ったページ重ねて確認してる
なんていうアドオンだっけ 設定し忘れている=0になるようにすべき
大体のルールでは上下余白30だが、セクション3だけは上下余白50で上書きする
みたいなことやってるならデザインに対するCSS設計が悪い 皆さんありがとうございます
独学からコーダーになったのですが、まだ目が慣れないせいかなかなかカンプ通りに作れず…
時間がなくて未完成で途中で降りてきたデザインで組む→完成版との差異を全て回収できない
ということ状況多く、またスマホファーストに慣れなくてpcとspがごちゃごちゃになってしまいます
見比べても全然気がつくことができません…
やっぱり印刷してメモするのがいいみたいですね、やってみます！ >>49
横だけどありがとう Perfect Pixel だと思う
こんなのあったんだ
https://liginc.co.jp/568449 >>52
それは差分をちゃんと伝えてくれないデザイン側も悪いな
普通は「ここが変わりました」って注釈を入れてくれる
「見れば分かるだろ」ってデザイナーはただの怠慢なので上に注意してもらい <table style="width:100%;padding:30px;background:#00ffff">
<tr>
<td style="width:100%;background:#ff00ff">
<form>
<input type="text" name="bg_img_url" value="" style="width:100%">
</form>
</td>
</tr>
</table>
テキストフォームのwidthを100%にたいんだけど
なぜかテキストフォームの右側がテーブルからはみ出てしまいます。
ちゃんとwidth１００％でテーブルにおさまるようにするにはどうやればいいんですか？ <input type="text" name="bg_img_url" value="" style="width:100%; box-sizing: border-box;">
これでどうかな？ >>56
できました。あろがとうございます。
でも何でbox-sizing: border-box;にしないとはみ出てしまうんだろ >>59
htmlだけじゃちょい無理ね
文字列つなげる簡単なJavaScriptを追加してやればいける
https://jsfiddle.net/4tdr5p13/
ただこれAPIが公開されてる検索じゃないので、自分だけならともかく、他人に使わせるのはまずいんでないかな… >>60
ありがとうございます！！！！
こっそり使わせていただきます <div style="width:800px;height:300px;border:Solid 5px #ff00ff;overflow:hidden;padding:0px;position:relative;">
<img src="./bg1.jpg" style="position:absolute;top:0px;left:0px">
</div>
PC版chromeだと左側にちょっと隙間ができてしまうんだけど、どうしてですか？
edgeだと隙間ができませんでした。 見てないけどブラウザデフォルトcssをリセットしてないんじゃないの >>62だけど解決しました
ブラウザのズームが８０％くらいになってたので１００％にしたら
ちゃんと隙間なく表示されました htmlの互換性についてですがwin22h2バージョンで一部の機能が動作しなくなったんですが、meta設定すれば解消しますか？ ブラウザの方はEdge Chromiumだとは思うけども、なにがどう動かなくなったのかを伝えないと誰も答えようがない >>68
失礼しました。画像プレビューの横回転機能が動作しなくなりました。 その画像プレビューの横回転機能ってのは
どうやって動作してたかは分かってる？ 作りまでは確認しておりません。画面上のjpegファイルを90°単位に右回転させる機能です。 他人のサイトを見てて動作しないって言ってるのなら
そのサイトのURLを貼った方が早い 今の質問って
「とある料理を新規開店した店で食べたのですが美味しくありません。秘伝のソースを掛ければ解消しますか？」
「イタリア料理店で食べたパスタが美味しくなかったです」
「どうやって作ったかは分かりません。パスタはミートソースで肉は粗挽きです」
みたいな感じ >>71
動かなくなったページがどこかのサイトならそのURL、自分の作ったものならどこかに上げる、のどちらかがないとちょっと無理かも
画像プレビューの回転が「ブラウザの機能」を指してるなら、metaどころかページ側はいっさい関係ない話になるけど… どうせブラウザに入れた機能拡張なんかが自動的にバージョンアップされたら
勝手にjavascriptオフられてたとかじゃないの？ HTML5でサイトのコンテンツを左右に分割する方法が調べてもイマイチ分からないので教えていただけると嬉しいです
https://www.usamimi.info/~geko/arch_etc/box.html
具体的にはこのサイトのように、それぞれのコンテンツをこんな感じで分けたいです
ピッタリ真ん中で左右に分けたいと思っています こんなんでどうだ
https://jsfiddle.net/9omwjxur/
大枠のコンテナを作ってその中で左右のボックス作って
左右のボックスの中に更にボックス作っていく
大枠にFlex当てれば左右の枠は横並びになるので >>76
おお、float久しぶりに見た
今は>>77の通りflexboxがおすすめ <form>
<input type="button" value="hoge" onclick="test();">
<a href="javascript:test2();" id="num"></a>
</form>
<script>
function test() {
var rand = 1 + Math.floor( Math.random() * 10 );
document.getElementById("num").innerHTML = rand;
}
function test2() {
location.href = 'hogehoge.html#hoge' + (x);
}
</script>
ボタンを押すたび1～10の乱数の結果にページ内リンクをつけたいです。
リンク名はhoge数値です。
var x の結果を + (x) のような形で書くことはできますか？
よろしくお願いします。 >>80
xがrandと同じなら、test()呼んだ時に#numのhrefもsetAttribute()で書き込んじゃえばいいんでない？
https://jsfiddle.net/j46gyqxr/
ここはHTML/CSSの質問スレだから、これ以上はJavasScript質問スレのがいいかも >>81
動かしたい挙動で感動しました。ありがとうございます！
スレ違いだったようで重ね重ねもうしわけないです。 ド素人質問失礼します．スレ間違ってたら申し訳ないです．
自分はカードゲームについてのサイトを作ろうと考えています．
日々公開される数枚のカード画像を自分のサイトに載せて一覧で見れるのが第一目標です．
また，カードゲーム界隈では発売前のカードを印刷して紙にプロキシと呼んで使用するのですが
一覧で見れるカード１枚１枚の下に0~4で数字を選ぶことができ，選択した数字XによってA4に選択した画像とX枚をばーっと敷き詰めて簡単にプロキシを作れる機能を実装したいと思っています．
そのために，書籍であったりこの機能についてはこのワードで調べればいいなどなんでも構いませんのでご教授いただければ幸いです． 印刷になってくるとCSSだけではどうにもならんなあ >>84
https://imgur.com/a/hqGcjcu
こんな感じで新しいタブで表示してサイト上から印刷できるものを想像しているのですが
これでも厳しいですかね・・・？ 予め全種類のカードが敷き詰められたページを用意しておいてリンクするだけなら簡単だけど
ボタンを押して生成となるとjsが必要
あと個人的にはやりたいことから考えるとpdfを作ってリンク貼ればいい気がする 動作イメージが分からないんだけど、各カードでそれぞれ出力する枚数を指定して
枚数指定した全カードを並べて出力したいってこと？
いずれにしろ「選択した分だけ敷き詰めて出力」とか「新しいタブで表示して…」
ってのはCSSだけじゃどうにもならない
まぁ、要求仕様によっては無理矢理CSSだけでどうにかなりそうな気もするけど
スマートな方法じゃないし、ソートしたいとか言い出したらどうしようもないから
PHPとかJavaScript辺りで頑張った方がいいかも レスポンシブで画像の本来の幅を超えないようにしたいので
max-widthに本来の幅を調べてpxで指定するのめんどくさいんだけど
max-widthに画像の本来の幅のpx指定するしか方法はないんでしょうか？
もっといい方法はないのかな？ >>83
印刷フォーマットはそれ用のCSSを用意しとけばいいとして、
選択した数を拾って別タブに要素を生成する過程はJavaScript使わないとムリね
JSは機能ごとにWebで検索しても身に付かないので、オライリーの「入門 モダンJavaScript」を一冊やっとくのをおすすめ
>>88
max-width: max-content; でいかが？ >>86
なるほど，ありがとうございます．
やはり使わないカードというのが出てくるので全部４枚ずつ印刷するとなると
莫大な量印刷しなくてはならない問題があったので元レスの仕様にしてみたいなと思ってました．
>>87
ありがとうございます，それであってます．
javascript 了解しました．
>>89
ありがとうございます．
サイトを作るのは高校の授業以来で用語や文法はある程度覚えてますが
何書けば忘れてしまったもので，cssやhtmlについての書籍は何がおすすめでしょうか． CSSの質問させてください！
WordpressのMassive Dynamicというテーマを使っているのですが、
画像がwidth: calc(100% / 2 - 20px)でサイズ指定されています
この指定により、全体を表示したい画像が何故か拡大（もしくは原サイズ？）＆トリミングされてしまっています
指定を無効にすると画像は全体が表示されますが、レイアウトが崩れます
calcを適用したまま画像を全体表示させたい場合、どういう解決策があるか教えていただけませんか？
よろしくお願いいたします！ >>90
htmlやcssは覚えることも少ないし（属性は多いけど）、
MDN（https://developer.mozilla.org/）でいいんじゃない？
書籍がいいなら同じくオライリーの「モダンWeb」とか「CSS3開発者ガイド」かな >>91
こちらが問題をはっきり理解できてないかもだけど
object-fit: contain;
とか >>93
ありがとうございます！
今出先なので確認取れないのですが、試してみます
スクショとか上げた方が良いでしょうか？ 画像の表示幅を画像の本来の幅の20％にしたいんだけど
width:calc(max-content * (20 /100))とやってもうまくできませんでした
どうやればいいですか？ >>96
「画像の本来の幅に対する相対」は現状のhtmlとcssだけでは使えない
jsが必要 >>89
家に着いて試してみましたがmax-contentじゃどうも出来なさそうです‥‥
width: calc～はliについてるスタイルなんです >>96
どうしても元画像のサイズを基準にしなくちゃいけない理由があるなら仕方ないけど、
そうでないなら決め打ちにしたり、ボックスや画面幅を基準にする方が実装は楽ね
JSでやる場合はちょっとめんどいよ
対象の画像ごとに、データがロードされた後のタイミングで処理するようにしないとなので… WEBの画面全体を上段と下段に分け、下段を3分割したく
次のソースを試してみたのですがうまくいきません。
画面の上半分だけで、上段と下段に別れてしまいます。
どこを直せばよいか教えてくださいませ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Test html5 iframe</title>
</head>
<body>
<iframe src="top.html" width="100%" height="24%" name="top">dummy</iframe>
<iframe src="left.html" width="32%" height="74%" name="1">dummy</iframe>
<iframe src="center.html" width="32%" height="74%" name="2">dummy</iframe>
<iframe src="right.html" width="32%" height="74%" name="3">dummy</iframe>
</body>
</html> >>102
<style>
html, body{ height: 100%; }
</style>
をhead内に追加すればいけるんでない >>103 さん
ありがとうございます。
試してみましたが残念ながらうまくいきません。
ブラウザは、Firefox,Chromeで表示確認しています。 >>105 さん
すいません、104での確認が間違っていました。
<style>
html, body{ height: 100%; }
</style>
を追加したらうまく表示できるようになりました。
おかげさまでスマホでの表示も意図どおりになりました。
ありがとうございます。 スマホブラウザってスクロールするとアドレスバーとか消えたりウェブサイト作る側としては鬱陶しい挙動するよね position:fixedの画像を中央揃えにするには
どうやったらいいんすか？ >>111
・left: calc(50% - (画像の幅 / 2))を指定する
・fixedを指定した幅100%のボックスでラップして、好きな方法で中揃えにする >>112
はい
>>113
ありがとうございます 特定のhtmlとcssファイルから
使っていないcssを抽出するｂﾆかできたら嬉ｂｵいけどそういｂ､のできる？
他人が作った使い回しcssの行が多すぎて・・・ ほんとここのスレ民がぶっちぎりで1番優秀ね
質問が出来たけどHTML/CSS関係じゃないからここじゃ聞けないという悲しみ >>116
一番上やってみたらメールアドレスに送られたURLに色々登録みたいなのさせられそうになって不穏な感じがしたから中断したわ
紹介ありがとう javascriptでclass設定したりしてたら
staticに使ってなさげなの報告して
javascriptソース眺めるしかないのかな 中央揃えした画像の下に文字をいれたいのですが、文字の1文字目と画像の左側をきっちり揃えるにはどうしたらいいですか？ >>118
一番上は有料サービス、二番目と三番目はデプロイ時に実行する無料ツールね
ローカルで手軽に使うには最後のuncssがよさげかなあ
時間あいたらこっちでも試してみるよ >>120
画像と文字をdivやfigureの中に入れて、そのボックスを中央揃えに、ボックス内は左揃えにする
文字列が画像の幅より長い場合は、ボックスにrelative、文字にabsoluteを指定して絶対配置 Ruby on Rails 7 のデフォルトのCSSフレームワークは、
Bootstrap, Bulma, Tailwind, PostCSS, Dart Sass の5つ
Bootstrapが多いが、Tailwindも増えてきた
確か、Tailwindは、使っていないCSSを削除できる。
Bootstrap, Bulmaは、知らないけど >>126
こいつコピペ爆撃魔なんよ
KENTAだかなんだかいう情報商材屋の宣伝してる 質問
テキストを全幅ではなく、テキストの幅に応じたborderの幅で囲いたいので
display:inline-block;にするとイメージ通りになるんだけど
次の要素は横に並ばずに改行させたい。
入れ子にして親要素にdisplay:block;すれば済む話だがタグを無駄に増やしたくない
つまり
display:inline-block;の改行する機能と
display:inline-block;
の要素に応じた横幅
これを両方兼ね備えた新しいプロパティとかって出てなかったっけ？ ↑
間違えた
display:block;の改行する機能と
display:inline-block;
の要素に応じた横幅
これを両方兼ね備えたのが知りたい width: fit-content; のことかしらん？ >>130
おお！さすがです！ありがとう
displayプロパティ探してたら無いと思ってたら
widthの値とはｗ >>132
テキストを入れていないspanのブロック要素がずれているという事？
インライン要素のデフォルトがベースラインになってるからでは？
liにvertical-align: top;等指定で解決するはず >>133
凄い！揃いました。ありがとうございました。
空白か改行が混じってると思い、ずっと探していました、助かりました あけましておめでとうございます。
htmlエラーチェッカーでh7を使ったら怒られたのですが、h6とpの中間くらいの便利なタグはないでしょうか？
良く分かっていないですがバージョンは<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">です。 >>136
文字サイズでは選んでないです。
h6の下位にあって、章の題として使うのに適切なタグが知りたいくらいの意図です あけおめ！
そこまで深い階層のドキュメント作ったことないけど、自分ならstrongをブロックにして使うかな そこまで深いと
divなどの無難な装飾タグを使うかなあ >>135
文章の構造が深すぎる
通常はh1がサイト名、h2がページタイトル
文章の多いページならh3で各章の見出しに使うぐらい
h4以降はほとんど使わないはずだぞ sectionを入れ子にしてh1を下のレベルでも使うって形にすれば
http ://qiita.com/ryokkkke/items/09017cf454953e8647fb
個人的にはやらない方法だけど 遅くなりましたが、勉強になりました。
>>138-143
どうもありがとう！ 以前より回答者のレベル上がっとるな
一昔前はjavascript絡むとダンマリする人多かった時代もあったし
初心者が解答していることもあったが cssを一通り思い通りにできるようになってから
bootstrapやってみたけど、class名が複数で溢れて逆に面倒臭いな・・・
デザイン不要の認証・管理画面や商品登録のような無機質なページならboobtstrapが向いてそうだけど
おまいらbootstrapで一般サイトとかで使いこなしているの？
アコーディオンとかインタラクティブな所も望むとbootstrapのメリットになるのかな もちろん使いこなしてるよ
どんなデザイナにも自由自在で便利
おれはtailwindよりも楽 >>146
業務用こそ手書きでは？
>>149
語る事なさすぎでは >>150
146だけど、俺も業務用は手書きだわ
昔は良かったかも知れないけど、これだけクラス名多いと手書きのほうが利便性良いよな bootstrapはノンコーダー向けの簡易プラグインって扱いだわ
主にCSS苦手なバックエンド専門のプログラマ御用達
デザインからコーディング起こすガチデザインのではなく
デザイン不要で簡単なUIだけ欲しい時のもの
web制作会社はちゃんとしたフロントエンドが居るから誰もつかっとらん WordPressのデフォルトテーマとか、出来合いのテーマを使うようなもんだな bootstrapとかをベースに使えばreset系css含めてブラウザ間の差異を解決してくれるからむしろ使うべきだな
特にスマホ対応
すべて自分でゼロからやるアホはそのへんわかってない自称フロントエンドのゴミ 俺はサーバとかインフラ側だから、システム管理画面を作るには重宝してるけど
呪文のようなクラスが多くてhtmlがなんだか雑多に見える
グリッドだけ使ってあとは自作で良いのかもな >>156
活況なbootstrapスレを案内してくれ、最近使い出したからそっちにいくわ @mediaはよく使われているけど@supportsや@pageなどを使うことはほとんどないですか？ いまんとこ@ルールで常用するのは@charset、@import、@font-face、@keyframes、@mediaぐらいね
@containerも使いこなせば便利なんかな？ @supportはマウスホバーできる端末だけホバーでcss変える時に使う @containerはfirefox待ちかな
わりと便利だとおもう ブラウザをアップデートしない奴らもいるから使えるかはそいつら次第 やばいやばいCSSでsin(),cos(),tan()がほぼ全てのブラウザで使えるようになるんだって
これで数学勉強するのやめたのに！ 三角関数は座標系と角度を相関させるのに便利な道具
理解せずとも使い方だけ覚えればいいのさー 文法の質問じゃないんでスレ違いだったらすみません。
ウェブ開発に関わる機会が無く、最近ようやくHTML/CSSの勉強を始めたのですがどうも単なる暗記物という感じがして面白くなく身が入りません。
これまで色々な言語に触れてきましたが、例えばこんな文法があるんだ、こんな風にすっきり書けるんだという技に触れられるのが好きでした。
言語から独立した分野だとアルゴリズムだったり設計で色々思考をめぐらしたりとそういうところに面白さを感じてきました。
一方でこっちは文法は単純で山ほどある属性を覚えていくだけというか。
結局画面デザインするだけのための表記法でしかないなって。そもそも見た目にそんな興味無いんだよなぁと。
もちろん初心者なので全く先が見えてないというのは重々承知なんです。
だからHTML/CSSやっていくと、この先こういう面白い技術があるよ、こういうところで頭使うよみたいなのがあれば色々話聞かせてほしいです。 自分で書いてビジュアルがきちっと実装出来た所が面白いので技術面でも面白く感じる事はないかもしれない
新しい仕様も今までこう書いていたのがこれで行けちゃうんだ！って所で興味引かれていくのがCSSだと思う ただのマークアップ言語であってプログラミング言語じゃないんだから、そこまでやれることはないんじゃないかね
それならjs組み合わせて、すんごい斬新なサイトを作ればいいじゃない
jsなら、あなたの求めている事を駆使して色々出来るよ 暗記物だけど特殊なレイアウトの出題に対して
どれとどれを組み合わせれば実現できるかをあれこれ考えるターンがくるとちょっと考える楽しさはあるよ
たまにだけどね >>168
見た目に興味ないならhtmlのみでcssはやらないほうがいい
といっても現実にはcssを使わないとまともな表現はできない
つまり苦しむから辞めればいいんだよ 漏れは、Ruby on Rails, Linux, Docker, AWS Solution Architect しか分からない。
HTML, CSS もよく知らない。SASS は知っているけど
Rails 7 のデフォルトのCSSフレームワークは、
Bootstrap, Bulma, Tailwind, PostCSS, Dart Sass の5つ
Bootstrapが多いが、Tailwindも増えてきた。
CSSが分からない香具師は、これらを使えばよい >>168
＞結局画面デザインするだけのための表記法でしかないなって。
そうよ
無くても困らんよ vscodeで、特定の文字列を含まないファイルを検索することはできますか？ >>168
HTMLやCSSはDOMの概念やUIコンポーネントの実装を覚えるための基礎でしかない
さくっと覚えて本命のJavaScriptに進めば望みの世界よ そもそも、パソコンやインターネッツは縮小してゆくよ エディタでコピペした時のインデントについて質問
例えばvscodeで
tabキーで4つインデントされたソースを2行コピーして張り付けると
エンター押した時の開始位置が既にインデントされた位置なので
インデントが倍になってしまったりするの良い方法ないかな？
1行ならインデントを含まずコピーすればいいが
何ってるのかわからないかもしれないが俺も何言ってるかわからなくなってきた ご意見ありがとうございました。とりあえずjavascriptいじりはじめてからまた考えてみようと思います >>181
エディタ側の機能依存なので、使ってるエディタのスレで訊く方がいいと思う VSCode の質問は、プログラム板のVSCodeのスレで聞いてください！ >>181
インデント含めたくないなら矩形選択してコピーすればいいのでは？
ペースト後の処理はエディタや設定によるけども このたびは、息子が糞レスをしてしまい、皆様には大変ご迷惑をおかけしております。
深くお詫び申し上げます。
息子は幼い頃に父親を亡くし、そのショックで内気な子供になってしまいました。
そのせいか、小学校、中学校、そして高校といじめにあっていたのです。
朝、学校へ行くと下駄箱にあるはずの自分の上履きを隠され、昼食となると お弁当をトイレへ投げ込まれ、
休み時間にはプロレスと称して息子だけが一方的に殴打されるような日々が１０年以上も続いておりました。
度重なるいじめに耐えきれず、息子はとうとう志半ばで高校を中退し、大学進学の夢も諦めねばなりませんでした。
失意のゆえでしょうか、家庭での息子はいじめの反動のせいでしょう、ことあるごとにわたくしに乱暴を振るうようになっていきました。
度重なる暴力のせいでますます息子は部屋に引き篭もり、自分だけの世界に閉じこもるようになってしまいました。
そんな折り、祖父が気分転換にと、息子へパソコンを購入してくれたのです。
息子はこの歳になるまで、恋人はおろか友達さえもいないようでわたくしも大変心配しておりましたが、
この５ｃｈを知って以来、息子も少し明るくなったようです。
どうぞ皆様、息子を暖かく迎えてやってくださいまし。
本当は良い子なんです。よろしくお願い申し上げます。
>>187の母より デフォルトではテキストの一部のみを表示して
ボタンか何かをクリックして続きを読めるようにしたいのですが
checkboxもjsも使わず実装できるタグはどんなんでしたっけ これかな？
<details>
<summary>クリック</summary>
本文〜〜〜
</details> >>190
それですそれです！
ありがとうございました paddingとmarginの使い分けが今一
分からないのですがどう使い分けてますか? 作ったからこれのmargin-topとpadding-leftの数値弄ってみて
https://jsfiddle.net/nayu4j79/ >>194
paddingは皮下脂肪でmarginは人との距離と覚えたらいいかも
paddingは要素の内側でmarginは要素の外側 >>194
paddingは要素の内側の余白で、主にボックス内の可読性に関わる調整、
marginは要素外側の余白で、主に要素間の距離を調整するって感じ >>190
こんなのあったのか。知らんかったわ
でも、開閉のスムーズなアニメーションがcssだけだとまだ無理ぽいね。
アクセシビリティ面ではこっちのがいいけど、蔵には見た目でしか評価されないから
まだ結局jsでええやんって感じだな。 html，css学びながらjavascript すっ飛ばしてPythonやり始めると困ることある？ すぐには困らないだろうけど、PythonでFlaskとかやるならいずれ必要になるんでない >>199
蔵用にはそれでいいが常に情報は仕入れて自分自身のスキルや情報はアップデートしとくべき 色設定をやらずにダークモードを導入する方法はありますか？
なるべく色はデフォルトのままにしたいのでhtml/cssで色関係の設定を一切していないのですが、filterでダークモードを追加するとchromeで前景色は反転しますが背景色が白のままです
operaは@media関係なくダークモードにできます
@media (prefers-color-scheme: dark) {
/* html全体の色を反転させる */
html{
filter: invert(1) hue-rotate(180deg);
}
}
background-colorの初期値transparentが原因だと思いbackground-colorを設定するとchromeは前景色も背景色も反転しましたが今度はoperaで背景色が明るい灰色になります
@media (prefers-color-scheme: dark) {
/* 背景色をシステムカラーに設定 */
html{
background-color: canvas;
}
}
chromebookしかないのでedge、safari、firefoxでは確認していません >>204
color指定をデフォルトのままにしたい理由って何なの？宗教上の理由？
Darkmode.js
https://darkmodejs.learn.uno/
Night Mode 🌚🌝 with Mix Blend Mode: Difference - DEV Community 👩💻👨💻
https://dev.to/wgao19/night-mode-with-mix-blend-mode-difference-23lm >>204
ダークモードを導入しないって選択もある
いや真面目な話、webのダークモードって利点ほぼないのよね
視認性は落ちるし、OLEDでかつ背景が完全に黒でないと節電効果もないし… >>205
デザインできないし、こちらが把握していない色を使ったブラウザの機能があった場合それを制限したくないからです
宗教的な理由なのかもしれません
紹介していただいたものは自分には難しいので>>206さんが言うようにダークモードは考え直すことにします
お二人ともありがとうございました tableのtdの横幅をCSSのcalcを使って指定したいです。
「20% + 10%」とか「20px + 10px」とか同じ単位なら上手く計算出来ているんですが、
「20% + 10px」と単位を混在させると計算されずwidthが未指定の状態になってしまいます。
同様の指定をdiv要素に使えば問題なくcalcの計算通りになるようです。
tableのtdの横幅指定には単位を混在させた計算はcalcでは出来ないのでしょうか？ >>208
動作が違うのはdisplayがtable-cellだからやろね
blockやinline-blockに変えてやればdivと同じ挙動になるけど、表の体裁整えるのに余計な記述要るからめんどいよ
+10pxの分はpaddingで実装した方がいいんでない？ >>210
ありがとうございます
table特有の仕様なら仕方ないですね
calc使えなくても6パターンくらいなので少しコードは増えますが今回は手動で計算しちゃおうと思います Web界隈はどんどん環境が変わるからなあ
ウチのやり方が最適よとかタカを括ってると足下が危うくなる ｊｓもES2016あたりから微妙についていけてない IEスルーでよくなって、技術の実用世代も進んでるのよな ieをスルーできるようになって今は
safariにイライラしてるｗ Safariそんな変な挙動するっけ？
WebKitが対応してないプロパティは多いけども safariってlinear-gradient で tranceparent使えるようになった？
Chromeとかfirefoxとかその辺では問題なくても、safariだけ挙動がおかしくなるのマジ勘弁
IEと同様に消えて欲しい Manaちゃん
写真のイメージで永遠の25歳くらいのイメージだったが
確か15年前くらいから既に有名だったが
ん？今何歳なの？って思って調べたら38だった
初心者の頃からお世話になってます >>223
それ。最近の人はもう知らんのだろうね。
実際この人以外の制作ブロガーとかほとんど消えてったし デザインとクオリティが突き抜けてたFLASHの会社も消えてるし
参考にしてたデザイナーの人も更新しなくなってしまってるし
最近は目標とするサイト（定期的にソースチェックして参考にしたり）もないわ
チェックしてるサイトや発信者あればおせーてくれ >>226
まあそういう事になるんだが、
1つのサイトを長期にわたり徹底的に観察・分析するととても効率よく上達できる
特にそのサイトが新しいcssやライブラリ好きだったり、デザイン力が高いと適当に探すより圧倒的に効率的だで SNSが一番やばい
副業で稼げます！みたいなゴミ情報にまともな情報が駆逐されてる
英語できればまた違うのかもしれんが ツイッターは別の趣味の方で使ってるから
WEBの情報を混ぜたくないんよな。双方の業界で情報が共有されたり繋がってもらうのが嫌だから。
アカウントは別で作ってるけどいちいち切り替えるの面倒だしで結局web用のアカウントはあんま見てないわ 俺もTwitterはラーメンのことしか書いてないわ >>230
アカウントの切り替えすら面倒とかそんなんでよくこの仕事ができるもんだｗ webデザインのレベルが全体的に上がりすぎて情報発信のハードルは上がった感あるね
あとスマホの登場でレスポンシブ対応デザインになって今までとは違うスキルが重要になったのもあるかな >>220
Safari 確かにイラッと来る事が多いが、何故かIEみたいに袋叩きにはされないね
linear-gradient の件は tranceparent の代わりに rgba(0, 0, 0, 0) で回避できたような覚えが… rgba(0,0,0,0)だとtranspaentと同じと認識されることがあるからアルファを.1とかにしてたな >>236
Safariだとtransparentは黒の透明（つまりrgba(0, 0, 0, 0)）状態だから
アニメーションする際は気をつけるって何かで読んだ
途中が黒っぽくなっちゃう そうそう、220だけどtransprent使えないから、rgbaで回避するようにしてるよ
細かいところだけど、気にしながら書くのが面倒だわ… >>237
普段からrgba(255,255,255,0)や#fff0使った方がいいんかな？ > Safari 確かにイラッと来る事が多いが、何故かIEみたいに袋叩きにはされないね
IEと比べりゃ使ってる奴が極少数だから 単純にIEほど悲惨な崩れ方しないのもある
overflowとかpositionに地雷がたくさん埋まってるが モーダル使いたい時のタップやスワイプ時の挙動が
winやAndroidと違ってて困った覚えがあるよ フォントのラインがずれるのがやっかいで困るわ
例えばpadding 4pxを指定した時にchromeやedgeなら上下左右にちゃんと均等に4pxの隙間が出来るのにそうならないんだよね
なんかテキストが少し上に寄ってしまうのよ
大袈裟に言うとこんな感じになる
--------
テキスト
--------
iosのsafariなら意図通りの隙間が出来るからpcのフォントの問題なんだろうか
webフォントで解決しそうだけど日本語のwebフォントは重いからなあ Safariの話よね？ずれるなんて現象になったことがない
IEは同じようなことあるけど >>244
ヒラギノはやたらと下のスペースが空くね
もちっと和文のベースライン上げた方がよさげ
Notoならセンターに揃うんだけど macOSの環境ないからヒラギノの確認ができないけど
cssリセット云々じゃなくフォントが固有で持ってるベースラインの話だと思うよ
webフォント利用時に似たような経験あるけど
OSが個々に持ってるフォントじゃないから調整はまだしやすかった 定期的になんか新しいプロパティ使った課題だしてくれないか？ｗ
みんなでここで最新のを見るようにしてスキル向上しようよ！ （定期的に調べんのめんどいからここで教えてくれよ） すいません、Figmaに関するスレってあるでしょうか。
探しているのですが 見つからず・・・ なるほど
Have you ever wondered why padding is inconsistent above and below text elements?
We can fix that with `leading-trim`. Available now in Safari Technology Preview.
https://twitter.com/shadeed9/status/1624092817814429697
https://twitter.com/5chan_nel (5ch newer account) >>250
建てていいと思うよ
XD死亡確定でみんな移行してるタイミングだし leading-trim: both;ってググってもろくにでてこんな >>251
TP163でリンク先のCodePenいじってるけど、日本語でのtext-edgeの扱いがよくわからんなー
まあcap alphabeticのままでいいならそれはそれで… >>254
Fireworksの元ユーザだったりして >>258
GoLiveやPageMakerやFreeHandも踏んでれば役満やね
今回Figmaの方を残したのはアクティブユーザの差がケタ違いだったんだろうな… 「元データが.fw.pngしかない」とかいうクライアントがちょいちょいいるせいでwin機にfwCS6入れてるけど
XDも同じ理由で開ける環境残さないといけないんだろうな
結局PSD最強なのでは…？ 今から20年前だけど「fireworksのベベル」のためにfireworksばっかり使ってきたけど、後になってphotoshopでも使えることを知ったなぁ fireworksとXDを奇跡的に回避できたぜｗ
なんとなく嫌だなーって思いながら避けてたら消えた
flashのAS3も見事回避した。
GoLiveは最後まで誰より使い倒したけどｗ
DWも5くらいまで使った FLASHが一番悲惨だよな。
自分が何にBETするかで時間と手間を大損する可能性があるって怖い事よな
下手したら気力も失うかも >>260
ありがとう。 これは はよ実装すべきよな Flashはお金もう良くてレイアウトも絶対ずれなくてよかったなー
AS3で無理って投げ出したけど かなり初心者なのですが、完全に一人で フロントエンド(Vue3 + Nust)、バックエンド(Fast API) のサイト（社内向け）をいくつか製作しました。
そういう場合は、共同編集とか デザイナー→コーダーへの受け渡しとか 全く発生しないのですが、その場合はFigmaを使う意味って
無いという理解でよいでしょうか。
ソースを書いているとき、CSSの指定方法がよくわからない時が多々あるので、Figmaで基本的なところを作ってみてCSSの書き方が
分かればうれしいなぁとは思っているのですが。 >>267
うん。
Figmaでヒントになる事があるなら無料だしそれでいいんじゃない >>268
ありがとうございます。
必須ではない件、了解です。
評判の良いソフトみたいなので、ちょっと触ってみようと思います。 無知で申し訳ないが
XD死亡確定ってのは何かあったんだすか？ 今年に入ってXDの単品発売を辞めたんだよ
単品で契約する人がいるのかとも思うが >>271
今後はメンテナンスモードだと発表があった
事実上の開発終了 tableタグで
<tr>
<td>ああああ</td>
<td>2023/2/12</td>
</tr>
の日付が過去ならtrにclass="past"を入れるか、背景が変わって欲しいのですがどうやれば良いでしょうか？ 時間関係をクライアント側に任せると時差とか気になるところだけどサーバー側で処理するとキャッシュ周りがなあ CSSのことをほとんど知らないままTailwindcssをだましだまし使っているのです、CSSのことを勉強する（生のCSSの使い方を知る）必要ってありますか？
趣味レベルであって、プロを目指しているわけではありません。 そんなの用途レベルに応じるとしか。
仕事でないなら必要に応じてその時にまなべばいい
間違ってもそれで副業しようとか私出来ますなんて言わなければ。 >>283
ありがとうございます。
おかげで頭がスッキリしました。
助かりました。 解答あるか不明でもいいなら単に俺が詰まったところ放流するが https://jsfiddle.net/un2gyfcj/
tableのcollapseみたいに
navによくあるliをこうするとborder-boxで重なるかなと思ったけど
適切なやり方ってある？ >>289
liのborder-rightをnoneにして、li:last-of-typeにborder-rightを設定する
https://jsfiddle.net/vf1munx8/ margin-rightを-1pxしてliの幅を+1pxするって方法もあるね
https://jsfiddle.net/ozum4fdw/ >>290とやってる工数はほぼ同じだが、
border-width:1px 0px 1px 1px; のような指定もできる
https://jsfiddle.net/7382fm9d/ chatGPTに聞いたら
ul {
list-style: none;
display: flex;
margin: 0;
padding: 0;
}
li {
border: 1px solid black;
border-left: none;
padding: 0;
flex: 1;
text-align: center;
box-sizing: border-box;
}
li:first-child {
border-left: 1px solid black;
}
li:last-child {
border-right: 1px solid black;
}
って返してくれた viewport width=device-width
フォントサイズ vwで指定
フォントサイズをvwで指定して上のようにするくらいなら
下のように指定した方がレスポンシブ対応が楽だと思うんですが
多くのサイトがwidth=device-widthにこだわるのはなぜなんでしょうか？
viewport width=500などを指定し固定
フォントサイズ pxで指定 >>293
chatgptおもしろいよな
それってどんな質問したらそう返ってくるの？ >>295
以下のhtmlのli要素を罫線ありで横並びにする
CSSを書いてください
〜htmlをコピペ〜
ってお願いした
一発じゃできなくて、
borderが二重になるのやめてとか
li要素同士の隙間はなしでとか対話したよ
物事をうまく伝える能力、対人間というか
対ChatGPTでできる人は一回の質問で答えてくれるんだろうね >>296
質問者の内容をパースして結果を出すのがすごいよな
俺もphpのログイン部分おせーて、みたいな感じで聞いて取り調べのようにやり取りしたら
確かに完璧にあっててびびった
言えば言うほど適確に出すのが恐れ入るわ >>290-291
これがわかりやすいね、マイナスマージンはパッと見たとき想像力が追いつかないから慣れない
俺もchatGPT使うけど、変に会話が続くから怖いわ
リアルと会話せずにchatGPTと会話が楽しくて続けるような人がいそう
bingに実装されたというしbingでの利用者が増えそう(ただし検索はクソ) >>293
li:last-childの指定要らなくね？
こっそりツッコミどころ仕込むから嫌なんよねchatGPT… > 取り調べのようにやり取りしたら
カツ丼も注文したか？ｗ >>299
やり取りに飽きたのでそのままペーストしたけどいらんね
多分、対話の中で一部の要素の左右のボーダーが二重になるのをどうにかしてって書いたからかも webのhtmlからプログラム言語のすべてが
オンラインスクールがchatGPTの影響受けそうだな 見出しやリストの前にそれぞれ異なるアイコンを設置する場合って
結局どういう方法が一番楽なのかな？（可変で）
・background-imageを使う ：そのままだと可変に対応しない
・imgタグを直接埋める ：可変に対応するが、なんか色々めんどいイメージ
・before疑似要素でbackground-imageを使う ：before疑似要素にする意味あるのかな
・before疑似要素でimgタグを指定（content: url(hoge.jpg);）：可変に対応しない
例
https://beartail.zendesk.com/hc/article_attachments/360000748021/______.png >>304
ウインドウサイズ、文字サイズに応じてアイコンも自動的にサイズを最適化するようにしたい background-imageだとアイコン部分の横幅・高さまで指定するのが面倒。
imgみたいにwidth:100%を指定すれば自動的にアスペクト比保って伸縮してくれたらいいのにって事 文字サイズに応じてならemとかで指定すればええやん >imgみたいにwidth:100%を指定すれば
imgにcss指定するのは面倒じゃないのに
>background-imageだとアイコン部分の横幅・高さまで指定するのが面倒
なのが全く意味わからん
高さautoにするだけだろ >>308
怒ってる？
実際普段はどう書いてるの？
autoだと高さが認識されない事ってない？
もしよければ具体的なソース書いてくれると嬉しい 結局15行くらいにはなるのかな
もっと楽にはできんのかねぇ 今のところこんな感じ。。
li:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 1em;
height: 1em;
max-width: 24px;/*←ここは汎用化の為なんとかかしたい*/
background-size: contain;
}
li#icon1:before {
background-image: url("hoge.png");
}
>>312
サンクス。試してみる 疑似要素でやるのはくそめんどい
背景画像でpadding空けたほうがまし
俺が疑似要素でやるならテキストをspanで囲んで疑似要素とテキストをflexアイテムにする テキストspanで囲まなくてもflexなるのでは？ marginとかテキスト側につけたいとspanになるな 確かにただアイコン付けたいだけなのに>>313はくそめんどいよな。
誰か具体的なコードで見せてくれよ。
背景画像だと、親要素からはみ出せないからデザインによっては難がでるな 自分はやらないんだけど他人のcss見てるとたまに
<i>の空タグでアイコンつけるけど
あれは何の文化？ >>318
Font Awesomeの設置の仕方で推奨してるやつじゃないかな
そういえばFont Awesome最近見なくなってきたね >>319
IE終了した今ではSVG画像置いたほうが早いからなあ >>313
リキッドでやるならcontentに直接svg指定するのがよさげ
要素側の記述が複雑になるから省力化にはならんけどね
https://jsfiddle.net/hg6oLw03/ >>322
content: urlって惜しいけど使えねーって思ってたけど
svgにすれば伸縮できるとは。。
さんくす！ SVG画像ってfontawesomeみたいに外部からリソース参照して使うの？
サイトと同じサーバにアップロードして指定するの？ 他の画像と同じ形でも扱えるけど、SVGは実質XMLテキストなので、HTMLやCSSに埋め込んで使うほうが自由度は高いよ SVGはソースが長いのと、扱いがめんどい（pngやjpgみたいに画像ビューワーやPhotoshopで弄りやすくない）のがネックやな。
そういやURL短縮サービスもいつの間にか廃れたけど、あれ結構好きだったわ
SVGもソース短縮サービスみたいのあればいいのにね vscodeやEmmetで実は便利なショートカットってある？
最近知ったのが、Ctrl+Dで同じ文字列を選択していくやつ
これはまじでもっと早く知っておきたかったわ cssで色変えたりしなければsvgはほとんどimgで置いてるわ >>327
イラレで直接編集できるし、ファイルの扱い自体はビットマップより好きだな
ソース長くなるのはまあしゃあない
インクルードにシンボル定義して使えば多少すっきりするけど、スタイル固定なら>>329の言う通り外部ファイル扱いの方が楽ね
>>328
その辺はエディタ別の専用スレで訊いた方がいいかも svgの心配は、どっちかというとレンダリングの負荷、、、
実際どうなんだかわからんけど
（クソタブレットで挙動不審になったりしたから） nth-of-classとでも言うのか
同じclassのついたDOMだけカウントするセレクタってまだ無い？ >>333
例えばこんなのがあるとき
<div class=""></div>
<div class="hoge"></div>
<div class=""></div>
<div class="hoge"></div>
<div class=""></div>
.hoge:nth-of-fugafuga(2){
}
「.hogeと同じタグの二番目」ではなく「二個目の.hoge」にあてたい
上記は例なので「このコードなら最後から二番目とかでいいじゃん」とかそういう話じゃない >>334
.hoge:nth-child(2 of .hoge)
selector list argument of :nth-child and :nth-last-child CSS pseudo-classes | Can I use... Support tables for HTML5, CSS3, etc
https://caniuse.com/css-nth-child-of こっちの方がいいか
div:nth-child(2 of .hoge) ofはまだ試用段階で一部のブラウザしか使えないから注意
同じクロミウムでもedgeとかで動かない Safriは問題なかったけどFFとEdgeが使えなかった、残念
試しに要素を混在させたら
<p class="hoge">AAA</p>
<div class="hoge">BBB</div>
<p class="hoge">CCC</p>
に対して
p:nth-child(2 of .hoge){
はCCCが装飾されずに（二つ目のhogeはp要素じゃないから当たり前）
p:nth-child(2 of p.hoge){
で装飾されるのね
早く全てのブラウザで動いて欲しい >>332
jQueryの.eq()みたいな指定があれば一番楽やな
$('.hoge').eq(1).css('color','red'); コンテナクエリってどんな場面で役に立つのでしょうか >>341
情報サンクス
つい4日前に全主要ブラウザに対応したものなんだねえ
例えばアクセス地図などある共通要素があるとして、
①一箇所は幅800pxのメイン部分に設置し
②もう一箇所はサイドバーの300pxの箇所に設置する
③但し、799px以下はスマホレイアウトになる
このケースで②と③ではデザインを変えたいケースとか。 てかやはりネストも実装予定じゃないかよー
変数も条件分岐もネストもできるなら
Sass不要論が現実味を帯びてきたな。
https://web-guided.com/2065/ まだ…まだfor文がある…
ループさせる必要もない疑似連番セレクタみたいなのが誕生するかもしれんが >>342
ありがとう
まだ実践では活用できそうな機会がないけど色々試してみます cssの変数は定義が残ってその分だけ容量増えちゃうのがね
体感できる違いなのかと言うと体感できないんだけどcssの容量削減は速度向上に繋がってSEOに有利とされてるからなあ >>339
firefoxはlayout.css.nth-child-of.enabled; trueで有効化できるけど110はバグってる、111devは問題なさそう >>343
ネストは早くほしいね
カスケードレイヤは今ひとつ使いどころが思い浮かばない… >>344
連番振るだけなら counter-increment:で既にできるね
for文の使いどころは他にもあるんだろうけど、個人的にはあまり使ってないわ クラス名、ID名に連番って意味だったらすまぬ。それはまだできないね vscodeの欲しかったような拡張機能が>>343のサイトに紹介されてたわ
・開始タグと終了タグを同時に編集 - Auto Rename Tag
・選択範囲を新たなタグで囲める - htmltagwrap
・行末の半角スペースを可視化 - Trailing Spaces
・行ごとにブックマークを付けて手軽に移動 -Bookmarks
Bookmarksは特に嬉しいわ
やっぱvscode最強だな これが無料ってMSはどうなってんだ >>350
class名の時もあるし疑似セレクタの時もあるね
animationのdelayを変数でindexと足していくとか
「一文字ずつ出てくる」みたいな時によく使う コンテンツぜんぶアニメーションしながら出てくるサイトとかあるよね 下にスクロールしたら画像も含めて
テーブルからヘッダーやpタグなどあらゆる要素が
フワァ、フワァって出てくるのって
あれ都度ダウンロードとかではないよね？
微妙に見にくい アニメーションは実用なサイトには必要なく商品を扱ってイメージ良くしたい（良くなるか？）所は使ってる印象あるかな >>357
遅延読み込みにできなくもないけど大抵は見た目だけ sassはlightenなんかもまだピュアCSSでは出来ないな
filter:brightnessみたいなのが色にも使えればな >color-mod
それ中止になってcolor-mixになった
color-mixはまだブラウザ対応してない >>358
広告的にこれは見せるべきというとこでは大いに結構なんだけど
素人センスの馬鹿蔵が相手だとあちこち動かせと口を出す vw使ってレイアウトするとレスポンシブ対応超らくだけど
PCブラウザーのズームに対応できない
とりあえずズームなんて知らんってことで了解を得たけど
みんなどうしてるんだろう?
ブレイクポイント何段階か設定してそれぞれで定義してるのかな とにかく動かして！って言うお客さんには
最初は楽しいけどすぐ飽きますよーとかウンザリしますよーとか言ってあげないの？ 最近はレイアウトだけじゃなくフォントサイズまでvwで指定するとこあるな
ツールでpxをvwに変換してまでどのスマホでも同じ表示にしたいなら素直にviewportの数値を固定化したらいいのにここはdevicewidthにこだわるのが謎 ビューポート固定するとキモイ隙間ができたりするねん 固定しても手持ちの機種では意図しない隙間なんてできたことはないな。全てosは最新にしてるからだろうか。 >>373
セクションとセクションをそれぞれ背景色指定してるときに
二つのセクションを包括するコンテナの背景色が見えたりする なるほど隙間というか小数点以下の処理の問題で背景色がすごく細く出ちゃうって感じか
全体の背景色が緑の時に下みたいな構造だと赤と青の間に緑が極細で見えてしまうときがあるのかな？
-----
赤
-----
青
-----
それならこの赤と青のブロックを囲ったブロックを作ってそのブロックの背景色を赤か青にしたら解決はできそう >>375
そうそう
ピクセルならありえない少数点が出る感じ
崩れるのが1～2箇所なら疑似要素なりなんなりで解決はできるんだけど
デバイスウィドスで出ないならデバイスウィドスにしちゃうわ >>370
viewport固定はタブレットでPC表示させる時ぐらいしか使わないなー
スマホはどのサイズを基準にしても小さすぎたり大きすぎたりする端末が出るから避けてる amazonの商品検索欄に表示されるテキストについて
www.アマゾン.co.jp###twotabsearchtextbox:style()
いつもこんな感じをublockのmyフィルターへ使用しています
ID：twotabsearchtextbox内にあるplaceholderをublock用に指定して改変したいのですが、どのようにすれば宜しいでしょうか？
入力フォーム内背景の「検索 Amazon.co.jp」という文字を完全に削除するか、または文字色指定で薄くし目立たなくしたいです
ID：twotabsearchtextboxそのものの無効化は検索機能を巻き添えにするので使えませんでした #twotabsearchtextbox::placeholderのcolorを透明に指定できればいけそうなかんじではある（てきとう） ###twotabsearchtextbox::placeholder:style(color: ○○○;) >>375
>>376
ハードウェアの実際のピクセル数とシステム上のdevice widthが一致するか正数倍の機種でなければ
ビューポートをdevice widthにしても小数点処理は入るだろうから隙間の色が見えてしまってる可能性はあるかもね
個人的には色差が大きくなければ極細なら気にならないけどクライアント次第か >>382
###twotabsearchtextbox::placeholder:style(color:#ffffff!important;)
で望む結果になりました！有難うございます
思いっきり同じ型を試していたんですが、ublockの赤字で弾かれていたんですよね・・・
スペルミスか何かをやっちまって「これで拒否られると正答は何なんだ！？」と誤認していた様です^^; vscodeでコーディングしてて
phpファイルをプレビューしたい時ってどうしてる？
日本語フォルダに色々纏まってるからXAMPPが使えん。。 あの utf-8とutf-16の違いってなんですか？ 1文字の文字コードを8bitで表すか16bitで表すかの違いだったかな :nth-of-type(5)のようにn番目を指定する方法において
親要素を跨いて全体で数える方法ってある？
例えばこの中でliの5番目と認識させるにはどうしたらいいかな？
:nth-of-type()だとhoge内で数えてしまうようで
<ul class="hoge">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<ul class="hoge">
<li>4</li>
<li>5</li>
<li>6</li>
</ul> >>391
だよね。サンクス。
jQueryのslice()で5秒で出来た・・jQueryやめられん >>390の全体を.hogeWrapというdivで括って
.hogeWrap li:nth-of-type(5){
color:red;
}
ってやっても何で効かないのか理解できていないけどそういうものだと割り切って覚えたｗ :nth-of-type(n)で効くのは親要素（この場合ul）に内包するn番目の「子要素」だからねぇ 何で直親縛りにしたんだろうな
.hogeWrap li:nth-of-type(5) →.hogeWrapの内包
.hogeWrap ul > li:nth-of-type(5) →直親の内包
って使い分けできるようにしてくれればよかったのに >>332や>>390で思ったけど
個数もセレクタで判別できたらなあ
3つまでは1行だけど4つだったら2列で2行に並び替えるとかやりたい
今はn2 n3 n4 とかクラスつけてるんだけどダサい html/cssのみで崩れを見せないためにローディング画面を表示するシステムを作りたい。ある程度ネットで調べたところ実現は可能そう。 >>398の名前ググってサイト見て色々突っ込もうと思ったけど
ツイッター読んでみたらやめようと思った
人生ｶﾞﾝﾊﾞﾚ Twitter見ちゃったじゃねえか
往年のネットウォッチのやべーやつみたいな気分になったわ ttps://github.com/PusyuuOfficial/WebSite/watchers >>397
:has()使えば4つ目があるかどうかの判定はできるね
Firefoxがなぜかまだ対応してないけど…
https://jsfiddle.net/ypa58cr1/ >>403
Firefoxは現状layout.css.has-selector.enabled; trueで有効化してもスタイルシートでは使えなくて
querySelector等スクリプトからの利用だけみたいね youtubeのトップページでマウスオーバーによる拡大を、何とかして無効または削除し、旧仕様に戻したいです
uBlockで一行CSSを打つ場合、何か良い妙案やコード例はないものでしょうか
#player-container.ytd-video-previewにおけるopacityとやらが0→1となっているくさいのですが・・・ www.youtube.com###video-preview-container.ytd-video-preview
で削除可能、自己解決失礼しました
また、アカウントログイン後であれば設定内に無効化の項目があるようです
そのインラインというキーワードから辿り、やっとこ当該箇所を見つけました >>392
他にも使ってるならともかく、このためだけにjQueryはモヤるな…
>>390なら document.querySelectorAll('.hoge li')[5 - 1]; でいいんでない iframe内のページをoption valueでプルダウンで切り替え表示したい場合
valueに外部htmlだけじゃなく
html内のhref="#id"を表示出来る？
プルダウンでidに飛ぶまでidの項目は一切読み込まないようにしたいんだけど
visibility:hiddenもdisplay:noneも非表示できてもソースに記述自体は残るみたいだし ソースまで記述NGとか言い出したらjsどころか
サーバーサイドな案件？ 紙にペンで書いたサイトイメージをGPT4に読み込ませて
サイトがすぐ作れたとかやってるけどこの業界も潮時かな
このスピードは危機を感じるな。
商売考えるなら法律系、会計、経理など今まで高くついた職種を自動化するかと思ったが、
web仕事とGPTは相性が良すぎなんだろうな 新技術マニアとしてAIのコーディング見るの好きだけど
一向に実用レベルにはならんなあ >>408
要素ごとに別のhtmlに分けるか、
要素名を渡すとその部分だけアクティブにして返すphp組むのが楽そう uBlockのmyフィルターを使用しています
5chのようにサードレベルドメインをひたっすら変えてアドレス管理しているサイトなどを、セカンドレベルドメイン以上などで"まとめて"指定することは可能でしょうか？
例えば「mevius.5ch.net##～」の箇条書きでコーディングするところを「.5ch.net」に該当するアドレス全部へ適用させたいです
.5ch.net##～
.5ch.net##～
.5ch.net##～
などと記述出来るなら、現行の5ch板に関係する11種のコードが集約され、とてもスリムになります そのまま5ch.net##～で記述したら通っちゃったよｗｗｗｗｗｗｗｗｗｗｗ
自己解決すみません
シンプルにレベルドメインごとで区切れば、それが反映されるのですね
勘違いか記憶違いで、過去に失敗したと思い込んでいましたm(vv)m いつも思うんだがuBlockってスレチじゃないの？ ublock等の広告除去系機能拡張に関する質問については、こちらへどうぞ
【Adblock】Chromeその他 広告除去/追跡防止 3
https://egg.5ch.net/test/read.cgi/software/1675510724/
ﾜｯﾁｮｲ有り
【Adblock】Mozilla Firefox 広告除去/追跡防止 32
https://egg.5ch.net/test/read.cgi/software/1659969958/
ﾜｯﾁｮｲ無し
【Adblock】Mozilla Firefox 広告除去/追跡防止 35
https://egg.5ch.net/test/read.cgi/software/1675241210/ >>411
GPT4のって見た？ 今はたぶんコーダーの補助程度だと思うんだが、
知識ある管理者が数人いれば、プログラマの必要人数なんかも今までより激減するんじゃなかろうか
WEBもこのスピードだとFigmaとかXDのデータ渡せば作れるようにすぐなりそう。
ただ、完全なweb素人がメンテや修正とかそんな甘くないと思うけど、
これから消えていく職業にいつランクインしてくるか、一般時からしたらWeb制作ってもうオワコンなんでしょ？って
なると悲しいな。
あと10年持つかな。。 ボックスの境界線にグラデーションを掛けて、その境界線を破線にする事ってできる？
これだとできないよね
border: 2px dashed transparent;
border-image: linear-gradient(to right, #405DE6, #5851DB, #833AB4, #C13584, #E1306C, #FD1D1D) 1 100%; >>420
こういうことをいってるのかな
.box {
width: 300px;
height: 300px;
border: 2px dashed #fff;
background: linear-gradient(#fff 0 0) padding-box,
linear-gradient(to bottom, #aa0000, #00aa00 50%, #0000aa) border-box;
} >>418
このスレも今流行りのAIに聞けばいいよな～なんて思いつつ開いたけど
恐ろしいな…10年持たない気しかしない 10年といわず今年無くなってくれても一向にかまわん 何もわからない人がAIで出力されたものをポンポン貼り付けてできた！
なんてのは無理だろうからなんとも言えないな 実は>>420ってGPT3へ質問した結果の解答だったんだ。
できないよ？→すいませんこれで→だからできてないって→すいませんこれ
を無限にループされてイライラした。
出来ていない事を認識していないのは問題だが、プロンプト次第では再起処理させてなんとかなるのかもね。
>>426 >>427
それ。ここの住民は意外と冷静。
SNSだと自分でコードも書いたことないような人が
プログラマもう不要とか過激な事書いて目立とうとしてる カンプ作成ソフトからコード出力できるようになったとき
CMSができたとき
ノーコードがちょっと流行ったとき
そんで今AI
楽になるなら早く楽させてほしいのに今だにコード書いてる >>428
AIのことを何も知らない馬鹿がデタラメ言ってるだけ。
ただ結局、教育データがWeb上の情報なら、
最終的にはここ含めた質問サイトと同等の正答率にはなるから、
必ず即答してもらえるという利点があり、ここも淘汰される側だろうよ。
>>430
AIが出来るのは結局の所、教えた事と似たような結果を出力することだから、
既存のコードを切り張りして出来る範囲、つまりOSSに既にあるコードを再開発してるような場合は、
最終的にはそれなりの物が出てくるようにはなるはず。
全く新規(世界中を探してもそんなコードはない)の場合は、今のところ全く無理だね。
(機械学習するには評価関数(方法）が必要で、それがない。
A/Bテストの結果が大量に公開されてれば機械学習も可能だが）
お約束の事をコード無しでってのがノーコードで、本質的にはAIと対応出来る範囲は同じ。
AIは結局、Web上のデータを食わせてるだけなら新たな検索エンジンでしかない。（それでも十分役に立つが）
とはいえここみたいな質問サイトでは一問一答で完結する場合も多く、
特にCSSの質問には相性がよく、早々にここも淘汰されるだろうよ。(CSSは単離されているので）
420に対しての回答は、誰かのチャットかどこかWebから拾ってきた物でしかない。(言ってしまえば使い回し)
それに対して不満を言い、421に対して正解だとしたここのデータを食わせれば、
次からは421の回答が出てくる確率が若干高くなる。
繰り返してれば、Web上で質問した場合と同じ正答率には収束する。即答される分だけ便利。
まあ今でも誰かがボットを作って、ここの質問にとりあえず即答で投稿させ、
俺らがそれについてあだこだ言えばいいだけの話ではあるのだけど。
それで、正答率が十分に高くなり、「俺らもう何も言わなくてよくね？」となったら終了。 431をまるっと要約させたらアンカー消えちゃった
>人工知能（AI）による回答は、教育データがウェブ上の情報である場合に限り、質問サイトと同等の正答率を持つことができる。ただし、既存のコードを再開発する場合には限界があり、新しいコードの場合には機械学習に必要な評価関数が必要であるため、現時点では不可能である。ノーコードの場合、AIと対応できる範囲は同じであり、質問サイトには相性がよく、CSSの質問に特に適している。現在でも、誰かがボットを使って即答を投稿することができるため、AIによる回答が進歩すると、質問サイトは淘汰される可能性がある。 >>431
bingの解答はまさにその通りで検索結果をまんまでしかないんだけど
GPTはもうちょっとそこに手（思考）が加わっている印象。
というのが、>>420に対する解答として、透過の transparentを使用するのは
ソースの論理的には合ってるが実際には求めている破線のデザインにはならない。
（視覚的にそれを破線として解説しているサイトが存在するとは思えない）
んで、自分の場合は結局GPT君は「現在のCSSの使用では実現出来ない」という結論に至ってた。
それを人間である>>421は破線の部分を#fffを使って錯角を使って実現している
ソースが論理的に正しくないが視覚的には正しい。
ただ、これも解説サイトが複数出てきてくれば君が言うように正解できるようにすぐなるんだろうね。
まあ長くなったけど、しばらくはうちらの助手、それが何年なのかはわからない。
最近始まったプログラミング教育も下手したら無駄な事になるのかもしれない。 ちなGPTは5ちゃんねるを信頼性の低いサイト？として、参照にしない仕様のようだよ。
個人的にはスレ丸ごと要約して欲しいからURL投げたらクソレスを除外して要約して欲しいんだけどね。 現状どのURL投げてもリンク先は参照されない仕様のはず
生成されてもURLの文字列から類推される情報で構成したでっちあげよ
リンク内容をAPIに投げる仕掛けを自分で作るか、直接テキスト投げるかしかないね 生成AIがらみは別スレで議論する方がいいな
この流れ続くと初心者さんも質問しにくいやろ
【ChatGPT】Web制作者がAIを触ってみるスレ
https://mevius.5ch.net/test/read.cgi/hp/1677713771/ >>433
上手く要約出来てるが5ch向きではない。
それは教育用＝言うことを全て信じてもらえる用だ。
議論では「何故そう思うのか」が重要だし、
そもそもここでは、どの辺まで知っているか示さないと誰も聞く耳持たないだろ。
逆にそれ以上知ってる奴に反論の手がかりを与える事も重要なんだよ。
>>434
AIの場合は考えている「ように見える」だけで、
考えているわけではなく、単に評価関数の結果が高い物を出すだけ。
質問なら単純には正解を示した(ように見える)反応が得られれば点数が上がるように作ってるはず。
なら、それを逆手にとって「ナチ礼賛させてみようぜ！」となるのが向こうの常。
昔、NECのチャットボットに「エッチなことを言わせてみよう」となった日本とはノリが違う。
なお、プログラミング教育は俺は最初から無駄だとは思ってるが、
(プログラミング能力は無駄にはならないが、それを片手間の座学でやるのは無理、体育を座学で教えるようなもの)
AIの恩恵を今受けられてるのは自動翻訳ではないかと。あれもうそこらの日本人より上だろ。
ちな、420でも行けそうな気がしてだいぶ試したが、linear-gradientでは何故か駄目だった。
(俺の理解が浅いのが一番の問題だが)何故か思ったように border-image-repeat してくれない。
が、repeating-linear-gradientなら(グラデーションのかかり方は違うが)何とかなった。
border:2px dashed blue;
border-image-slice:10;
border-image-source: repeating-linear-gradient(-45deg, rgba(255,0,0,1) 5px, rgba(255,0,0,0)10px, rgba(255,0,0,0)15px, rgba(255,0,0,1)20px, rgba(0,255,0,1) 25px, rgba(255,0,0,1)30px);
都合上、コピペではなく手打ちしてるので、タイプミスあったらごめん。
image-sourceは上書きされてdashedが効かないようなので、アナログに破線にしてる。
傾いてるのは仕様(ｷﾘｯ
image-sliceの数値は間違ってるかも？(意味をイマイチ理解出来てない) どうでもいいけど、そろそろスレタイ読んで欲しい
きっとAIの方がスレタイ読んでくれると思う >>438
おまえ普段から長文ばっかなんだな
すげえ面倒くせえ奴って思われてるのに気づかないタイプだろ >>438
グラデの掛かり方は認識の通り、ボックス全体として1つの色相のグラデを掛けたいから
ボーダー内で色相変化してしまうと困るんだけが、
それはそれであまり見ない表現手法だね。しかも破線の端が斜めになるとかｗ
アレンジによっては何かしら使えるのかも。
border-image-slice、見てみたが確かにちょっとよくわからんね。 >>439
すまんね。最初に投げかけたのは自分です。
最近時にコーディングやらHPやらが一瞬で出来たって見かけるから
コーダーは今どう思ってるのかを単純に聞きたかった。。
jsスレはプログラム板に引っ越したしなんかこの板も過疎ってんなーってのもあり。 ベンダープレフィックスが必要なプロパティってまだある？ > 最近時にコーディングやらHPやらが一瞬で出来たって見かけるから
> コーダーは今どう思ってるのかを単純に聞きたかった
全部の作業がオールインワンでボタンポン！でできるわけじゃねえからなあ
作った後の管理メンテとかそういう部分が不透明だし
ブラックボックス化してるようなコーディングはお呼びじゃない >>441
421で希望の結果を得られるのならそれで全く問題ない。
ただ420だとグラデーション対象が「ボックス全体」か「破線そのものか」明確でなく、
AIが後者だと捉えての回答の可能性はある。
(実際は言葉の意味なんて全く理解して居らず、
「破線borderでグラデーション」の質問の正解とされた物を答えてるだけだが)
MDN読む限り420的手法で行けそうではあるし、(出来ないのは多分俺の問題)
誤答でもないのかもしれんよ。
少なくとも関連キーワードが出てくるだけでも役には立ってる。
斜めなのはブラシがベクトルではなく常に正転で貼られるのを誤魔化してるから。
(斜めにしないと縦線か横線のどちらかが破線にならない)
デザインは、10pxでグラデーション切ると分かるが、昔のU.S.AirMailの封筒そのものだよ。
ちな俺はプログラマ。 >>447
アンカー付けて誘導しないと移動しない病気でもあるのか？
【ChatGPT】Web制作者がAIを触ってみるスレ
https://mevius.5ch.net/test/read.cgi/hp/1677713771/ CSSの話だし良いんじゃね？
つーかもうこれからAIと共存した手法が必ずメインになるから
それらを包括してCSSやコーディングの話をしないと生産的ではない気がする。
マジで。
プロパティも関数もスペル覚えてる場合じゃない。 AIの話がダメというかこの長文おじがダメなんじゃないかな chatgptってそもそも人間が書いたソースより更に軽量で同じ動作する効率のいいソース書けるの？
htmlとかJavascriptの解説サイトから拾って適当に組み合わせてるイメージなんだけど >>454
それもうHTML5広まった8年くらい前の話だよ・・・
ただ結局今でもブロックレベル要素は改行する特性、インライン要素は改行しない特性があるから
今でも普通に概念としてはブロックレベル要素はざっくりとでも理解していないといけないと思う ひさしぶりに游ゴシック使ったレイアウト組んでたら、Safariだけ反映されなくて頭抱えてる
これだいぶ前から不具合起こしてたのね……最新TPでも直ってないし当分解決は無理だろか スレチだったらすみません
faviconってディレクトリごとに変えることできますか？ faviconはディレクトリではなくファイルごとで指定するので可能といえば可能 >>461
ありがとうございます
>可能といえば可能
不都合もあるんですかね？
favicon周りってキャッシュ更新うまくいかないことがあり自分で試した方が早いともならないですね そうそう
例えば既存のhoge.comがあったとして、新規でhoge.com/jp/を追加して
それぞれfaviconを分けたい場合、faviconのファイル名を別々にするとかしないと
hoge.com/jp/の方でhoge.comのfaviconキャッシュが表示されたりする
ブラウザだけじゃなくGoogle等の検索サイトの方のキャッシュなんかもあったり
faviconは色々と面倒だよね >>463
まさにそのあたりの話なんですね
ファイル名変える必要があるの覚えときます ありがとうございます 横だが確認作業時のキャッシュは
シークレットモードやスーパーリロード使うのじゃだめなん？
検索サイトにラグがあるのはしょうがないとして
自前で確認するだけならそれで事足りる気がするよ >>465
faviconだけはスーパーリロードしても更新されなかったり
書き換えてないのになぜか他サイトのfaviconが表示されたりしたので
バグか仕様かわからないけどそういうものなのかと思ってました キャッシュはスーパーリロードでも消えないことがあるからデベロッパーツールで消すしかない >>466
465だがすまん
デベロッパーツール出してリロードボタン長押しするのをスーパーリロードと勘違いしてた事に気づいた恥ずかしい…
確かにF5やCtrl+F5だけじゃ消えない ついスロットリングをオフラインにしてリロードしてスペース押しちまうからデベロッパーツールは危険 1. HTML の属性の値 (<li id = 'myli' onclick = 'myFunc()'> でいうと myli や myFunc() の部分)は、サイトによって "" で囲んであったり '' で囲んであったりするのですが、
どっちが正しいのでしょうか？
2. JavaScript の文字列も、"" と '' どっちで囲むのが正しいのでしょうか？
document.addEventListener('onclick', ・・・
alert('文字列'); 今まで
/* タブ形状の付箋化 */
.tab-background {
border-radius: 4px 4px 0px 0px !important;margin-block: -1px !important;
}
これによりfirefoxの現在使用中タブを昔ながらの付箋形状にしていました
v110辺りからツールバーの線を消せなくなり、-1の値を調整しても線が残ってしまいます
値の修正や、別のCSS候補などはないでしょうか 話が唐突すぎなんだが、ブラウザUIカスタマイズの話？
だとすればWeb制作の話じゃないのでスレ違いというか板違い
どうやってUIをいじってるのか知らんが、userChrome.cssの話をしてるなら
こちらへどうぞ
userChrome.css・userContent.cssスレ Part12
https://egg.5ch.net/test/read.cgi/software/1650551086/
あと見た目の説明はスクショ貼った方が話が通じやすいと思う スレ誘導されると思いました
egg板はトランプさんの選挙以降、余所でエラーなんです・・・当時書き込んでいないのに アドレスがNGワードで貼り付けできない！！！5chはもうこういうのが増え過ぎて・・・
cssに関する内容ということで、どなたか優しい方プリーズ
神様助けて！ 474で投稿されているのに、なんでやねん・・・
dotupの2964832.png で書き込めるでしょうか・・・
助言をもらう立場なのにその画像を添付することさえ出来ない"不自由掲示板"とか笑っちゃいますね よっしゃやっと投稿できたｗｗｗドメインそのものがNGワードに指定されているようですね
ですがまあ、こんなわざわざdotupを検索して、さらに2964832の画像を探し、確認してくれるような優しすぎる人もいないと思うので、残念ですわ
5chも日本と同様、オワコンですなorz
外人が管理している時点で知れた話か スレ違いでレスも読めない
完全にスルー対象
誰も助言するなよ 質問者は誘導されるのが分かってるんだったら最初に事情説明で
「○○スレに規制で書き込めないので、こちらで質問させて下さい」とか書け
何の話かも説明できるし誘導の無駄も省ける
>>479
スレ違い連投するような相手にレスする気も無かったが
お前の勝手な主観を持ち出して、いちいちスレ住人に強要すんなや
そういう事書くから、むしろスルーせず答え書きたくなったわ >>470
HTML属性はダブルクォート、JavaScriptはお好みでどうぞ
所属組織やクライアントにハウスルールがある場合はそっちを優先で こういう自治厨は殆ど荒しと変わらんな
ところでスレ違いな豆知識なんだが、firefoxのUIカスタマイズは、URL欄に
chrome://browser/content/browser.xhtml
と入れればブラウズ画面に擬似的にfirefoxのUIが表示され、開発ツールで色々と調べられるので
いじりたい場所がどこにあるのかすぐに分かるし、開発ツールでCSSいじって試すのに便利 最近の5ch は「余所でエラー」が多い。
たぶん、大規模な荒らしを締め出すための広範囲なアクセス禁止
URL は先頭部分「ｈｔｔｐｓ：//」を除いて書けばよい 書き込めるんかーいｗ
www.nvidia.co.jp/Download/Find.aspx?lang=jp#
↑
今では正当なリンク記載のない、10年くらい前から存在しているNVIDIAのダウンロード用ページです
裏メニュー的な感じですね
html>body>の次に一番下へ「<」というコードミスのような一文字があり、これのせいで不都合が生じています
この「<」一文字のみを消去するにはどう記述すれば宜しいでしょうか 普通に検索してダウンロードまで機能してるよ
なにか必要なものまでブロックしてるんじゃない？
素通しで見ても動かないならブラウザ換えてみるとか ゴガギーン
ドッカン
ｍ ドッカン
＝＝＝＝＝） ）) ☆
∧_∧ | | ／ ／￣￣￣￣￣￣￣￣￣￣￣
（ ）| |＿＿＿＿＿ ∧＿∧ ＜ おらっ！出てこい>>480
「 ⌒￣ | | || （´Д｀ ） ＼＿＿＿＿＿＿＿＿＿＿＿
| / ￣ | |/ 「 ＼
| | | | || || /＼＼
| | | | | へ//| | | |
| | | ﾛ|ﾛ |／,へ ＼| | | |
| ∧ | | | |／ ＼ / （ ）
| | | |〈 | | | |
/ / / / | / | 〈| | |
/ / / / | | || | |
/ / / / =-----=-------- | | ヒントはどうでもいい
答えたくなるといってまだ答えてない奴がいるのが問題 内容が細かすぎてCSSコーダー向けなのでここで質問させてくれ
cssファイルではなく、htmlファイルで<style>タグ内に書く際、
vscodeだとposition：の値の候補にrelativeがどうしてもでてこなくない？？
スニペット登録してもダメ。
position: て打つと候補がpoligonとかcssに関係ないのばかりでてくる。
自分だけ？？ emmetで psr でやってるから候補から選ばないな >>500
それってcssファイルかscssファイルでの事じゃないの？
htmlファイルで<style>タグ内でもできる？ デファクトとはいえエディタ依存の話だから専スレの方が知見あるんじゃね？ >>502
世の中には色々な環境下での仕事があるんだよ。
どうせ何でも使えるサーバーで全部自分でソースを管理・編集できる環境で
企業サイトとか作ってんだろうえ？ASPとかモール内ＥＣとかやったことあるんか？え？ てかGoogle PageSpeed Insights が内部スタイルシートを推奨してるのに
外部ファイルが正しいなんてのは過去の常識に囚われてる証拠 内部スタイルシートはフレームワークで外部読み込みじゃなくheadに展開するのが早いのであって
直接記述がスタンダードになるわけではないけどね >>499
https://imgur.com/jqKYxHM.png
よくわからんがこういうこと?
むしろrelativeがいきなりでてきて驚く すまん position: って打ったあとのことだね
https://i.imgur.com/0QIwCkB.png
というかんじでrelativeもでてきた >>507 >>508
すまん、その通りでできてるね。
自分も今やったら普通にでてきた。どんな環境で起こるのかがわからなくなったが、phpファイルでもできるなおかしいな。
過去にも何度も出てこなかったことあったのと今日の午前中も出てこなかったんだが。
今日はスニペットやEmmetのショートカットーキーとか色々いじくってたから治ったのかもしれん。
おさがせしました。
ラップ変換ってやつ初めて知ったわくそ～、、こんなの超つかうやんけ Shift + Alt : 行を下に複製（複数行も可）
これも初めて知ったわ >>506
1ページしか見られず直帰された時は内部スタイルシートが有利だろうけど
2ページ目以降も見られるならキャッシュの効く外部スタイルシートの方が速くないか
どちらにしろ重くないCSSなら誤差の範囲だよね
外部スタイルシートでもスコア100いくし
以前はCSSのセレクタの書き方が描写速度に影響するからって書き方にこだわってる人いたけど最近は聞かなくなったしスマホの処理速度や回線速度の進化によって気にしなくてよくなる部分だと思う @importは速度低下の問題がある上に
sassでは廃止されたので使っちゃダメです >>511
> 以前はCSSのセレクタの書き方が描写速度に影響するからって書き方にこだわってる人いたけど最近は聞かなくなったし
原理的なものだから速度差が無くなるることはないよ。
ただそれ以前にちゃんとクラス当ててればそんな心配もないから、みんなきちんとそうするようになっただけではないかと。 さーせんCSSの区切り文字について質問です
例えばpaddingは
padding: 10px 10px;
とは書くけどカンマで区切って
padding: 10px, 10px
とは書かないですよね？CSSの引数はカンマ（,）で区切らずスペースで区切るという理解でいいですか？
chaGPTに質問したら引数はカンマで区切るのが普通だと答えてサンプルコード出力してくれたんですが、その中にカンマ無くてスペースで区切ってました
そこ指摘したら「私のミスです、本当はこれです」とカンマ区切りのサンプルコード出して来て嘘混ぜてないか？となりここに来ました やっぱ引数コロン区切りのプロパティもあるんですか…
例えばどんなのがありますか？とは言いいませんが混乱しないんですか？混乱しないなら何故ですか？エディタが教えてくれるとか？
少なくともpaddingの引数はカンマ区切りじゃなくてスペース区切りですよね？ rgbaはカンマ区切りだけど（）でくくってるから区別は付きやすいですね。こんな感じで引数のカンマ区切りは特殊なんですかね？ 結局、プロパティごとに値の区切り方は異なるけども
全て憶えるというよりは、よく使うのだけ憶えるだけで殆ど事足りるし
プレビューしながら書くから、間違ったら上手く動かないのですぐ分かる
あと関数についてはカンマ区切りが多くて、rgba()なんかは色関数
でもlinear-gradient()とか、関数によって色々な区切り方があるので
結局はそれぞれ確認が必要
CSS 関数記法 - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Functions あれ、きかねえぞ
あ、これカンマじゃなくてスペースか
とか20年コーディングしてても普通にやってるから安心してくれ この世界は日々どんどん変わっていくからアンテナ張っておかないとね sassを読み込めるようになるよって
全ブラウザが対応してくれないと使えないし、メリットがいまいち浮かばない 今のところは記法もsassと違ったり様子見やね
実体とソースが一元管理できるならwebpackでビルドとかせずに更新してるサイトにはありがたい >>523
ついにきたかｗ 待ち望んだよ。
>>526
ほんとありがたい。
ちょっと書き足したいだけとかサクッと試したいだけの時にもなんか面倒に感じてたし
サイト（制作者）によって、sassの保存ディレクトリがcssと同一であったり、sassディレクトリでまとめてあったりで
書き出しが不具合でたりちょっとうんざりしてる 使ってみたけどまだまだな感じかな
でも将来的には期待できるというかこれが普通になるとマジで仕事減りそう
AIでコードを生成！ テキストを入力すると、UI要素やコンポーネントを実装するHTMLとCSSを生成してくれる -AI CODE
https://coliss.com/articles/build-websites/operation/work/text-into-html-and-css-with-ai.html 今、htmlで画像を貼るやつに苦戦してるんだけど、教えてくれる人いる? htmlで画像を表示させるコードについて教えてほしい 何に苦戦してるのか分からんが、とりあえずコレでも呼んでみ
<img>: 画像埋め込み要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/img 呼んじゃダメだｗ
とりあえずタグについて調べたいなら、例えば今回の場合
「html img mdn」とかでググれば早い ネットで検索していくつか見て、まねしてやっても、これ(https://imepic.jp/20230408/708630 ちっこくてわかりにくいと思うが)が表示したい画像の代わりに表示される.......どうしよう? ごめん。なんか色々やってたらできた。まじでありがとう 実際にどういうタグを書いてて、どういう環境で表示されないのか
さっぱり分からんので、教えようがない おっと
何が問題だったのかサッパリ分からなかったがｗ
出来たなら、まぁよかった iframeのリンク先を拡大して表示するにはどうしたら良いですか？
現状
<iframe src="URL" width="800" height="600"> 自分のサイトのコンテンツなのか外部コンテンツなのかによる >>545,547
・外部サイトを埋め込む場合、セキュリティ上の理由からフレーム内の要素は親ページから制御できない
・設定したフレーム内一杯に表示したいだけなら、iframeのスタイルに object-fit: fill; を指定
・フルスクリーン表示を使いたいときはiframeタグにallow="fullscreen"を追記 >>547
ググれば色々と出てくるけども、こういうことでいいの？
iframe でWebページを埋め込んで縮小表示する（レスポンシブ対応）
ttps://www.will3in.co.jp/frontend-blog/article/shrink-webpage-with-iframe-responsive/
外部コンテンツをiframeサイズで拡大縮小させたり、固定幅コンテンツをウィンドウサイズでピッタリ表示させる方法
ttps://blog.asial.co.jp/1314 なんか文字の色が灰色になってしまうのですがどうすればいいか教えていただけませんか？
.foreground{
background-color: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(2px);
border-radius: 8px;
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.5);
border-bottom: 1px solid #fff;
padding: 10px;
}
html{
background-image: url('ubuntu-16-04-lts-Desktop-fondo.png');
background-size: cover;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hello Bulma!</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css";>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="section">
<div class="container">
<h1 class="title foreground has-text-centered">作業用タイマー</h1>
</div>
</section>
</body>
</html> bulma.min.cssに
h1,.content h2,.content h3,.content h4,.content h5,.content h6{color:#363636;font-weight:600;line-height:1.125}
って書いてあるから
h1が#363636になってる >>552
bulma側で指定されていたのですね。
タイプセレクタよりclassセレクタの方が優先順位とのことなので
foregroundクラス内に記述してみたところうまく表示されました。
ありがとうございます。 別人だし見てもないけど、
何が当たってるかは右クリック→検証で開くDeveloperToolsですぐ確認出来るよ
むしろ使わない意味が分からない
当たり前だが優先順位が上の指定が上に表示されてる 普段はhtmlとか触らないプログラマの人が結構くるよなここ
考え方が仕様を重視してて厳格だから、過去のCSSの未完成さや適当さにいずれ気がいていくんだろうけど CSSの仕様はさほど酷くもないと思うが。むしろよく出来てる方だ。(勿論非推奨は全部使わないとして）
問題なのは、非推奨の仕様を使い続ける馬鹿と、
インスタンスとクラスの違いすら分からない馬鹿デザイナがデタラメに作ったHTML/CSSとかだと思うぞ。
JSを用意するとき、HTML/CSSがデタラメな場合、3倍ほどに仕事（とコード量）が増える。
まあ俺はWeb系ではないので直接被害被ってるわけではないが。
ちなみにCSSに該当する物がないFormsやWPFは完全にウンコで、
実際今現在あらゆるGUIがHTML/CSS/JSになってきてるのは、実はHTML/CSSの出来がいいのが効いてる。
(俺はJS好きだけど、)一般的な観点でのプログラミング言語の出来で言えばC#>JSだから、
JSだけではここまで蔓延れない。
実際、WPFでもXAMLとかいうXMLモドキ？で指定するようになったし。
ちなみにプログラマは仕様を重視して厳格なわけではなく、単に「統一性」を重視してるだけだ。
理由は簡単で、統一されている＝同一コードで動く＝仕事が少なくて済むから。
統一されてない部分には数学での「場合分け」のような対応が必要で、一々if文を書かなければならなくなる。
だから綺麗なJSで済ませる為にはHTML（の構造)が美しい必要があって、
HTMLがグダグダだとどうやってもJSもグダグダにしかならないし、そんなHTMLしか書けないのなら嫌われてるとは思う。
そして仕様に矛盾があった場合、割とどうやってもバグが収束しなくなるので、プログラマはこれをものすごく嫌う。
ただこのレベルの矛盾はHTML/CSSのような「コンピューターありき」な物には基本的には存在しない。
それがあるとマトモに描画出来なくなってしまうので。(どう描画すべきか確定せず、プログラムが組めない）
問題は、人間的に、この場合はこう、この場合はこう、とそれぞれやるとき。
そしてCSSを一々対象に当てるだけならこれが易々と出来てしまう。
まあCSSならまだしも、これをHTMLでやられるとJSも全部別々に用意する必要が出てきて詰む。
だからCSSの「仕様」には問題はなくて、問題が発生するのは人間の「運用」に依るものだよ。
気になるのなら評判のサイトのHTML/CSSを見てみるといい。
とはいえ、ここの連中はやってるとは思うけど。 ChatGPT要約
プログラマー様がお前らを説教しに来られました
平伏せ Ruby on Rails 7 のデフォルトのCSSフレームワークは、
Bootstrap, Bulma, Tailwind, PostCSS, Dart Sass の5つ
Bootstrapが多いが、Tailwindも増えてきた
Railsの作者・DHH も言ってるけど、
Railsの利点は、バックエンド/フロントの両方を1人で開発する事による、開発スピード。
バック/フロントの打ち合わせコストが掛からない
その代わり、CSSに詳しくないので、
レスポンシブ対応フレームワークしか使えないし、デザイン性も低い >>556
なんとなくだけどHTMLの現場をわかってない気がする。
デザインを詳細で緻密にしようとするほどHTMLは入れ子構造にする事が必要。
そして汎用性（別の個所やサイトに1つ部品として移行したり、DOM動的生成やシステム組み込みなど）を
考慮すると、liなどのように構造が依存するものは向いていなくて結局divだらけになっていた。
見た目や汎用性に拘るほど、コード側の美しさや可読性なんてものはなくなるのよ。それがHTML そして以前はjsで実現させていたアニメーションや機能などがcssでも中途半端にできるようになり
まだ未完成であるがゆえに毎月のように新しいプロパティや値や単位が未だに出てくる。
関数や変数もsassとの区分けが曖昧になり、完全にカオス状態。
それが現状のCSS。とても1度完成したとは言えない。 cssはもはやオタクレベル
Webアプリ開発している会社のCTOやPMはcssが理解不能だから必要性すら感じていない
底辺デザイナーが使うくらいだろ？って感覚 長くなりすぎてるのでNG出来るようにコテ付けとく。
555が何をしたかったのか知らんが、
「ぼくはくろうしてきたんだ！！！」アピールならそりゃ完全に勘違いだ、と言っておいただけ。
そもそも何と比べてポンコツだったと思ってんだ？
実際他の言語や環境なんて全く知らないだろ。
今のXXXと比べれば昔のXXXは酷かった、というのは全ての言語/環境において当てはまる。
改訂＝悪いところを修正、なのだから。
だから逆に言えば、改訂せずに現役で戦えてるのは最初から仕様が素晴らしかった証明になるんだよ。
プログラミング言語ならCで、C89/C99で30年ほど前の仕様でも現役で戦えてて、しかも現時点でも代替がない。
この「C言語の凄さ」についてはそれなりに有名だが、でもHTML/CSSもそうだよね？
HTML/CSSも90年代に画定された仕様で(ツギハギしてきてるが)現役で戦えてて、しかも現時点でGUI最強だろ。
それはW3Cの連中が相当賢かった、ということなんだよ。
(これがあまり言われてないのはちょっとかわいそうだが、ちゃんと認識はされてて、
CSSの始祖の巨人は娘の名前をプロパティ(の値)に残すのを許されてるだろ。
まあ個人的にはこういうのは止めて欲しいんだが)
ちなみに最悪なのはJavaのGUIで、FXだSwingだとか4-5個有ったはずだが、
いくら改訂しても世界中で誰も使わないほどポンコツ。
C#はForms->WPF->UWP->CXなのかな？まあ努力はしてるが、しかしWebViewに食われそうな程度でしかない。
こうなる理由は先を見通せなかった＝頭が悪かった奴が仕様を策定したから。
そしてそれにつき合えば無駄に苦労させられることになる。 対してHTMLは、HTML3->HTML4->HTML5だろ。(俺は歴史には詳しくないが)
HTMLの利点は
・タグ付きテキストで全てを制御
・イベントがバブルする
・CSSとしてデザインを分離
であって、これは(俺が知る限り)最初からだ。
CSSの仕様も
・詳細度が高い順
・後の値で前の値を上書き
なのは最初からで、現在もこれで問題ないだろ。これは仕様が最初からよく出来てた証明なんだよ。
逆にこの辺の基本仕様に問題があった場合、全取っ替えするしかなくなる。
そしてそうなってしまってるのがJavaなりC#なわけ。
(取り替えではなく追加で来れてるのは、仕様がよく出来てた証拠。
なおCは追加すらせずに来れてるので、神懸かり的によく出来てたわけだが)
だからHTMLでずっとやってきてる奴は、
他でやってきててプラットフォーム丸ごと捨てられて今現在HTMLを勉強するハメになってる連中と比べて、
全然苦労してないよ。(ただこの苦労はハズレを引いた罰であって、身になる苦労ではないので、やる必要もないが)
というかこれは逆で、大半の連中は上記の憂き目を何度か経験してて、最初からHTMLを引いた奴は当たりだっただけ。
だから20年来、ゼロから再勉強なんてのをさせられずに済んで来てる。
この意味では、Webは不勉強な奴が全く淘汰されていない界隈でもあるのだろうよ。 お前ら見てる限り職場ではプログラマとは仲悪そうだが、もっと雑談してみるべきだね。
プログラマ連中は基本的にドライで、「お前らデザイナ」ではなく、
「お前らデザイナが出してくる『糞コード』」が嫌いで、『お前ら』自身が嫌われてるわけではないはずだから。
ただノリが違って合わないんだろうけどね。
ちなみにHTMLはオブジェクト指向(OO)では作られてない為、
今のOO『風』にしているだけのDOMでは、OOPでの省力化が出来ず、
最初からOOPありきで作られてる、例えば.NET系なら非常に単純に書けるのに、といった局面にも遭遇する。
HTMLが死ぬとしたらこの辺が回避出来ない問題になるとき、つまり、
・互換性を維持する為には仕様変更は出来ないが、仕様変更しなければろくなコードが書けない
矛盾が許容出来なくなるときだが、まあ今の所ないね。
現時点では「チッ、ウゼエな」程度で我慢出来る範囲で、現実的にPHPの糞っぷりより遙かにましだし。
HTML/CSSしか知らないとHTML/CSSの糞っぷりが目に付くのだろうけど、他と比べればすさまじく綺麗な方だよ。
JSなんて仕様委員会自体が糞で、糞仕様を追加したりしてるし。
なお(俺はあまり詳しくないが)CSSについてはこの辺の「回避出来ない矛盾の種」は今のところ無いように思う。
実際、「書くのが面倒」以外の問題は無いだろ。
個人的には宣言型で行ける範囲、例えば、
「中身が負なら赤字、正なら黒字」程度の機能はCSS側に有って欲しいが。
W3Cがろくに進捗しないからJSは離れてしまったけど、「仕様は吟味すべき」というW3Cの言い分も妥当でもあるんだよ。 >>562
> 結局divだらけになっていた
それこそが美しいというのがプログラマの感覚だよ。
<li>は・とか1.とか出せるわけだけど、あんなのは無い方がよく、
本来CSSで ::before {listmarker-type:1}とかの指定方法でよかった。
実際<li>なんてプログラマ的には不要だし、ほぼ誰も使わない。
よって<div>だらけになるが、プログラマ的にはそれで良いし、それこそが美しいんだよ。
(役割別にしたければそれぞれクラス当てればいいだけであって、タグでやることではない。
そもそもHTMLなんてコンピューターに読ませる用であって、人間が目で読む物ではないし)
つか問題は「美しさ」の定義が違うところなのか？
再度言うが、プログラマ的な美しさは数学と同じで「単純＝美しい」であって、
<div>だけで構成出来る物なら、<div>だけで構成されてる方が美しいとされる。
これは文章、日本語なら「証拠」「証拠」「証拠」と同じ単語を連発する文章は「汚い」とされ、
「証拠」「証左」「根拠」とか、同じ単語が二度と出現しないようにするのが美しいとされる文系的価値観とは違う。
これは結局、「同じコードが使えるか」に帰着する。
<div>と<li>を出力するには、最低限2種類のコードが必要になるが、<div>だけなら1つで済む。
要するに手抜きしたいだけなのだが。 >>563
完成なんてしてないし、する事もない。
ただ、捨てられたプラットフォームは、最初から根腐れしていたのに誰も気づけなかっただけの話。
CSSの仕様変更は基本的には枝葉末節に必要になった物を追加してるだけだろ。
それは長期的には全く問題ないんだよ。
アニメーションみたいな準静的なもの、一応定義しておくと、
・宣言型で一度定義するだけで完全に動作し、内部状態が外部に漏れる必要のないもの
は本来は全部CSSで出来るべきなんだよ。俺が既に言った「マイナスなら赤字」もそれ。
JSでやるのは「内部状態を管理しないといけないもの」だけに絞られるべき。
多分君の不満は、JS連中と同じく、「CSSは進化が遅すぎ」って事だ。
これは待ってれば解消する。「足りてない」だけだから。
仕様が「汚い」(555で言う「適当さ」)ってのは、仕様に矛盾がある場合であって、
これは待ってても解消しないし、解決も出来ないから丸ごと捨てられる。
そしてそれが基本仕様の場合、そのものが丸ごと捨てられる。それがJavaやC#で行われてきたこと。
CSSは枝葉末節を切り捨ててるだけで、本体は無傷だろ。
これで「仕様が適当だ」と文句を言うのは世間知らず過ぎるし、CSS作った人に失礼過ぎるよ。
正確に言えば、CSSの仕様は適切だし吟味も為されているが、足りてなさ過ぎ、追加も遅すぎ、というところ。
実際、HTML/CSSの進化が遅過ぎるのも事実だよ。
だけどそこから分離して好き勝手にやったJSは、結局プログラマに負担押しつけただけになってるし、
どっちがよかったのかは俺にはよく分からん。 >>562
> デザインを詳細で緻密にしようとするほどHTMLは入れ子構造にする事が必要
ちなみに、以下abemaのサムネ(例えば最初のサムネ)とか26階層もあるのだが、これは何ぞ？
abema.tv/video/genre/animation
いくら人間が見るものではないとしても、さすがにこれは意味ないと思うのだが。
Abemaが微妙にもっさりなのは、ここら辺が問題なんじゃねえか？とも思ったり。
あと以前深いなと思ったのは www.bbc.com/news/world で、今見てみると16階層だ。
ただこの辺、どっちかというとフレームワークの出来が悪いのが問題で、
(プログラマ的な単純＝美しいであれば、5階層で表現出来る物に26階層使うのは酷く汚い、とされるから)
おそらくは「出力コード」ではなく「フレームワークのコード」の美しさに重点を置いてる結果で、
これは間違いだとも思うのだけど。
これ、入れ子にすれば割と何とかなる的なノウハウなのかね？ たった2行の書き込みに、よくここまで妄想を膨らませられるもんだなぁ
殆ど読んでないけども
あと、冗長なコードとか書きそう >>568
論理マークアップやSEOを1㎜も理解してないね君。
なぜdivの多重構造がクソなのかをわかってないくせにそれで正解とか思ってる時点でだめ。 >>576
ぼくのさいきょうのえいちてぃーめむえる！があるのならどうぞご自由に。
ただな、それは完全に驕りなんだよ。
少なくともabemaやBBCは、あの構造が最適だと判断してああなってる。
彼等なんて糞でゴミだ、だからあの程度だ、と断言出来るのならそれでいいが、
実際お前ら全然そんなレベルじゃないだろ。
先日の選挙で言えば、俺は「どの政党/候補者を推すか嫌うかは好きにすればいいが、
選挙結果をまるで理解出来ないのなら、現実認識に問題がある」という考えだ。
つまり、多数派が何故多数派なのか、少数派が何故少数派なのか、何故この人は当選し、何故この人は落ちたのか、
まあ大体予想通りとならない場合には、現実認識がズレてるから更新する必要がある、と考えてる。
同様に、<div>の多重構造は実際ありふれてる。
なら、何故それが蔓延るのか、「ぼくのさいきょうのえいちてぃーえむえる！」は何故流行らないのか、
それは認識出来てないと駄目なんだよ。
少なくとも、彼等は君の考えるデメリットよりも<div>多重構造によるメリットの方が大きいと判断してるからああなってる。
そして多分(フレームワークから吐き出すタイプのサイトでは)多数派だ。
となれば、それはどっちかというと君の方が間違ってる可能性が高い。
そして、それでも持論をゴリ押しする君は典型的な「老害」だ。
とはいえ、階層が妙に深くなってる理由は俺には分からない。だから570の質問になる。
普通に組めばあそこまで深くはならないから、確かにわざと深くしてるのだろう。
しかしCSSもJSも基本的にはクラスに対して記述し、階層に対して記述するわけではないので、
特にメリットもない気がするのだが。(まあデメリットも言うほど無いが)
>>578
JavaScriptが書きにくいコード、だな。 すまぬコテが落ちてた。分かると思うが579=556 すまぬで済むかよちゃんとNG登録したのにすり抜けて来やがってわざとだろ絶対に許さねえからな >>579
君は論理マークアップを知らなかったと感じるんだがそんな事ない？
以前、h1とh2の使い分けを単に文字の大きさだけで選んでいる人いたけど。。
有名企業のサイトはSEOしなくても検索で1位になるし広告費もバンバンかけられるし、
同じ目線で語るのは違うと思う。 てか、今nAbemaサイトのDOM見てみたけど、普通にheader h1 ul li とかちゃんとマークアップしてんじゃん。 BBCもチェックしたけど、ちゃんと論理マークアップしてある。
header nav main ul li hタグ timeとかバッチリじゃん。
何が「ぼくのさいきょうのえいちてぃーめむえる！」だよ
間違いを理解できたなら素直にあやまりましょね？ お前ら、バカをからかうのが楽しいのはわかるけど
スレタイを音読しろ くどくど長い文章と難しそうな言葉並べてるだけで
よくよく読んでみると、自分の主張が正しい論拠が「AbemaやBBC」がそうしてるからってさ・・
しかもその論拠すら間違えててさ、書かれていた長文の95％は本質から外れた内容と
謝った認識、つまりゴミだった現実を直視して今後は5行までにしましょう。 キチガイだけど仕事だけはできるとかならともかく
キチガイな上に無能って存在価値ないじゃん >>582
君が想定してる程度のことは了解してるよ。
面倒だから話を進めるが、
>>583-584
> DOM動的生成やシステム組み込みなど）を考慮すると、
> liなどのように構造が依存するものは向いていなくて結局divだらけ (>>562)
にabemaやBBCが該当しないのなら、具体的にどのサイトのことを指してるんだ？ もう初心者が質問するような事はChatGPTとかAIでほぼ解決できるようになってきたろうから
このスレも質問だけ待ってたら過疎るから雑談もたまにはいんじゃねーの >>592
なるほど。
君がプログラマに嫌われてるのは、矛盾した指示を出してるか、指示自体がマトモに出来てないからだね。
SEOの元締め/Webの総本山みたいなGoogleに向かって、
「ぼくのさいきょうのえいちてぃーえむえるとはちがう！SEOガー論理マークアップガー」と怒るのは全く馬鹿げている。
納得いかないかもしれないが、Googleがそのコードなら、そのコードは『適切』なんだよ。
少なくともGoogleの検索ロボットはそのコードを期待通りに処理出来るだろうよ。
むしろその程度なのにGoogleに噛みつけると思ってる君は自信過剰すぎる。
なんだこの馬鹿は？と煙たがられても妥当。
実際俺は君が具体的にどういうHTMLが欲しいのかさっぱり分からないし。
そして593すまん。今回はちゃんと付けたぜ。 >>595
また確認もせず妄想して明後日の方向に行ってる。
私がプログラマに嫌われているなんてどこに書いてあるのか示せる？
私がGoogleに怒ってるとか納得いってないとか、どこから出てきた？
残念ながら全く見当違い。そんな事考えたこともないしこの業界でそんな事言ってる奴は見たことがないな。
一般的なサイトで論理マークアップに拘らなくても良い箇所だと、
例えばループさせるカルーセルの中身とかはdivの多重構造が多かったりだな。
結局、さして論理マークアップが重要でない箇所はそうなってる事も多く見受けられる。。
（あくまでほんの一例ね。）
一切マークアップしてないサイトも探せば出てくるかもしれないけど、
そんなサイトをここで出しても意味ないでしょ。
思い込みが強すぎる。自分のこうあって欲しい、こうあるべきだ、あいつはこうだ
を押し付けられた方の気持ちを考えよう。 具体的にどういうHTMLが欲しいのか？
そうだな、構造や見た目に影響を与えないHTMLが欲しいかな。
例えば、構造は属性にすればいい
<tag 構造="リストのブロック">
<tag 構造="リスト">リスト1</tag>
<tag 構造="リスト">リスト2</tag>
</tag>
親タグが必須でなくなることで動的にリスト1をリストのブロック外に表示したい時も
わざわざ親タグを新たにそこに書く必要もなくなる。（現段階では空のulタグを用意したり、動的にulを作成する必要がある）
それと見た目に影響を与えないHTMLになれば、皆がほぼ例外なく使っているreset.css設置という糞みたいな無駄もなくなる >>596
ならそれでいい。
(示せるけど、示す価値もない。つかこの話が通らないのは君がコミュ障だからだ）
いずれにしても君は話の論理の筋が通ってないから、プログラマからは嫌われるよ。
俺はいったい君が何を言いたいのか聞きたいのかさっぱり分からないし。
「俺の正義なHTML構造！」があるのなら最初からそれを示して反応を見ればいいし、
「このサイトのHTMLが糞だ！」と思ってるなら具体的に最初からサイト名を言えばよかっただけだろ。
「うんうん、そーだね」って言って欲しいだけなら、「構ってちゃんは死ね」というのがプログラマの共通認識だ。 >>597
CSSの書き方次第でなんとでもなる話じゃん
リスト1があちこちに現れるってならリスト1単体で成り立つようにクラス名とCSS書くだけ >>598
ダメだって。なんで勝手に終わらすの？
具体的に示せないならまず「私の勝手な妄想でした」って謝るのが筋でしょう？
それに、さっきもabemaやBBCの事も「私が論理マークアップしてないと勘違いしてその前提であなたを攻撃しました」
っていうべきでしょう？
勝手な前提作ってそれを根拠に相手を攻撃した自覚ないの？忘れちゃった？？
過去、自分が選んだ人のが多いというのもあるけどプログラマと揉めた事ないぞ。
むしろ自分である程度までやってしまうから関心されたりだったな。
まあ大掛かりなシステム構築等なら外注だし、私はPMじゃないから要件定義も指示出しもやらないしな。
・「俺の正義なHTML構造！」→W3C
・「このサイトのHTMLが糞だ！」→サイトではない。よくあるソースの事。あなたが経験無いからイメージできないだけ。
・「うんうん、そーだね」って言って欲しいだけ → 私はこう思うって書いてるだけ。共感も時には必要と考える
とにかくあんたは人の事いえる状況にない。まず筋はとうせ。な？ >>599
論理マークアップをまだ理解してないのか。
reset.cssって知ってる？ >>599はまさか<li>タグは<ul>タグ無しでもcssいじくれば成立するとか思ってるわけじゃないよな？ タグの意味を無視して見た目だけ帳尻合わせて設定してるのが嫌ってことですね？ >>597
おっとすまん、4秒違いで前後した。
てか最初からそれ言えばよかっただけだろ。
HTMLの構造自体に不満があるのなら、SGMLがHTML等を規定しているメタ言語だから、書いてみればいい。
HTMLよりもいいのが出来れば広まるかもしれんよ。
> 動的にリスト1をリストのブロック外に表示したい時
そんなこと普通はないと思うが、display:contentsだっけ？枠を階層一つ取っ払う奴があったはず。
この辺は俺より他の奴の方が詳しいから誰か回答してくれるのを待つんだね。
ただエスパーするなら君がやりたい事はドベタに
<tag 構造="リストのブロック拡大版">
<tag 構造="リスト" class="hidden">リスト1</tag>
<tag 構造="リスト" class="hidden">リスト2</tag>
</tag>
<tag 構造="リストのブロック">
<tag 構造="リスト">リスト1</tag>
<tag 構造="リスト">リスト2</tag>
</tag>
.hidden{display:none}
として仕込んでおけば現状でも何とかなる話の気もするが。 >>597
<li>の親が<ul><ol><main>に絞られてるのを問題視してるなら、
これはプログラマから見れば邪魔な仕様で、汎用的にするなら<div>が親になるのを許可するべきだが、
現状そうなってないからいっそのこと<li>を捨てて<div>を使う事になる。これをけしからんと思うのは君の自由。
ただプログラマ的には、既に言ったとおり、
<ol type="a">
<li></li>
<li></li>
</ol>
の代わりに
<div style="orderedlist-type:a">
<div class='myListItem"></div>
<div class='myListItem"></div>
</div>
で同じ見た目が得られればそれでいい。
子要素が元々<li>なのを明示したい場合も、通常は子要素の<div>には同じクラスが振られるので全く問題ない。
> それと見た目に影響を与えないHTMLになれば
reset.cssとは話が逸れるが、これは原理的に無理だ。
フローレイアウトである以上、処理を流し込む順番が決定的に重要で、
float/orderで多少誤魔化せはするが、本質的に完全分離することは出来ない。
ただそれ以前に<s>とかまだ残ってるタグを廃止する方が先だろう。 論理マークアップとSEOとW3C基準が何故必要か理解してない人に絡まれてるからね。 >>597
全部divにしてariaで定義すればお望みの形になるんじゃね？
タグのセマンティクスは全否定になるけども >>604
最初から？ こんなのは1案にしかすぎない。
HTMLもCSSも問題点はたくさんあるからね。
そのソース案がもう全然あかんのよ。
やはりあなたは論理マークアップを理解してない。
見た目だけ整えればいいならそんなのいくらでも解決自体はすぐできるけど、そういう話じゃないのよ。
見た目の為の無駄なHTML書いてる時点でアウト。 >>605
すまんがまず論理マークアップの必要性とW3C基準を理解してからモノ言ってくれんかの。
折角書いてくれるのはいいがいちいち指摘がめんどいんだわ
とにかくリストならliを使うのが本来の仕様なんだからdivの意味も理解してくれや。
見た目を実現できなくて悩んでる事なんて1つもないので。そういう提案は不要な >>607
双方の事実確認はとても重要。 何故なら勝手にでっち上げて攻撃された可能性が高いからね。
もしそうなら謝ってもらうのが筋だから、それをなーなーにして無かったことにはできない。
でっち上げでないならその証明をすべきだし、出来ないなら謝るべきの二択。 春になるとくだらんことで延々喧嘩で言い合うバカが出てくる でっち上げて攻撃されて不快な思いした可能性が高いからね。
私が折れる理由がない。 >>609
その辺の言い方も一々論理性がないから一般的には嫌われるんだよ。
君が好かれてる設定にするのも自由ではあるが。
つか何で俺が一々翻訳せねばならんのだ？その辺だよ。
> 見た目の為の無駄なHTML書いてる時点でアウト。
意味的には一つずつなのが正しいのに、display:noneで仕込んだ奴がダブってて意味が違ってきてるのが駄目、ということなら、
display:noneに代わる何かでもっと分かりやすいものがあれば受けるだろうよ。
ただ話を聞いてる限り、それを君が発明するのは俺は無理だと思うけど。
ちな、どうしても絶対にダブるのが許せない！なら現状でも本体をdisplay:relativeなりabsoluteなりfixedなりで飛ばせるけど、
これで無理矢理合わせるよりはdisplay:noneをクラスで切り替える方が断然楽だからみんなそうしてるわけでね。
まあいずれにしても「俺の最強マークアップ言語！」の案があるのならSGMLで書いてみるべきだよ。
何か発明出来る奴は割とぶっ飛んでるもんだし、アイデアを話したところで99%の人間はそれを理解出来ないものだ。
だから仮に君が正しいとしても、俺やここにいる連中も99%の確率で理解出来ないから、
とにかく君は書いてみればいいんだよ。
(そうすれば現状のHTML/CSSもそれなりによく出来てるとは分かるだろうよ) >>605
divは装飾タグだよというのもだけど
それ以上に作業する人が一人しかいない場合しか想定してないよね？
汎用的に使う要素をクラス名を付けて管理＝オリジナルのタグを作るような使い方なので
複数人で作業する時にはデメリットしかないよ
名前統一しないと共有するのも覚えるの大変 >>610
> とにかくリストならliを使うのが本来の仕様なんだから
タグ名にこだわる理由がないんだよ。
てかこの話、無限ループしてるからこれで終わりでいいよな。
俺の意見は>>605の通り。それを君が気に入らないのは君の自由だ。
>>611,613
なら君から見た俺は人でなしのクズって事で何も問題ないんだよ。
どっちが妥当かは観客が勝手に決めればいいことだ。
この話はHTML/CSSと全く関わりなく、どうやっても完全にスレチだろ。 >>615
何が言いたいのか分からん。
つか君、もっと具体的に言わないと通じないよ。
君のアイデアは君の心の中では何百時間もこねくり回してて、君にとっては自明すぎて馬鹿臭くて色々端折ってるのだろうけど、
それを聞かされる人は基本的には初見なんだから、相当の馬鹿でも分かるように非常に具体的に言わないと通じない。
それが出来てない君は、仲間内でのコミュニケーションしかしたことがないか、そもそもコミュ出来ないか、どっちかなんだよ。
だから、価値観や知識の違う連中（＝プログラマ）とマトモにやれてるわけがないし、その辺の嘘はすぐばれるわけ。
でもな、仮に嘘でもいいんだよ。君がそれで満足するなら。
俺らはここでHTML/CSSの技術的な話をしようとしてるわけでね、君の状況なんて興味ないんだ。
そして最初に戻るが、その言い方では俺には分からん。
フォーマットが欲しいのなら、
現状：
こうしか出来ません
俺の最強マークアップ：
こう出来ます！！！
ていう、新言語でよくやってるドベタな奴が分かりやすいと思うぜ。 もしかして
マークアップという単語の意味を間違って覚えている？ 横からだが、論理マークアップやセマンティックマークアップなんかの用語を知らなくて
HTML等のマークアップ言語と勘違いしてるとか？ >>614
だから一般的に嫌われてるって、何を根拠にいってるんだよ？
どこに私が現場で嫌われてるって書いてある？アンカーで具体的に示せと言ってるだろ？
発明？それはおまえのスキルで考えてるからだろ？
>>597に書いている通り、ulタグを予め外に用意しておいたり、jsやサーバーサイドで動的に生成する方法とか
いくらでもある。
display:noneやpositionで見た目だけ隠す方法は一番最低レベルの方法だぞ。
何度も言うがまず
論 理 マ ー ク ア ッ プ を 理 解 し て か ら 意 見 し ろ。
何度言えば理解できる？あと10回くらい必要？
「俺の最強マークアップ言語！」じゃないW3Cの基準だ。
おまいも技術者なら単語の使い方1つで相手のレベルわかるだろ？
はっきりいっておまいのレベルはもうわかってるぞ。根本を理解しようとしないまま絡んでるから話にならないんだよ。
>>616
俺が勝手に問題視してるんじゃないし、
>君が気に入らないのは君の自由 とかじゃないんだよ!
何度も言うがそれが標準仕様なんだよ！HTMLを作った組織が規定してるんだよ!
タグ名にこだわる理由があるんだよ。
何度もう言うがそれが論理マークアップなんだよ！
あんた、今のところ地頭相当悪いと感じてるぞ。ほんとにアホですか？？
無限ループしてるのはおまえが論理マークアップ理解しないからなんだよ！
さすがに話にならんぞ >>616
だから相手に不快な思いさせて勝手に終わらそうとするな！
お前の誤認で不快な思いしているんだからまず謝れ。
>君から見た俺は人でなしのクズって事で何も問題ないんだよ。
それは私が決めることだ。都合よく問題無い事にしようとするな！
お前はじゃあ、車で停車しているところに車を後ろからぶつけられて
事実確認しようとしたら、相手に「俺は人でなしのクズって事で何も問題ないんだよ」て
言われて去ろうとしたら見逃すのか？
「俺はクズなんで」っていうヤツには殴られても女寝取られても金取られてもいいのか？
よく考えてもの言え 論破されたアホが荒らしになって常駐するようになる5chのいつもの風景 どっちがどっちなのかさっぱりわからんけど、これ自演じゃねえの？
一人二役っぽいな h1の擬似要素を後ろに回したいのですが
transform: translateY(n);
を使うと擬似要素が手前になってしまいます
解決策はありますか？
h1{
width: 80%;
background: #555;
color: #fff;
position: relative;
font-size: 28px;
transform: translateY(0);
}
h1::before{
position: absolute;
bottom:-20px;
right: -20px;
content: "";
width: 100%;
height: 100%;
background: red;
z-index: -1;
} >>626
h1の中にspanを入れてspanのz-indexを疑似要素より上にするか
pやらdivやらの中にh1を入れて親要素に疑似要素を作るしかない >>627
ありがとうございます！
余談ですが、chatGPTにも同じ質問をしたところ、延々と間違った回答をされました。。 >>626
h1のtranslateYに続けてtranslateZ(1)をいれるとか
transform: translateY(0) translateZ(1); あるいは今回の例だけにしか適用できないかもだけど
レッドブロックをbefore
グレーエリアをafter
って疑似要素ふたつ作って対処するとか >>629
ありがとうございます
translateZ(1)で試したところできました!!
ググってtranslateZを云々とあるのを読んで試した際はできなかった気がしたのですが
助かりました、以降translateを使う際は気をつけます！
>>630
アドバイスありがとうございます！ つらつら考えてて、君らが何をどう何故勘違いしてるのかは分かった。正しくは、(正確に言うと多数派は)
・HTMLに価値はない
・分岐点はDB導入
・「正しいHTML」にする(である)意味/価値がない
・これが未だに理解出来てないのはお前らが不勉強すぎだから
ってとこだな。
一つずつ行く。まず「HTMLに価値はない」については、
・HDD障害に備えて何をバックアップするか、
を考えれば分かりやすい。HTMLを手打ちしてる君らが保存するのは勿論HTMLだが、そんな奴は既に少数派だ。
典型的なPHPサイトを考えれば分かるが、
・HTMLはその場で生成して直後に捨てるもの
であって、保存する価値なんて無い。彼等はDBの中身とPHPのコードをバックアップする。
この違いはDBを導入した時点で発生する。
DB導入により、マスタデータの在処が「HTML埋め込み」->「DB」へと変わり、HTMLは使い捨て文書へと成り下がる。
よって、内容が多少ダブろうがどうでもよくなる。
つまり<li style="display:none">は絶対許せない！みたいな無駄なこだわりをする意味が無くなる。
(ちな、DB内のカラムがダブってるのは絶対許せない！)
結果、HTMLは「ブラウザ表示用の使い捨てメモ文書」となり、お前らがやってる
「せまんてぃくす！！！ただしいえいちてぃーえむえる！！！」には何ら価値が無くなり、実際誰も相手してない。
とはいえ検索エンジンが通る程度には正しく書く必要はある。結果、
・HTMLはブラウザに表示出来て、検索エンジンに通ればよし
程度の認識がプログラマを含めた大半で、(お前らから見れば)フリーダムなHTMLを書きまくってて、
お前らはこれに「ムキー！！！」とご立腹なわけだ。 しかしそもそも「正しいHTML」にしない/目指さない理由は、そのこと自体に意味/価値がないからだ。
HTMLは昔から間違いだらけで、XHTMLはまるで流行らなかったし、
ブラウザも間違ったHTMLでもそれなりに表示出来るようにしてあるのはご存じの通り。
この場合のサインオフツールはブラウザであり、
常識的な作りの検索エンジンなら、「ブラウザに表示出来てれば登録されます」程度にはする。
だから「正しく表示される」以上にHTMLを正しく書くことにこだわる理由がない。これは昔から。
(とはいえわざわざ間違う事もないので、
普通は《少なくともその人が理解してる範囲で》正しく書いてるが)
このパラダイムシフトはDB導入が一般化したときに発生しているので、既に大昔だ。
それを未だに理解出来て無いのはお前らが不勉強だからだ。
お前らは自分が使っていた物がメインストリーム化したという、英語話者と同様の、有利なポジションにいる。
結果、不勉強でもそれがすぐにばれることがないわけだが、不勉強で知識がないのが自動的に補完されるわけではない。
君達はMVCすら理解してないだろ。 MVCの極意は、結局の所M(本体)とV(見た目)の分離だ。
そして君達がこだわっている「『正しいHTML』にするべき！！！」な理由は、
「Mは厳密に正しくあるべき！！！」だからだが、結局の所HTMLはVでもある為、
HTMLにMを配置してる限り、MVC分離は出来ない。よって方策としては矛盾する。
という言い方では通じないだろうが、要するに、
DB導入による利便性と比べたらHTMLがマスタデータなサイトなんて糞オブ糞だろ。
だからDB導入してMVC分離したらHTMLは使い捨てのVに成り下がり、「表示出来てればおk」程度の扱いなのが現在だ。
だからdisplay:noneなんて禁止だ！とか無駄にこだわる意味も価値もなくなる。
(display:noneを気兼ねなく使えて、それが意味論的にも全く問題ないのは、MVC分離の成果だ、とも言える)
仮に609が「ぼくのすごいじせだいえいちてぃーえむえる！！！」を完成させて、本当にそれが凄かったとしても、
既にDBを導入してる連中は見向きもしないだろう。
「え？何が出来るの？『厳密に』正しく書けるだけ？
いや、今までも正しく書いてたつもりだし、特にそれで苦労もしてないし、間に合ってるよ」といったところ。
繰り返すが、DB導入後は、『厳密に』正しくあるべきなのはDB『だけ』であって、
HTML内にコピーが氾濫しようがどうでもいいんだよ。
(そしてDB導入のハードルは既に下がってしまってるから、今までDBを導入してなかった連中も、
頭がよいつもりの馬鹿が書いた「ぼくのすごいじせだいえいちてぃーえむえる！！！」につき合うよりは、
DBを導入する方を選ぶ。よってそれが仮に本当に凄くても、誰も見向きもしないだろう)
多分君達はjQueryしか出来ない馬鹿JSer共とは親和性が高いだろう。
連中も君達と同様、MVCを理解出来ず、相変わらずHTMLにMを配置してて、
上記と同様の説明をしても、君達と同様に通じないから。
まあお前らが今後ともDBが存在しない世界線で生きていくのもどうぞご自由にだが。 あと、
> それと見た目に影響を与えないHTMLになれば (>>597)
これは君がプログラミングや現在のWebを知らなさすぎて視野狭窄に陥ってる。
HTMLはブラウザのVであって、これは今のところ絶対に回避不能だ。
だから、データ(M)だけ欲しい場合、みんな通常はJSONAPIでやってる。abemaもBBCもこれだ。
ド定番なのは<script type="application/json">で埋め込んでJSでレンダリングする手法だ。
HTMLとして記述しなければならない、としか考えられないのは、君がHTMLしか見えてないから。
WebはHTML/CSS/JS/鯖言語/DBの全部で構成するものであって、君らで言うフルスタック(ｷﾘｯ
じゃない奴が最適化かけても部分最適化でゴミにしかならない。
君がやろうとしてる「ぼくのすごいじせだいえいちてぃーえむえる！！！」もまさにこれ。
多分意味論的にはRESTfulなJSONAPIで同じ事をやってる奴は既に居まくってるはず。
この言い方では通じなさそうだけど、言い直すなら、
> そうだな、構造や見た目に影響を与えないHTMLが欲しいかな。(597)
それはみんなJSONでやってるね、って事。
まあ長くなったので一応纏めておくと、
・DB導入でHTMLの位置づけ/役割が変わってしまっているのにお前らは気づけていない。
・多数派には必ず妥当な理由がある。俺的正義もいいが、ちょっとは多数派の正義も考えろ。
・それぞれ達人である必要はないが、フルスタック化は重要。
どこで何がどの程度の労力で出来るかぱっと判定出来ないと全体最適化は無理。
ちなみにここまでのW3C信者に遭遇したのは初めてだ。
なるほど俺はWHATWGの気持ちを追体験しているのだろう。
ただWHATWGって2004らしいので、W3C通りにWebがコーディングされてた時期なんて一度もなさそうだが。 さらに考えてたが、多分以下だな。
・W3CはHTML階層でのMVC分離を試みたが、大失敗して、誰も使ってない
・597は上記の再失敗を目指してる
・HTMLは文書ではなく文書型『コンテナ』
よくよく考えてみればW3CもMVC分離を
M:HTMLを「ろんりまーくあっぷ！！！せまんてぃくす！！！」
V:CSS
C:<script>にJS
(検索:XPATH)
でやろうとしてる。ただこれは、
このスレにいるようなプログラミングが全く出来ない馬鹿でも対応できる以外のメリットがない。
対して現状の典型的なサイトは、一つ上の階層でMVC分離してて、
M:DB
V:HTML/CSS
C:PHP
(検索:SQL)
となっている。検索は(文字通り)桁違いに速いし、運用もし易い。
デメリットはプログラミング出来ないと話にならないことだ。 WHATWG(2004)はXHRの最発明(2005)よりも前だから、本当に早々に見切り付けられてる。
おそらくW3Cの連中が全くプログラミング出来なくて、全体最適化が出来ず、
HTMLだけの部分最適化に固執したからだろう。これが597と全く被る。改めて見ると、
> 構造や見た目に影響を与えないHTMLが欲しいかな(597)
> 例えば、構造は属性にすればいい
> それと見た目に影響を与えないHTMLになれば、
と、MとVの分離を目指している様にも読める。
ただMVC分離(1979-1994?)は30年前の課題で、20年前には上記の通り解決されてる。
これを知らずに(学ばずに)W3C棒を振り回してくるんだから、597は完全に老害でしかない。
ちなみにgoogleは、例えば
「google chrome120以降は文法エラーがあるHTMLは表示出来ません。
2024/1/1以降はW3C勧告に則った
『ただしいえいちてぃーえむえるでろんりまーくあっぷとただしいせまんてぃくす！！！』
になっていないサイトはgoogle検索から外します」
と宣言すれば、世界中のgoogleのポチに命令することが出来るし、実際効果もあるだろう。
しかしポリコレまみれのgoogleですらこんなのやらないわけだから、
> Google (592)
の通り、W3C勧告なんて意味がないとgoogleも思ってるのだろう。
ただgoogleや大半のプログラマにとっては、上位階層でMVC分離してる以上、
HTMLは「ブラウザ入力用文書型『コンテナ』」(=テキストなら何でも入れられる)でしかない。実際、
・スカスカのHTMLにJSONデータ埋め込みでほぼ全面クライアントサイドレンダリング
・フルキャンバス
・WebGL
とか、文書とは言いがたい状況になってるだろ。
WebGLなんて「別デバイス用のソースコードを流し込む」のだから、ソースコードと呼んだ方が通りがいい。
この辺、HTMLをさっさと抽象化して汎用コンテナとして扱いたいWHATWG連中と、
さっぱり話が通じないW3Cで、決裂したのだと思う。 あと、
> フローレイアウトである以上、処理を流し込む順番が決定的に重要で、
> float/orderで多少誤魔化せはするが、本質的に完全分離することは出来ない。(605)
は訂正で、正しくは、いい仕様がない、だな。
現状のHTMLは
・『フローレイアウト順に』「DOMツリーのテキスト表現(=outerHTML)を並べたもの」
であり、前側の『フローレイアウト順に』が残ってる限りHTMLからViewを完全分離することは出来ない。
ただ、新しいプロパティを作って、無理矢理CSS側に分離させることは出来る。
例えば flow-index とかで、orderの全階層版か、z-Indexのflowレイアウト順版と考えれば分かるだろう。
ただしこれでは描画が糞遅くなるし、大量に使えば分かりにくくなるしで、現状の
・つべこべ言わずフローレイアウト順にDOMを並べろ！！！
の方がいいとされて今があるのだろう。
とはいえ、orderと同様に抑制的に使えばさほど問題ないし、
正の値(後回し)しか認めないのであれば描画速度も問題にならず、
それ以前に昨今の富豪を通り越した大富豪プログラミング万歳な状況では、利便性の為に追加されてもおかしくはない。
ただそもそも後側のDOMツリー情報『だけ』が欲しければJSONのほうがいいので、(=既に代替手段がある)
仕様に追加されてもブラウザに実装されるかはまた別だが。現状の
・前から順番に書け！！！
ってのはすさまじく分かりやすい仕様だしね。 >>640
相変わらず話が長いな
なんで要点を簡潔に説明出来ないの？
頭の病気？ このスレにおけるLorem ipsumにでもしよう 最近流行りのCSSフレームワークの影響もあるんだろうけど
HTMLのcalss名の割り当ては昔に比べて数が増えたよね
今だと5個でも6個でも当たり前って感じ
これもPHPなんかで動的に出力する前提なんだろうと思う
同様に必要があればHTMLの書き方も変わって行くだろうけど現状だとulなどの要素はなくならないだろう
imgのaltなんかもそうだけど目に見えなくても必要なケースがある >>626->>635
あのさ、まず>>620と>>622を無視するなよ。
お前の誤認でこっちは不快な思いしているんだからまず謝れや。
それをうやむやにしようとしてる時点でお前の発言にはもう信用が無いんだよ。
いいか？もう一度言うけど、お前の誤認を根拠に攻撃してきて俺は不快な思いをしているから
まずは間違った事実と、それで攻撃した事を謝れや。 異論があるなら証拠出せ。
それ以外のレスはするなよ？いいな？
バカじゃないなら理解できるよな？ なんか長文君はプログラマ代表みたいな立ち位置でWEBを見下してるけど、
おまいは本業での立ち位置はどんなものなん？
なんだか孫請けの作業員PG臭が若干するんだが、、
家族にメー系のSI屋でPMやってるのがいるからそっちの業界ならある程度わかるんだが
何系なの？SE？ デスマに追い詰められた挙句、鬱になった人みたいな挙動よな チンチンシュッシュッシュッ
ちんちんシュッシュッシュッ AndroidのChromeでhタグは游明朝が適用されてるんだけど同じ用に書いたpタグには游明朝が適用されない
これって仕様？ font-familyとOSインストールフォントの組み合わせによってはそういう現象も起きる
hタグとpタグそのものにそんな仕様はない じゃあ下手に時間かけるより仕様だって突っぱねたほうがらくか HTML <!--コメント-->
HTMLの中のJavascript//コメント
CSSは//コメント
これであってる？ そもそもandroidのシステムフォントって明朝体入ってないんじゃなかったっけ？ 質問失礼します。
今tableタグを使ったページを作っていて、
<h3>タイトル</h3>
<table>
<tr>
<td><a href="URL">①</a></td>
<td><a href="URL">②</a></tr>
</table>
という形で組んでいます。
表はきれいに表示されるのですが、タイトルと①の間に「>」という記号がぽつんとひとつだけ入ってしまいます。
これはどういう間違いによるものなのでしょうか？ >>666
ありがとうございます
<table>
<tr>
<td><a href="URL">①</a></td>
<td><a href="URL">②</a></td></tr>
</table>
このように修正してみたのですがやはり「＞」が出てしまいました >>667コピペで張り付けたけどでてこないぞ？
tps://jsfiddle.net/0t5xwjqr/ >>
とかで検索したらどっかのタグ閉じる時に連打したものが出てくるんじゃね >>669
あーーーありました…
ほんと初歩的なことでした恥ずかしい。
申し訳ありません、慎重に進めます…
ありがとうございました！ そういうのは文法チェッカーとかあるから
「html 文法チェッカー」とか「html エラーチェッカー」とかで
ぐぐってみるといいかも
それかvscode等のエディタに文法チェックしてくれる
機能拡張ぶち込む >>671
ありがとうございます。
ez-htmlを使ってるんですが、調べたらこれにも構文チェック機能あるんですね。
使っていかなくては…お目汚し失礼いたしました そういうミスは誰でもあるからそんな気にすんなｗ
こういう経験がノウハウになって多分そこがミスだろうとすぐ特定できるようになるもんだ ez-htmlって使ったこと無いけど、どうなん？
簡単な構文チェックなら全然イケるとは思うけど、使い慣れてたとしても
効率化とか考えたら色々と厳しそうだよなぁ 特に理由がなければVS Code使っとくのが無難ね
使い方で悩んだ時にすぐ答えが出てくるのは強い ublockのcssについてお聞きします
一般にハイパーリンク系をブロックする場合
##[href="https://XXXXXXXXXX.com/YYYYYYYYYY/ZZZZZ";]
となります
これを、YとZの部分を除去し、XXXXXXXXXX.comが検出されたもの全て、という条件付けで指定したいです
過去、画像（広告の）などのリンクの下にあるsrc
##[src="https://XXXXXXXXXX.com/YYYYYYYYYY/ZZZZZ.jpg";]
を改変して
||XXXXXXXXXX.com/YYYYYYYYYY/ZZZZZ.jpg や ||XXXXXXXXXX.com/YYYYYYYYYY/
などが可能でしたものの、今はそれを指定出来てもページのリログで戻されてしまいます
同じやり方でhrefを記述すると無効
自分が求めるのは数年前まで可能でした、||XXXXXXXXXX.com/YYYYYYYYYY/により一定のアドレスに連なる広告全てを除去することです
宜しくお願いします >>677
広告ブロック系は専スレ行った方がいいよ
>>417 >>679
href*= ←こういう技量的なアドバイスを求めていました！
無事最良の結果を得られ、雛型として今後にも有効活用出来そうで大変感謝いたします
いんや～どんな質問スレなのにやったらスレ誘導されたりして、そりゃ過疎るはずだわ・・・と残念に思っていました
リアルでも横へスライドさせて自分は手抜きをするタイプ、仕事の上澄みだけを啜ろうとする屑が近年増加していますよね
チョン（支那サーバー）産LINEを公表7000万の国民が使っており、今やガチ支那のティックトックを政府推奨で宣伝するバカ国賊っぷり
とても好きな国である日本ながら、随所にこうした頭ハッピー米山要素が視られ、やはり日本って国民がバカでドMなんじゃねーか？と思ってしまいます
それが良さであり最大級の汚点なんでしょうねえ
戦後78年の今、歴代屈指のまともな議員が何故か暗殺され、そういう愚かな 時代背景なのかもしれません
そんなんだから原発のコンセント食い違いなどを生じさせ、一方で身体を張ってベントを成功させるという、
完全に真逆で相反した2つの要素が同じ空間内に混在するという矛盾、そんな愚かでオワコンな共産汚染の国に思います なるほど
href*=”〇〇”・・・〇〇を含む場合
href^=”〇〇”・・・〇〇で始まる場合
href$=”〇〇”・・・〇〇で終わる場合
これテンプレレベルですねえ
別の部分でhref^を使用していましたが、そこはコピペ文化の弊害で理解不足でした せっかく答えてもらったのに長文荒らしネトウヨとか地獄かよ
質問者のなりすましかもしれんが 四番目のdivに含まれるテキスト全てを削除する場合、
div:nth-of-type(4)の次に加えるべきコードがいまいち分かりません。
div:nth-of-type(4):has-text()で、変な区切りと改行で挿入されている4個のテキストを4列コーディングすれば削除そのものは可能です。
しかしそれを一括でまとめたいのです。
アドバイスください。 そういう一括でやりたいとか銭絡みで大量に手早くやりたい奴だから無視でもいいぞ 外人のサイトひな形で、divの後にspanとか設けないweb設計のアホが時々あるんスよね。
divにテキスト直載せでも構わないんだけどそれだったらdiv単体でやるなりするのがほとんどだと思います。
ところがdivの次にaとbとbrまで同じタグ列に含まれているだけでなく、重要なwebコンテンツのタグまでもがその一つのdivの中へ並記されてんすよ。
横にずらっと。
舐めてんのかと。
<a><b><br>を指定して削除してもdivのテキストが歯抜けで残り、かといってコンテンツがあるからその大本のdivを削除することは出来ない。
どんな低能だったらそういうごちゃ混ぜコーディングをやれちゃうの？と。
背景色に合わせたり色々試みて、font-size:0px!important;が一番しっくりきました。
他の表示に悪影響が出ることを心配しましたが特殊すぎて問題のテキスト4種のみに作用してくれているみたいッス。
お騒がせしました。 
HTMLとPHP、いいね。HTMLはプログラミング言語じゃないから難しくない。 n番目のクラスを選択する事って、もしかして出来ない？
具体的には、以下、classA,Bの個数は可変で、
それぞれ先頭だけ表示し、2番目以降の「消去」はdisplay:noneにしたい。
(なおA,Bの個数は関連があって、下記の様にBが1個ならAも1個、Bが2個以上ならAはBの数+1になる)
<div>
<div class="A">表示</div>
<div class="B">表示</div>
</div>
<div>
<div class="A">表示</div>
<div class="A">消去</div>
<div class="A">消去</div>
<div class="B">表示</div>
<div class="B">消去</div>
</div>
nth系がそれだと思っていたが、どうやら違うらしい。
クラス用nth系がないのは仕様不足だと思うが、追加予定とかある？ >>690
>>334と同じ質問かな
335、336が答えだよ >>691,692
早速ありがとう。しかしchrome111+はちと厳しいな。
そして developer.mozilla.org/ja/docs/Web/CSS/:nth-child に一言も記載無いのは酷い。
>>334は読んでたが、nthはクラス対象だと勘違いしていたので見落としていた。手数かけてすまん。 >>693
一応、日本語の方は互換性の表にちょこっとだけ書いてあるけど、まぁ分からんよね
こういう新しいやつは翻訳が更新されてない場合があるので、英語の方を探しに行ってみるといい
:nth-child() - CSS: Cascading Style Sheets | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#using_of_selector 複数の大きさの異なる絵をfloatで表示し、
左上が階段になってる状況で、右下に文字を流し込みたいのだが、
絵は左上に隙間無しで詰めたいが、文字とは隙間を空けたい。
これはどうすればいい？
以下、
絵：floatのimg
字：文字列
＿：希望してる隙間
として、
何も指定無し：(２枚の大きさの異なる絵を表示)
絵絵絵絵絵絵絵絵絵絵字字字字字
絵絵絵絵絵絵絵絵絵絵字字字字字
絵絵絵絵絵字字字字字字字字字字
絵絵絵絵絵字字字字字字字字字字
絵絵絵絵絵字字字字字字字字字字
字字字字字字字字字字字字字字字
字字字字字字字字字字字字字字字
希望：
絵絵絵絵絵絵絵絵絵絵＿字字字字字
絵絵絵絵絵絵絵絵絵絵＿字字字字字
絵絵絵絵絵＿＿＿＿＿＿字字字字字
絵絵絵絵絵＿字字字字字字字字字字
絵絵絵絵絵＿字字字字字字字字字字
＿＿＿＿＿＿字字字字字字字字字字
字字字字字字字字字字字字字字字字
なお、絵にmargin/madding指定したら絵と絵の隙間が空いて駄目だった。
文字列は十分長いので、inline-block指定したら全体が下に来て駄目だった。 それぞれの画像をfloatで左寄せ
margin-rightで右側の調整
下方向は二つ目の画像にmargin-bottomは可能ですが、
一つ目の画像にmargin-bottomを設定すると空きが出るのは避けられません。
また、テキストのline-heightによっては画像の下の空きスペースが気持ち良くならないです 2枚目の画像のmargin-leftをネガティブにして寄せてやればいいんでない >>697
そっか！
画像二つともmargin-left:20px、margin-bottom:20px;
を設定して
2枚目だけmargin-top:-20px;
でいいのかな？ 改行位置によっては画像下の余白が大きくなったりするから
こういう時はline-heightを調整して誤魔化しがちなワイ VSCodeで!って打ったら出てくるひな形の
<meta name="viewport" content="width=device-width, initial-scale=1.0">
って何ですか？ >>701
なんとなくわかった！
ありがとうございます marginもpaddingも上下左右別々に指定できるよ。 (； ･`д･´) ﾅ､ﾅﾝﾀﾞｯﾃｰ!! (`･д´･ ；) GW中なのに質問があるといろいろレスがつくね
偉いね C++でアプリが作れるというだけで急遽Web制作を命令されてしまった素人だが
HTML/CSS/JSを並行して書ける無料のWeb制作向けのIDEって何があるんか？
ないならこんな無茶ぶりしてくる会社は退職しようと思う。 >>697
なるほどマイナスマージンはそういうときに使うのか。決め打ちならそれもありだね。
(ただし今回は決め打ちではない。絵の枚数は1～6枚程度で可変)
>>702
それはちと違ってて、clear:bothは無い。695ではその辺曖昧だったが、
以下、同じ数字は全部で一枚の大きなimgを示すとして、
float:leftのみ：(695はこのつもりで書いたし、697もこう理解した)
１１１１１２２２２２
１１１１１２２２２２
１１１１１
１１１１１
１１１１１
float:left;clear:both：(702の理解、しかし勝手にclear:both足したのは702の責任。
そして俺ならこの場合は『右下』ではなく『右』に文字を流し込む、と表現する)
１１１１１１１１１１
１１１１１１１１１１
２２２２２
２２２２２
２２２２２
ただこれ、そもそもは字側にmargin/padding設定出来れば済む話で、
これが出来ればみんな納得だと思うのだけど、
何で今inline要素にはmargin/paddingは設定出来ないんだっけ？
外枠自体は必ず存在するのだから、技術的に出来ない理由はないはずなのだけど。 >>709
画像が折り返さないなら最初の画像以外ネガティブマージンでいけると思うよ
自分なら回り込まないレイアウトに変えちゃうだろうけどね cssでinline-blockを右寄せにしたいんだけど、
親要素に指定しないでも実現できる方法ってないかな？
.box{
display:inline-block;
padding:5px;
background-color: #555;
}
禁止：親要素にtext-align: right;やflex-end、float:right 補足
>>702は俺の趣旨とは違ったが、実際やってみると,、俺の場合は702の方が見やすいと分かった。
絵が左詰で縦に並び、結果的に文字も右詰で縦に並ぶので、目線的に見やすい。
Webの場合は縦が無限に取れるので、変に詰め込むよりスカスカの画面をスクロールさせる方がいいのかもしれん。
>>710
上記の通り、全く俺も今それを納得した。 >>709
あー、悪い悪い
縦に画像並べると勘違いしてたわ
要らんと思うが一応、修正
https://jsfiddle.net/z28m1vw3/
あと、俺が言うことじゃないし余計なお世話だとは思うが、質問者なら、相手がどう質問を勘違いしようが
回答してくれた相手に対して、お前の責任で俺は悪くないみたいな物言いは、質問スレじゃトラブルの元だから
気を付けた方がいいよ >>711
何だか分からんけど、他人のサイトだからhtmlいじれないとかstylus的な話？
親要素にならmargin-right:0; margin-left: auto;って方法もあるけど
親要素に何も指定できないとなると、position: absolute;とright:○px;で
無理矢理に並べるぐらいしか思いつかないなぁ
inline-blockの意味無いけど >>713
うん、まあ、正直要らん。
俺には文字だけの説明>>697,710で十分だから。
> あと、俺が言うことじゃないし余計なお世話だとは思うが
いや、君には文句を言う筋はある。ただ、それを言うという判断も含めて俺の責任でいい。
つまり、俺を気に入らないから今後は君は俺（と思える人)には一切回答しない、というのも君の自由だ。
ついでだから何故敢えて言ったかも説明しておくとだな、まず、
「責任」ってのは「その結果はお前が負え」であって、「俺は悪くない」や「お前が悪い」ではない。
ただ、702以前に697が順当な理解とこの状況での正解に辿り着いているのだから、
俺は最低限伝わる程度には書けてたことになる。
そして697を尊重するのなら、702は、少なくとも自分(702)の理解が697や俺(695)とは異なることに気づけたはず。
にもかかわらずおかしな流れになってるのは、698が原因だ。
他人の質問に参戦するのも自由だが、通常こういう場合は質問者ではないと分かる様にするものだ。
しかも698も697や俺の理解と異なる方向で書いてて、702は698に対して回答付けてる。
だから若干自演臭い。
こんなところで自演やる意味なんてないと思うが、
ここでの質問はなぞなぞ大会みたいなもので、最速ベストアンサーを取りたがってる奴もいる。
勿論そういうのも自由だし、むしろ歓迎すべきだろう。ただ、それが行きすぎると自演する奴も出てくる。
そしてこのスレは今微妙な状況にある>>683
ベストアンサー狙いで自演する奴、或いは、このスレにへばりつく為に一時的にポイント稼ぎする奴は死ねでいい。
683の通り、スレ違いでも平気で居座る奴は結局どのスレにとってもゴミで、
結果、Web上は常にゴミの押しつけ合戦になってて、これから逃れることは出来ない。
だから、おかしな奴が居たら、そいつにとって居心地の悪い場所になる様に仕向けて、出て行って貰うしかない。
そして俺は、君には上記の通り、その可能性があると判断したから、言った。
勿論それで君がどう感じてどう行動しようが君の自由だし、俺の責任だ。これも既に言ったとおり。 ただな、ゆとりが間違ってるのは、「常に優しく回答すればいいスレになる」とか、「敬語使えばいい」とか、
そういう表面的なところではないんだよ。
「誰にでも常に優しく」した結果が680だろ。
誰でも参加出来る以上、どんな変な奴でも出入り自由だから、
ここでは悪人も普通に紛れ込んでる前提で行動しないといけない。
無視すべき奴は無視しないといけない。
質問者がするべきなのは、回答者に対して順当な敬意を払うことであって、
それは敬語や感謝の言葉みたいな表面的なものではなく、
回答者の負担にならない様に行動出来てるか、つまり、
分かる様に書けてるか、情報は必要十分か、回答を読んだと伝わるか、とかであって、回答者もそれ以上は期待してない。
勿論感謝の言葉も重要だが、それだけやってればいいものでは全然無いんだよ。
（なお693も俺、普通にありがとうと言ってるだろ)
今回702に対して「敢えて」ありがとうと言ってない。それは言うべきではないと判断したから。
自演臭いのもあるので、敢えて今回のランキングを付けると、
ベストアンサー：697(この状況での正解)、710(そもそもデザインが悪いと指摘、俺も了承)
次点：702(俺のデザインが悪いと気づけたきっかけを与えた、712に書いたとおり）
であって、実際702も役に立ってるが、それは697や710を越えるものではない。
俺様(702)はfiddleまで使って回答してやったのに何様だ！と切れるのも自由だが、
そもそも俺はfiddleで手取り足取り例を示してくれないと分からない程度の初心者だと思われる様な書き方はしてない。
そして704なんて当たり前すぎる内容に対して705、流れが色々おかしいだろ。
fiddleを使いさえすればベストアンサーいける！みんなに感謝される！と思ってるなら死ねでいい。
使うべき時には使えばいいが、必要ない時に使ったり、或いはそれで感謝されることを求める場所でもないし、
誰彼構わず内容も問わず優しく回答して感謝してていい訳でもない。
5chの質を保ってるのは適度な殺伐さなんだよ。
お前は方向性を間違ってて、それは「無能な働き者」(＝居ない方が余計なことにならなかった)に近い。
君が今後常に誰彼構わずfiddleで優しく回答しても、スレの為にもならないし、誰も感謝しないだろうよ。 補足
696も俺じゃない。というか発端は696と言うべきだったか。
あと、>>713
> 質問スレじゃトラブルの元だから気を付けた方がいいよ
君がトラブル＝絶対悪で超事なかれ主義！！！！なのは君の自由。
ただ俺は、計算ずくのトラブルで不要な奴を追い出そうとしてて、君も対象だというだけ。 遅れてきたので横になるが最初の説明は分かりづらいよ
途中までできてるなら次からはjsfiddleなりでソースを貼ると
円滑にやり取りできるのでそうしてくといいんじゃないかな？ >>721
そりゃ無理。
何作ってるかバレてこのスレのキチガイ連中に絡まれるようになったら終わりだろ。
俺をキチガイ呼ばわりする奴こそ、俺から見ればキチガイだから。
リスク管理は必要だし、重要だ。少なくとも5chとは適切な距離感を持つべき。
して、そこも結局質問者の責任だと思うんだよ。
言ってしまえば、「695で通じない奴からは回答イラネ」であって、
実際それで通じて有効回答も即得られてる。特にエスパーされてるとも思わないし。
俺には通じないからもっと説明しろ！！！と言う奴も無限にいるのだけど、
そういう奴に限って３行しか読まなかったりするし、話は進まないしで、どうにもならないことが多い。
そして長々と書いても余計に文句を言われるので、結局の所、
・余計な情報を含まず、必要最低限かつ十分な情報量で、最小構成
を目指すしかなく、690も695もそれを俺なりに追求した結果だし、
結果、有効回答も得られてるので問題なしなんだよ。
つかね、その辺俺は基本全部計算尽くだ。
一応最適なところを目指した結果ではある。(妥当かどうかはまた別だが) >>722
レイアウトの話をしたいだけだから
ダミー画像やダミーテキスト入れればいいだけじゃね？
不要な装飾もいらんし不要なcssなども削って最低限必要な記述を書くだけだから
リスクを心配する理由が見えない あー、やっぱり文体からして例のキチガイだったか
そもそも最初の質問からして態度悪いし
ちょっと怪しいと思ったんだよな～ この程度の問題すら自分で解決出来ないくせに
偉そうに長文で御託を並べるとか糞ダセーな
スキルや知識が無いのは仕方ないにしても
ちょっとググればヒントぐらいはすぐに掴めるだろうに
>>690-694を見ても検索能力が低いってのがよく分かるが
こんなのがスレに常駐してるとか面倒臭いな >>723
> 最低限必要な記述
それが690と695で、実際十分に機能してる。
> リスクを心配する理由が見えない
それはフィンガープリンティングだな。
つかね、この辺がお前らが他人に対してリスペクトが全くないところだよ。
おまえら、「上から目線ガー」とか超絶嫌う癖に、
心の中では「俺が正しい」と信じ切ってる超絶上から目線だからそんな発言になる。713も然り。
既に言ったとおり、俺の行動は計算づくだから、基本的に全て説明出来る。
ただ、お前らはこういう単なる疑問ではなく、「俺がこう思うんだからこうしろ」でしかないだろ。
（お前はこの説明を欲したわけではないと思うが）一応説明しておくと、
702が勝手にclear:bothを補完したのは、彼にとってそれが常識だからだ。
実際、そうすればWebでよく見るレイアウトに似てくる。
710もそれを分かってるから、２行目を追加してる。
この辺、逆に言えば、今の俺のCSSはWebでは見かけない特殊なデザインになってるわけだから、
フィンガープリンティングが機能してしまうんだよ。
つまり俺は、技術的にフィンガープリンティングを恐れない状況、
何が普通で何が特殊かを自分で的確に判断して適切に情報を削除出来る段階に、まるで至ってないんだよ。
だから現段階で無頓着にぺたぺたコピペしてるとヤバい。
この辺、例えば713に対して平身低頭ドゲザーを決め込んでいく作戦もあるし、
713やこのスレのキチガイ共はそれが望みらしい。
ただ俺は、キチガイは殺せでしかないので、つき合うつもりは全くない。
その結果、粘着されるのもいつものことだ。
ただしこの結果、つまりfiddle等を使う事が危険になり、使えなくなることは、
俺の責任として享受しなければならない。
が、文字だけでも十分に伝えるだけのコミュ力は俺にはあるのだから、俺にとっては後者も余裕で選択肢に入るんだよ。
コミュ障なら前者にしろってのも然りで、君がそうだから君には俺の選択肢が見えてないだけ。 >>727
おまいは、まずこれに回答しろよｗ 逃げるな。
>>616
だから相手に不快な思いさせて勝手に終わらそうとするな！
お前の誤認で不快な思いしているんだからまず謝れ。
>君から見た俺は人でなしのクズって事で何も問題ないんだよ。
それは私が決めることだ。都合よく問題無い事にしようとするな！
お前はじゃあ、車で停車しているところに車を後ろからぶつけられて
事実確認しようとしたら、相手に「俺は人でなしのクズって事で何も問題ないんだよ」て
言われて去ろうとしたら見逃すのか？
「俺はクズなんで」っていうヤツには殴られても女寝取られても金取られてもいいのか？ >>556
あのさ、まず>>620と>>622を無視するなよ。
お前の誤認でこっちは不快な思いしているんだからまず謝れや。
それをうやむやにしようとしてる時点でお前の発言にはもう信用が無いんだよ。
いいか？もう一度言うけど、お前の誤認を根拠に攻撃してきて俺は不快な思いをしているから
まずは間違った事実と、それで攻撃した事を謝れや。 異論があるなら証拠出せ。
それ以外のレスはするなよ？いいな？
バカじゃないなら理解できるよな？ 連休暇だからって茶々入れるんじゃねえ！
という流れか なんだか他の住人さん、申し訳ない
皆様も今後お気を付けて
>>727
> 702が勝手にclear:bothを補完したのは、彼にとってそれが常識だからだ。
> 実際、そうすればWebでよく見るレイアウトに似てくる。
> この辺、逆に言えば、今の俺のCSSはWebでは見かけない特殊なデザインになってるわけだから、
> フィンガープリンティングが機能してしまうんだよ。
勝手に勘違いして盛り上がってるとこ悪いが、そういうことじゃない
改めて最初から説明する気はないし、もう相手にしないけど、こちらが勘違いした経緯は全く違うので悪しからず >>734
> こちらが勘違いした経緯
俺はそこは問題にしてない。君は半島に帰るべき。 ネトウヨってもう世界で最底辺の層になっちゃったのな いい機会なのでこの典型的な「ゆとり」と「以前の世代」のやりとりの差を纏め、
後々の世代の為に教材ログとして残す。
単純には、
ゆとり(と女)：「ぼくのおきもち」が最重要、情報なんて間違ってても問題ない
以前(の男)：正しい新着情報のみが価値基準、お気持ち？何それ美味しいの？
となる。
まずコミュニケーションは相互の物なので、物理で言う作用反作用であり、
お前らが受けるストレスと同じ大きさのストレス(ただし符号が逆)を常に相手も受けてる。
つまり、お前らが俺をキチガイだと感じる時は、俺もお前らをキチガイだと感じてる。
お前らが話が通じないと思う時、俺もお前らを話が通じないと思ってる。
この辺は、常にそういうものなんだ。言うか言わないかでしかない。
「自分こそが世界の中心だ！」が許されるのは中学生までだ。いい加減大人になれ。 さて今回は単純には以下だ。
695:はい質問
697:つネガティブマージン
702:つfiddle(なお質問改竄)
709:697はなる。702は質問を勝手に変更されても知らんがな
710:回り込み無しの方がいいのでは
712:確かに。つか702確認してそう思ってたとこだ
713:さらにfiddle、ホラ感謝しろオラ！！！
715:死ねよ702=713=734
734:ぼ、ぼくはわるくないもん！！！
俺は自身の質問が解決するかどうかという、
極めて単純で(ゆとり以前では)当たり前の道理で動いている。
新着情報順に、697>710>>>>702であり、713にはその時点での新着情報が何もない＝価値がない。
お前ら流に言えば、「713は読むだけ無駄だった。」
ところがゆとり702にとっては、「ぼくのおきもち」が最重要なので、
「僕がわざわざ修正してやった結果」の713は最大の価値がある。
だから「もっと感謝しろよオラ！」みたいな物言いも当然していいと思ってる。
ところが俺にとっては上記のとおり、713なんて何の価値もないし、釣れたので反撃した。
ただ一般的に、ゆとりは反撃されるのを想定してない、というか、
安全地帯から一方的にボコるのを常としているので、反撃されたらひよる。
そして最後に「ぼ、ぼくはわるくないもん！！！」(734)アピールするのも毎度のことだ。
いや、反撃されたのはお前が攻撃したからであって、お前の責任だ、でしかないんだが。 俺は715で書いたとおり、スレの異様な流れから、
「承認欲求モンスター」が自演している可能性を察知した。
ただそれも俺は「役立つなら飼う」方向なので、709をどう書くかは微調整した。
具体的には、713が噛みついた表現、
> しかし勝手にclear:both足したのは702の責任。
> そして俺ならこの場合は『右下』ではなく『右』に文字を流し込む、と表現する
について、全く書かないか、1行目だけにするか、
或いは3行目以降もっと足すなり、「責任」を「問題」として強めるか、等だ。
調整基準は、「飼えるかどうか」であり、つまり、
「ああ俺が勘違いしてたか、ならしょうがないね、次いこー」と出来る程度なら無視出来るが、
「なんだ貴様！！！まず俺に感謝してから言え！！！」となってしまう、
スレを破壊するレベルの「承認欲求モンスター」なら噛みついてくる程度にした。
そして後者だった713は、わざわざ修正してまで投稿し、一言文句言わないと気が済まなかったわけだ。
しかしこれも俺には想定内で(というか709でそう書いた俺の責任として)反撃したし、
その後はいつもの展開、734で「ぼ、ぼくはわるくないもん！！！」で終わるのも見慣れた風景だ。
ただこの辺、コミュ障の連中にはさっぱり見えてないのだろうが、
5chに居る限り、この辺を理解して徹底してくれないと困るんだよ。だから俺は書いてる。
(今ではそういうスレもなくなってしまったが)
統制されたスレは、変な投稿があると雰囲気が変わり、住民の対応もいきなり変わる。
5chのスレの状態を保つのは、この辺の住民のコミュ能力によってでしかないんだ。
質問スレなんだから、質問を勝手に変更して回答されても知らんがな、でしかない。
713を褒めると、713タイプ＝承認して貰いたいから質問を勝手に変更しまくってでも答える奴、が押し寄せ、
質問スレとして成り立たなくなってしまう。
スレチに対して答えると、スレチでも何でも答えてくれるスレと見なされ、
ありとあらゆるスレチ質問が為され、結果的に本題関連投稿が無くなり、住民は霧散するしかなくなる。
これらを防ぐのは住民次第だ。これが5ch。 自説ではなく通説だ。(ゆとり論は自説だが)
そしてこの5chでの常識を理解出来てない奴がここに居るから、わざわざここに書いてる。
これは5chの様なモデレーター無しの場所向けの話であり、
他SNS等モデレータ有りの場合には全く当てはまらない。
だから例えばtwitterにこの内容を投稿するのも頭がおかしい。（スレチならぬSNSチ、5chでやれ、でしかない) そういや前にコテハンつけるとか約束したのに結局外して荒らしてるんだな >>741
オジサンはなんで>>729を無視して次にいこうとしてるの？
まず、>>729に対して返信しようよ。
それとも昭和ではこういう自分に都合悪くなったら
無かったことにできる文化だったの？
現代にそんな価値観持ってこられても老害すぎるんだけど 書かれてない事まで妄想して捏造してるから、統失じゃなくても
それに近い何かしらの精神疾患はありそう コテ付ければ質問されても無視できるし、コテをNGに入れるような連中には回答されたくないだろうから
初心者オジサンはちゃんと酉とコテつけろよな >>754
>>556のあたりでコテつけたのに外して荒らしてるんだよ
嫌がらせが目的なんだからNGされるようなことはするわけないわな >>755
付けろとは書いたけど、付けるとは全く思ってないｗ
まぁ、質問してきたら文体で判断していくしかないだろうな 質問者は、age で書く。コテハンも付ける。
fiddle も使う
そもそも今さら、float を使うのが時代遅れ。
Bootstrap, Bulma, Tailwind などを使うべき >>707
ウェブ開発なら、Ruby on Rails だけど、
ウェブ制作なら、VSCode, Node.js, jQuery, SASS,
Bootstrap, Bulma, Tailwind など >>714
いや、いじれるけど、親タグ作るのいちいちめんどくさいから出来ないかな？って話。
例えば、
<div class="hoge">
<p><img src="image1.jpg"></p>
<p>あああああああ<br>ああああああ<br>ああああああ<br>ああああああ</p>
<p>あああああああ<br>ああああああ<br>ああああああ<br>ああああああ</p>
</div>
<div class="hoge">
<p><img src="image2.jpg"></p>
<p>あああああああ<br>ああああああ<br>ああああああ<br>ああああああ</p>
<p>あああああああ<br>ああああああ<br>ああああああ<br>
<a href="外部リンク">詳しくはこちら→</a><br></p>
</div>
本文のテキストは左寄せにして、外部リンクはコンテンツ内で右寄せにしたい場合とかもろもろ ruby・bootstrapキチガイと質問ネトウヨが一同に会した！ >>760
その例なら親要素あるから、子要素にfloat使っていいならaタグにfloat:right;でイケるし
親要素の.hogeにposition: relative;、孫のaタグにabsoluteとright:0ってのもあるが
他に縛りが増えるとなると、あとはケースバイケースだなぁ 日本語おかしかった
> その例なら親要素あるから、子要素にfloat使っていいならaタグにfloat:right;でイケるし
親要素あるからfloat使えるって話じゃないので念のため
親要素があるから、親要素を利用した2行目みたいな書き方も出来るって話ね >>762
親要素に指定せずにってのが条件なので、
rerativeはダメです。 floatも親要素でclearしないと後続要素に影響出るのでダメです。
つまり方法なしって事か。。 >>766
親要素に指定できない理由がわからん
パズル解きたいわけじゃなくて、効率化したいんだよな？
なら条件変えた方がいいんじゃね dom増えるのを嫌うのははしかみたいなもんだな
大手サイト見ればなんなのかわからんdivの入れ子だらけだし >>769
その通りで、レイアウトが実現できなくて困っているわけではなく、
よく遭遇するから、できないもんかね？ってニュアンスの質問。
display:blockにしてfit-contentsすれば解決しちゃうんだけど、inline-blockでの方法があるなら知りたかっただけ 小賢しいことやってもクロスブラウザチェックで崩れたりするだけだから
ちゃんと表示されるようにどんどんコンテナは追加すべき sassの@useと@forwardの違いが分からない！
変数を定義して複数ファイルに分けて、それを毎回@use "foo"; @use "bar"; と書くのを避けたいなら
@forwardを使うという理解だけど正しいだろうか
でもどっちも中継出来るしよく分からない mixin var function とかをファイル分離してるFLOCSS的な構造なら@useでネームスペース作る
単に別のファイルインポートするだけなら全部@forwardでいい >>774
var functionとFLOCSSが何か分からんから調べてみます感謝
そんなに詳しくないけど@forwardは@importみたいに名前空間なし、呼び出したファイルを超えて変数が使える感じかな 役割や意味ではなく階層で分ける例
https://zenn.dev/taketooon/articles/fa77fcbd3ba4b9
生成されたcssに同じ記述が何回も出てきて肥大してるとかなってなきゃ動けばええねん >>776
そこ昨日も見てたけど理解出来なかった。今日見たら理解出来た
昨日は疲れてたし理解出来ないで時間ばかり経つから焦ってたせいだと思った
解決したなら説明しろって話だけど自信ないけど
①useすると名前空間が出来る（as *を付け加えないとする）
②名前空間はそれを呼び出したscssファイル内でのみ参照出来る
③名前空間を作らないで呼び出しだけしたい場合はforwardを使う
④forwardしたscssファイル内では変数なんかの参照は出来ない
forwardのメリットは？
複数ある変数なんかが定義されたscssファイル（メンバー）をまとめて1つのscssファイルみたいに扱える
だから@use "hoge"; @use "piyo"; @use "foo";と書かなくてもこれらのメンバーをforwardで1つのscssファイル、例えば_foo.scssにまとめたら
@use "foo"これだけで済む メンバーはバラバラなままだから再利用性は保たれたまま！forward便利！という感じだと思う 以前はここでscssの話するとやたら煙たがる人がいたが、
ここ以外に無いから俺的に大歓迎 a がb を、bがc を読み込む場合、
bで、@use '_c' とすると、
private で読み込むので、スコープをb内に限る
一方、bで、@forward '_c' とすると、
aで、@use '_b' とすると、c内の変数にもアクセスできる
変数を継承したような感じ https://nagano-bentou.com/
このサイトの下に出てて閉じるボタンで消せるやつってどうやったら実装出来ますか？
呼び名とかもあれば教えてください 開いて1発目に出てくるキャンペーンのもお願いします >>783
違いました
何もしなくても出てるやつです >>785
ボタン押さなくても781みたいに素で出てるやつ… モバイルUAじゃないと下に表示されてない
いわゆるcss固定メニューバーと同様にposition: fixed;で表示位置固定したのをボタンが押されたらjavascriptで表示・非表示切り替えるだけ 質問です。
360px以下のデバイスは全て同じ表示になるよう（デバイス基準で拡大・縮小）にしたいのですが、
Viewportでできるんでしょうか？
やり方解る方お願いします。 350pxどころか500以下は固定viewportにして全スマホで同じ表示にしてるサイトあるけど何も問題ないな
デザインリニューアルも同時にしたからあてにならないデータではあるけど固定viewportにした前後でアクセス解析の数値に大きな変化はなし
むしろ少し改善したくらいだった >>790
意外と大丈夫なんですね。
500pxにすることでコーディングやりやすくなったりしますかね？ フハハハ
このスレきっかけで*=を覚えてからは、昨今の乱数字コーディングに対する明確な対策を確立できましたわｗ
今までずーっと>div>div>div>div:nth-of-type(2)>div>みたいな感じで特定のソースから順番に追って制御していたった
Twitchのようにその多くを乱数字で構成しているサイトには対応できないが、classと乱数字を混合させているタイプのサイトには秀逸ｗ
皆さんあざっしたm(vv)m >>791
スマホごとの差異を計算しなくてよくなるからだいぶ楽だし凝ったデザインもやりやすい
固定するviewportの幅はスマホとPCでフォントサイズを変える必要がないあたりで調整するとさらに楽
400～500pxの間くらいで調整するといい感じ テキストの横にbeforeを使ってbackgroundでアイコンを表示させました。
vertical-alignもmiddelにしましたが
iosとAndroidで位置がズレるんですが、どうしたらいいでしょうか vertical-alignでクロスブラウザ＋様々なフォント環境で揃えるのは無理
position:absoluteで位置調整するとか
inline-flex＋align-items: centerとか
疑似要素やめて背景画像でお茶濁すとか 完全対応させるにはパワープレーだけどabsolute使うのが一番らくな気がするな
MDN的にはiOSが悪いらしいけど 静的htmlのHPのお知らせ部分に、index.htmlがある階層の一個下へぶち込んだwpﾌｫﾙﾀﾞのWordPressで書いた投稿ﾍﾟｰｼﾞを綺麗に表示させられなくて苦戦しています。
または、静的htmlをﾃｰﾏ化させる方法でも良いのですが、single-news.phpを作ってｶﾃｺﾞﾘとｽﾗｯｸﾞをnewsにしても何故かindex.phpが表示されるし、ほかにも固定のaboutﾍﾟｰｼﾞも左寄せの見出しが真ん中に来てたりしてもう本当に訳分からないです。functions.phpで個別にcssは読み込ませることが出来てるのに…。挫折しそうです。WordPressに絡ませるの難しい過ぎる。周りに詳しい人もいないしネットで調べまくってるけどもう何日もやってるけど上手くいかない imgurの画像のように
https://i.imgur.com/IN3DHtU.jpg
sectionの背景を丸みのある形で重ねたいです
背景画像がなければsvgなどで半円を作って対応できると思うのですが、
背景画像がある場合はどのようにすれば良いですか？ cssのmask-imageってやつですね
ありがとうございます、試してみます！ 参考にするサイトがあるのなら、
デベロッパーツールで見た方が早いと思うぞ clip-pathでやろうと思ったらmaskでパス使う方が簡単だった
勉強になったわー 801です
無事、mask-imageで希望の形にできました！
ありがとうございます！ CSSというかSASSの質問なんですが
gridでスラッシュを使うから
割り算でスラッシュを使うな、ということで
dart-sassでは割り算に
math.div関数を使うようになりましたが
grid-template:
'hoge huga' 50px
'hage hage' 50px/
100px 200px;
のように書くと、コンパイラが
割り算でスラッシュを使うな！とwarningを出します
これってdart-sassの間違いなのだとは思うのですが
皆さんはどう対応されているのでしょうか？
放置？ 割り算に、/ が使えなくなったとか、どこかで見たような気がする >>808
ショートハンド使わんでも
使わなくても結局スラッシュは書くわけで
同様に怒られる( ；∀；)
>>809
それが>>807に書いた奴です
ググっても全然出てこないし
みんなそんなにgrid使わない？
もしくはdart-sassではなく、lib-sass？ いやだから
rowとcolumnをまとめて書かなきゃいいじゃん 昔background のショートハンドでスラッシュ区切りのbackground-sizeを書くと認識しないブラウザがあったように
dart-sassでmath.div使えというのと関係なくスラッシュを含むショートハンドはバグ出やすいから避けてる grid-templateは個人的にname row column分けて書くけど
今同じように一括指定したけど別にエラー出なかったぞ
コンパイラがアホなんじゃないの >>813
なぬう…
手元にNuxtで動いてるやつと
webpackで動いてるやつと
gulpで動いてるやつが
それぞれいくつかあるんだけど
どれもwarning出るんだよなあ…
なんでだろう >>811
templateの方はそれでスラッシュなくなるけど
areaの方に書かにゃならんでしょ
ていうかgrid-templateって
ショートハンドで書かない意味がわからん…
>>807のように改行して書いて
視覚的にどのように分割するのか解るためのものなのに areasにスラッシュなんかないし
改行するのはareas自体の記述ルールであってショートハンド関係ない
https://developer.mozilla.org/ja/docs/Web/CSS/grid-template-areas
たぶんショートハンドがなんなのかわかってないレベルだからMDN嫁 807のとおり書いても
てきとうに設定を変数に詰めてみたりしたけど
警告出ないね
念のため
width: #{$WIDTH / 3}px;
は警告出る状態でテストしてる 警告が出る方が、バージョンが新しいのかも
node-sass（LibSass）は非推奨
結局、Ruby sass を速くするために、
C++ で作り直しても、誰も修正できない。
可読性が低い言語は、作った瞬間から産業廃棄物w
sass（Dart Sass）へ変更された >>816
>areaの方に
というのは
itemの方に、の間違いではないかとエスパーしてみる
grid-column、grid-rowではスラッシュ使うし
この話は
VSCodeの従来のSASSコンパイラ使ってる人には
ちょっとわかりにくいかも知んない backgroundにsvgベタ書きする時、base64にエンコードしないといけなかったような気がするのですが
これってie用ルールでしたっけ？
今やってみたらエンコードしなくても結構表示されたので（win主要ブラウザ、Safari（ios12と15）、chrome（android13））
いったい誰子ちゃんのためにエンコードしてたのかわからなくなりました 821>822
ありがとございます！
次から書きません >>822
まじか
もうURLエンコードするの習慣化してたわ base64にする必要ないけど最低限#と%はパーセントエンコーディング必要よ cssについて質問です。
外部CSS<link href="stylesheet.css">と内部CSS<style></style>の中身に同じような物があった場合どちらが選択されますか？
外部CSS
b {
color: red;
}
内部CSS
<style>
b {
color: blue;
}
</style> >>826
セレクターの詳細度が同じなら後に読んだほう
直書きでも書く位置がhead内でそのstyleより下にlinkがあるならlinkが適用されるし
linkがhead内でstyleがbody内とかならstyle直書きが適用される なるほど。ありがとうございます。
追加で質問させて頂きたいのですが
<link href="stylesheet.css" rel="stylesheet">
このように外部CSSを適応する際に何故rel属性が必要なのでしょうか？ ありがとうございます。
書き込む前にそちらのサイトを検索し表示しようとしたのですが何故か開かないのです… webはじめて1年経つけど、最初bootstrapが初心者向きで瞬間で挫折したけど、
一通り、html5とcss3マスターして、昨日phpでDBのレコードをCRUDする管理画面作ろうとしてbootstrapやってみたら
なにこれめちゃ簡単じゃんって思ったわ。
複数クラスとか昔、混乱してたけどこうやって見るとbootstrapの良さも悪さもわかるものね。
システムの管理画面には向いてるよね しまった、礼を言うのを忘れてた
このスレでjsfiddleとかで教えてもらったイケメンのお兄さんありがとう
ggrksと辛辣にアドバイスしてくれた人もどうもです Bootstrap 5 の本も出た
Bootstrap 5 フロントエンド開発の教科書、2022
WINGSプロジェクト 山内直 (著), 山田 祥寛 (監修)
Ruby on Rails 7 のデフォルトのCSSフレームワークは、
Bootstrap, Bulma, Tailwind, PostCSS, Dart Sass の5つ
Bootstrapが多いが、Tailwindも増えてきた。
CSSが分からない香具師は、これらのフレームワークを使えばよい
ただ、Bootstrapは本も出るぐらいに、ポピュラーだから。
まあでも、他のフレームワークも同じような感じ Webサイトでログイン後に初回だけボタンの説明やメニューなどにバルーンが表示される機能があるのですがこの機能はどんな名前なのでしょうか？
説明するときに機能名が言えなくて困ってます。 >>835
バルーンヘルプ
ツールチップ
違うかもだけど >>836
回答ありがとうございます。
ネットで調べてもそれっぽいキーワードで結果がでてこないんですよね。
一般的な名称はない感じなのかな。 >>837
ならこれか？
> チュートリアル機能とは、ネットサービスやアプリケーション、ゲーム等のソフトウェア製品などを初めて起動したときに自動的に開始される基本的な操作方法や使い方、搭載されている機能などの概要を教える機能のことである。
> www.weblio.jp/content/%E3%83%81%E3%83%A5%E3%83%BC%E3%83%88%E3%83%AA%E3%82%A2%E3%83%AB 勝手に表示されるチップとかチュートリアルってほんと邪魔だよな
あれのせいで余計にわかりづらくなってる あれはユーザの利便性じゃなくて運営者の責任逃れのための存在だからね しかしあれ、やらないわけにも行かないでしょ
闇バイト詐欺に騙されまくってるZ世代のネットリテラシーなんてネット使わない老人以下だし
欧米デモー、同様にやってるし こんにちは。久しぶりにHTML/CSSを勉強してます。
浦島太郎状態なので質問させてください。
1.
Dreamweaverって今どのくらい使われてるのでしょうか？
皆さん無料のエディタに移行してしまいましたか？
個人的にはCCのおまけで使えるので費用はかからないのですが。
2.
Bootstrapはどのくらい使われていますか？
レスポンシブは必須だと思うのですが、viewportの手入力で解決しているのか、
それとも何か他の手段を使っているのでしょうか。私の知識はBootstrap4で止まっています。
3.
いまどきWordPressは学んでおいた方がいいですか？
個人サイトを立ち上げようと思っているのですか、
HTML/CSSをカスタムするよりWordPressで始めた方がよかったりしますか？
将来的にはWEB制作を受注することも考えているのですが(販路はあります)
クライアントからWordPress縛りで依頼されるシチュエーションは多いのでしょうか。
よろしくお願いいたします。 結構な浦島太郎さんだと思うけど、それで仕事が回せるならヘタに変えなくて良いと思うよ >>846
ありがとうございます。
DW+bootstrapで個人事業サイトを作って管理していたのですが
改めて個人サイトを立ち上げたいと思い、質問させていただきました。
他の方のご意見もお待ちしております。 エディタに関しては使い勝手が自分に合ってるかどうかなので
好きなの使えよって感じだが、利用者が多いのはVSCode >>846
いやいやこれからもこの世界で仕事するならVSCodeの仕様は必須だし勉強しておいて決して損は無い
というより流れの速いこの業界は常にアンテナ張って情報仕入れて勉強の日々よな Dreamweaverも使えないことはないけど今はもう更新止まってるしさすがに時代遅れになってる
Adobeもこの分野のアプリをこれからどうするのかはこの秋辺りにロードマップで表明するんじゃなかろうか adobeはBracketsもサポートやめたし、XDもなくなるし
Figmaを買ったいま、コーディングはDWでって流れに戻すのかな Dreamweaverを新展開するのなら今の流れだとAIと絡めてコードの自動生成くらいはやんないとな Brackets終了してVScodeに誘導してたよな >>845
1 仕事で使ってる人はほぼいない
2 今はまだ需要あり、ただ今後は微妙。もともと日本でのシェアは低いし
3 覚えておいた方がいいでしょう
>クライアントからWordPress縛りで依頼されるシチュエーションは多いのでしょうか。
多いです アドビはXDの上位互換のアプリ出すだろうし
Figmaはその為に買い取ったにすぎんよ
FigmaはFWやDWと同じ運命 >>845
>>833
に書いた
Bootstrap 5 では、jQuery を使わなくなった。
その本を読めばよい >>845
自分も昔はGoLiveのヘビーユーザーでその後DWのヘビーユーザーだったが
今はvscodeのみだよ。
DW重いし、マルチカーソル使えなかったから。
最後の方はmapタグと複数行置換だけ使ってたけどもう完全に使わんくなった
今はscssなどでコーディングが主流だからvscodeおすすめ。
自分も>>854の意見に同意。 てかもうAIコーディングに取って代わられるでしょうね。
withAIの時代です ああそうだDWの便利な機能「HTMLタグのクリーアップ」
あれは今もに欲しいな
消したいタグの開始タグと終了タグを属性とか無視して簡単に削除
正規表現でシコシコするより断然簡単 chatgptにphp,css,html丸投げして
客から50万で受けた仕事を30秒で生成する罪悪感よ
たまにしれっと嘘つくところもあるけど、なんでも24時間応えてくれるし、夜中型の俺には最高の相棒だわ
同じAIであるSDも毎日日替わりのオカズを何百枚も仕事中にバックグラウンドで生成してくれるし
AIと言うのは凄い世界だよな うそーん
それは調教の成果なのか？
jsが比較的使い物になるのに大してphpやcssはめちゃくちゃデタラメ返されるんだが まぁプロンプトの品質(指示)次第で変わるのはよくある CSSのカッコイイデザインってみんな自分で考えてるの？
ある程度はパクリ？ >>863
考えてやってる人もいるだろうがこのスレの住人とか量産してる奴らは
せいぜい既存のものにちょい手を加えるくらいで効率化の方を選ぶ CSSのデザインという言葉の意味を汲めてるかわからんが
このデザインどうやって再現するんだ？という時に画像バーンやらずにCSSでできないか試行錯誤するのが一番鍛えられるなあ デザインはロジックなのである程度勉強すれば身に付くし理解できるようになる 普通はイケてるUI見ただけでcssで再現できるだろ
できなくても調べて実現できたらうぉーー！できた！ってならんの？ showroomの仕様が変わってStylebotのCSSを使ってアバターを非表示できなくなりました
https://campaign.showroom-live.com/akb48_sr/#/
Chrome:114.0.5735.199（64 ビット）
Stylebot:3.1.3(拡張機能)
showroomの仕様変更前はこれでアバターを非表示にできた
/* アバター */
#avatr-container {
display: none !important;
}
どのようにcssを書けばアバターを非表示にできますか？ #avatarContainer {
display: none !important;
} もしくは
.avater-container {
display: none !important;
}
でも可 >>873
>>874
ありがとうございます。問題が解決しました。 SHOWROOMはアバターとかアニメーションがウザ過ぎて
デフォルトの表示で見ようって気にならないよな
原型が分からないぐらいゴリゴリにCSS弄ってるわ >>877
2022年4月のSR仕様変更で更に視聴環境が悪くなったので左上のバナー、テロップ表示の背景、アバターを消すためCSSを使うことになりました。 他人のアバターなんて見ていられない。
なんで何十人も他人を見なきゃいけないのさ
サクラがお金を投げて、
それに影響されてお金を投げるという、好循環を作りたいのだろう 質問なのですが、jQueryを使わず<details><summary>のみで
開く前と後で文章を代えることはできますか？
▶○○について （◇◇のこと。＠＠＠との違い）
↓
▼〇〇について
〇〇とは◇◇のことであり～～～
つまりはこれは～～～～～
よって～～～～～～～
＠＠＠との違いは～～～～～
みたいに開く題目の脇に簡単な概要を記載してクリックしたら詳細が開くので概要が消えるようにしたいです。 >>882
開く前と後で文章を変えるってどういうことよ？ >>884
見出しをクリックして文章表示させてるときと閉じてるときで見出し文を代えたいです >>886
ありでOKです。使ってるところがCSSはいけたんですがスクリプトが駄目でした。
▶クリックで開く
↓
▼クリックで閉じる
ＴＸＴＴＸＴＴＸＴＴＸＴ～～～
こんな風になればいいなぁと details[open] summary {}
とかで「開いたらサマリーを消す」とかはできるが
サマリータグの本来の役割と違うのでセマンティック的にどうなんだろう チェックボックスの疑似セレクタでアコーディオン作るとかも昔あったけど
タグの意味として間違ってるのがモヤる >>887
こういうことをいってるのかな
<details class="res887">
<summary>
<span class="closed">クリックで開く</span>
<span class="opened">クリックで閉じる</span>
</summary>
<p>TXTTXTTXT</p>
</details>
.res887 {
span.closed {
display: inline;
}
span.opened {
display: none;
}
&[open] {
span.closed {
display: none;
}
span.opened {
display: inline;
}
}
} まぁ、メンテナンス性とか色々無視して
見た目だけなら、こんなんでイケるが
https://jsfiddle.net/mnowrdbv/ ごめんscssで書いてた
.res887 span.closed {
display: inline;
}
.res887 span.opened {
display: none;
}
.res887[open] span.closed {
display: none;
}
.res887[open] span.opened {
display: inline;
} >>887
jQueryを使わないjavascriptなら余裕 スクリプトがダメって言ってるからjs追加禁止案件とかなんじゃねーの すみません、sccsは私が全くかじってないため、よく理解できませんでした
>>891の丸写しをhtmlで試したらうまく行ったのですが、これはcssファイルを別途用意しないとだめでしょうか？
またこのクリックで開く項目が複数ある場合はどうしたら良いでしょうか？
正直なところ、タグ使用可能のcgi掲示板の自分のページの装飾に使いたい形で
cssもファイル読み取りではなくstyle属性で記述しておりました
その関係でjsも使用しておりません
掲示板内にstyleタグでcss書くのは他の人に影響でないかよくわからなかったもので やろうとしてることをエスパーすると
それはたぶんやってはいけないことだから諦めた方がいい >>895
::afterなんて使わないで、こっちの方がよかったな
https://jsfiddle.net/q5y1pthb/
他に影響が出ないようにしたいなら、detailsタグに独自のclass名付けりゃ
styleタグにまとめて書いても特に問題無いんじゃね？
タグごとにいちいちstyle属性でスタイル書く手間も省けるし >>897
あ、なるほど。ありがとうございます。
style属性書くのしんどかったので確かに。
あとこのCGIプロフィール掲示板、最初からpreになっているのか、書くと改行コードが全部反映されてしまうのか
タグ部分も長くなると空白行が増えてしまうので動いたのをみてタグを全部改行消してつなげたりしてるのですが
brタグないしｐタグじゃなければ改行されないようにはできないでしょうか その掲示板がタグやスタイル許容してんのは
文字装飾程度のことをしてほしいだけなんじゃないのかな >>898
cgiの素性が分からんから何とも言えないが
改行云々はcgiの問題なので、そっちをいじるしか
それが無理なら、こういうので整形すれば？
HTML Minifier - HTML Compressor - Minify HTML Online
https://htmlminifier.com/ backgroundで指定した背景画像に影をつける方法はありませんか？ >>901
背景画像が入ってる要素にbox-shadowじゃアカンの？ vscodeで、div > div > p みたいに書いてタグ作ってくれる機能なかった？
前やったことあるような気がするけどどうやるかわからん >>907
emmet
vscodeにもあるが別にvscodeの機能ではない
tab押すだけ >>907
>>907
クラス名やid、複数個もできるよ phpでデータをループして表示したいんだけど
dl>(dt>div*4)+(dd>div*3)>
みたいなのを100件繰り返すか
dlの中に
(dt>div*4)+(dd>div*3)を100件繰り返すかパフォーマンス的にはどっちがおすすめ？
tableタグは書き終わるまで表示出来ないので
使い勝手は悪くないけど回避してます
emmetで
dl>(dt>div*4)+(dd>div*3)では
vscodeのtabで展開できないのね >>910
phpの話はphpの質問スレで質問した方が
【PHP】下らねぇ質問はここに書き込みやがれ 14
ttps://mevius.5ch.net/test/read.cgi/tech/1663659983/
> vscodeのtabで展開できないのね
手入力ならイケるが、デフォではコピペだと展開出来ない
この場合、設定でtrigger expansion on tabを有効にするとコピペでも展開できる >>911
いや、phpじゃなくてどっちかというと
上にも書いてるけどブラウザが書き出すパフォーマンスの話
シュッと出る方はどっち？という意味ね だったらそれはブラウザに関する質問な気が
というか、そんな事よりもphpのループの処理速度を気にした方がいいと思うが
[PHP]ループのメモリ使用量と処理速度を比較しました - Qiita
ttps://qiita.com/h13/items/a75fba76f435212a2eb3 PHPはサーバーで処理するから、よっぽどでかいファイル表示させるか何千個もコンテンツ表示するような仕様じゃない限りブラウザの負担は変わらん PHPが重かったらこんなにWordpress流行らないわな ん？体感変わらないけど数字に拘るPC自作er
みたいな話をしたいんじゃないの？ 細かい違いのパフォーマンスなんてブラウザエンジンやcssによって変わるしなぁ より良くを目指そうとするのはいい事だと思うけどなあ
横だが参考サイト面白かったよ
こういうの細かくチェックしてる人いるんだね 参考サイト見たワイ「まぁだいたい上位全部同じやな、シンプルなものでヨシ！」 ソース見られたときに恥ずかしくないよう、phpでのhtml出力時にもインデントや改行にも気を遣ってるわ http://imgur.com/piLJPuL.jpg
これAWSの見積もりのページのフォームなのですが、このリージョン選択のように、選択項目をグループ化し、かつ各項目には名称と値のペアで表示するような選択フォームが使えるUIフレームワークはありますか？
イメージとしてはdatalistかつグループ化ができれば良いレベルなのですが。 作ったほうが早いですか。現在はSemanticUI使ってます。
AWSのcloudscapeを導入してみようかと思いましたが… Bootstrap 5 のDropdowns を元に、カスタマイズしていけば？ rubyキチガイ（bootstrapキチガイ）をすべての板でNGにできる正規表現ねーかな 「そこで出会ったのが皇潤」みたいなノリで突然アイツが出てくるから萎える >>929
bootstrapのネタ出してくるのも一人だけだけだから2つともNGにしちゃえばいいよ えー俺ブートストラップ好きなんだけどー(´・ω・｀)
でもHTMLが汚くなるから綺麗なコーディングしたい人には向かないね content: attr(id)で表示した内容がブラウザで検索やコピーができないのですがこれはしょうがないのでしょうか。 ブートストラップで管理画面作ったらcss作らずに手早くできたのはいいけど
htmlが呪文まみれになってしまったw
あれからwebデザイナーになるわ、みたいな人は不幸な勉強かも知れん 呪文ってなんだよ
単にお前が理解できてないだけだろ Twitterで下floatってお題があってその解決策が
高さ固定の画像でしか無理だったんだけど
レスポンシブ対応できる下floatって無理なんかね？ 見てないけどなんのことなのか想像つくが
右下左下floatはIE滅んでgrid最高！な時代でも可変対応無理やから
デザインの時点で避けるべきやね Ruby on Rails 7 のデフォルトのCSSフレームワークは、
Bootstrap, Bulma, Tailwind, PostCSS, Dart Sass の5つ
Bootstrapが多いが、Tailwindも増えてきた
本も出た
Bootstrap 5 フロントエンド開発の教科書、2022
WINGSプロジェクト 山内直 (著), 山田 祥寛 (監修)
これらのCSS フレームワークを使わないと保守できない。
我流で作ったものは、バグも多いし駄目。
解読できない。解読コストが高い
さらにSASS ではなく、CSSで作ったものも駄目。
場当たり的に、important! とか使っているものも、全部やり直さないと出来ない vscodeで自動インデントしていると
サイトのソース見たらガタガタにスペースが入ってしまうんだがどうすればいい？
インデントはスペース:2でやってる ガタガタで何がどう問題なのかサッパリ分からんので、内容はぼかしていいから
ガタガタのソースのスクショでも貼って >>943
ガウスで内容ぼかしたわ、研修一覧出す簡易なCRUD
ソースでは開始タグと終了タグは縦位置あってるのにソースだとズレるの謎
https://i.imgur.com/Ok5thUA.jpg php文のインデントがスペースとして出力されてる
処理後のソースを見せるのが目的ならphpのインデント削ればいいんじゃね
そうでないなら気にしない htmlなんて最終的にはminifyしてスペースも改行も取っちゃたりするくらいなんで気にしてないな
phpが見やすい方が大切かと >>945-946
どうもです（ﾟεﾟ）ｷﾆｼﾅｲ!! ことにします meterの上か下に目盛りって付けられないの？
rangeみたいに モーダルウィンドウかポップアップで、一回閉じるを押すと、サイト内の他のページへ移動しても出ないようにしたいです。
どのページがランディングになるかわからないため、全ページにjavascriptなどを入れないといけないと思いますが、そのようなことは出来るものでしょうか？ >>948
meterとdatalistは結び付けられないので自力で頑張って
>>949
javascriptでcookie食わせればいいんじゃない？ >>949
sessionStorageかcookie使ってみな >>950-951
ありがとうございます。
何か難しそうですね。。。
全ページにお盆休みのお知らせを表示したかったのですが、全ページに出すと鬱陶しがられそうでしたので、一回だけ。と考えてました。
さらにsessionStorageとcookieで調べてみます。 ページ遷移ごとにポップアップは凶悪に邪魔なのでやめといた方が無難ね
Cookie読み書きは一回お作法覚えれば応用利くのでおすすめ
無理なら各ページの頭に告知エリアをインクルードするほうが見る側には優しい 上から下に並べていくsectionでpadding使うか、直後のh2などの子要素にmargin-top使うか
何年悩んでいるんだと思うぐらい曖昧だわ
レスポンシブにしたときにpadding横は触らないといけないし、今はやりみたいなやりかたあるんだろうか
vwとかは昨日思い出した Bootstrap では、マージンの使い方を統一するために、
margin-bottom しか使わない
bootstrap-reboot.css で以下の要素は、margin-top: 0; となっている
h1, h2, h3, h4, h5, h6
p
ol, ul, dl
pre >>957
を修正
margin で検索したら、margin-top: 0; は他にもあった
body, blockquote, figure
input, button, select, optgroup, textarea
fieldset Bootstrapの話ししてるから便乗質問するけど、これからも使えるかな？
8月から新サイト作るのに使おうと思ってるんだけど、
Twitterがあんなことになってるから、先々が心配だ 任意の行だけを縦書きにする方法ありませんか？
アイディアが浮かばないのでbrで改行してますがダサいし変な空白ができて気持ち悪いです
Bootstrapで組んでるのでCSSは使わず直接指定できる方法があれば… >>960
CDNの心配をしてるなら自鯖にBootstrapをアップロードしとけば問題無いと思うが
>>961
CSSで頑張るしか >>962
CDNではなくて、単純に開発が続くのか？6は出るのか心配してる bootstrapを誰がどうやって開発してるのか調べた上で心配してるの？
ｔwitterと比べるのすら馬鹿らしいんだが 6はリリース時期は未定だが、しっかり予定はされている >>941
に、Bootstrap 5 の本の事も書いた
その本にも書いてあるけど、
Mark Otto, Jacob Thornton は退社して、
Twitter Bootstrap から、Bootstrap へ名称変更された >>964-966
開発元は今のTwitterと違うということで安心した CSSフレームワークと自作のCSSを組み合わせることはありますか？
フレームワークだけだと小回りが利きませんが、
自作のCSSを加えると管理しづらくなるのではと懸念しています。 cssフレームワーク自体がカスタマイズ前提で設計されている 本来の使い方やで
フレームワークで基本的なところ設計して
足りないところを自作する
管理に関してはCSSの永遠の課題
そもそもフレームワークつかってても
管理ががががが >>969-970
ありがとうございます。
フレームワークのSCSSを利用することもできるので、
自作のSCSSと組み合わせながら使っていきます。 サイト作成のクラウドソーシングとか、やっぱり実務経験無いと厳しいですよね(*´ω｀*)？
飛び抜けたデザインスキルがあるわけでもないし >>972
ほとんどの人が飛び抜けたセンスなんて無いよ >>972
何が簡単で何が難しいのかを知らないと、知らず無理言って相手にされなかったり、逆にナメた作りされてもNG出せない心配はある
予算と仕様が妥当なら複数の制作から提案あるはずなので、そこから選ぶ勘所は経験詰むしかない
大事なことをひとつ追加すると、完全にスレ違いの質問なので続きは他所でどうぞ >>972
ちょっと待って、もしかして依頼する側じゃなくて制作側なの？
こんなとこで背中押してもらおうとする暇があったら一件でも多く提案してまずは実績を積めー！ もしかしてもくそも、どうみても制作側だろｗ
依頼する側でなんで実務経験やデザインスキル気にするんだよｗ 管理画面を初のbootstrapでササッと作ったものはいいけど
あまりの融通の無さと、冗長的なループのhtmlがクラス名で汚れて後悔してるわ
レスポンシブのcol-**-nは確かに便利だが、他のcssプロパティにおいて正式名を知っているのに変なクラス名書くの結構辛い 融通ないのがいいんだろ。CSS名考えたり、作ったりするのに時間がかかるんだから。
それに他の人もいってるけど、Sassで読み込んで使うもんだぞ >>980
すまんが、自分のオリジナルに追加でsaasで読み込ませて両刀使いにするってこと？ 両刀もなにもフレームワークは完全にそれのみで使うことを想定してるわけじゃない >>981
逆。フレームワークのsassを、自分好みにカスタマイズするんだよ
カスタマイズって言っても、色の変更とかフォント関連が多いけどな。
で、自分オリジナルのは後付で追加すれば良い
フレームワークの設定を引用したら統一感も出る hasもいいけど個人的によく使うのが
親のクラス名が＊＊の要素って奴 すぐ欲しい。
$('li').parent('.categpryA') 的なの hasはFirefoxがサポートしてないので使えない
仕様書からFirefox外されないかな cssの新しい仕様は使えるまで1年くらい待たないとダメだろうな
特にスマホはブラウザのアップデートしなかったりiOSもアップデートしないやついるから Firefoxは無視しろ。ChromeとEdgeとSafariだけでいい Chrome系がちゃんと進んでるうちは無理やね
まずは実装追いつかないと widthのあるセンター寄せのdivより広いテーブルやdivって表現できる？ 何がしたいのか分からんので
絵とか描いて貼っておくれ >>997
子のmargin-leftとrightにネガティブマージン指定すりゃ広がる このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 298日 4時間 41分 22秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
