HTML/CSS のどんな質問にも優しく答えるｽﾚ 48
レス数が1000を超えています。これ以上書き込みはできません。
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！ 質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう
■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう
■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 47
https://mevius.5ch.net/test/read.cgi/hp/1617839294/
■関連スレ
Webサイト制作初心者用質問スレ part252
https://mevius.5ch.net/test/read.cgi/hp/1595561376/
■HTML
HTML Living Standard 日本語訳
http://momdo.github.io/html/index.html
■CSS
Selectors Level 4 日本語訳
http://triple-underscore.github.io/selectors4-ja.html 済まぬ前スレからなのだが
*************************************
mix-blend-modeについておしえてちょ
https://codepen.io/dddi/pen/oNWqNEe
hoge2の重なってる部分の文字色をhoge1同様に白色にしたいんだが、どうしたらいっすか？
*************************************
ひょっとして普通にやっても白には出来ないって事？
hoge1にできてhoge2では無理な理由をおしえてちょ >>3
フォトショでおなじようにオブジェクト作って試してみれば >>4
フォトショだとmix-blend-mode: difference;は「差の絶対値」でいいんかな？
背景色に対して文字色に補色指定するとhoge1は無彩色の白（#fff）で
hoge2は有彩色のピンク（#ff33ff）になる意味が分からん。
逆に文字色が無彩色の白（#fff）になるようにするには背景色はどういう色相までが白なのかとか考えてまうわ
結論：よくわかんね つかこれからのデザインで
背景色に重なってる部分の色を自動的に白色にしたいって普通に必要になるだろ？
なんでみんなこの内容に乗り気じゃないんだｗ
後で絶対やらされるぞ やったことあるけど自動はまだ無理だぞ
文字なら同じ内容を二つ重ねたりする必要がある そもそも「特定の色にしたい」はmix-brend-modeの仕事じゃない
clip-pathとかでがんばれ mix-blend-modeの差の絶対値じゃ特定の色じゃないと
白抜きは無理だろうなぁ >>10
その特定の色の基準が分からん
具体的にどこからどの範囲までの色？ おまいらうだうだ言ってないでサンプル作って見せてくれよｗ >>11
範囲っていうか、差の絶対値だから、白抜きなら背景色と文字色の
絶対値の差が#ffffffになればいいってことでしょ？
https://jsfiddle.net/pnkut9v5/ >>11
元となる色情報が分からないと出しようがなくね？ >>11
できないっつってんだろ
諦めて白いオブジェクトを作れ IE11が死んだ今、尖ったサイトでなければ
--webkitみたいなブラウザ依存は使わなくても良い？ >>18
モノによるとしか
んで自分で気にしなくても
browserslistrcにお任せするのが
楽で安全だと思ってる >>15
だからその元となる色の範囲をしりたいんだってばさ。
a＋b＝白
白＝X+Yが成り立つXは何色であり、その範囲は色相環のどこからどこまでかという事。
色の基礎知識無いと意味不明かもしれんぞ >>17
>>13ができてるじゃねーかよ
偉そうに 今週のテーマmix-blend-mode
こういう機会でもないとこんなマイナーなの仕組み理解とか試さんし忘れるから
いい機会やん mix-blend-modeのdifference（差の絶対値）の計算は
例えば背景が#ff00ffで文字が#00ff00だったら、RGBはそれぞれ
分かりやすく書くと
R→|0xff - 0x00| = 0xff
G→|0x00 - 0xff| = 0xff
B→|0xff - 0x00| = 0xff
になるから、背景と文字が重なる部分は#ffffffの白抜きになる
絶対値が必ず0xffになるのは、背景か文字のいずれかが
0x00と0xffになる組み合わせしかない
よって、差の絶対値で白抜きに出来る色は8通りかな？
で、更にそこから色を変えたければ、>>3の親要素にfilterかけて
好きな色に変えればいい みなさんnext.jsとかnuxt.js業務で使ってます？ >>24
完璧な回答ありがとう
正直、ここまで有能な人がこのスレにいるとは思わなかったｗ
ググればわかるような内容ではないもんな >>31
あのさ・・いい大人なんだしさ、
試しにあんたがうざいと感じた理由は何かを3つ上げてみて。
もしかしたら原因は自分にあるんじゃねーの？ >>3,12,30が同一人物ならうざく感じる気持ちはわかる
同一人物かどうかは分からんけどね >>33
同一人物だよ。つまり俺。
具体的にどこを直してほしいのか指摘するならまだしもひと言「お前うざい」って言われて
学校のいじめもこんな感じで始まるんだろうな。 mixというように色と色の計算なのだから
元の色を調整してでも白にしたいなどというケースは無いことがわからない
できない、任意の色にしたいという場合はこのプロパティを使えという助言は無視
仕切る
人を見下している
自覚がない >>29
どうもありがとう
静的サイトジェネレーターって言われてる物を理解したいvue.jsからnuxt.jsでいいのかな
具体的にどいう言う事が出来るのか分からんから調べまくらないと >>30
>>24だけど、差の絶対値の計算方法はググれば出てくる
他のモードも調べてみるといい
filterで狙った色を出す方法は色々あるだろうけど、filter用ジェネレーターと
カラーピッカー使うと便利かも
但し、filterはIEでは動かないので、IE対応したければ別の方法で
あと、質問者は質問者らしい態度で、嘘でもいいから全回答者にへりくだる
ぐらいの勢いで対応しておく方が、懇切丁寧な良い回答が得られやすいと思う >>36
すいませんでした。
あなたの回答が正解ですよね
ありがとうございました。
もう消えます。 >>37
誤解を恐れずに大雑把に言うと
Vueがフロントエンドを作るためのライブラリとすれば
NuxtはVueありきでサイトを作るためのフレームワーク
HTMLファイルがページの数ぶん存在する普通のサイトにすることも
SPAとすることも出来る
ひとつのvueファイルにHTMLもJSもCSSも書いちゃう
Vueのお作法に慣れると
わりと病みつきになる >>40
世の中VSCodeなのは分かってはいるけど
Atom使い続けてる… vscode
去年まではSublimeText3を使ってた レスポンシブのSPで
・タイトル
・テキスト1
・画像
・テキスト2
の並びを
PCで
左カラム
・タイトル
・テキスト1
・テキスト2
右カラム
・画像
にする方法ってposition: absoluteで画像を飛ばす以外によい方法ありますでしょうか？ やっぱVSCode多いんだね
自分もそうだけどｗ
>>43
実は今日はじめて触ったｗ
今日から覚えていきます >>42
ウェブアプリが作りたいわけではないけどnuxt.jsで静的ウェブサイト作ってみたいなあ
vue.jsから徐々にやっていこうかな
おれもAtom使ってたけどやっぱ起動が重いからVScodeに移ったわ >>49
以前iMac5K使ってて
Atomの起動遅いなーVSCodeにしようかなー
と思ってたんだけど
リモートワークになってMBP16買ってもらったら
起動速度は気にならなくなって
じゃあこのままでいいかなと 本人消えたのでメモ代わりに書いておくけど、ちょっと気になったので>>8をやってみた
https://jsfiddle.net/cujy1egz/
mix-blend-modeでやるよりも、clip-path使う方がシャギー出ないし、狙った色を
出しやすいね
これだと白抜きというより、白抜きに見える白抜き風の方法だけども メインはBrackets
vscodeに移行しようとは思うんだがHTMLとCSSメインだとBracketsのライブビューが使いやすすぎる Atomは開発終了しちゃったし、Bracketsもサポート終了しちゃうけど
かろうじて機能拡張なんかが更新し続けてくれれば･･･と思いつつ
VSCode使ってるけど、久しぶりにAtom起動しようとしたら動かなくて
再インスコしたｗ Sublime TextがまだMac見捨ててないので使ってる
ありがてぇ すいません、完全に初心者です。
fc2ブログに自分のツイッターアカウントページに飛ぶTwitterアイコンを追加したいんですが、どうすればいいでしょうか？
https://about.twitter.com/ja/resources/buttons#tweet
ここからできるみたいなんですけど、よくわからないです...
https://twitter.com/5chan_nel (5ch newer account) >>55
Twitterアイコンをどこかからかダウンロードしてきて
自分のTwitterページのURLコピーして
<a href="URL"><img src="アイコン画像のパス"></a>
でOK リンク先の通りの方法でコピペして
書き換えりゃいいだけなんだけどなぁ imgの下にdrop-shadowをつけて、そのdrop-shadowだけをlotateする方法ってありますか？
imgは固定して、drop-shadowだけ傾けたいです。 >>59
疑似要素で同じサイズのオブジェクトを背面に作ってそっちを変形する 同じ大きさのdiv作って影つけて回転って方法もあるけど
疑似要素の方がスマートかもね
https://jsfiddle.net/u960gsj8/ drop-shadowだから透過png使ってこいう影を少し回したいんじゃないの？
https://jsfiddle.net/wfaue8ho/ 質問者が意図した回答じゃないと思うけどかっこいいなそれ 画像を2枚かさねるなら最初からそういう画像作るのはあかんのか >>64
はー、もうphotoshopもいらねーな、こりゃ >>66 のimg:last-childのwidthとheightは必要無かったね
filterのbrightnessの数値を上げれば、contrastも要らない
htmlにimg2枚置きじゃなく、疑似要素でやろうと思ったけど
ちょっと上手く行かなかった >>66
IEだとfilter使えない問題があるから
2枚用意するのも悪くはないけど、だったら
それらを1枚にまとめてもいいかもね サイトを立ち上げてるんですが参考サイトのhtmlをデロッパツールで見ると
<header id>
<div id>
<div class>
</header>
</div>
</div>
となってます。<header id>と<div id>は理解できるんですが何でdiv classも挟む必要があるんでしょうか？
idはリンク属性を含む要素なので理解できますが、同じdiv id要素にclassをつける意味が分かりません。
SEOの問題でしょうか？ 基本はclassで優先順位を上げたいものをidで分けるんですね、!importantがseoを考えると非推奨なのでidを使ってみます。
使いすぎると読み込みの優先順位で不具合が起こる危険もあると書いてありましたので気を付けます。
<header>
<div id>
<div class>
</div>
</div>
</header>でした、すみません >>73
優先順位というよりclassは複数に設定できてidはできない、って考えた方がいいよ
優先順位あを基準としてidつけてたら
似たようなスタイルの設定でも複数同じ記述を書かなきゃいけなくなるし
最終的にimportant使いまくりになりそう classはほとんどCSS用、idはほとんどJavaScript用という感じがする 新しく入った会社のやり方がデザインは外注、コーディングは社内って感じで自分はコーディングやってるけど、
毎回スマホ用のデザインカンプが画面幅600～700pxで作られてるんですが、これって業界内では普通？
PC用デザインとほぼ変わらんじゃんflexで5列横並びになってる要素とかどうすんのよ2列でさえ厳しいのに、みたいな部分がかなり多い
あと少し前までは画面幅最低320pxまではちゃんと崩れないようにする意識でいたんですが、
最近だともう最低375pxまで出来てればいい感じなんですかね？ スマホ用は二倍サイズで作るのが定説
iPhoneメインに320時代なら640、375時代になった今は750で作る
今だとだいたい750で作るのが普通
600～700とかふわっとした数字では作らん つーか、会社でやってるなら
ここで質問しないで先輩に聞けよ
なんで画像サイズがそれなのか、320は足切りしていいのかとか
会社でフォーマット決まってんだろ >>78
広告系ではカンプの幅は750が多いな
んでコーディングするとき、スマホは全部vwにする >>83
カンプってのは、実際にサーバにあげてスマホなどから確認をするの？
紙に打ち出したものではなくて？ >>84
気にする客には
ブラウザで見られるようにしてあげることもあるけど
たいていはJPEGでダンプしたやつを
PC見るだけじゃないかなあ、特に代理店は
XDでプレビュー用のを作るのも
2年前は少し流行りかけたけど
今はもうあまりやらなくなってきたね なるほどそういうことかありがとう
前の会社では「ここは●px、ここは●pxにしてください」みたいに
値指定してるデータを元にしか作ってなかったから知らんかった
幅750pxのものもあったかもしれないけど、688pxみたいなやけに中途半端なモノもあったのは覚えてる
外注先デザイナーが複数いるっぽいから、人によって厳密な指定具合が違うのかもしれないし
会社も制作会社じゃないから詳しい人もそこまで気にしてる人も社内にいないかも
retina想定で750pxのカンプを基にコーディングする際は
要素の横幅とかをpx指定する場合は1/2で考えればいいってことですかね？
カンプ上で左右marginが20pxだったら、コーディングする際のmarginは10px、みたいな >>86
ピクセルで考えてない
文字サイズも含めて大きさの単位は全部vw
他の業界は知らんけど、自分のところは
スマホの大きさによってオブジェクト間の空きが変わったり、1行の文字数が変わったりするのは
許されんとは言わんまでも、NGくらう率が高いので
全部同じ見た目にしたいから
sassの関数で
@function vw($px: 0, $ww: 750){
@return ($px / $ww * 100)+vw;
}
ての作って
カンプから拾ったピクセル数をvwに変換してる
コーディングの際にあれこれ考えるのも無駄だし
これが一番早くて面倒がないと思ってる
ただ、あくまでSP表示の時の話で
PCの時は普通にpx <div style="border:Solid 1px #0000ff">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
これを横並びにするにはどうやったらいいですか？ またはdisplay:grid
両方勉強してどっちが適するか判断するのがベスト display: inline-block;
ってのもあるで >>89
どうもできました。
でもまた問題が
bbbを縦中央揃えにできないんですがどうやればいいんですか？
<div style="width:350ph;height:500px;display:flex">
<div style="width:300px;height:100%;background:#00ff00">aaa</div>
<div style="width:50px;height:100%;background:#00ffff;vertical-align:middle">bbb</div>
</div> bbbのdivにdisplay:flexとalign-items: center; >>99
たぶん、君は「カエル display flex」で検索すると幸せになると思う
やってみ、俺もそれで育った >>101
transform、transition、animationあたりも頼む さっきprogateのHTML/CSSコース終わらせてとりあえずホームページ作ってみてるんだけど、CSSで文字のサイズとか余白とかいじるのって感覚というか慣れしかない感じ？
プレビュー見ながらちまちまいじってみてるんだけどみんなこうやってるのかな デザインに従うんだから慣れも何もなくね
コーディングしながらデザインしようとしてるなら2年早い >>104
なるほど、簡単なHPだからなんとなく書きながら考えてたけど一旦別に見た目考えてから書くことにします。
感謝。 一般的な制作会社の制作フローは、
デザイナーがillustratorやphotoshopでデザインを画像で作成して
それをコーダーがhtml/css等でWEBし、
最後にバックエンドエンジニアなんかがサーバーサイドのプログラムやDB回りを連携させる感じ 自分Windowsで書いててChromeでプレビューしてるんですけど、
スマホとかMacとか、Safari、Edge、Firefoxだったらとかっていうのはレスポンシブ対応以上にコーディングでやることってない感じですか？ 古いandroidが一番厄介
それと画面が狭いスマホのopera
IEはもうやらね スマホは実機が手元にあるなら実際に開いて動作は見た方いいよ
ほとんど同じだけどAndoroidとiOSそれぞれ特有の挙動があったりするから
PCと同じ表示がされなくてたまに苦しめられる >>100
それで縦の中央揃えはできたけど
align-items:bottomとやっても下揃えはできませんでしたが
下揃えはどうやるんですか？ >>108
safariはだいぶやばいぞ
ベンダープレフィクスつけときゃいいだろとナメてるとハゲる >>112
フレックスアイテムの下揃えはalign-items: flex-end;
align-items - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/align-items デベロッパーツールのエミュレータとか便利だけど、あまり信用しちゃいけない
スマホはせめてsafariだけでも実機確認しとかないと危ない cssの質問があります。
同じセレクタが何度も出てくるのと、同じプロパティと値ならセレクタ何度も出ていいので
まとめてしまうのはどちらが良いのでしょうか？
エディタのリント？ってのだと、何度も同じセレクタが出てくるのが駄目そうです…
①
h2,
p {
color: red;
}
h2 {
...
}
p {
...
}
②
h2 {
color: red;
...
}
p {
color: red;
...
} 俺もそれがどっちが良いか、15年ぐらい悩んでるわ
どっちつかずな状態 プロパティをセレクタにかけるのではなく
セレクタにプロパティを記述していくのだから
プロパティが同じでもセレクタで分けるべき
ただ同じプロパティを流用したいというならユーティリティクラスを作ればいい シンプルなサイトならタグに直接プロパティ指定してしまう・・・ bootstrapは普通にタグに直接paddingとか文字サイズ指定しててイラっとする
なんで勝手に決めてんだよって いくつものセレクタに同じプロパティの値を設定するならカスタムプロパティを使うべきということになるのかな Scssとかjsでこそ出来た事が毎回遅れてcssだけでも出来るようになってるから
どうせ待ってりゃcssだけで出来るようになるっしょ？とか
画像の遅延ロードとかスマホ用画像のsrc記述とか5Gになれば全部無駄なゴミになるんだよなとか思うとなんもしたくない >>119
論点はそこじゃねーだろ
揚げ足取ること生きがいにしてんのか？ >>125
横だが
>>118が正解じゃん？
んで、その根底には>>119の考えがあるって事だろ >>116の例がセレクタでなく全部クラス名だった場合はどう考えるのが適切？ >>127
どっちでもOKだろ
実際は汎用をscssで作ってるのがほとんどだろうな。
結果として②が出力されてるみたいな感じで。
自分は効率的で①が好きだから①。 mixinにするなら1みたいなのもありだな
自分は構造や意味とソースが一致してないと気持ち悪いから極力ユーティリティclassは作らずmixinにする >>128-130
ありがとう
好みの部分もあるんだね 1つ聞きたいんですが、SCSSを導入する際メンテナンスが面倒なら嫌だなと思ってます
dart sassにサポートが切り替わった際にその前のruby－sassやnode-sassのコードをわざわざ書き換えないといけないんでしょうか？ それでもscssはやったほうがいいよ
環境変化めんどいことなってもいざとなったら出力されたソースを運用すればいい 初歩的すぎることかもしれないですけど失礼します
HTML LSではインライン要素の中にブロック要素入れても問題ないですよね？？？
あと、例えばaみたいな既定でdisplay: inlineの要素をdisplay: blockにするのも問題ないですよね 連投失礼
色を#F00みたいな感じに省略して書くのってまずかったりしますか？ display属性は何が何の中に入っててもいいよ
入れ子にできるかどうかはタグによって決まってる
無くなったのはHTML4までのタグごとのブロックレベルとかの分類 >>135
インライン要素の件はHTML5なら問題なし。
でも感覚として、divをemタグで囲うような事はやめて欲しいが
displayは問題なし >>139
感覚としてじゃなくてemにdivはふつうに違反だよ >>141
そうかすまない。
結局aタグだけがインライン要素の概念変わっただけで、
他は結局は言い方だけ変わって実はブロックレベル／インラインと同じ・・？ >>143
細かく見ていくとa以外にもネストできるようになったもの、できなくなったものがある
divとemがたまたまhtml4のそれと同じなだけで
ブロック要素とインライン要素という概念自体が消滅して
これにこれは入れられる、という関係性がそれぞれ独立して存在する感じ
チートシート貼っておく
https://yoshikawaweb.com/element/ flex-boxのチートシートはないのかと聞いておる そういやaとemってどっちが先とかあるん？
いつもaの中にemやspan入れちゃってるけど
外の方がいいの？ 息子はお父さんには成れるがお父さんは息子には戻れないんやで >>150
言っている意味がわからない
<a>あああ<span>いいい</span>ううう</a>
みたいな例なら全体がリンクならspanを先も何も無い
<a><span>あああいいいううう</span></a>
みたいに装飾目的で使っている場合は「装飾も含めてリンク対象か」を考えればいい
意味もなくemやspanを入れているならコーディング辞めたほうがいい リンクにした文字列を装飾するか→ <span><a>あああ</a></span>
装飾した文字列をリンクにするか→ <a><span>あああ</span></a>
みたいに、aとspanのどっちを入れ子にするのか？って話じゃないの？ 怪文書をエスパーするのもめんどくさいからaが親でいいよ imgやiframeなどsrcではない要素で
スマホではロードさせたくないdivなどがある場合、
どのような対応方法がありますか？(非WordPressで) PHPで出し分ける
PCのみjsでDOMを生成する >>159
ありがと
phpはライブラリだろうしjsはjsのソースに書かなきゃいけないし
めんどくさい方法しかないよね ライブラリが必要なほどではないが
スマートフォンかどうかの判定が単純にブレークポイントじゃない場合多少めんどくさい ん？phpならUA判定が最もラクそうだが
ブレークポイント判定もラクにできるん？ 会社のHPを任されているのですが、
わからないので質問してもよろしいでしょうか? このスレは質問していいですか？っていう質問までは受け付けていないので
どうぞご自由に質問なさってください 現在、orderを使用して簡易的にレスポンシブ対応したいのですが、orderをCSSに埋め込んでも動きませんでした。
現状のHP構成は<meta name="viewport" content="width=device-width, initial-scale=1.0">をhead内に書き込んであり、
CSSは親が.containerであり、その中に子要素・孫要素・ひ孫要素?があります
<table id="container" cellspacing="0" cellpadding="0" border="0">
<div class="a">
<div class="b">
のような感じです。CSS本体としては
#container {
background: none repeat scroll 0 0 #FFFFFF;
margin-left: auto;
margin-right: auto;
padding: 0 20px;
text-align: left;
width: 890px;
display: flex;}
~~~省略~~~
@media (max-width: 600px) {
.centerbox{
order: 1; }
~~~~~中略~~~~~
}
のように配置場所を変更することでスマホで閲覧しやすくする予定でした。ですが、上記のようにしても動かなかったので確認したところ
.list {
display: block;
line-height: 130%;
padding: 0;}
.sidemain1 li {
color: #0E577E;
display: block;
padding: 2px 0 2px 10px;}
と複数の display: block;となっている場所を発見しました。この場合、子要素上で｢display: block;｣となっているので、orderで配置が変更できないのでしょうか?
また、この場合の解決策として｢@media ｣内に該当箇所の display: block;をnoneやflexに変更することで配置を変更できるのでしょうか?よろしくお願いします。 スマンがPC表示で何がどう配置されているかスマホでどう配置したいのかが全く分からん・・・ tableの直接の子にdivは置けないのでhtml構造を見直しましょう 168です。
説明不足で申し訳ない
説明出来なかったのでパワポでイメージ図を作成しました。
1枚目から2枚目のように変更したいのですが、
Tableタグだとできないのでしょうか?
お願いします。
https://imgur.com/uIz4UjG
https://imgur.com/EeldZlS >>170,173
教えていただき、ありがとうございます。
ただ、こちらの環境ではショップサーブのサイトを使用しており
現在のまま変更することは無理そう・・・ということが返信から分かりました。
(ショップサーブ側でレスポンシブ対応サイトに変更すれば行ける気がしますがCSSがよくわからないため)
ちなみにお聞きしたいのですが、
<div class="a">
<table id="container">
<tr>
<td>
<div class="A1">
</div>
</td>
</tr>
<tr>
<td>
<div class="B1">
</div>
</td>
</tr>
</table>
</div>
の場合だと、orderによる配置変更は可能でしょうか? それでひと纏まりになってるからtableの中身は無理じゃね
クラスaのdivと他の纏まりが横並びになっているのを縦にするのはflexでできるけど
orderってのはflexとかgridでの並び順を変えるプロパティだよ みんなよくこの説明でわかるな
エスパー能力高すぎだろ >>174
flexでorder使って入れ替え可能なのは子要素までで、孫要素にorder設定しても入れ替え不可
>>174のtableの場合、tableにdisplay: flex;なら、孫のtdの中のdivにorder設定しても入れ替えられないけど
子のtrにorder設定で入れ替え可能
>>172の画像の内容だと、入れ替え可能かどうかはtableの構造次第 trやtdをdisplay:contentsとかにしてもorderというかflex-item伝播しないかね なんかよくわからない現象で困ってます
<style>
body{margin:0px;}
#test1,#test2{width:90%;height:300px;background:#00ffff;}
</style>
<br>
<div id="test1">aaa</div>
<br>
<div id="test2">bbb</div>
これでどっちのdivも幅が1214ピクセルだったけど
１個目の<br>または２個目の<br>を削除するとどっちのdivの幅も1229ピクセルになってしまいます
この増えた15ピクセル分はどこから来たのでしょうか？
ブラウザはchrome最新版です よく読んでないけどfont-sizeとline-heightを0にしたら >>181
変わらないけど？
もしかして高さ変わってスクロールバーの有無？ >>180
横だが display: contents; いいね
自分も知らなかったのでありがたい 179だけど
コード的に親タグが必須なもの（ul, dl, fieldset, それこそtableなど）を
どうにかレスポンシブに組み替えなければいけないけど
元のソースは編集してはいけないみたいな限定的な状況で悪戦苦闘した時に見つけたんやったわ
便利だけどどうしても使わないと無理な場面は滅多にない display: contents;自分も知らなかった・
css2の頃は知らないほぼなかったのに
最近はそんなのいつできたん？みたいのが次から次と出てくるんだが スマホ対応でgridなんかをいちいち書き換えず横着できそう HTML上は構造化しておいて、動作上はdisplay: contents;で構造化を解除？して
入れ子になってた要素を、gridアイテムとかにして並べ替えたりできるってことか ttps://www.aicrowd.com/challenges/flatland
1. ↑のページをパソコン（高解像度）で見ると、上のタイトルが左端にめり込んで表示されますが自分だけでしょうか？
2. その場合、CSSのマージンの設定かあたりが影響してるんでしょうか？ 高解像度ではなく低解像度ででは
高解像度モニターではウィンドウの最大化を解除して幅を小さくしていくとそのうちめり込んでいく
ページ側で横幅が強制的に何百ピクセルかは確保されるようにしてるせいで入り切らないのであろう すげー強気な姿勢が羨ましいな
IEや旧Androidブラウザのサポートを断るのでも苦労したよ
主に社内の上長に対して サイトへのアクセスが7割以上がスマホで、iOSシェアが高いこの時代に
なかなか無謀ですな 次はGoogleChromeもサポート外にする予定 ６割を占めるメインボリュームをサポート外にするかっ IEは5％以下になっても切らないのに
一定数5～10％あるMacのSafariが切りすれられるのが解せん 日本語サポート外、というかレイアウトは英語のみで確認しとる li:beforeにcontent:"※"とかはよく使うけど
pdfのpngや、fontAwesomeのpdfアイコンとかってできるの？ できるよ。
fontAwesomeならcontentに指定文字を記述
pngならcontent:url(hoge.jpg);とかbackgroundに記述 >>212
ぅぉぉ、fontawesomeできた！
ありがとう ごめん、どうしてもわからん・・・
font-family: "Font Awesome 5 Free"; content: '\f1c1';
だと、farのフォントになってしまうんだけど、fasを呼び出すにはcssで対応できるの？
てっきりunicodeが違うと思ったけど同じなのね 文字サイズを基準としたpaddingの指定は出来るでしょうか
bodyに16pxを指定し、配下にあるdivに3remを指定します
div内の文字は48pxになるので、padding上下にも48pxを指定したいのですが、padding:1rem 0;だと48pxより幅が広くなりますね ↑失礼
remではなく、emを使用しているです(´・ω・`)、、、 >>216
基本出来ない。
Scss使えばそういう関連のやりたいことは大体できる。
cssだけでやるなら.fasに記述されているプロパティ内容を自分でコピーしてくるしかない。
自分ならhtml側をjavascriptで操作するかな >>217
これを見た限り出来てると思うが。
https://jsfiddle.net/d30ek5vx/1/
line-heightでも効いてるんじゃない？ >>217
テキストそのものをdev toolsで見てみよう たぶんline-height分テキスト自体が高くなってる >>220
>>221
分かりました。
テキスト自体を4emにしているので、padding:1em;とした場合、16px * 4で64pxのpaddingが設定されているみたいです。
しかし、emはbody要素の文字サイズを基準にしていると記憶していたのですが、どうやら同じ要素の文字サイズを基準にしてるのでしょうか？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body
{
border:3px solid gray;
font-size:16px;
}
div#text
{
border:1px solid red;
font-size:4em;
padding: 1em 0;
}
</style>
</head>
<body>
<div id="text">文字文字文字文字</div>
</body>
</html> >>219
そうなのか・・・どうしてもしたいならHTMLに書くしかないな
どうもです >>222
divに直接文字普通入れないと思うからpタグ入れてみた
上下にフォントサイズと同じmarginが付く
https://jsfiddle.net/otscnbk9/
デフォルト設定値のmargin、padding消すと
https://jsfiddle.net/otscnbk9/1/ 何が言いたいか分からないな適切にマークアップしてくださいってことで >>222
一応、正確に言うと
×emはbody要素の文字サイズを基準にしている
○emは親要素の文字サイズを基準にしている
CSS の値と単位 - ウェブ開発を学ぶ | MDN
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Values_and_units >>223
219が言ってるけどcssだけで対応したいなら
font-weight等の他のプロパティも貼り付ければいいだけだよ >>224
>>226
ありがとうございます
了解っす javascriptもここオッケーですか？
今djangoメインでウェブアプリを作ってるんですが、どこまでの計算処理をjavascriptに任せてどこからをバックエンドのpythonで処理すべきかよくわかりません。
できる限りブラウザ側に計算処理させた方がいいと思うので出来る限りjavascripjで処理するようにするという基本思想で間違ってないでしょうか？
ほんとにバックエンドサーバー側で必要な処理だけをpythonで書くというのであってますか？ >>228
ほんとだ、今開発ツール見てfont-weightが設定されていたわ
同じ文字コードなのに絵柄が違うのがなぜかわからなかったけど、そういうことなのね
うまくできました、ありがとうです ベンダープレフィックスだけヒットする性器表現教えて
^\s*-[a-z].* みたいな感じ？ Find and remove vendor prefixes in your CSS using Regex - Mike Street - Lead Developer and CTO
ttps://www.mikestreety.co.uk/blog/find-and-remove-vendor-prefixes-in-your-css-using-regex/ >>236
あなた有能あるね。 コテになってもええねんで ﾊ,,ﾊ
ｉﾚ( ﾟωﾟ )｀l お琴割りします
.__ |l | f _＿___U_
l`l`ξ ﾚ ζ＝＝`l｀l
｀⌒)宀宀(⌒ ￣￣
ﾊﾞｷｰﾝｯ !! 235だけど、>>236ありがとっす
10000行中3個ありますた 昨今（ここ10年程度）のwiki型ブログに多い、classを使用せずpやliやulなどの簡素な組み合わせで画面全体に反映させるタイプへ困惑しています
それでも工夫しながら処理していたのですが、恐らくwiki管理用エディタか何かで入力した画像でも字でもない「色付き中点」を、それ単品で削除する手段に躓きました
ソース調査では
<li>
::marker
<a href=" >
と続き、このマーカー部分のみをページから排除したいのです
##li:style(margin:0px!important; padding:0px!important;)で余白もカットしています
厄介なことにマーカーへ文字が併記されている箇所もあり、そのせいで<li>のheightを指定することもできません
指定した場合はマーカー併記の文字列が一行とみなされ、全部重ねられてしまいます
それ故に、マーカーのみを削除できないかと試みた次第です
どなたかアドバイスいただけませんかm(vv)m とりあえず、どこかサンプルになりそうなサイト教えて せっかくなので追加を
wikiや小説サイトなどのような###L1や##p:type(1)といった記述を、数字部分のみ変更して下方向へひたすら羅列するサイトがありますよね？
部分的に削除しようにもカテゴリ分けさえ少なく、一部を指定したら広範囲に影響させてしまうタイプ
そうした記述を序盤の1から100まで、といった範囲内指定除去させる場合、まとめられないでしょうか？
これまでは
##p:type(1)
##p:type(2)
##p:type(3)
のように必死こいて縦列させていました
宜しくお願いしますm(vv)m >>241
足早にありがとうございます
例えるなら、FF9攻略サイトの右サイドバーが似た条件でした
ttp://ff9.opatil.com/index.htmlさんの右側です
本日の15時半程度まででしたらPC前に入れそうですので、似たようなご意見があれば遠慮なく指摘してください ulにlisty-style: none;じゃダメなの？ >>244
listy-style:もlist-style:も試しましたが無反応ですね む！天啓がひらめき、なんと240の問題を自己解決してしまいました
理想の形ではないもののまあまあ妥協できる感じ（´д｀）
アドバイスいただいた方々恐れ入ります
引き続き242の件で何か良い案はないでしょうか
理想はURLのブックマークみたいにハイフンで一行または数行に圧縮できれば嬉しいです
宜しくお願いしますm(vv)m 何のwiki使ってるのか知らんけど記法って全部一緒なん？
つーか、別にCSSファイル作ってリンクさせられないの？ 何の話かと思ったら、もしかしてadblockか何かのフィルタの書き方の話？ >>247
自己解決したら解決した方法書いといたほうがいいよ
重複する内容で指摘をもらう可能性もあるやん なんかよく分からんが、>>243 のサイトでadblockのフィルタ書くなら
マーカー非表示は
##ul:style(list-style: none !important)
1～5個目までのliのマーカー非表示は
##ul li:nth-of-type(-n+5):style(list-style: none !important)
3～5個目までのliのマーカー非表示は
##ul li:nth-of-type(n+3):nth-of-type(-n+5):style(list-style: none !important) ::markerはタグのデフォだよ。
list-style-type: none;で普通に消えたぞ 自分で作ってるサイトの話じゃないなら、見た目はadblockとかじゃなく
stylusとかでいじった方が普通にCSS書くだけだから楽だと思うんだが
調べるにしてもadblockのフィルタの書き方とか、簡単だけど一般的じゃないから
初心者が検索しても、よく分からんと思うわ CSSがどうしても反映されずに困ってる・・・
ブラウザキャッシュ削除も試したが駄目だった。
https://imgur.com/a/HVlSqof
↑書いたものはこんな感じ。
初歩的な質問で申し訳ないが、どうしても解決できないので教えて下さい。 >>254
パッと見問題ないが
１つずつ検証していって問題を切り分けていくといい
①cssをhtml内に直接書いてみる
②background-colorだけが効かないのか
③開発ツールではどのような解釈がされているか
などなど 年収が低い
?
役職を変えてみる
会社を変えてみる
雇用形態を変えてみる
業界を変えてみる
国を変えてみる
このように小さなところから変えてみてどこで変化が起こるかを確認するんだ >>254
@charset "utf-8"にセミコロンがないよ >>258
https://imgur.com/a/G7gh6t6
ありがとう・・・原因はそれでした、うまく反映されました。
もう少し脱字に気を付けて勉強してみようと思います。
ほかのレスくれた方もありがとう。 初歩的ミスあるある
疲れてたり何回もしくじってるとよくあることだから
そういう時は一旦寝て次の日にやりなおすと良い >>258
コロン抜けなんて百戦錬磨(仕事ができるとは言ってない)の俺でも毎日あるぞｗ そういやemmetに@charsetの省略記法ってあったっけ？ 質問お願いします
blue、red、green、pink みたいに英単語に表現できるスタンダードな色の事をなんて呼びますか？
『blue、red、green、pink みたいにスタンダードな背景色は使わないで下さい』を専門用語でメールしたいです 色キーワードだからって、それが全部スタンダードな色なのか？って考えると
それって人によるんだろうから、色キーワードは使わないで下さいって書いても
意図は全然伝わらない気が 『キーワード系の色は使わないで下さい』とメールしても本職でも伝わらない人が多いと思う もっと微妙な色を使えと言うことなのか
色は色名ではなくhexやrgbの数値でかけ、てことなのか 原色系ではない明るく淡い色合い？と思ったけどpinkがダメだし
rgbaで指定してアルファ値0.3にしろ、とかの方が伝わりやすいかも？ 背景色には一般的にはあまり使われない中間色を使用してください
とか >>268
意味はわかるけど意図は1ミリもわからんよや PCCSもしくはDINなどのオストワルト表色系が基になっている純色及び原色、
特に混色すると無彩色になる物理補色を軸とした色相において、高彩度色の禁止をお願いしたく その発注きたらそっ閉じしたくなる
面倒くさそうな空気がすごいな で、解決したんかな、、
無理に言葉だけで説明しようとせず
良い例と悪い例の画像を複数添えたり
イメージボード作ったりするのがいいんじゃね そのクラスが指定された直接の要素だけを選ぶセレクタはある？
たとえば
<div class="A">
<div class="B">
<div class="C">
ってあったとき、
.A {
text-align: center;
}
とすると .A 配下の全部の要素に効いちゃうでしょ。
これを .A がついたその div だけに効かせたい。 それはセレクタの問題ではなくtext-alignは継承プロパティなので子孫に伝搬する >>280
あーなるほど！
それを継承させないようにするなら、
.A * {
text-align: initial;
}
みたいにする感じ？ initialはIE11非対応だったりするから
子孫で値を再設定した方がいい鴨 >>278
こんなのでどう
.A{
text-align: center;
}
:not(.A){
text-align: left;
} う、liタグ閉じなくても良くなっているのか・・・
おまえらliタグ閉じてるの？ 閉じてる
emmetが閉じてくれるから
閉じないことで劇的に軽くなったり見通しがよくなるなら考える wordpressでやってるからemmet使ってな・・・
ん？プラグインで使えるのかな。
たしかにvscやatomだと確かに閉じてくれるから何も思わなかったけど
いざWPに手打ちだと面倒だわ >>287
閉じなくても次のliが来たらブラウザが勝手に補完してくれるんだぜ
なお最後のliは、と・・・ちょっと誰か来たわ出てくる wordpressでタグ直書きすることないなあ
インデントが汚すぎて許容できない
直接テーマファイル編集できない理由がある時はエディタで書いて貼り付けてる >>289
自分もそうだが、細かい調整繰り返すときにすっげーイライラするよな。 モバイル表示の際に、画像を挿入すると文字が小さくなります。
どこか表記が間違っているのでしょうか？よろしくお願いいたします。
https://imgur.com/BhlY1yx
↑抜き出し部分が間違っていましたらすみません。 <ul id="uid">
<li>
<div>aaa</div>
<div class="dcs">bbb</div>
</li>
</ul>
idがuidの中にあるclassがdcsのdivのセレクタは
#uid div.dcsでいいんですか？ >>291
HTMLのソースと、その画像やテキストに効いているCSSを抜き出さないとわからない >>291
それ、何のサービス？
テンプレートかなにか？ 画像だから見る気がおきないけど
<meta name="viewport" content="width=device-width,initial-scale=1">
あたりじゃないの？ なんか書き出しから古いね
テンプレートとかなのかな？ >>296
問題が発生する画像の横幅は480px以上？
それとももっとちっさいのでも同じ問題発生する？ >>291
モバイルが変ってiPhone？android?
webkit-text-size-adjustって頻繁に記述されてるけど
webkitはiPhoneにしか効かんよ display:flex使わないでdiv内の縦の中央揃えってどうやるんですか？ padding-inline-startとpadding-leftの違いって何すかね >>301
子要素にabsoluteとtranslate指定するやり方があるけど、子要素が少しぼやける欠点がある
天地左右センタリングでググれ
flex使えばいいのに >>301
CSSで中央寄せする9つの方法（縦・横にセンタリング）
ttps://saruwakakun.com/html-css/basic/centering#section2 >>302
padding-inline-startは縦でも横でも右横書きでも、その名の通りインライン方向の先頭にパディング
padding-inline-start - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/padding-inline-start >>305
あんがと
-startが-leftみたいな意味なんね padding-inlineって言われればなんとなくpaddingの新しいやつかなくらいに思うが、
padding-inline-startとか言われるとファッ！？って一瞬焦る padding-inline-startとか出てきたのって最近？
どこチェックしてればこういうの一般的に出回るタイミングわかるかね？
W3Cのなんてチェック辛すぎるしコリス辺り見とけばいいの？ 原典あたるか、実装予定とかで検索したら出てくるんじゃない？
mdnとかも 多言語化するページには必要や。chromeのuseragent stylesheetも全部変わっとるで >>313
ここ最近、何そのプロパティ？いつのまに！？みたいに後手に回ってる事が多い。
以前なら、ほう？そんなのあったんだ？
あーでもIE対応してないやつね。はいはい。そりゃ俺様も知らないわけだ。そりゃ実装できないしスルーだな。
って感じだったが最近は実装早いから追いつかん。
MDNなんてマメにチェックしたくねーｗ MdNならまだわかるが VScodeのemmet->html5で
<meta http-equiv="X-UA-Compatible" content="IE=edge">
が出るんだけど、まだ必要なmetaタグなの？ 余程の理由が無い限り要らない
ちなみにemmet本家のチートシートにも記述は無いし
Sublime TextとかBracketなんかだとemmet使っても
出てこなかったりする レスポンシブでyoutubeの埋め込みをするために
幅が100vwに対して16:9ならdivのheightが56vwにすれば良いかなと思ったんだけど、
想定しない高さになって悩んでる、発想的に間違ってる？
youtube読み込み時のiframeも触っていかないとうまくいくのかな？ どこのdivに指定したのか分からんけども
iframeになら上手く行くよ
https://jsfiddle.net/580ojd7g/ >>319-320
ありがとう、ぉぉすげーというかなぜこの動画ｗ
iframeは触らずそれを囲む<div class="youtube">とかに指定しようと思ったんだけど、
もうちょっとやってみます >>322
ぐぇぇ、急に難しくなった・・
やっぱりただのdivだと上手くいかなくてモヤモヤしていたんだけど、
divにrelativeを指定してiframeを配置しているのもそうだけど、
divでwidth、そのbeforeでheightを指定ってムリゲーだわ。
ブロックの中に背景画像を指定するようなやり方と似ているような感じね 323だけど
どこまでブラウザ対応しているかわからないけど
これならコンテナへの指定もシンプルで俺みたいなアホ向きだわ
https://jsfiddle.net/pbv47gaL/ >>325
aspect-ratio・・またいつの間にこんなの出たんや
これいいね
つーかmediaqueryで使う
@media (min-aspect-ratio: 8/5)とかもいつ出たやつねんって感じでもう把握できんわ 俺も全然浦島太郎でわからへんわ
対応ブラウザ表見てもChromeのバージョンなんか把握できてへんし >>325
IE非対応なのはもちろん、割と新しいVerのブラウザじゃないと対応してないから
そこを気にするなら@supports not (aspect-ratio: 16/9) とか使って条件分岐する手間はあるけど
後で見て直感的に分かりやすいから便利だよな
aspect-ratio - CSS: Cascading Style Sheets | MDN
https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio#browser_compatibility ぶっちゃけ今からIE切りに備えても
来年6月までにまた新しいプロパティ出てきて、IEさえなければプレフィクスつければ即使える可能性あるから
覚えるのはそのあとでいいと思う
「IEが死んだらベンダープレフィクスやポリフィルを外せる」とかなら先走る意味も大きいけど
「IEでは何をどうやっても動かない」プロパティが多すぎる いやもうインターネッツエキスプロはええやろ
新しいパソコン買ったらもうデフォはEdgeなんだし
わざわざIE探して引っ張り出して使うやつなんておらへんやろ CSS作ってる奴、新しいの出す前に俺に
これ、出していっすかね？ってひとこと言えやああああ >>328
すぐ使う予定なくても、知ったばっかりの知識を
ここでぶん投げて話題になると自分の印象に残って忘れにくくなるという勉強法に使えるぞｗ >>331
それはクライアントが決めることだよ
Microsoftもこう言ってる、で納得する連中ならとっくにIE消えさってる
日本は官公庁や地方自治体すらIEで見ろとかほざいてるサイトがまだある
IT後新国をなめてはいけない おまいらあと数年もしたらIEすら知らない世代に嫉妬しそうだな
俺らはIE6とかでjsもcssも大変だったのにお前ら簡単になっててよかったな
ほんとうはもっと大変で難しかったんだぞって感情になると思う list-style-type: disclosure-closed;
PCなら右矢印なんだけど、iPhoneで見ると「何も表示されない」のってどうにかできないかな
:beforeとcontentsで記号を表示させるしかないのかなぁ disclosure-closedはchromeでも表示されるけど
基本的にサポートがfirefoxのみらしい detailsタグ使ってどうにかするとか？
って思ったけど素直にbefore使った方がよさげ 325だけどaspect-ratioはiosのsafariには対応していないのかな・・
思った通りには出ないな、ちと縦が細い javascriptは使わなくていいなら使わない方がいいのですか？
javascriptで実装したい機能があるのですが調べたらHTMLとCSSだけで実装できるらしいです
この場合例外なくjavascriptは使わずHTMLとCSSだけでやることが好ましいのですか？ >>345
クリックすれば要素の表示・非表示が切り替わるだけの機能です >>346
それはjsだな
恐らくチェックボックスで無理やりhtmlとcssのやつだろ。あれは強引だから
クリックして～～は、全部jsでいいと思う。
レイアウト、アニメーション関連はもうcssでやる感じ >>347
強引にｊｓ無しでやるよりはjs使った方が良いのですね
ありがとうございます >>349
線引きが難しいが、クリック関連はjsだな
hover関連はcss >>349
チェックボックスを使って疑似的に実装できるとしても
それはチェックボックスではなく機能としてトグルボタンですよねとか
セマンテイックの観点からはありえない
ボタンならbuttonでやればいい チェックボタンはもともとオンオフの機能だよ
フォームとセットで使われるからフォームの機能みたいに思われがちだけど え？そうなの？
1994年ぐらいではもうフォームの部品だったな input単独で書いても何も違反ではない
だがまあ普通に考えてフォームの部品以外にチェックボックスやラジオボタンを置く意味はない バックエンドの人じゃなくてもES2020の仕様とか変更点とかいつも把握してる？
つらい・・ 画像のようにborder-radiusありでtopの真ん中をくり抜くようなことってborderでできますか？
ピンは擬似要素で表示しようと思っています。
https://imgur.com/yMPYQRi border-imageが正攻法
ブラウザ対応がめんどくさいので自分ならbeforeにピン afterに線を消すブロック置く
ピン側の位置とサイズがうまくやれるならborderを消す背景色も画像に入れておけばいい >> 357
ありがとうございます。border-imageの存在初めて知りました。
画像用意するのが、めんどくさいのでbefore、afterで対応しようと思います。 border image、ストレッチすると色が薄まるのが嫌だ、、 opacity:50%とfilter:opacity(50%)
違いはありますか？どっちを使った方がいいですか？ opacity() - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/filter-function/opacity()
> 注: この関数はもっと一般的な opacity プロパティと似ています。違いはフィルターの場合、
> ブラウザーによってはハードウェアアクセラレーションにより性能が上がることです。
あと、filterはIE非対応 画像の最大表示サイズを制御したい。
例えば max-width: 10em; max-height: 10em; とした img は、縦横比を保ったままこの枠に納めてくれると思う。
んでこの 10em が 200px くらいの時、img に width="320" height="180" と指定してあると、横は 200px(10em) 縦は 180px で表示され、width と height で指定した縦横比とずれちゃう。
JS なんかの都合 HTMLロード時(画像ロード前)に画像のサイズを確定させておきたくてサイズ指定してあるんだけど、画像サイズ指定と最大表示サイズ指定を両立して縦横比を保つ方法は無いかな。 >>364
ちなみに、img に width="10em" height=”5.625em" とか指定できれば話は早いんだけど、だめだった。
img の style で width と height を与えても、画像のロードが済まないとエレメントのサイズが確定しなかった。 >>365
すまん、これ書いてて肝心なこと言ってないのと試してないのに気付いた。
やりたいことは画像を em 単位の枠に納めたいこと。
んでこれを試したら、とりあえずはできた。
<img src="..." width="320" height="180" style="width:10em;height=5.625em;">
ただ、スタイルは CSS の方に一本化したいところ。
10em なんてレイアウトの都合を HTML出力側に持ち込まずに済ませたく、せめて JS でなんとかしたい。 object-fit: contain; や scale-down 昔人間なのでPCのcssからレスポンシブでスマホにするのが慣れているけど、
スマホのcssを起点にするとPCのメディアクエリのほうが長くなるよね
どっちがスタンダード？ <div style="width:80%;height:300px;background:#ff00ff;display:flex">
<div style="height:300px;background:#00ff00">aaa</div>
<div style="width:100px;height:300px;background:#00ffff">bbb</div>
</div>
この場合bbbのdivの幅は100px固定でaaaのdivの幅を全体のdiv幅からbbbのdiv幅を
引いた幅にするにはどうすればいいんですか？
aaaのdivをwidth:100%にするとbbbの幅が100pxより狭くなるし width: calc(100% - 100px)
または
flex-grow: 1 >>368
これ知らなかった。別のところで役に立ちそう。
でも max-width, max-height と相性が悪いというか、そもそもコンテナのサイズの方を制御したいから、今回は使えなそう。
<img src="..." width="320" height="180">
に対して
max-width: 10em;
max-height: 10em;
object-fit: contain;
にすると、画像そのものも縦横比は保たれるけどコンテナが約 200px(10em) x 180px の正方形に近いサイズになってしまい、そこに横長画像が納まって結局上下に大きな余白ができちゃう。 どのページの下部にも
共通で使う情報はfooterとして扱うのは乱暴？ >>373
乱暴。
WPのテンプレとかしょっちゅうコンテンツ内にfooter要素がでてくるから
アホが組んだCSS組み込むと大変なことなる >>369
スタンダードは知らん
個人的には同じくPCから。
大きいモノから小さいモノへ。大は小を兼ねるから トップページのnav下のでかいマンションポエムみたいな文字の入った1枚絵って
何のタグで挟めば良い？
html>body>main>section>・・・div>imgか
もっと違うやり方があるのかわからん いつも思うんだがimgかbackgroundって何が違うの？
レスポンシブ的にはimg width100%がやりやすいけどbackgroundのメリットって何？ >>379
object-fit非対応ブラウザへの対応が楽
background-positionがある >>379
・繰り返し表示ができる
・alt入れなくても良い
それ以外は最近無くなってきた感じ。
最近だよ最近 ああ、それと画像をcssで汎用的に使えることだな。
例えば、リストアイコンをimg要素で作ったら、ソースが長くなるしimgだらけになるが
backgroundならsrcを1つだもんな imgは既定で選択・ドラッグ有効
background-imageは今時のブラウザは拡張入れないとコンテキストメニューからは保存できない 長文質問ですまん、
今HTMLのフォームで入力したデータを1ページ毎にPOSTで（とりあえず）PHP介して次のHTMLに送ってから、
最後のページでボタン押すとそれまでフォームで入力したデータをまとめてデータベース（Firebase）に送る仕事やらされてるんだが、
HTMLとjsとPHPとFirebase混じっててどこで質問すればいいかわからんからここで質問させてほしい。
５chになってから来るの初めてだからもしスレチなら合ってるスレのURLくれると助かる…
今とりあえずHTMLというかUI自体は出来上がってて、
データをPOSTで次ページに送るとことFirebaseに送るとこで躓いてるんだが、
とりあえずhoge.htmlでフォームにデータ入力してボタンでfoo.phpに飛ばしてから
header("Location: ../../bar.html", true, 307);
これだけあればbar.htmlにフォームのデータそのまま行くかね？
あと、Firebaseの方はどっかのページで見たのを流用してきたんだが、
script type="text/javascript"
const {BigQuery} = require('@google-cloud/bigquery');
const bigquery = new BigQuery({
projectId: 'hoge-hoge'
});
async function insertRowsAsStream() {
const rows = [
{foo1: bar1, foo2: bar2, (省略）, foo12: bar12 + '/' + bar13}
];
await bigquery
.dataset(hoge-hoge)
.table(hoge-hoge/DataBasehoge/pagehoge)
.insert(rows);
console.log(`Inserted ${rows.length} rows`);
}
/script
こんな感じで書いてもどうにもFirebase側にうまく送れてないっぽくて、
ヘルプとかも英語をgoogle翻訳で直訳したような変な文章の説明くらいしか見つからん…
誰か教えてくれ… >>379
・プリントの時背景だと嫌がる客がいる時にはイメージ
・あまりないけどスタイル切れても内容が伝える必要がある場合はイメージ
・画像検索に載せたい場合 >>384
>HTMLというかUI自体は出来上がってて、
ここはHTML/CSSのスレだからphpのスレの方がいいと思うわ
PHPはプログラミングの板にあるよ >>386
ありがとう
そっちの方で改めて聞いてみるよ ルビを入れたときに rt 要素の幅が rb 要素よりも大きかったときに
rt 要素の幅に合わせて左右に空白が入ってしまいます。
(特に CSS で指定しなかったとき。)
つまり
https://dotup.org/uploda/dotup.org2588403.png
のようになるのですが、
rt が干渉しない限り空白が入らないように
https://dotup.org/uploda/dotup.org2588404.png
のようになって欲しいと考えています。
(前者の画像は Firefox での結果をキャプチャしたもので、後者は私が望む形を画像処理ソフトで作っています。)
このような制御は CSS で可能でしょうか？ 1.rubyを使わない
2.山盛りのspanなどを駆使し適宜letter-spacingやネガティブマージンで隙間を消す rt ってなんでposition:absoluteが効かないんだろうな 幅が1024ぐらいのPCサイトって
100%のsectionの中に1024pxのdivを設けるのか
1024pxのsectionをmargin:0 autoするのか、どっちがおすすめ？
1024pxのmainを作って100%のsectionを作ることもできるし悩む
横幅一杯まで背景色やbackground-size:contentするなら前者で無いとできない？
最初の枠の定義が難しいな・・・ 透明の1024x1ピクセルのGIFを張り付けるんやで >>391
そんな様な背景をやりたいならどっちにしても入れ子だし
タグの選択は内容次第
もしかしたら？難しく考え過ぎてるようにも見える >>391
どれでもいいよ
自分なら背景用のタグはdivにするわ.
いつでも無くせるからな >>392-394
うーん、難しく考えているのかな
ちと手を動かして見るわ
透明gif懐かしいtableタグはもう表以外に使っていないな 同じ幅のセクションいくつも出てきそうなら
l-innerみたいなの作っておいて
入れたり入れなかったり widthを90%等に指定した時、heightも指定した方がいいですか？
height指定しなくてもautoになってくれるからwidthしか書かないことが多いです。 >>397
imgタグの事を聞きたいんだろ？
本来はheightも指定すべきなんだけど今の時代には指定しないケースの方が多いと思う。
レスポンシブに対応する為に仕様より実用が勝ってる感じ。 imgタグに originalWidth と originalHeight が指定できるといいんだけどね >>398
むしろ今はCLS対策のためにheight指定するようになってきてないか？
Core Web Vitals対策のなかでもCLSはユーザー目線で有用だと思う Cumulative Layout Shift
domツリーの取得からロード完了までにどれだけレイアウトがズレたか
画像の高さで言うとheightを指定していない場合読み込みが終わるまで0と認識して読み込みが終わったときズレる
読み込み中に見えたボタンを押そうとしたら、押した瞬間上のほうの画像の読み込みが完了して、ポインタがズレて違うボタンをクリックしてしまった、とかあるとイラつくでしょ
そういうのやめようやみたいな概念 >>399
すまん >>402の考えの方が正しいわ
https://www.start-point.net/blog/web/html/cls/
>>402
CLSって言葉を知らなかったわサンクス
確かにレイアウトズレや描画速度に影響する
ただしかし、レスポンシブで幅がバラバラのスマホ端末に自動リサイズする際はどう対応すんだ？
jsで自動的にheightを入力させるのも遅いのではなかろか imgにheight属性がなくてもcssでaspect-ratioやvwでheight指定などで改善する
height属性に入れられる単位は限られるので現状はcssでカバーする
height属性にはどうやっても敵わないが、これからはセレクタの詳細度による読み込み速度なども評価対象になるかもしれない >>364 で相談したけど、
width と height 指定しちゃうと CSS でのリサイズがやりづらいんだよね。
max-width や max-height で表示幅を制御しようとしても縦横比が狂っちゃうし、object-fit も表示サイズの制御はできるけどレイアウトで本当にやりたいコンテナサイズの調整はできないし。 >>408
中身absoluteでコンテナのpadding-topかなんかで高さ持たせれば >>408
タグで属性指定しててCSSがやりづらいとか言ってるの？ >>410
画像のサイズが不定なんだけど、ブラウザ側で画像をロードする前にレイアウトを確定するため、画像のサイズを width/height属性なり style なりで指定する必要がある。
ちょうどここで上がってる CLS対策みたいなものかな？
ただ実際の表示サイズを CSS で特定の矩型に納めようとすると、なかなかうまくいかない。
という問題で悩んでたの。
>>409
多分それは画像のサイズが決まってる場合か、あるいはその padding なんかを動的に出力するアプローチだと思うけど、できるだけ CSS だけでやりたかった。
結局その時は JS での DOM 制御を行う構造だったので、そのついでに JS側で img の width と height から適切な表示サイズを計算して style に埋める方法で対応した。
簡単に言えば、縦か横かも場合次第の画像があって、その長辺を一定サイズ以内に納めて表示したかった。
max-width/max-height で済めば簡単な話だったんだけど、レイアウトの早期確定のため画像にサイズ情報を持たせる必要があり、そうするとこの方法は破綻する、ということ。 >>405
アリがトン、初めて知ったわ
縦横比バラバラの画像とか、widthでflexの個数とか変わるしわけわからんわ >>406
imgにwidthとheightを指定してさらにcssでwidht:100% height:autoとするとレスポンシブ時でもOK
なんかimgに指定したwidthとheightが縦横比として使われるようになるとか
ってのをどこかで見かけた記憶ある >>406ありがとう
>>414
ちょうどそんな様な事>>406の
> https://www.start-point.net/blog/web/html/cls/
に書いてあった
imgのwidth、hightは画像のオリジナルサイズってことよね？
lazy loadのimgにオリジナルサイズのwidth、height指定したら画像読み込み時にズレる感じ無くなった！！！ありがとう！ 
これのマテリアルアイコンってCSSで変えられるの
初心者なんでよくわからん教えてもろ手
https://imgur.com/a/xDaMba8
このゲームのulr:https://krunker.io/ Stylusだけでデベロッパーツールをどの程度レビューすることはできるか >>416
まったく関係なくてすまん
なんで猫のアイコンがでてるの？いいなぁ >>416
こんな感じで、理屈的にできるけどちゃんと設定するなら初心者には難しいと思うよ。
https://i.imgur.com/dFNocip.png
このゲームのURLにだけ自動で毎回適用させるユーザースタイルシートのアドオンが必要。
それとデフォルトのショップのアイコンがhtml側で制御されている。
具体的には「storefront」というテキスト。これをキーにjsでショップのアイコンが表示されてる様子。
なのでその文字列を消したりする場合にユーザーjavascriptも必要。
このURLは2chでしか使えないので
http://img.5ch.net/ico/nida.gif
これにする
https://img.5ch.net/ico/nida.gif
まあcssはスクショの内容をユーザーcssにまんま適用すればいいよ。 パソコン用のサイトって横何ピクセルにするとiPadでも見やすいですか？
960, 1024, 1280ぐらい？ 文字を縦中央に寄せたくて
table-cellとか、vertial-alignとかやってみたけどできぬ
誰か教えてくれ・・・
https://jsfiddle.net/rkcad8yb/ まじか、知らんかった、できたわ
floatの置き換えとして使ってたけど、やっぱすごいなflexは スレチかもしれないけど、JS であるエレメントに適用されてるスタイルを取得する方法はある？
例えば、CSS などによってそのエレメントの color は結局どうなってるのかとか。 getComputedStyle って関数があった！
>>419
そうじゃなくてなんかパソコンの中のCSSファイルに保存してClient版で実行
したいからそのelement.style?じゃ適用されないんよ フォントの横幅って細くできたっけ？
weightではなく横幅ね >>427
知ってるよ。だから初心者には無理だって言ってんの。
パソコンの中のcssファイルとか言ってるけどそれがユーザースタイルシートだつってんの。
それとも俺がわざわざユーザースタイルシートをインスコしてそこに>>419で記述したcssの状態をスクショしなきゃイメージわかない？
>>419を見て理解できないなら絶対無理だと思う >>419の状態にするだけでもタイムアウトあったりで結構苦労したのに
礼すらないしすっげー後悔したわ >>430
ゲーム厨みたいなゴミに構うからそうなるんだぞ > 礼すらないしすっげー後悔したわ
今時こんなのを気にする奴いるんだなｗ
お礼カキコとか懐かしいぜ みんな>>427にもうちょい優しくしてやれよ
このスレのタイトル見てみろ
あいつも初心者って言ってるだろ >>427
のゲームのやつ、ゲーム内のcssにアクセスできるかどうかに限って掘り下げると少しスレチ気味な流れかも web製作板なのに、ゲーム馬鹿の相手するのがそもそも間違い まぁ、質問者のマナーはあってしかるべきだとは思うけど
この程度のやり取りだけで、お礼が無いとかキレるのも
回答者には向いてないってのはある
そんな言うほど初心者に難しい内容だとは思わんが
初心者には無理って、途中で回答放棄してるしな
説明が面倒なのは分かるが
あのクランカー？ってゲームブラウザゲームらしいから
ここに書き込んだ説 >>442
自演するならbeはログアウトしてID出ないようにsageような 風になっちゃったWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWｗｗ はははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははははは <style></style>を<body></body>内に書いたらだめなんですか？
普通に表示されたけど >>458
面倒な時によくやる
文法的に適当かどうか、
誤りなのかは知らない >>458
動くけど推奨されなくなった話を見かけた気がする 基本的にはhead要素内だが、推奨されてるのはlinkで外部スタイルシート
<style>: スタイル情報要素 - HTML: HyperText Markup Language | MDN
https://developer.mozilla.org/ja/docs/Web/HTML/Element/style body内に書くのはOKになったり非推奨になったり忙しい object-positionって中央揃えで上の余白だけ空けたい場合はどう書いたらいいすかぇ？ >>464
事故解決
object-position: 50% 10px; >>465
横が50%でセンターらしい。
下を空けたい場合はわかんね ぁぁああ、ulにmargin: 0 autoで中央寄せできねぇ・・・
display: blockだから中央寄せできると思ったのに まじで？
ulの上にflexではなく、ul単体に書いていける？ >>473
君はまずマークアップ言語じゃなくて日本語を正しく使えるようにしよう >>474
、
>>473は結局中央寄せできてるよね？
それだけでええやろ >>473
後出しですまん、確かにwidth指定したらいけるんだけど、
コンテンツによっては左寄りになったり段落ちするから可変でできるかなと
上にwrapperで囲ってflexしかないか >>476
どんな構造かしらんが
要するにulだからどうこうとかは無いって事さ。
divもulも同じだって事。
可変ならwidth:*%とかいくらでも方法あるが
んな複雑な構造ならflexでガチガチに固めたほうが安心でしょう >>476
max-width:100%とwidth:固定値はどう？
flexが手軽だけど たまに子要素のtop-marginが親要素に反映させちゃうことない？
親要素にoverflow hiddenしたら解決するのだけど、
hiddenできない時もあるし、メカリズムがわからない >>476
wpapperにtext-align centerで
ulをdisplay inline-blockじゃダメ？ >>476
もしIEのこと考えなくていいなら
width: fit-contentかmax-contentは？ >>417 Stylusだけでデベロッパーツールをどの程度レビューすることはできるか
無理じゃないか >>481
「インラインにした要素を中央寄せ」だから俺もこうするなあ
flexとか聞きかじったせいで変に難しく考えるんだろうな 「インラインにした要素を中央寄せ」なんてどこに書いてある？
>>470には
display: blockだから中央寄せできると思ったのに
ってかいてあるだろ >>486
なにが君を傷つけたのかわからないが謝るよ
だから は だったら のタイポな
>>476でwidth固定せず可変にしたいと言っているから
それならinline-blockとかにするのが早いと俺も思ったんだよ
殺しにこないでね
ネット怖いなあ >>487
謝らなくていいよ
傷ついてないし殺す意味が分からないわ
width固定せず可変って
<div style="max-width:80%">
これもblockのままwidth固定せずの可変だろう
文末に全部(^-^)マークあると思って。 >>488
横だけど(^-^)
顔文字ついている方が怖いぞ(^-^)
笑顔で怒ってるように見えるわｗ(^-^) たぶん内容量に応じて可変にしたいんじゃないかな
そうなるとmax-widthで制限してもwidthは初期値100%のままだから
80%に内容量が満たないと結局text-align次第になる というか、ちょっと否定的なこと書かれたぐらいで、殺しに来るなとかネット怖いとか
むしろキレて煽りに来てると思ったわｗ >>476だけど、言葉足らずで荒れ気味になってしまってすまん
>>490の言う通りで
テキスト量に応じて中央を保ちたいということね
https://jsfiddle.net/69ezmLck/ 485 487 490だけど
エスパー成功していたようでなによりだよ >>481さんの言われる通りですね。
ulをinline-blockにするのは目からウロコでした でもwrapperでtext-align: center;とか指定すると
継承プロパティうぜぇってなるよな なんで意味が分からなかったのかなんとなくわかった
可変の使い方が違うからだわ
インライン要素に可変て普通使わんだろｗ
<span>テキスト</span> そもそもどういうデザインにしたらいいのかがわからないのですが、根本となる考え方はなんでしょうか？
ブログのデザインになります。
何となくかっこいいなぁと思うデザインはあるのです。
その理由がわからないですが。 >>501
そのブログの目的とユーザー層によって正解のデザインは変わる。
例えば村の高齢者向けのお役立ちブログにカッコ良さっていらない。むしろ邪魔。
読みやすさ、わかりやすさのが重要
逆にファッション発信サイトがダサイとか一昔前のトレンドデザインとかありえない。
カッコイイデザインが必要ならあらゆるデザインや流行を常に見るべき
（インテリア、ファッション、雑誌、映画、ネイル、コスメ、ゲーム、プロダクトデザイン、建築、内装） > カッコイイデザインが必要ならあらゆるデザインや流行を常に見るべき
正確には意識高い系の人種がパッと見でかっこいいと思うようなデザイン iPhone13のサイト見てかなりウザいと思ってしまうんだが
何の先進さも無いiPhoneの性能を誇大広告するやり方もどうかなと >>501
ノンデザイナーズデザインブックとか読んだ？ >>505
横だけど昔買ったけど、1度も開いてないわ・・・ >>502
ターゲットも特に決めてないんですよね
プログラミング関係なので、年齢層は色々だろうし
わかりやすさを重視したデザインというのもあるでしょうかね
>>505
読んでないですね、、、
何かサイトはないでしょうか？ Bootstrap, ElementUI などのCSS フレームワークを見れば？ >>509
フレームワーク使うにしてもデザインの根幹がわかっていないといけないと思うんですが 今までの人生でデザインやファッション、アートに全く興味無かった人が
そんな理論で理解しようたってできるわけないやろ
今までの興味と感心の積み重ねが根幹だぜ 人間がドア開けてカギ閉めて階段おりて走って自転車のってって
この動作をロボットで再現させるため以外に
研究者でもなければ理論的に考えたくもないだろ？
デザインも分解すれば説明できなくもないが、そんな膨大な事したくないし無意識や感覚とはそういう事だ >>511
興味はあったんですよ ろくなデザインができんかっただけで それを才能が無いというのでは？
そういう人は他人のデザインを真似てそれっぽく仕上げる術を身につければよし >>515
買い物はどこですることが多い？
アート、デザイン、ファッションなどで購読していた雑誌とか好きなサイト、ブランドとかある？ 画像のように文字数が決まっていない文字を幅目一杯（最大）に広げたい時はどうすればよいですか？
https://imgur.com/FPPntbv
letter-spacingで文字数ごとに設定はするのですが、必ず右側に少し余白ができてしまいます。 >> 521
2文字の時がすぐ折り返してしまうのですが、よい解決方法はないですか？ >>518
買い物はイオンが多いですかね。
好きなのはファッションブランドなどより、アウトドアブランドです。
モンベルとかコロンビアとか。機能性のないデザインは嫌いだと思います。
釣具のメカなんかにも魅力を感じますね。これも機能性があるからだと思うんです。 text-align: justify;
text-align-last: justify; >>524
イオン・・・
デザインやアート好きとはやはり無縁そうだな。
音楽とかカルチャーとかも興味無さそうだな
まあ持とうとして持つものではないが あああ(短) いいい(短) ううううううううううう(長)
という情報をレスポンシブのときに
あああ いいい
ううううううううううう
とするためにはどんなタグを使えば、うううを下に段落ちすることができる？
table的に3セルだから
dt>ddは使えないよね？
tableを使うのかな デザインなどは、Bootstrap, Tailwind, ElementUI などのCSS フレームワークを調べれば、
たいてい有料のテンプレートなども紹介している
そういうのを研究してみれば？ bootstrapのテンプレート眺めるなんかはやるなあ flexつかわなくてもinline-blockでいけるような
細かい調整したいならあれだけど 一番下のフッタにある
Cマーク 2018-2021みたいに何年から何年ってやつは、開業時からの年でもいいの？
web公開した時からの年数が書いているのかしら >>539
ありがとう、老舗だから1880-2021にしかけたわ >>538
web公開してからの年数書いてる人もいるね
古くから運営してるサイトなら実績アピールにはなるかも
webとはいえ実店舗同様に長く続けるのはなかなか難しかったりするしね 横だが
既に作成済みのサイトのリニューアル（全差し替え）は前の公開日を引き継ぎ、であってる？ もともとはコピーライトの年数みたいなのを指しているから
リニューアル前の画像などが含まれているならリニューアル前の年にしても問題無いかと >>542
ウチは年号はSinceで統一してる
要するに最初にサイト立ち上げた年を表記
リニューアルを強調したいなら両方の年数入れればいい body{width:960px}があったら、
その中のsection.footerでPCブラウザ横幅いっぱいのbackground-colorってできないの？
section.footer{background-color:#aaa}だとbodyの960pxまでしか色がつかないよね そりゃまぁbodyが960px幅しか無いならそうなるよね、としか >>548
子供にposition : fixedしたら一応できる
下のは画面下固定の幅いっぱいのフッターにするような感じの装飾
footer{
position:fixed
width:100%
height:任意
背景色などなど
bottom 0;
left 0;
}
position fixed
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されませんdeveloper.mozilla.org
スマホ(特にiPhone)でどうなるか要注意 >>548
親がbodyか
ごめん勘違い
無理かも 古いxhtmlサイトのメンテ頼まれて
divが7層とかあってbodyにwidthがあって絶望する時あるある >>552,554
ありがとう、参考になったけどbodyの1024は削除してやりなおしているけど宗教的な問題が
.container {width:1024px}
1：body > div.container > section.hoge
2：body > section.hoge > div.container
1・2、どっちにしようか書いたり消したりで何時間も迷ってるわ
正解は無いと思うけど、どっちが良いんだろう どういうものを作りたいのか知らんが、目的に合ったデザインの
htmlテンプレート探して、基本構造を見てみるといい >>558
コンテンツは1024pxの中に入りつつ
headerとfooterはブラウザの横幅いっぱいに背景色があるというベタな感じかな
色々なサイトを見てもコンテナの解釈がバラバラな感じで、同じくらいあるだけに余計迷う 【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
https://webliker.info/46840/ 透過度付の色指定の方法で、rgba じゃない方法はある？
他で色コードを #123456 と書いてるのにそこだけ rgba(18, 52, 86, …) と指定するのはメンテもしづらいし、red とか blue みたいな色名で指定することだってあるし。
こういうのに単に透過度を追加指定できるといいんだけど。 >>562
sassならhexに透明度を追加したらコンパイル時にrgbaにしてくれる 擬似要素（after）を指定しているのに幅によって消えることってありますか？
指定しているafterが幅を狭くした時にだけ消えてしまいます。
文字通りhtmlからafterが無くなります。 >>566
@media widthで読み込むstyleが変わってんじゃないの 通常ならchromeのデベロッパーツールで見るとafterを指定したタグの中に
「::after」って出るはずだけど、出てるのかな？ いまだに
::after
:after
か、わからない。
html5ならどっちが主流？ CSS2→ :after
CSS3→ ::after
::after (:after) - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/::after >>566
消えた
というのがDOMツリーからなのか、
表示からなのか、その両方なのか 消えた…とにかく消えたんじゃあ！もうおしまいじゃあああ 疑似クラスと疑似要素のために :, ::に分けた？
疑似クラスなんて5個ぐらいしか無いだろと思ったら
多すぎてガムシロップ吹きだしたわ
https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes 擬似クラスと擬似要素って、
セレクタ側とプロパテイ側なのでそれぞれ違う分類のものだったような？ 失礼します。
input内を送信したいのですが、action属性を指定するとそのページには飛ぶものの、送信はできなくなってしまいます。両方実行させるにはどうすればいいですか？ 失礼します。
input内を送信したいのですが、action属性を指定するとそのページには飛ぶものの、送信はできなくなってしまいます。両方実行させるにはどうすればいいですか？ >>579
スレチなのでperlやphpスレに行っておくれやす 失礼します。
input内を送信したいのですが、action属性を指定するとそのページには飛ぶものの、送信はできなくなってしまいます。両方実行させるにはどうすればいいですか？ flexで横並びのナビゲーボタンを配置する場合、
ナビゲーションの数に応じてナビゲーションのサイズが自動的に調整されるにはどう書いたらええっすかね
例えば5つの場合、width: calc(100%/5);みたいにcssまで編集しなくても自動的に幅を調整してくれるようにしたいです ↑
5つの場合、width: calc(100%/5);
3つの場合、width: calc(100%/3);
みたいにいちいち調整したくないのです widthを指定しない
flex-shlink
flex-basis
など divでwidth30%が3つある横並びflex □□□で
レスポンシブの時に
□
□□
こういう上1段、下2段のセンター寄せってできる？ >>586
下二つをコンテナにまとめてjustify-content: center;とか？ >>586
このままではflexだと無理だとおもう
flex itemを構造用に使って、内容はその中に入れ子にするか
>>588の言うとおりあきらめて括りを分ける
gridならできるのかしら？
そっちは詳しくない >>586
SPの時だけアイテムと同じサイズのbefore疑似要素を出す
最初のアイテムのorderをbeforeより先にする >>587,591
この書き込みしてる人が優しすぎてお友達になりたい 質問させてください。
現在スマホとPCで表示を変えるために
.pc { display:block; }
.sp { display:none; }
@media only screen and (max-width : 736px){
.pc { display:none; }
.sp { display:block; }
}
こういうコードを書いているのですが、ブラウザを縮めたり広げたりしていくと、途中で何も表示されない場面があります。
解決策はありませんでしょうか。
よろしくお願いします。 レスポンシブ対応なら、Bootstrap でも使えば？ >>587
あれ？何もせずに普通にflexすればええのね
ありがと(*´з`) ごめん、なにもせずではなくflex-grow: 1;か iPhone6sのsafariで検証してます。
positionをfixedにして固定表示している要素にて、高さを120%として、十分な高さを持たせて
いるのですが、上スクロールでアドレスバーとツールバーが表示されている状態から、下スクロールをすると
要素の高さが足りなくなってしまいます。
150%と値を大きくしても、下端にあるツールバーまでしか描画されていないようでした･･･
改善方法をご存じでしたら教えてください。 >>594
その情報だけで作ってみたけど、これでその不具合出てる？
https://jsfiddle.net/nwv6g2h3/
エスパーにも限度があるので、もうちょっと何かくれ >>598
これでどうにかなる？
iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
ttps://zenn.dev/tak_dcxi/articles/2ac77656aa94c2cd40bf >>594
spとpcのclassってjsで切り替えるやつだよね？
多分だけどjsで取得するwidthの値をスクロールバーを含めた横幅に修正するといいよ >>594
>>599
と同じこと思った
おおもとの解決ではないかもだけど、
min width 769からのやつを作って
pcの記述はそこに書くとか、、？
差分もらえないのでスマホ用の書く量は増えそうだけど みなさんありがとうございますjsで取得するwidthの値をいじったらうまくいきました 昔同じところで躓いた覚えがあったから
ズレてるかなと思いつつも回答してみてよかった >>600-601
どうも
vhと%とpxを試し、貼っていただいたリンクも試しましたが駄目でした…
ページ内リンクのリストをスクロールできる状態で配置しているのですが、
何故かプッツリ切れてしまっています。
クリックできるようにレイヤーを挟んでいて、そっちは途切れていないので
スクロール周りかな？とも思っていますが、如何せんスマホだと検証するまでに
手間が掛かって…
言葉だと伝わりづらいので、念のためスクショを添付しますので、
ご確認いただけますと幸いです。
ttps://dl.easyuploader.cloud/20210927210008_4578644a.png サイトのデザインに関してなんですが、中央寄せが無難なのでしょうか？
左側に寄っているデザインがかっこいいなぁと思うんす
その理由はわかりませんか？
ただ、利便性優先です >>610
リバースさせたのをorderでさらに逆転させとるんやね
パズルみたいでおもろいね
ワイの>>591よりスマートやわ flexのショートハンドいまだに暗唱で書けねぇ
ついつい、flex-wrap書いちゃう。 おれショートハンド使わないわ
animationとかbackgroundも >>609
中央寄せだとどういうメリットがあるんでしょうか？ >>616
感覚的なんで人による、が考えなしにカッコいいとかアホな理由は多分おそらく無い、といいなぁ
一例として、左寄せだと視線が左に片寄りすぎて、図表などの回り込みで横に広い画面の場合に、通して読むと視線の動線が右行って左行ってと激しく動くので疲れる
だからマージンとかで真ん中にブロックを配置してその中での左寄せテキストとかにすることで動線を短くしたりする
あくまで一例として 23年ぐらい前だけど、プライベートのサイトは
<center>ばかり使ってた時あったな
侍魂とかもセンター寄せだったな >>617
例えば1000px固定で左寄せならと、中央寄せなら、視線の動く幅は同じじゃないですか？ >>618
1998年ならテーブルでレイアウトとかやってた頃か？ >>616
揃える位置が真ん中で固定なこと
みっちり箱組みにしないことを前提として
センタリングの特長がよく働けばおおらかに見えやすい
視線の動きにも迷いがうまれにくいし、ゆったり読める
ポエミーなテンポの演出も？
悪く働けば
間延び感を感じ、また視線を次へ次へと誘導しにくい
下手するとアメブロのセンタリング記事ぽい感じになる貧相
デザインの話なら
他にも相応しいスレがありそうだなともおもいつつ >>625
はい
>>626
文字のセンタリングの話をしているのでしょうか？
文字は左寄せ、メインカラム（コンテナ）をmargin autoで中央寄せした場合の印象に関してです。 >>607
コード無しに文字だけの説明だけでスクショ見ると、余計に何が何だか分からんが
例えば、こういう似たようなことやってそうなサイトを参考にしてみるとか
https://www.qbhouse.co.jp/
https://www.cainz.com/ >>607
よく理解できていないのですが、一応解決したのでご報告いたします。
親を position:fixed; にしつつ、子にあたるナビとクリックレイヤーも fixed
になっていたので、ナビだけ absolute にしたら描画されました。
クリックレイヤーは fixed のままで何故か途切れないのですが、
心が折れそうなので原因追及は諦めます。 <dl class="red">と書いて dt の文字だけ赤くしたいですが
.red, dl dt {~~}
みたく書きたいのですが、全部赤くなってしまいます
この場合、別のclass名で色を指定しないとだめですか？ すみません631です
dl.red>dt の間違いでした
.redがすでにあったらdl.red2>dtみたく書かないとだめですか？ dlにも.redが反映されて然るべきなので別のclass名が必要っぽいですね
632さんありがとうございました pc用とスマホ用のレスポンシブ(ブレイクポイント1つ)で
ipadや、iphone横で右がwidth=device-widthで切れてしまう問題ってどう対応してる？ ランドスケープ判定して出し分ける
あるいはPC幅になるようにする そもそもwidth=device-widthは非推奨 >>637
え？まじで？というかスマホの仮想解像度どうするのよ >>637
まじか。知らんかった
これ指定するって書いてるサイトよく見かける気がする コピペで使えるかんたんなレスポンシブバーガーメニューのソースください > width=device-width
> 非推奨: この機能は非推奨になりました。まだ対応しているブラウザーがあるかもしれませんがなんたらかんたら
https://developer.mozilla.org/ja/docs/Web/CSS/@media/device-width
はぁぁぁ、知らんかった まじか消すわ
emmetででこないようにできんのかIE=Edgeとかも cssメディアクエリのdevice-widthは非推奨だけどmeta viewportのは違くね？ >>641
>まだ対応しているブラウザーがあるかもしれません
さりげなく現行ブラウザをディスってて草 こういうのが非推奨ってことか
<link rel="stylesheet" media="screen and (max-device-width: 799px)" href="http://foo.bar.com/narrow-styles.css"; /> で、スマホ用はdevice-widthを使わずにどう指定すれば良かですか？ initial-scale=1だけ指定しときゃwidthは勝手にdevice-widthになる meta viewportのは書き漏れあると古いandroidが表示おかしくなって原因特定にめちゃめちゃ苦労したから
呪文のように脳死で書いてる
これを抜いたせいでの原因特定に後から苦労するくらいならええわ https://developer.mozilla.org/ja/docs/Web/CSS/initial の
「注: 継承プロパティでは、初期値は期待されない値かもしれません。」
の意味がよく分からないので、若し分かれば教えて頂きたいです >>654
あっそうなんですね、ありがとうございます >>654
逆逆
注は継承した値を初期値と考えた場合の事を言ってるんだろうけど
653のページの例の通りinitialは継承プロパティでも継承関係なく本来の初期値
あまり難しく考えなくていいのよ >>656
あー、
「継承プロパティは指定されなければ値は継承されるのがデフォルト→初期値=継承された値」
ではないですよ、って事ですかね？ HTMLとCSSのタグの種類とプロパティの覚え方ってなにか覚えやすくなるコツってありますか？
それからHTMLやCSSでなにか参考になるサイトなどはありますか？ >>658
Emmetやサジェストプラグインで覚えなくていいようにする
参考になるのはMdN >>659
ありがとうございます！
手打ちで頑張れってことですか？
Mdnってやつは見た感じ学習サイトっぽいですね。 >>660
サイトではないかもだけど、サイト制作の本を何冊か読むのが良いと思う、何冊か併行してつまみ食いがポイント
ただしいきなり自分にあってない難しいのを選ぶと良くない
MdNはそうしたなかで役立つし、自分もよく見る chromeのデベロッパーツールのSourcesからimgフォルダの中の画像全部保存したいのだけど一括で保存できる方法ないでしょうか？
一つ一つはできるのですが数が多いので一括でやりたいです。 >>664
お願いします教えてください。
一個ずつ保存めんどくさいだけなんです。 >>665
どんな画像を一気に保存したいの？
url貼ってみ >>665
https://stackoverflow.com/a/56534741
あるページにアクセスしたときに、
そのページが取得してくるサブリソースアクセスを全て捉え、
Content-Typeを見て画像であれば（image/jpegとかimage/pngとか）名前をつけて保存する。
適当なフォルダでnpm init -yしてnpm i puppeteerして上のjsファイル１個作ってnode そのファイル名.jsするだけ あ、/imgディレクトリのみとかするんだったらurlでマッチ取って場合分け一つ追加必要ね ページ全体領域の背景を動画にするにはどうやればいいんですか？
<video src="./test.mp4">ってやっても表示はされるけど静止画になってたし
これだけが表示されて画像や文章とか消えちゃったけど > ページ全体領域の背景を動画にする
依頼がこうであればしかたなくだが普通こういうサイトはウザいベスト5に入るｗ <table cellspacing="10">
<tr>
<td>aaa</td><td>bbb</td><td>ccc</td>
</tr>
<tr>
<td>ddd</td><td>eee</td><td>fff</td>
</tr>
</table>
このようなテーブルでセル間隔を10pxにしたいが１行目と２行目の行間の間隔だけ0pxにしたい
どうすればできますか？ >>680
paddingだとセル内の余白なので違う
やりたいのはセル同士の間隔のことやで このようにするってこと
処理中を示すプログレスバーを設置したいんですが、処理のパーセンテージが分からない処理のため、バーは100%の状態で、そこに左から右にグラデーションがループするようなイメージのCSSスタイルを探してるのですが、見つかりません
どう探してもバーが空から埋まっていくものしか見あたりません
一般的なアプリでも前述のような処理中を示すバーを見ることがあるので良くあるパターンだとは思うのですが…
もしあれば教えていただけますか Bootstrap, Element UI, Tailwind, Onsen UI などに、
そういうコンポーネントは無いの？ >>685
余計なお節介だけど、
そういう処理の進行と無関係にアニメーションしてるだけのやってる感はイラつくだけだけどな。
止まってるのにぐるぐる回ってる Windows Update のアレとか。
昔の Unix なんかも起動時とかにキャラクターをぐるぐる回したりしてたが、あれは処理が止まるとアニメーションも止まるからな。
そういう意味のある実装を心がけてほしい。 >>686
探してたらイメージに近い物がありました
https://codepen.io/hijiangtao/pen/VBEvMW
上から2つ目のような流れる感じです
これをかなり細く(細いスクロールバーのような)して、流れかたもピコーンとスピードに変化のあるような感じです
ちょっと自分で作り替えられるかトライしてみます
>>688
プログレスバーなのでもちろん処理中だけ表示する想定です いつ出そうがプログレスが分からないプログレスバーは意味がないどころかユーザーの不信感を買うだけな気がする
まだ「処理中です…」の文字が点滅するだけとかの方がプログレスバー然していない分納得すると思う
なぜ左からバーが埋まっていくタイプのプログレスバーが大多数なのかをちょっと考えた方がいいと思う
横からお節介でした いつ終わるのか分からなくても、動いてるのか止まっちゃったのかが分かる表示にしてほしいね。
処理が止まってしまったのにアニメーションが続いてるのであれば何の意味も無い。
Windows Update、お前のことだ。 プログレスバー出すくらいなら処理ログ出せよと思う
自己満足の極みだよあれは 質問です
親要素のwidthが例えば1200pxでmargin:autoがかかっているとして
その子要素を画面幅一杯に表示させたいのですが、
width:100vwとしてもスクロールバーのせいか上手くいきませんでした。
これを解決するには当該の子要素を親要素から外すしかないでしょうか？ >>694
CSSで子要素の幅を親要素より大きくしてはみ出させよう！
ttps://ponsyon.com/archives/4660
子要素を親要素（インナー幅）からはみ出して画面いっぱいにするCSS
ttps://haniwaman.com/inner-over/
【初心者必見】たった2行！親要素を無視して画面幅いっぱいまで要素をはみ出させる方法
ttps://qiita.com/7note/items/c65aeb25784c3b2d27dd >>695
ありがとうございます！
参考にしてやってみます！ 前に親は子を超えられないとかあったけど、超えれるのか・・
wrapperが960pxでもその中にあるdivにて
PCでウインドウ幅いっぱいのカルーセルができるってこと？ 確かにできたけど、
margin: 0 calc(50% - 50vw);
これが全然理解できんわ
width: 100vwが中央wrapperの左端から描画されていると思うけど
ウインドウ左端とラッパー左端の余白＝ calc(50% - 50vw);
になるのかわからん・・・ https://zawa2.com/ZZsim/opamp_inv_amp.html
このサイトのGUIに非常に興味があり、自作したいのです。
ソースを見ると
<div>
<div>
<canvas id="canvas_sch1" width="300" height="150"></canvas>
<object type="text/xml" data="zzs_schematic_skel.xml"></object>
<object type="text/xml" data="opamp_inv_amp_2.xml"></object>
</div>
</div>
となっており、zzs_schematic_skel.xmlでボタンや描画エリアのコントロールを作っている模様。
こんな機能を実現するフレームワークはどんなものがあるのでしょうか？ 回路屋を増やすべく、微力ながら貢献したいと思っております。
世界が電化していくと、確実に回路屋が足りなくなる。
機械屋が面倒を見ていたレシプロエンジンをモーターに置き換えるので
回路屋が面倒を見なきゃならない。 回路図のfritzing は、有料になったのか？
水魚堂のBSch3V は、無料のままか？ positionにfixedとか使えば親子の関係断ち切れる <div style="width:70%;height:auto;background:#ff00ff;display:flex">
<div style="width:100px;height:100%;background:#ffff00">aaa</div>
<div style="width:calc(100% - 100px);height:100%;font-size:100pt">あああ</div>
</div>
aaaの方が高さ100%にしても伸びない
どうすれば外枠の高さまで伸びますか？ >>699
とりあえずMathJaxで検索してみるとか Prototype JavaScript Framework >>707
自動
中に入る文字や画像の高さにピッタリなるように >>709
それなら子の高さが100%じゃおかしいと思うよ
高さ具体的に決めないと >>710
外枠の方の高さを固定値で決めないとダメなの？ 子要素の幅の%指定ってのは、親要素の幅に対する割合ってことだからね
widthの初期値はautoだから、widthにautoを指定するってのはwidthを指定していないのと同義 つまりautoで指定したい場合javascriptで幅や高さを取得しないとだめってことか >>704
高さを内容に合わせたいなら
2つの子divの height を 100％ → auto にするだけなんだが heightをauto＝初期値
つまり、この場合は親子要素共にheightプロパティの指定自体を削除すれば
希望通りの挙動にはなるわな 横並びとか表を作るならdivよりtableの方がいいよ
divは使いにくい フォトショップのレイヤーからの書き出しで、2倍に書き出す時に、シェイプの角丸が元の形のままで2倍になりません。
何か設定があるのでしょうか。 >720
過疎ってました
>721
こちらで聞いてみます ろくなコード書けない人って自分がやりたいことの説明も下手なんだよなぁ <style>
.waku{
display:flex;
width:150px;
height:200px;
background:#00ffff;
align-items:center;
/*ここにjustify-content:centerかtext-align:centerを追加*/
}
.bt{
width:30px;
height:30px;
}
.fm{
margin:0px;
}
</style>
<div class="waku">
<form class="fm">
<input type="button" class="bt" value="a">
<input type="button" class="bt" value="b">
<input type="button" class="bt" value="c">
</form>
</div>
.wakuのwidthが50pxのときはjustify-content:centerでは中央揃えにならないがtext-align:centerで中央揃えになり、
.wakuのwidthが300pxのときはtext-align:centerでは中央揃えにならないがjustify-content:centerで中央揃えになる理由は何でしょうか？ >>727
justify-content:centerでレイアウトするのが正しい。
しかし定義に矛盾が生じると崩れる。
text-align: center;ではたまたま整ったように見えてるだけ。
正しくは両方記述するのが正解。 display:flex;を設定する階層が違うような >>727 のサンプルだとこのように効いている
justify-content:center は .waku内で form を中央揃え
text-align:center は form内で input を中央揃え
form に背景色を付けるとどうなっているか把握しやすい まぁ、.wakuのtext-align:centerは、継承されて.fm内の.btに効くけども、分かりやすくするなら
.text-align:centerは.fmで指定して、ついでにwidth:100%;も指定しておけば、justify-contentは不要 ChromeでF12を押して開く画面について、ElementsタブとSourecesタブのhtmlファイルの中身が異なる理由は何でしょうか？
Elementsはライブラリが読み込まれ、統合された結果と推察しておりますが、合ってます？ >>733
Elementsは、計算済みのDOM
Sourceは、ダウンロードされただけのhtmlもしくはphp
って感じだと思う テーブルで特定のセルだけ半透明にしたいけど背景画像が透けて見えません
どうすればできますか？
<body style="background-image:url('./bg.png')">
<table style="width:300px;height:300px">
<tr>
<td style="width:50%;background:#0000ff">aaa</td>
<td style="width:50%;background:#ff0000;opacity:0.5">bbb</td>
</tr>
</table>
</body> テーブルで特定のセルだけ半透明にしたいけど背景画像が透けて見えません
どうすればできますか？
<body style="background-image:url('./bg.png')">
<table style="width:300px;height:300px">
<tr>
<td style="width:50%;background:#0000ff">aaa</td>
<td style="width:50%;background:#ff0000;opacity:0.5">bbb</td>
</tr>
</table>
</body> 透けてはいるけど、背景画像がちゃんと表示されてないんじゃない？
https://jsfiddle.net/d5oeprqb/ >>737
どうも
実際にやってた方ではtableに背景色がついてたのでできなかったみたいです
tableの背景色を削除したらできました 今度はtdの背景色だけ半透明でその中にある文字や文字の背景は半透明にしたくないんですが
このようにやっても文字や文字の背景色まで半透明にってしまいます。
どのようにすればtdの背景色だけ半透明にできるんですか？
<table style="width:300px;height:300px">
<tr>
<td style="background:#ff00ff;opacity:0.5">
<span style="background:#ffffff;font-size:20pt;opacity:1.0">aaa</span>
</td>
</tr>
</table> background:rgba(255,255,255,0.5) opacity - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/opacity
> もし、子要素に透明度を適用したくない場合は、以下のように代わりに background プロパティを使用してください。
> background: rgba(0, 0, 0, 0.4); ウェブサイトを2022年前半に制作するとしたら、IE対応はどの程度にしておくのが妥当だと思いますか？英語のサイトです。 対応しなくていいんじゃね
> 2022 年 6 月 16 日（日本時間）に Microsoft 社の Internet Explorer（以下、IE）のサポートが終了します。
> サポート終了後に IE を起動しようとすると、Microsoft Edge が起動するよう変更されます IE起動したらすでにedgeが上がるPCもあるよな IEの件、ありがとうです。
海外でのシェアは日本よりさらに低いみたいなので、
IE対応は見積もり上オプションにしておきました tableでtdが複数あってレスポンシブでは収まりきらないものって
tdをwidth100%で下に並べるってできる？ 相対パスでTopページからCSS参照については反映されています。
書式はこうです。
<link rel="stylesheet" href="hoge/hogehoge.css" type="text/css">
しかし、スタイルシートと同じ階層にあるCSSが反映されません。
<link rel="stylesheet" type="text/css" href="hogehoge.css">
色々検索しましたが、良く分かりません。
使用しているサーバーはさくらインターネットのレンタルサーバーです。
どなたかご助言お願いします。 >>750
とりあえずhref="./hogehoge.css"って書いてみるか
絶対パスで書いてみて反映されるかどうか >>751
tr>td*3
を縦にしたかったら、trをflexにして、flex-columnにするとか？ >>749
>>750
<!DOCTYPE html>
<html lang="ja">
<head>
<link rel="stylesheet" href="hoge1.css" type="text/css">
<link rel="stylesheet" href="hoge2.css" type="text/css">
<link rel="stylesheet" href="hoge3.css" type="text/css">
<link rel="stylesheet" href="hoge4.css" type="text/css">
<meta charset="UTF-8">
<title></title>
</head>
<body bgcolor="#000000"></body>
</html>
CSSファイルは同じディレクトリにあります… 絶対パスでも反映されませんでした
一階層上のページは相対参照でCSS反映されてるほです >>750
念の為に聞くがwordpressではないよな？ >>750
> しかし、スタイルシートと同じ階層にあるCSSが反映されません。
とあるがindex.htmlと同じ階層の書き間違い？
それとも言葉のとおりにスタイルシートと同じ階層？
前者なら絶対パスでのリンクを試しておいで
後者ならcss(任意の名前)などの階層にcss入れてるだろうから
css/hoge.css等も変化ないのかね？ cssの読み込みが効かないって
定期的に出てくるなその質問ｗ
確か前の人はソースの記述ミスだったな
カンマが足りないとかそんなかんじだった >>754
とりあえず<meta charset="UTF-8">は<head>の直後に書いた方がいい >>754
キャッシュ削除して開発ツールのネットワークログ見て各cssが読み込まれてるか確認 この件、>>758 が言っているように、パスの間違い、勘違いのように思えてた
もしキャッシュなら
style.css?10000
みたいにパラメータつけると解決するかも たびたび申し訳ないです
さくらインターネットで独自ドメインのフォルダをつかっています
***sakuranejp/www/***com/css
↑
ここにhogehoge.cssが集約されてるのですが
/cssのindex.htmlが反映されないのです 解決しました
CSS自体には問題がなく、他のスクリプトと
連動させていたので、後者の方に問題があり
CSSが原因だと勘違いしてました
ご協力頂いた方々、ありがとうございました よくある質問
CSSが効きません
過去に合った回答
・ソースに不備があった（カンマ足りない）
・CSSではなく連動させているスクリプトの方に問題があった CSSに記述する画像の相対パスはCSS起点ってことに気付かずハマったことはある 俺が2年ぶり3回目でハマったのは
qiitaからコピペしたviewportのダブルクオートが全角だった
同じサイトからコピペして3回ハマることになるとは >>772
自分も経験あるわそれ
ムキーッってなる (t.replace(new RegExp('"' + '."'), ''));
こういうのに全角混ぜられるとイラッとするよね そういうのの記事を書く時に動作確認した物を貼り付けないのかと不思議に思うわ
わざとトラップ仕込んで利用者の理解度をあげようとでもしてるのか？とまで思う程に あれだろ、シンタックスハイライト使うのめんどくさいから
かといってソースそのまま貼ると、効いちゃうから
わざと全角にして効かないようにしてるんだろうけど
それにしても迷惑 コーディングしててなんどやってもつまづいて
1日寝て書き直すとちゃんと動くっていうのもある
脳が疲れてるとエラーも見過ごしがち css変数で
モバイル用の幅指定を指定したいのですが、次のようにやってもうまくいきません。（ブラウザに無視されます）
うまくやる方法はないでしょうか？
:root {
--mob-wid: 701px;
}
@media screen and (max-device-width: var(--mid-wid) ) { ←ここが701pxになってほしいのですが…
} >>780
タイポしました（汗）
× @media screen and (max-device-width: var(--mid-wid) ) {
○ @media screen and (max-device-width: var(--mob-wid) ) {
○のように書いてもうまくいきません。
何か間違っているでしょうか？ max-device-widthじゃなくてmax-widthにしたらどうなる？
device-width - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/@media/device-width 余り使ったことなかったのでちょっと調べると
値に使えるのがCSS変数とあって
投稿のような箇所で使ってる例が見つけられなかった
scssでも変数をセレクタとかに使う時にはインターポレーションして使うからなあ メディア特性はCSSプロパティではないし、@～は:rootよりも外側になるわけだし そもそも:root疑似クラスの意味
:root - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/:root cssファイルでphpが使用可能になればみんな解決しそう みなさんどうもすみません＆ありがとです。
>>785
原因はたぶんこれですね。 余談だがcssのdevice-widthは非推奨だよ
>>787
sassで良くね？ >>789
どうもです
@media screen and (max-width: 701px) {
に書き換えればいいようですね。
>>783
もうmax-device-widthは廃れるんですね。
気づいてよかったです！ >>789
変数使いたいだけなのにいちいちファイルが2つに分裂とかめんどい。
さらっと書いてさらっとアップして終わりたい jsが進化してJQやライブラリなどでやってた事がもう
バニラで出来るようになっていってる。
cssも進化してscssが淘汰されるのも時間の問題だろう 種別としてはsassと同じCSSプリプロセッサだよ
sass(SCSS)はsass(SCSS)としての機能・文法がセットで全部決まってるけど
PostCSSはモジュールごとに自分とかチームとかで決めた入れたい機能だけ選んで導入する
例えばネスト機能だけ入れるとかね
逆に機能入れまくってsassより高機能にすることもできる
まだブラウザに実装されてない機能を先取りして使うjsで言うbabelみたいなこともできる
あとオートフォーマットとかもあったかな（うろ覚え） >>792
cssが進化するならブラウザがscssを読み込めるようにしたほうが早いよね
まだ変数とかはscssと組み合わせてより便利にするのがいい段階だと思う
たとえばcalcが本格採用されたからといってプリプロセッサの演算機能が淘汰されたか？という具合に 今までemmetやfor文で頑張ってた連番や任意の値ごとのステップ増減なんかは
面白いセレクターができてやらなくてよくなったりするといいなと思ってる <meta name="viewport" content="width=device-width,initial-scale=1.0">
を使うのは必須ですか？なくてもいいですか？ >>792
変数なんかはその流れを想起させるね
でもまああんまり高機能だとアクセスしづらくなるだろうから
まだまだ先の話っぽそうだね >>799
この業界は常に変化・進化し続けてるから常にアンテナ張って情報仕入れて勉強しないとな >>800
ワクチン打ったけど5Gの対応遅いなー
どこに問い合わせすればいいんだ 漏れは、クレジットカードを持っていないので、スマホの契約に困っていたけど、
さっきヨドバシカメラへ行って、銀行のキャッシュカードで、UQ mobile と契約した
人生で、初めてのスマホ。
OPPO A54(5G), 4GB メモリで、キャンペーン価格で5千円だった
銀行引き落としで払える、格安スマホはかなり少ない >>805
失禁してしまう高齢の自分を卑下する言い方 >>806
なるほど。ありがとう
>>803
生きるの大変そうだけど頑張ってください line-heightの解除ってどうやるの？
<div style="line-height:30px">
aaa
<div>bbb</div>
</div>
子にはline-heightは適用したくないんだけど >>810
大抵body辺りに設定してる値になってそうだが
ディベロッパーツールのcomputedで未設定時の値を見ておいで line-heightの値によって上下マージン変わるのを計算すべきかいつも迷う
1行目はマージンあかない仕様にして欲しかった 初期値にしたいならinitialという便利なものもあるよ querySelectorで使うつもりですが、
特定の子要素を持つ親要素をピンポイントで指定したい場合は、セレクターにどう書けばいいのでしょうか？
たとえば、子に p.foo を持つ div.bar を指定したい、等 cssの質問です
position : absolute;とした要素の大きさをウィンドウではなくスクロールしてもページいっぱいになるように表示したいです。
width100%; height100%;としましたがスクロールしてしまうと要素が下まで届いてないので、これををページ一番下まで届くようにしたいです。 JSでボタンクリックイベントとwindow.setIntervalを連携させたとき、クリックした回数だけwindowインスタンスが発生し、setIntervalがクリックの時間差で
何度もイベントを発生し続けるのでしょうか？ cssのセレクターで
<div class="a"></div>
<div class="b"></div>←こいつ
<div class="a"></div>
<div class="b"></div>
最初のclass="b"を選択したいんですが、どうすれば良いのでしょうか？
first-childはちょっと違いました どうしてもcssだけでやりたいならnot演算子で3個目以降のdivを排除せよ >>824
jsのdom操作で並び替えできてしまうので
<div class="a"></div>
<div class="a"></div>
<div class="b"></div>←こいつ
<div class="a"></div>
<div class="b"></div>
の時はこの最初のclass="b"を選択したいんです
無理ですか？ 親クラス > div.b:nth-of-type(1){} >>828
それは最初のdivかつクラスbなので残念 js使ってるならjsでコンテナの中の最初のbを見つけりゃええやん *:nth-child(1 of .b)
Safariしか実装しとらんけどええやろ日本なんかiPhoneばっかやし CSS gridで左1段、右2段でレイアウトする際に
右2段を左1段の上下中央にレイアウトってできますか？
CSS grid難しい >>834
いやこのofに関しては新しい仕様だからむしろChromeとかFirefoxが怠けてる grid良く分からんからflexでやってみたけど不細工なやり方しか思いつかないな
こういうレイアウトにしたいって事？
https://jsfiddle.net/zpdsgx5y/ >>838
ありがとうございます！
flexでこんな組み方ができるんだと驚愕していますが、
残念ながら、今求めてるのとちょっと違っているので
自分の日本語能力反省します iframeで埋め込んだサイトをＡで、iframe使ってるサイトをBだとして、
Aをスマホで表示すると全体が縮小表示されるのに
Bから埋め込んだＡをスマホで表示すると、PCでＡを表示した時と同じ表示のされ方（全体縮小されずに縦横スクロールバーが出てくる表示）になってしまう。
仕方なくscale使って埋め込んでみたけど、何かもっとスマートなやり方はありませんか？
そもそもなぜ埋め込んでるだけなのに同じ表示のされ方がされないのでしょうか？
スマホサイズでwidth height 指定しても変わりなしです
AとかBとか分かり辛くて申し訳ないです 埋め込まれた側のビューポートやメディアクエリに依存するから iframeで埋め込むと警告出て表示されない場合も出てきたな >>839
横からだけど、こういうこと？
https://jsfiddle.net/6j95rpbu/
gridはジェネレーター使うと便利だよ
CSS Grid Generator
https://cssgrid-generator.netlify.app/
Interactive CSS Grid Generator | Layoutit Grid
https://grid.layoutit.com/ >>843
ありがとうございます。
びっくりするぐらいソースが複雑なんですね きちんと見させていただきます >>841
そういうことか。原因はビューポートの違いみたいです
ありがとうございます。
埋め込まれた側、埋め込んだサイトどちらのビューポートも変更できないのでscale使うしか無さそうね guideはIEが対応してないせいで
日本だとなかなか浸透しなかったけど
IEが駆逐された今後は増えてくんじゃないか >>843
おお、このジェネレーター便利だね
こういうのもっと広まってほしいね >>843
2つめのジェネレータが特にイイ(´;ω;`) アタック25のノリでランダムでクリックして埋めてから
ソース作成したら複雑すぎて草
flexでええわ・・・ 昔からあるwordpressのbox-sizingがデフォルトのcontent-boxになっているので、
特定のsection以下はborder-boxにしたいんだけど、
たとえばsection.main *{box-sizing: border-box}としても無反応で
*{box-sizing: border-box}とすると、headerやfooterが少し崩れます
content-boxでも特に困ってはない感じだけど、
flexで書き直しているからあまり気にならないのかな・・
content->borderの時、どういう時に影響が出やすいの？ > headerやfooterが少し崩れます
:not()で除外してみるとか >>854
子要素への適用となってる記述だから
section.main自体に適用されてなさそうだがそれはいいのか？ >>849
日本はIT後進国だからな
コロナで在宅勤務になった去年なんて10％超えたのマジだからな
今年にやってやっとまた下がったけどまだ5%弱ある >>854
スタイルルールを詳細度で上回らないと後ろに追記しても反応ないとおもう
ブラウザの検証なんかで継承の状態とか確認したら良いとおもう
ところでWordPressのbox-sizingってテーマのスタイルシートのことよね？ <table style="width:80%">
<tr><td>あああ</td><td>aaa</td></tr>
<tr><td>あああああ</td><td>bbb</td></tr>
<tr><td>ああああああ</td><td>ccc</td></tr>
</table>
このようにテーブルの幅が指定されている場合で
左側のセル幅は一番長い文字列の幅で、右側のセルの幅はテーブル幅から左側のセルの幅を引いた幅に
なるようにするにはどうやればいいんですか？ td:first-child {
width: 0;
white-space: nowrap;
} grid lineに線を描画する方法ってありませんかね？
gridで左右に二分割しているのですが真ん中に分割線を表示したいです 左右の境界のどちらかにborder: double;するか
gap指定して左右の境界にborder指定するとか？ 普通にborder指定するんじゃダメなの？
でなければ数px幅のgridアイテムを挿入してbackground-color指定 例えば
ttps://jsfiddle.net/1zh8dpcx/
こんな感じのレイアウトで真ん中に分割線を描きたいです
>>864
grid-auto-flowに依存しているのでそういうのは出来れば避けたく・・・ tbody内のtdを中央揃えにするにはどうすればいいんですか？
text-align:centerじゃできなかった
<table style="width:100%">
<tr><td style="text-align:center">あああ</td></tr>
<tboby>
<tr><td style="text-align:center">あああ</td></tr>
</tbody>
</table> 訂正
<tbody style="display:table-row">です tdに
display:flax;
justify-content: center;
align-items: center;
でいけないかな なぜtbodyをtable-rowにしたいんだろうか？ align=“center”
ってもう使わないの？ おっと2年前でもhtml4全開の俺みたいな人が来たな margin-left および margin-right に auto を指定したり、 margin に 0 auto を指定したりすると、 align 属性と同様の効果を得ることができます
だって >>873
tableのセルはdisplay:noneで非表示にした後、表示させるには
display:table-rowがいいって聞いたから >>878
tbodyの元のdisplayはtable-row-group 表示と非表示が排他になってないメディアクエリの設計がおかしい table内ならvisibility: collapseでも詰めて表示されるけどね wordpressのようにsrcsetにいくつもの横幅に合わせた画像が用意されているときに
ブラウザの拡大や、スマホのピンチ拡大でも高解像度を順に読んでいくけど、
そういうもの？
ブラウザの拡大は、現在表示している画像を拡大してモザイク状になるのかと思ったわ ピンチはどういう処理なんだろ？考えたこともなかったわ
WordPress固有じゃなくてOS&ブラウザとsrcsetの挙動なんだろうけど >>884
最初タブレットでピンチしたときに
このサムネイルは300pxで表示しているはずなのに、
横幅いっぱいなのになぜこんな綺麗なんだろう、iOSの高解像度技術すご・・とか思ったわ
でも、ソース見るとsrcsetになっていて、
WPのライブラリにアップロードすると、ウチのサイトでは6種類画像作るんだけど、
開発ツールで拡大する度に段階的に読み込んでいるのを見て
WPがこういう使い方に進化させているのはうまいなとは思ったわ 旧来からあるフォーム用のUI(inputタグとか)はマウスでもキーボードでも操作できるけど
ttps://developer.mozilla.org/ja/docs/Web/CSS/::before#result_3
みたいなモダンなUIはポインティングデバイスでしか操作できないようです
モダンなUIでもキーボードで操作できるようにするにはどんな方法がありますかね？
イベントを登録してJavaScriptで書き換えれば出来そうですがどう考えても簡単じゃないので
他に何かあれば・・・
＃上記例みたいに上下のみならマシですが縦横に並べるとか段組してあるとかだとイベントハンドラが
＃どんどん面倒になりそうです >>885
いやsrcsetをWordPressの手柄にするなよ…
対応早いのはいいことだけどさ >>887
手柄というか、縦横比固定で無駄に多く画像を作る仕組みを
うまく再利用したなぁということね Progateみたいにコード入力ができるプラットホームを教えてください。 おすすめのマークダウンエディタはなんですか？
linuxでも使えるといいんすけど
vscodeッテマークダウンエディッタとしてどうなんですかね＿ >>890
スレ違いだけど、まあ普通にmdファイル編集しつつプレビューアドイン使ってるよ VSCode には、markdown 用の拡張機能もある
>>885
6種類は多い
Ruby on Rails では、srcset で、2種類ぐらいの説明が多い HTTPのステータスコードどれにするか迷ってます
APIを叩いて、サーバ側でタスクを実行
・タスク実行を受付けOKなら → 200
・タスクがまだ実行中なので二重実行になる → ？？？
202でいいでしょうか？ https://i.imgur.com/vngjKpn.png
CSSのみで上記の画像のように
・div要素の上下を内部の文字なども含めて透明なグラデーション(?)にする
・左右はなにもしない
としたいのですが、どのようにすればよいのでしょうか？
一応、自分なりに試行錯誤してみてbox-shadowを内側にすれば良いのでは？と考え
pinkであれば「それっぽい気がする」ような感じの結果が得られたのですが
pink → transparent にするとなんにもならなかったのでお手上げでした…
https://i.imgur.com/WiTPlwF.png beforeを上 afterを下にしてlinear-gradientでやるかな 回答ありがとうございます
時間的に今日は無理そうですがいただいた案を踏まえてまた色々と試行錯誤してみます
ありがとうございました マスク系じゃないと無理やな
画像を見ただけだと労力に見合う効果があるようには見えないけど PC用に作った横長のレイアウトのページを、スマホの縦向きで表示すると、横幅が画面に収まるように縮小されて表示してしまうんですが、
横スクロールバーが出てもいいので本来の倍率で表示されるようにするにはどのようなCSS設定が必要でしょうか？
スマホでの表示はAndroidのChromeです。 >>908
HTMLのviewportを変更できる環境なのかどうか分からんけども、とりあえず参考まで
HTML：viewport の正しい書き方 | WWWクリエイターズ
ttps://www-creators.com/archives/5972 >>909
viewportでそれっぽく表示できました。ありがとうございます。
もっと勉強します。 >>908
viewport
initial-scale
でいけるかと >>909
viewport の正しい書き方ｗｗｗって煽られてるみたいだｗｗｗ html5に実家の古いサイトを乗り換えようかと調べ続けています。
簡単な質問で申し訳ありませんが、
<div style="dispaly:flex;width:100%;">※左右は画面いっぱい
<div></div>
<div></div>
<div></div>
</div>
この場合に、どうすれば３カラムの割付になるでしょうか
予定としては2つ目の、つまり真ん中（二つ目）のdivのwidthを見た目の実寸で
７５０px相当にして、残りを割り付けたいのですが、パーセントを使っても
うまくブラウザの拡大縮小に対応するようにうまくいきません。
拡大縮小すると不規則な縮小率になってしまうのです。
何のための確率なのかよく分からないのですが、とにかくそうなります。
なんの単位でもいいのでどうすればいいのか教えて下さい。
ヘッダ作ってからそこで更新は停止しています。 >>914
flexよりも
display: grid;
grid-template-columns: 1fr 750px 1fr;
の方がいいのでは？ <div style="dispaly:flex;width:100%;">
<div style="width:calc(calc(100% - 750px)/2)"></div>
<div style="width:750px"></div>
<div style="width:calc(calc(100% - 750px)/2)"></div>
</div> 750px以外のdivにflex-grow: 1; >>916
ありがとうございまづ。早速、gridについて勉強してみます。
結果は後日報告いたします。 >>917
>>918
読み落としてしまい申し訳ありません。
どちらの方法でもできました。ご指摘ありがとうございます。 現在、gridで組子を作るの法を調べています。flexにflexを入れる方法は
あまり色んなサイトを見ても実用的にはなかなか使われて無いようなので
gridを組子にする方法で検討しています。
また質問させてください。どうもありがとうございました。
しかし使ってみてもグリッドの方が便利なような気がするのですが、
なんでflexがあるのでしょうか、、、。 普通に役目が違うし
ベンダープレフィクスつけてもgridの再現性がカスな時代が長いから >>921
>flexにflexを入れる方法
結構使ってる そうなのかもしれません、、、分かりませんが、、、。
flexの入れ子のできなさがまいったのです、、、、
gridの割付はテーブルのくらいめんどくさいけどテーブル使えればなんとかなりました。 >>924
あんまりみたことありません
片っ端からソースを見ましたが、数百サイトに
１０もなかったような、、、、 同じくflexはよく使ってるなあ
理由はgridの初期設定が取っつきにくさと
flexはレスポンシブ対応の切り替えのしやすさかな
flexで楽に設定難しそうな構図のみgrid使ってるわ flexのflex入れ子なんて良く使うけどなぁ
地獄のfloatの比べたらflexに足向けて寝れんわ >>928
俺も入れ子よくつかう
最初ドキドキしてたけど別に問題ないのな <div style="diplay:grid;">
<div></div>
<div></div>
</div>
内に
<div style="diplay:grid;grid-template-columns: auto auto;">
<div>
<div style="diplay:grid;grid-template-columns: auto auto;">
<div></div>
<div></div>
</div>
</div>
<div></div>
</div>
みたいな感じにgrid内にgridを入れることはできるのでしょうか。
autoで二分割を二分割しています。 >>931
gridにgurid入れなくても
入れ子はできるよ
ジェネレーター使って遊んでどうぞ
https://grid.layoutit.com/ flexはいらんでしょ
チートシートでも印刷しときな flexのおかげで後輩と結婚できたからflexは偉大だと思う フッターを画面下に固定する方法がネットのだとうまくいかないのですが、
relativeを使ってどうすればいいのでしょうか。他のdivなどには入っていないので
フッターは独立しています。
ちなみにフッターにはテキストを数文字入れるくらいで入れるものはありません。
高さは30pxで横幅は１００%です。 >>938
fixedだ、、、、その通りです
ご指摘ありがとうございます。
なぜか頭の中で入れ替わっていました と思ったのですが、拡大時に今度はコンテンツに被ってきます
どうすればいいのでしょうか
画面一番下に表示したいのはそうなのですが、画面の前面に
固定は必要ありません コンテンツの方にフッターの高さ分だけマージン設定すれば？ iPhoneとfixedは相性悪かった記憶
古い情報かも >>947
それbackground-imageの話じゃない？ rgbaだと色の指定は数値なので#ffff00やyellowみたいな表記できないので困ってます
このような表記でも色と透過度を指定できるようなのはありますか？
backgroundとopacityに分けると子要素まで全部半透明になっちゃうのでその他のやり方で >>950
数値変換はcssでできますか？
どうやればいいんですか？ できないから、諦めて
コメントアウトで黄とか赤とか書いとくが吉 文書内の左上から x px y px ずれたところに
印を表示したいんですが
（jsで算出した x yがあってるかしばらく確認したい）
どういう方法がありますか
document.bodyにdivを作って
styleで
position:absolute
Left: x px;
Top: y px;
width:2px
height:2px
これらを指定して見たところ
だいたいのサイトではあってるようですが
bodyにrelativeとwidthとmargin-leftを指定されているサイトでは起点がずれてしまいました。 >>954
親要素のbodyにwidth指定すんのやめよう
レイアウトの都合でwidth指定したいなら子要素増やそう 自分のサイトじゃなく、ユーザースクリプトとかの話でしょ？ >>955-957
ありがとうございます
そのURLみたいな感じでx yを算出したんですが
それを確認するために置こうとしてずれる時がある感じです
最悪bodyの文書の左上から位置を算出して補正してみます >>949
https://book.scss.jp/code/c8/07.html
SASS なら、
color: rgba(red,.7); → color: rgba(255, 0, 0, 0.7);
color: rgba(#132,.2); → color: rgba(17, 51, 34, 0.2); <style>
#aaa{
width:300px;
height:300px;
background-image:url("./test.png");
}
</style>
<div id="aaa">てすと</div>
このdiv領域の背景画像を半透明にするにはどうすればいいんですか？
ただし子要素は半透明にしないものとする。 >>961
横だが、糞コードやんそれ。
背景画像自体は明るく（白に近く）なってるだけで透過してるわけではないし。
これ間違いだし→background-image:()
background-imag:url()だろ？
いずれにしても糞コード div要素に背景画像使ったらbeforeでマスクかける
その中に文字入れるならpなりh1なり入れていく #aaaではなく#aaa::beforeにbackground-imageとopacity付ければ？ >>963
div領域の背景画像が透過かどうかはbobyに背景画像を設定しないとわかりにくい
そのやり方でbodyで設定した背景画像が透けて見えるようになりますか？ >>965
それでできなかったぞ
画像すら表示されなかった >>968
俺も。
>>964
悪害Noteははよ修正せい htmlそのままで背景画像のみをCSSだけで透過させるっていうお題に
そもそも無理があるので、htmlいじれない縛りがある状況ならば
代替案として>>961の方法もベターでは無いだろうが、あながち害悪という
訳でも無いと思う 要件を満たしていないという話だ
害悪かどうかなんて話してない
プリンの絵を載せて「あながち害悪というわけでも無い(ｷﾘｯ」と言っているに等しい >>975
何か話が変わってるようだが
要件を満たしていないとういなら、>>968も要件は満たしていない
まぁ、>>964も>>968も俺なんだけどね
スレタイ読めるなら、他人にいちゃもんをつける前に、自分で回答ぐらい出そうよ >>969 >>977
backdrop-filter、動作するchromeで試しても上手く動かないんだけど
使い方間違ってる？
https://jsfiddle.net/q6pnzjko/ #aaa
{
width:90%;
height:300px;
border:Solid 10px yellow;
}
#aaa::before{
background-image:url("./bg.jpg");
opacity:0.5;
}
</style>
<div id="aaa">
</div>
これでできなかった、どこがだめなんでしょうか？ >>983
#aaa:before に
contentプロパティ、positionプロパティ、サイズの指定
親要素にもposition:relativeなど
他の要素もある場合はz-indexもあったほうがいい？ >>983
https://jsfiddle.net/0jzL5b2f/
余計なものも付け足したけど、プロパティを1つずつ削っていって動作確認すれば
何が必要なのか分かる >>987
ジェネレーターありがとうございます
backdrop-filterでbackground-colorを透過させるのは問題無いんですよね
でも今やってるのはbackground-imageを透過させたいって話で たぶんコーディングしてる人全員が一度は背景画像だけ簡単に透過できないって不便だなって感じた事あるんじゃねｗ
つまりいずれそういうプロパティが出来ると思う。いや絶対できる 今してるのは、どのやり方が良いとかダメとかって話じゃなく、
質問に沿った解決案が上手く行かないのは何故？って話でしょ
そもそも>>960の質問は、何かに困って質問したとは思えないしなぁ 端的にいうと質問に沿った解決案は現在の仕様においては 無 い 。
それが結論。
それをハッキリ言える人がいなかった。
その結論をいわずに代替案をポンポンだすからおかしなことになってる このスレッドは１０００を超えました。
新しいスレッドを立ててください。
life time: 104日 1時間 44分 24秒 5ちゃんねるの運営はプレミアム会員の皆さまに支えられています。
運営にご協力お願いいたします。
───────────────────
《プレミアム会員の主な特典》
★ 5ちゃんねる専用ブラウザからの広告除去
★ 5ちゃんねるの過去ログを取得
★ 書き込み規制の緩和
───────────────────
会員登録には個人情報は一切必要ありません。
月300円から匿名でご購入いただけます。
▼ プレミアム会員登録はこちら ▼
https://premium.5ch.net/
▼ 浪人ログインはこちら ▼
https://login.5ch.net/login.php レス数が1000を超えています。これ以上書き込みはできません。
