HTML/CSS のどんな質問にも優しく答えるｽﾚ 48

**Name_Not_Found** · 2021/07/29(木) 18:46:18.57

ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。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

**Name_Not_Found** · 2021/07/29(木) 19:03:09.54

>>1
おつ

**Name_Not_Found** · 2021/07/29(木) 19:56:21.87

済まぬ前スレからなのだが
*************************************
mix-blend-modeについておしえてちょ

https://codepen.io/dddi/pen/oNWqNEe

hoge2の重なってる部分の文字色をhoge1同様に白色にしたいんだが、どうしたらいっすか？
*************************************

ひょっとして普通にやっても白には出来ないって事？
hoge1にできてhoge2では無理な理由をおしえてちょ

**Name_Not_Found** · 2021/07/29(木) 20:09:52.64

>>3
フォトショでおなじようにオブジェクト作って試してみれば

**Name_Not_Found** · 2021/07/29(木) 22:00:06.45

>>4
フォトショだとmix-blend-mode: difference;は「差の絶対値」でいいんかな？
背景色に対して文字色に補色指定するとhoge1は無彩色の白（#fff）で
hoge2は有彩色のピンク（#ff33ff）になる意味が分からん。
逆に文字色が無彩色の白（#fff）になるようにするには背景色はどういう色相までが白なのかとか考えてまうわ
結論：よくわかんね

**Name_Not_Found** · 2021/07/29(木) 22:03:28.99

つかこれからのデザインで
背景色に重なってる部分の色を自動的に白色にしたいって普通に必要になるだろ？
なんでみんなこの内容に乗り気じゃないんだｗ
後で絶対やらされるぞ

**Name_Not_Found** · 2021/07/29(木) 22:28:24.68

やったことあるけど自動はまだ無理だぞ
文字なら同じ内容を二つ重ねたりする必要がある

**Name_Not_Found** · 2021/07/29(木) 22:39:25.13

そもそも「特定の色にしたい」はmix-brend-modeの仕事じゃない
clip-pathとかでがんばれ

**Name_Not_Found** · 2021/07/29(木) 23:12:35.92

そこでbackground-clip登場ですよ

**Name_Not_Found** · 2021/07/30(金) 00:06:44.72

mix-blend-modeの差の絶対値じゃ特定の色じゃないと
白抜きは無理だろうなぁ

**Name_Not_Found** · 2021/07/30(金) 00:57:34.23

>>10
その特定の色の基準が分からん
具体的にどこからどの範囲までの色？

**Name_Not_Found** · 2021/07/30(金) 01:02:21.74

おまいらうだうだ言ってないでサンプル作って見せてくれよｗ

**Name_Not_Found** · 2021/07/30(金) 01:13:44.31

>>11
範囲っていうか、差の絶対値だから、白抜きなら背景色と文字色の
絶対値の差が#ffffffになればいいってことでしょ？
https://jsfiddle.net/pnkut9v5/

**Name_Not_Found** · 2021/07/30(金) 01:14:17.72

絶対値の差、じゃなくて差の絶対値だった

**Name_Not_Found** · 2021/07/30(金) 01:26:01.99

>>11
元となる色情報が分からないと出しようがなくね？

**Name_Not_Found** · 2021/07/30(金) 01:52:14.77

画像でええやん

**Name_Not_Found** · 2021/07/30(金) 03:02:48.99

>>11
できないっつってんだろ
諦めて白いオブジェクトを作れ

**Name_Not_Found** · 2021/07/30(金) 03:43:33.80

IE11が死んだ今、尖ったサイトでなければ
--webkitみたいなブラウザ依存は使わなくても良い？

**Name_Not_Found** · 2021/07/30(金) 04:56:45.25

>>18
モノによるとしか

んで自分で気にしなくても
browserslistrcにお任せするのが
楽で安全だと思ってる

**Name_Not_Found** · 2021/07/30(金) 15:36:16.47

>>13
おお！素晴らしい！！！

**Name_Not_Found** · 2021/07/30(金) 15:44:15.02

>>15
だからその元となる色の範囲をしりたいんだってばさ。
a＋b＝白
白＝X+Yが成り立つXは何色であり、その範囲は色相環のどこからどこまでかという事。
色の基礎知識無いと意味不明かもしれんぞ

**Name_Not_Found** · 2021/07/30(金) 15:45:54.56

>>17
>>13ができてるじゃねーかよ
偉そうに

**Name_Not_Found** · 2021/07/30(金) 15:55:19.50

今週のテーマmix-blend-mode
こういう機会でもないとこんなマイナーなの仕組み理解とか試さんし忘れるから
いい機会やん

**Name_Not_Found** · 2021/07/30(金) 17:53:35.50

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かけて
好きな色に変えればいい

**Name_Not_Found** · 2021/07/30(金) 18:00:30.52

こんな感じで
https://jsfiddle.net/rw6jp28k/

**Name_Not_Found** · 2021/07/30(金) 23:22:19.82

みなさんnext.jsとかnuxt.js業務で使ってます？

**Name_Not_Found** · 2021/07/31(土) 00:12:04.76

わいjsさっぱりわからないデゴザル

**Name_Not_Found** · 2021/07/31(土) 00:21:43.83

jsスレで質問した方がよかろう

**Name_Not_Found** · 2021/07/31(土) 10:02:48.71

>>26
nuxt使ってるよ
便利便利

**Name_Not_Found** · 2021/07/31(土) 12:52:04.63

>>24
完璧な回答ありがとう
正直、ここまで有能な人がこのスレにいるとは思わなかったｗ
ググればわかるような内容ではないもんな

**Name_Not_Found** · 2021/07/31(土) 13:21:41.07

お前うざいな

**Name_Not_Found** · 2021/07/31(土) 13:36:41.76

>>31
あのさ・・いい大人なんだしさ、
試しにあんたがうざいと感じた理由は何かを3つ上げてみて。
もしかしたら原因は自分にあるんじゃねーの？

**Name_Not_Found** · 2021/07/31(土) 14:04:05.29

>>3,12,30が同一人物ならうざく感じる気持ちはわかる
同一人物かどうかは分からんけどね

**Name_Not_Found** · 2021/07/31(土) 14:28:44.01

>>33
同一人物だよ。つまり俺。
具体的にどこを直してほしいのか指摘するならまだしもひと言「お前うざい」って言われて
学校のいじめもこんな感じで始まるんだろうな。

**Name_Not_Found** · 2021/07/31(土) 14:38:15.95

うわあ　これはウザい

**Name_Not_Found** · 2021/07/31(土) 14:40:49.67

mixというように色と色の計算なのだから
元の色を調整してでも白にしたいなどというケースは無いことがわからない
できない、任意の色にしたいという場合はこのプロパティを使えという助言は無視
仕切る
人を見下している
自覚がない

**Name_Not_Found** · 2021/07/31(土) 14:58:53.20

>>29
どうもありがとう
静的サイトジェネレーターって言われてる物を理解したいvue.jsからnuxt.jsでいいのかな
具体的にどいう言う事が出来るのか分からんから調べまくらないと

**Name_Not_Found** · 2021/07/31(土) 15:31:17.08

>>30
>>24だけど、差の絶対値の計算方法はググれば出てくる
他のモードも調べてみるといい
filterで狙った色を出す方法は色々あるだろうけど、filter用ジェネレーターと
カラーピッカー使うと便利かも
但し、filterはIEでは動かないので、IE対応したければ別の方法で

あと、質問者は質問者らしい態度で、嘘でもいいから全回答者にへりくだる
ぐらいの勢いで対応しておく方が、懇切丁寧な良い回答が得られやすいと思う

**Name_Not_Found** · 2021/07/31(土) 15:32:23.83

>>36
すいませんでした。
あなたの回答が正解ですよね
ありがとうございました。
もう消えます。

**Name_Not_Found** · 2021/07/31(土) 18:00:34.79

みんなエディタ何使ってる？

**Name_Not_Found** · 2021/07/31(土) 19:13:25.76

vscode

**Name_Not_Found** · 2021/07/31(土) 19:40:16.76

>>37
誤解を恐れずに大雑把に言うと
Vueがフロントエンドを作るためのライブラリとすれば
NuxtはVueありきでサイトを作るためのフレームワーク

HTMLファイルがページの数ぶん存在する普通のサイトにすることも
SPAとすることも出来る

ひとつのvueファイルにHTMLもJSもCSSも書いちゃう
Vueのお作法に慣れると
わりと病みつきになる

**Name_Not_Found** · 2021/07/31(土) 19:44:07.83

>>40
世の中VSCodeなのは分かってはいるけど
Atom使い続けてる…

**Name_Not_Found** · 2021/07/31(土) 20:11:01.58

vscode
去年まではSublimeText3を使ってた

**Name_Not_Found** · 2021/07/31(土) 20:15:30.05

レスポンシブのSPで
・タイトル
・テキスト1
・画像
・テキスト2
の並びを
PCで
左カラム
・タイトル
・テキスト1
・テキスト2
右カラム
・画像
にする方法ってposition: absoluteで画像を飛ばす以外によい方法ありますでしょうか？

**Name_Not_Found** · 2021/07/31(土) 20:32:32.82

>>45
grid

**Name_Not_Found** · 2021/07/31(土) 21:36:46.06

やっぱVSCode多いんだね
自分もそうだけどｗ
>>43
実は今日はじめて触ったｗ
今日から覚えていきます

**Name_Not_Found** · 2021/07/31(土) 23:28:32.97

>>45
flexでorder

**Name_Not_Found** · 2021/07/31(土) 23:54:48.24

>>42
ウェブアプリが作りたいわけではないけどnuxt.jsで静的ウェブサイト作ってみたいなあ
vue.jsから徐々にやっていこうかな

おれもAtom使ってたけどやっぱ起動が重いからVScodeに移ったわ

**Name_Not_Found** · 2021/08/01(日) 00:30:48.80

>>49
以前iMac5K使ってて
Atomの起動遅いなーVSCodeにしようかなー
と思ってたんだけど

リモートワークになってMBP16買ってもらったら
起動速度は気にならなくなって
じゃあこのままでいいかなと

**Name_Not_Found** · 2021/08/01(日) 03:38:29.32

本人消えたのでメモ代わりに書いておくけど、ちょっと気になったので>>8をやってみた
https://jsfiddle.net/cujy1egz/
mix-blend-modeでやるよりも、clip-path使う方がシャギー出ないし、狙った色を
出しやすいね
これだと白抜きというより、白抜きに見える白抜き風の方法だけども

**Name_Not_Found** · 2021/08/01(日) 08:46:40.36

メインはBrackets
vscodeに移行しようとは思うんだがHTMLとCSSメインだとBracketsのライブビューが使いやすすぎる

**Name_Not_Found** · 2021/08/01(日) 09:24:33.83

Atomは開発終了しちゃったし、Bracketsもサポート終了しちゃうけど
かろうじて機能拡張なんかが更新し続けてくれれば･･･と思いつつ
VSCode使ってるけど、久しぶりにAtom起動しようとしたら動かなくて
再インスコしたｗ

**Name_Not_Found** · 2021/08/02(月) 03:27:38.07

Sublime TextがまだMac見捨ててないので使ってる
ありがてぇ

**Name_Not_Found** · 2021/08/02(月) 07:10:20.74

すいません、完全に初心者です。
fc2ブログに自分のツイッターアカウントページに飛ぶTwitterアイコンを追加したいんですが、どうすればいいでしょうか？

https://about.twitter.com/ja/resources/buttons#tweet

ここからできるみたいなんですけど、よくわからないです...
https://twitter.com/5chan_nel (5ch newer account)

**Name_Not_Found** · 2021/08/02(月) 08:30:32.72

>>55
Twitterアイコンをどこかからかダウンロードしてきて
自分のTwitterページのURLコピーして

<a href="URL"><img src="アイコン画像のパス"></a>

でOK

**Name_Not_Found** · 2021/08/02(月) 10:25:31.03

>>56
ありがとうございます！
やってみます！

**Name_Not_Found** · 2021/08/02(月) 11:41:48.76

リンク先の通りの方法でコピペして
書き換えりゃいいだけなんだけどなぁ

**Name_Not_Found** · 2021/08/02(月) 20:24:30.35

imgの下にdrop-shadowをつけて、そのdrop-shadowだけをlotateする方法ってありますか？

imgは固定して、drop-shadowだけ傾けたいです。

**Name_Not_Found** · 2021/08/02(月) 21:15:43.60

>>59
疑似要素で同じサイズのオブジェクトを背面に作ってそっちを変形する

**Name_Not_Found** · 2021/08/02(月) 21:29:03.43

同じ大きさのdiv作って影つけて回転って方法もあるけど
疑似要素の方がスマートかもね
https://jsfiddle.net/u960gsj8/

**Name_Not_Found** · 2021/08/02(月) 21:36:00.37

drop-shadowだから透過png使ってこいう影を少し回したいんじゃないの？
https://jsfiddle.net/wfaue8ho/

**Name_Not_Found** · 2021/08/02(月) 21:57:01.60

どっちにしろ影だけは変形できん

**Name_Not_Found** · 2021/08/02(月) 22:52:55.14

そっちだったか！
ということで、これでどう？
https://jsfiddle.net/qso2cz8j/

**Name_Not_Found** · 2021/08/02(月) 23:17:28.37

質問者が意図した回答じゃないと思うけどかっこいいなそれ

**Name_Not_Found** · 2021/08/03(火) 02:31:37.43

画像を2枚かさねるなら最初からそういう画像作るのはあかんのか

**Name_Not_Found** · 2021/08/03(火) 02:32:12.25

>>64
面白いこと考えるなぁ！

**Name_Not_Found** · 2021/08/03(火) 05:02:15.16

>>64
はー、もうphotoshopもいらねーな、こりゃ

**Name_Not_Found** · 2021/08/03(火) 05:13:28.83

>>66 のimg:last-childのwidthとheightは必要無かったね
filterのbrightnessの数値を上げれば、contrastも要らない

htmlにimg2枚置きじゃなく、疑似要素でやろうと思ったけど
ちょっと上手く行かなかった

**Name_Not_Found** · 2021/08/03(火) 05:13:53.61

失礼。>>64だった

**Name_Not_Found** · 2021/08/03(火) 05:18:57.08

>>66
IEだとfilter使えない問題があるから
2枚用意するのも悪くはないけど、だったら
それらを1枚にまとめてもいいかもね

**Name_Not_Found** · 2021/08/03(火) 06:41:10.87

ie滅びろの気持ちを込めて制作したい

**Name_Not_Found** · 2021/08/03(火) 14:15:20.56

サイトを立ち上げてるんですが参考サイトのhtmlをデロッパツールで見ると
<header id>
<div id>
<div class>
</header>
</div>
</div>
となってます。<header id>と<div id>は理解できるんですが何でdiv classも挟む必要があるんでしょうか？
idはリンク属性を含む要素なので理解できますが、同じdiv id要素にclassをつける意味が分かりません。
SEOの問題でしょうか？

**Name_Not_Found** · 2021/08/03(火) 14:40:27.18

閉じタグの順番おかしいし絶対なんか間違ってる

**Name_Not_Found** · 2021/08/03(火) 14:47:16.30

基本はclassで優先順位を上げたいものをidで分けるんですね、!importantがseoを考えると非推奨なのでidを使ってみます。
使いすぎると読み込みの優先順位で不具合が起こる危険もあると書いてありましたので気を付けます。

<header>
<div id>
<div class>
</div>
</div>
</header>でした、すみません

**Name_Not_Found** · 2021/08/03(火) 15:20:35.94

>>73
優先順位というよりclassは複数に設定できてidはできない、って考えた方がいいよ
優先順位あを基準としてidつけてたら
似たようなスタイルの設定でも複数同じ記述を書かなきゃいけなくなるし
最終的にimportant使いまくりになりそう

**Name_Not_Found** · 2021/08/03(火) 23:35:46.48

classはほとんどCSS用、idはほとんどJavaScript用という感じがする

**Name_Not_Found** · 2021/08/03(火) 23:46:03.23

新しく入った会社のやり方がデザインは外注、コーディングは社内って感じで自分はコーディングやってるけど、
毎回スマホ用のデザインカンプが画面幅600～700pxで作られてるんですが、これって業界内では普通？
PC用デザインとほぼ変わらんじゃんflexで5列横並びになってる要素とかどうすんのよ2列でさえ厳しいのに、みたいな部分がかなり多い

あと少し前までは画面幅最低320pxまではちゃんと崩れないようにする意識でいたんですが、
最近だともう最低375pxまで出来てればいい感じなんですかね？

**Name_Not_Found** · 2021/08/04(水) 00:04:29.26

retina想定してんじゃない？

**Name_Not_Found** · 2021/08/04(水) 00:17:57.56

スマホ用は二倍サイズで作るのが定説
iPhoneメインに320時代なら640、375時代になった今は750で作る
今だとだいたい750で作るのが普通
600～700とかふわっとした数字では作らん

**Name_Not_Found** · 2021/08/04(水) 00:19:48.44

つーか、会社でやってるなら
ここで質問しないで先輩に聞けよ
なんで画像サイズがそれなのか、320は足切りしていいのかとか
会社でフォーマット決まってんだろ

**Name_Not_Found** · 2021/08/04(水) 00:23:41.73

ちゃんとIEも切っていいか確認するんだぞ

**Name_Not_Found** · 2021/08/04(水) 03:51:04.98

>>78
広告系ではカンプの幅は750が多いな
んでコーディングするとき、スマホは全部vwにする

**Name_Not_Found** · 2021/08/04(水) 03:53:32.77

>>83
カンプってのは、実際にサーバにあげてスマホなどから確認をするの？
紙に打ち出したものではなくて？

**Name_Not_Found** · 2021/08/04(水) 04:06:40.97

>>84
気にする客には
ブラウザで見られるようにしてあげることもあるけど

たいていはJPEGでダンプしたやつを
PC見るだけじゃないかなあ、特に代理店は

XDでプレビュー用のを作るのも
2年前は少し流行りかけたけど
今はもうあまりやらなくなってきたね

**Name_Not_Found** · 2021/08/04(水) 04:42:43.64

なるほどそういうことかありがとう
前の会社では「ここは●px、ここは●pxにしてください」みたいに
値指定してるデータを元にしか作ってなかったから知らんかった

幅750pxのものもあったかもしれないけど、688pxみたいなやけに中途半端なモノもあったのは覚えてる
外注先デザイナーが複数いるっぽいから、人によって厳密な指定具合が違うのかもしれないし
会社も制作会社じゃないから詳しい人もそこまで気にしてる人も社内にいないかも

retina想定で750pxのカンプを基にコーディングする際は
要素の横幅とかをpx指定する場合は1/2で考えればいいってことですかね？
カンプ上で左右marginが20pxだったら、コーディングする際のmarginは10px、みたいな

**Name_Not_Found** · 2021/08/04(水) 09:31:31.08

>>86
ピクセルで考えてない
文字サイズも含めて大きさの単位は全部vw

他の業界は知らんけど、自分のところは
スマホの大きさによってオブジェクト間の空きが変わったり、1行の文字数が変わったりするのは
許されんとは言わんまでも、NGくらう率が高いので
全部同じ見た目にしたいから

sassの関数で

@function vw($px: 0, $ww: 750){
@return ($px / $ww * 100)+vw;
}

ての作って
カンプから拾ったピクセル数をvwに変換してる

コーディングの際にあれこれ考えるのも無駄だし
これが一番早くて面倒がないと思ってる

ただ、あくまでSP表示の時の話で
PCの時は普通にpx

**Name_Not_Found** · 2021/08/04(水) 22:06:14.26

<div style="border:Solid 1px #0000ff">
<div>aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>

これを横並びにするにはどうやったらいいですか？

**Name_Not_Found** · 2021/08/04(水) 22:09:25.44

一番外のdivにdisplay:flex;

**Name_Not_Found** · 2021/08/04(水) 23:29:08.20

またはdisplay:grid
両方勉強してどっちが適するか判断するのがベスト

88 · 2021/08/05(木) 00:06:50.52

どっちだよ
はっきりしろよ

**Name_Not_Found** · 2021/08/05(木) 00:09:57.63

>>91
やってみた？

**Name_Not_Found** · 2021/08/05(木) 00:12:36.56

display: inline-block;
ってのもあるで

**Name_Not_Found** · 2021/08/05(木) 00:31:12.51

floatでしょうが

**Name_Not_Found** · 2021/08/05(木) 00:58:14.58

clearfixしないと

**Name_Not_Found** · 2021/08/05(木) 02:32:03.71

>>91
自分だったらflexにする

**Name_Not_Found** · 2021/08/05(木) 03:41:54.33

>>91
どっちでもいいぞ、カッスｗ

**Name_Not_Found** · 2021/08/05(木) 12:25:11.01

>>91は>>88ではない予感

**Name_Not_Found** · 2021/08/05(木) 12:35:21.44

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

**Name_Not_Found** · 2021/08/05(木) 12:45:08.55

bbbのdivにdisplay:flexとalign-items: center;

**Name_Not_Found** · 2021/08/05(木) 19:17:29.65

>>99
たぶん、君は「カエル display flex」で検索すると幸せになると思う
やってみ、俺もそれで育った

**Name_Not_Found** · 2021/08/05(木) 23:23:14.40

>>101
transform、transition、animationあたりも頼む

**Name_Not_Found** · 2021/08/07(土) 13:55:50.39

さっきprogateのHTML/CSSコース終わらせてとりあえずホームページ作ってみてるんだけど、CSSで文字のサイズとか余白とかいじるのって感覚というか慣れしかない感じ？
プレビュー見ながらちまちまいじってみてるんだけどみんなこうやってるのかな

**Name_Not_Found** · 2021/08/07(土) 14:07:21.04

デザインに従うんだから慣れも何もなくね
コーディングしながらデザインしようとしてるなら2年早い

**Name_Not_Found** · 2021/08/07(土) 14:20:02.80

>>104
なるほど、簡単なHPだからなんとなく書きながら考えてたけど一旦別に見た目考えてから書くことにします。
感謝。

**Name_Not_Found** · 2021/08/07(土) 15:01:55.14

一般的な制作会社の制作フローは、
デザイナーがillustratorやphotoshopでデザインを画像で作成して
それをコーダーがhtml/css等でWEBし、
最後にバックエンドエンジニアなんかがサーバーサイドのプログラムやDB回りを連携させる感じ

**Name_Not_Found** · 2021/08/07(土) 15:35:49.67

>>106
なるほど！勉強になります

**Name_Not_Found** · 2021/08/07(土) 22:32:26.66

自分Windowsで書いててChromeでプレビューしてるんですけど、
スマホとかMacとか、Safari、Edge、Firefoxだったらとかっていうのはレスポンシブ対応以上にコーディングでやることってない感じですか？

**Name_Not_Found** · 2021/08/07(土) 23:02:42.23

古いandroidが一番厄介
それと画面が狭いスマホのopera
IEはもうやらね

**Name_Not_Found** · 2021/08/07(土) 23:11:25.36

スマホは実機が手元にあるなら実際に開いて動作は見た方いいよ
ほとんど同じだけどAndoroidとiOSそれぞれ特有の挙動があったりするから
PCと同じ表示がされなくてたまに苦しめられる

**Name_Not_Found** · 2021/08/07(土) 23:11:59.25

Andoroidってなんやねん
Androidや

**Name_Not_Found** · 2021/08/07(土) 23:34:34.28

>>100
それで縦の中央揃えはできたけど
align-items:bottomとやっても下揃えはできませんでしたが
下揃えはどうやるんですか？　

**Name_Not_Found** · 2021/08/07(土) 23:39:46.76

>>108
safariはだいぶやばいぞ
ベンダープレフィクスつけときゃいいだろとナメてるとハゲる

**Name_Not_Found** · 2021/08/08(日) 01:10:20.74

>>112
フレックスアイテムの下揃えはalign-items: flex-end;

align-items - CSS: カスケーディングスタイルシート | MDN

https://developer.mozilla.org/ja/docs/Web/CSS/align-items

**Name_Not_Found** · 2021/08/08(日) 01:18:09.21

デベロッパーツールのエミュレータとか便利だけど、あまり信用しちゃいけない
スマホはせめてsafariだけでも実機確認しとかないと危ない

**Name_Not_Found** · 2021/08/08(日) 02:29:29.29

cssの質問があります。
同じセレクタが何度も出てくるのと、同じプロパティと値ならセレクタ何度も出ていいので
まとめてしまうのはどちらが良いのでしょうか？
エディタのリント？ってのだと、何度も同じセレクタが出てくるのが駄目そうです…

①
h2,
p {
　color: red;
}
h2 {
　...
}
p {
　...
}
②
h2 {
　color: red;
　...
}
p {
　color: red;
　...
}

**Name_Not_Found** · 2021/08/08(日) 03:04:27.38

俺もそれがどっちが良いか、15年ぐらい悩んでるわ
どっちつかずな状態

**Name_Not_Found** · 2021/08/08(日) 03:19:58.88

プロパティをセレクタにかけるのではなく
セレクタにプロパティを記述していくのだから
プロパティが同じでもセレクタで分けるべき
ただ同じプロパティを流用したいというならユーティリティクラスを作ればいい

**Name_Not_Found** · 2021/08/08(日) 04:08:33.82

タグに直接指定するのはやめなされ

**Name_Not_Found** · 2021/08/08(日) 04:22:04.30

シンプルなサイトならタグに直接プロパティ指定してしまう・・・

**Name_Not_Found** · 2021/08/08(日) 09:57:15.95

bootstrapは普通にタグに直接paddingとか文字サイズ指定しててイラっとする
なんで勝手に決めてんだよって

**Name_Not_Found** · 2021/08/08(日) 10:13:10.91

リセットCSS

**Name_Not_Found** · 2021/08/08(日) 10:17:52.42

いくつものセレクタに同じプロパティの値を設定するならカスタムプロパティを使うべきということになるのかな

**Name_Not_Found** · 2021/08/08(日) 10:51:53.64

Scssとかjsでこそ出来た事が毎回遅れてcssだけでも出来るようになってるから
どうせ待ってりゃcssだけで出来るようになるっしょ？とか
画像の遅延ロードとかスマホ用画像のsrc記述とか5Gになれば全部無駄なゴミになるんだよなとか思うとなんもしたくない

**Name_Not_Found** · 2021/08/08(日) 11:54:21.81

>>119
論点はそこじゃねーだろ
揚げ足取ること生きがいにしてんのか？

**Name_Not_Found** · 2021/08/08(日) 12:52:42.00

>>125
横だが
>>118が正解じゃん？
んで、その根底には>>119の考えがあるって事だろ

**Name_Not_Found** · 2021/08/08(日) 13:27:27.96

>>116の例がセレクタでなく全部クラス名だった場合はどう考えるのが適切？

**Name_Not_Found** · 2021/08/08(日) 13:32:49.81

>>127
1はユーティリティクラス

**Name_Not_Found** · 2021/08/08(日) 17:58:31.20

>>127
どっちでもOKだろ
実際は汎用をscssで作ってるのがほとんどだろうな。
結果として②が出力されてるみたいな感じで。

自分は効率的で①が好きだから①。

**Name_Not_Found** · 2021/08/08(日) 19:32:56.56

mixinにするなら1みたいなのもありだな
自分は構造や意味とソースが一致してないと気持ち悪いから極力ユーティリティclassは作らずmixinにする

**Name_Not_Found** · 2021/08/09(月) 12:55:48.42

>>128-130
ありがとう
好みの部分もあるんだね

**Name_Not_Found** · 2021/08/09(月) 22:10:33.11

1つ聞きたいんですが、SCSSを導入する際メンテナンスが面倒なら嫌だなと思ってます

dart sassにサポートが切り替わった際にその前のruby－sassやnode-sassのコードをわざわざ書き換えないといけないんでしょうか？

**Name_Not_Found** · 2021/08/09(月) 22:15:59.80

いけないかもしれない

**Name_Not_Found** · 2021/08/10(火) 16:45:49.06

それでもscssはやったほうがいいよ
環境変化めんどいことなってもいざとなったら出力されたソースを運用すればいい

**Name_Not_Found** · 2021/08/13(金) 18:42:39.05

初歩的すぎることかもしれないですけど失礼します
HTML LSではインライン要素の中にブロック要素入れても問題ないですよね？？？
あと、例えばaみたいな既定でdisplay: inlineの要素をdisplay: blockにするのも問題ないですよね

**Name_Not_Found** · 2021/08/13(金) 18:46:51.63

連投失礼
色を#F00みたいな感じに省略して書くのってまずかったりしますか？

**Name_Not_Found** · 2021/08/13(金) 19:21:48.31

display属性は何が何の中に入っててもいいよ
入れ子にできるかどうかはタグによって決まってる
無くなったのはHTML4までのタグごとのブロックレベルとかの分類

**Name_Not_Found** · 2021/08/14(土) 00:44:11.18

displayは後期になって設定盛りすぎよな

**Name_Not_Found** · 2021/08/14(土) 02:03:01.90

>>135
インライン要素の件はHTML5なら問題なし。
でも感覚として、divをemタグで囲うような事はやめて欲しいが
displayは問題なし

**Name_Not_Found** · 2021/08/14(土) 02:04:16.61

>>136
まずくないよ

**Name_Not_Found** · 2021/08/14(土) 02:06:13.33

>>139
感覚としてじゃなくてemにdivはふつうに違反だよ

**Name_Not_Found** · 2021/08/14(土) 09:38:13.59

皆ありがとうございます〜

**Name_Not_Found** · 2021/08/14(土) 10:26:12.83

>>141
そうかすまない。
結局aタグだけがインライン要素の概念変わっただけで、
他は結局は言い方だけ変わって実はブロックレベル／インラインと同じ・・？

**Name_Not_Found** · 2021/08/14(土) 11:26:51.09

>>143
細かく見ていくとa以外にもネストできるようになったもの、できなくなったものがある
divとemがたまたまhtml4のそれと同じなだけで
ブロック要素とインライン要素という概念自体が消滅して
これにこれは入れられる、という関係性がそれぞれ独立して存在する感じ

チートシート貼っておく
https://yoshikawaweb.com/element/

**Name_Not_Found** · 2021/08/14(土) 12:15:24.26

>>144
おおお、素晴らしい、、

**Name_Not_Found** · 2021/08/14(土) 19:18:41.47

チートシートいいね！もっと広めるべき
https://coliss.com/articles/build-websites/operation/css/css-grid-cheat-sheet-by-learnpine.html

**Name_Not_Found** · 2021/08/14(土) 22:04:27.77

flex-boxのチートシートはないのかと聞いておる

**Name_Not_Found** · 2021/08/14(土) 22:20:21.38

>>147
検索すればまさにのものが出てくるだろ

**Name_Not_Found** · 2021/08/14(土) 23:07:37.15

>>147
>>146のリンク先の下の方に

**Name_Not_Found** · 2021/08/15(日) 01:35:39.54

そういやaとemってどっちが先とかあるん？
いつもaの中にemやspan入れちゃってるけど
外の方がいいの？

**Name_Not_Found** · 2021/08/15(日) 09:46:38.78

息子はお父さんには成れるがお父さんは息子には戻れないんやで

**Name_Not_Found** · 2021/08/15(日) 10:10:14.73

>>150
言っている意味がわからない
<a>あああ<span>いいい</span>ううう</a>
みたいな例なら全体がリンクならspanを先も何も無い
<a><span>あああいいいううう</span></a>
みたいに装飾目的で使っている場合は「装飾も含めてリンク対象か」を考えればいい
意味もなくemやspanを入れているならコーディング辞めたほうがいい

**Name_Not_Found** · 2021/08/15(日) 11:10:14.66

リンクにした文字列を装飾するか→ <span><a>あああ</a></span>
装飾した文字列をリンクにするか→ <a><span>あああ</span></a>
みたいに、aとspanのどっちを入れ子にするのか？って話じゃないの？

**Name_Not_Found** · 2021/08/15(日) 11:19:08.87

お父さんはお母さんにはなれないって事だろ

**Name_Not_Found** · 2021/08/15(日) 11:34:15.07

文字列を装飾するだけならaだけでいいだろう

**Name_Not_Found** · 2021/08/15(日) 11:34:58.14

怪文書をエスパーするのもめんどくさいからaが親でいいよ

**Name_Not_Found** · 2021/08/15(日) 17:32:23.52

お父さんも女装するだけで女になれる

**Name_Not_Found** · 2021/08/15(日) 20:58:50.15

imgやiframeなどsrcではない要素で
スマホではロードさせたくないdivなどがある場合、
どのような対応方法がありますか？(非WordPressで)

**Name_Not_Found** · 2021/08/15(日) 21:29:45.98

PHPで出し分ける
PCのみjsでDOMを生成する

**Name_Not_Found** · 2021/08/16(月) 12:48:47.12

>>159
ありがと
phpはライブラリだろうしjsはjsのソースに書かなきゃいけないし
めんどくさい方法しかないよね

**Name_Not_Found** · 2021/08/16(月) 13:31:24.21

ライブラリが必要なほどではないが
スマートフォンかどうかの判定が単純にブレークポイントじゃない場合多少めんどくさい

**Name_Not_Found** · 2021/08/16(月) 15:52:10.81

ん？phpならUA判定が最もラクそうだが
ブレークポイント判定もラクにできるん？

**Name_Not_Found** · 2021/08/16(月) 16:21:04.59

すまんブレークポイントの場合はだ

**Name_Not_Found** · 2021/08/16(月) 18:11:42.20

そうなんだな。
気が向いたら教えてね

**Name_Not_Found** · 2021/08/16(月) 20:20:42.45

会社のHPを任されているのですが、
わからないので質問してもよろしいでしょうか?

**Name_Not_Found** · 2021/08/16(月) 20:24:36.41

このスレは質問していいですか？っていう質問までは受け付けていないので
どうぞご自由に質問なさってください

**Name_Not_Found** · 2021/08/16(月) 20:47:20.94

わかりました。質問しますね

**Name_Not_Found** · 2021/08/16(月) 21:30:41.64

現在、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に変更することで配置を変更できるのでしょうか?よろしくお願いします。

**Name_Not_Found** · 2021/08/16(月) 21:56:24.89

スマンがPC表示で何がどう配置されているかスマホでどう配置したいのかが全く分からん・・・

**Name_Not_Found** · 2021/08/16(月) 22:01:58.74

tableの直接の子にdivは置けないのでhtml構造を見直しましょう

**Name_Not_Found** · 2021/08/16(月) 22:31:24.32

Bootstrap でも使えば？

**Name_Not_Found** · 2021/08/16(月) 22:48:42.29

168です。
説明不足で申し訳ない
説明出来なかったのでパワポでイメージ図を作成しました。
1枚目から2枚目のように変更したいのですが、
Tableタグだとできないのでしょうか?
お願いします。
https://imgur.com/uIz4UjG
https://imgur.com/EeldZlS

**Name_Not_Found** · 2021/08/16(月) 23:07:22.16

>>170が言うように>>144のチートシート見て構造見直して
tableは表を作るものなんで
https://developer.mozilla.org/ja/docs/Web/HTML/Element/table

mainで大枠くくってそこにdisplay:flex;にするとサイドバーとコンテンツが横並びになる
https://developer.mozilla.org/ja/docs/Web/CSS/flex-direction

その画像見た感じだとHTMLの書き方の一例としてはこんな感じになると思う
https://jsfiddle.net/z30yu9ph/

**Name_Not_Found** · 2021/08/16(月) 23:43:44.20

>>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による配置変更は可能でしょうか?

**Name_Not_Found** · 2021/08/17(火) 00:07:37.46

それでひと纏まりになってるからtableの中身は無理じゃね
クラスaのdivと他の纏まりが横並びになっているのを縦にするのはflexでできるけど
orderってのはflexとかgridでの並び順を変えるプロパティだよ

**Name_Not_Found** · 2021/08/17(火) 00:33:04.66

みんなよくこの説明でわかるな
エスパー能力高すぎだろ

**Name_Not_Found** · 2021/08/17(火) 01:36:15.33

>>174
flexでorder使って入れ替え可能なのは子要素までで、孫要素にorder設定しても入れ替え不可
>>174のtableの場合、tableにdisplay: flex;なら、孫のtdの中のdivにorder設定しても入れ替えられないけど
子のtrにorder設定で入れ替え可能
>>172の画像の内容だと、入れ替え可能かどうかはtableの構造次第

**Name_Not_Found** · 2021/08/17(火) 02:13:02.41

とりあえず、こういうのだったらイケるな
https://jsfiddle.net/maqw95o8/

**Name_Not_Found** · 2021/08/17(火) 02:19:52.38

trやtdをdisplay:contentsとかにしてもorderというかflex-item伝播しないかね

**Name_Not_Found** · 2021/08/17(火) 03:48:02.71

>>179
display: contents; 初めて使ったけど、便利だね
https://jsfiddle.net/usaL1y0p/

**Name_Not_Found** · 2021/08/17(火) 12:29:24.39

なんかよくわからない現象で困ってます
<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最新版です

**Name_Not_Found** · 2021/08/17(火) 12:55:59.57

よく読んでないけどfont-sizeとline-heightを0にしたら

**Name_Not_Found** · 2021/08/17(火) 13:19:02.65

>>181
変わらないけど？
もしかして高さ変わってスクロールバーの有無？

**Name_Not_Found** · 2021/08/17(火) 13:46:31.49

>>183
それだ

**Name_Not_Found** · 2021/08/17(火) 15:52:02.10

>>180
横だが　display: contents;　いいね
自分も知らなかったのでありがたい

**Name_Not_Found** · 2021/08/17(火) 16:04:02.97

179だけど
コード的に親タグが必須なもの（ul, dl, fieldset, それこそtableなど）を
どうにかレスポンシブに組み替えなければいけないけど
元のソースは編集してはいけないみたいな限定的な状況で悪戦苦闘した時に見つけたんやったわ
便利だけどどうしても使わないと無理な場面は滅多にない

**Name_Not_Found** · 2021/08/17(火) 16:32:04.38

display: contents;自分も知らなかった・
css2の頃は知らないほぼなかったのに
最近はそんなのいつできたん？みたいのが次から次と出てくるんだが

**Name_Not_Found** · 2021/08/17(火) 19:22:37.01

スマホ対応でgridなんかをいちいち書き換えず横着できそう

**Name_Not_Found** · 2021/08/17(火) 23:36:57.33

HTML上は構造化しておいて、動作上はdisplay: contents;で構造化を解除？して
入れ子になってた要素を、gridアイテムとかにして並べ替えたりできるってことか

**Name_Not_Found** · 2021/08/18(水) 19:57:25.81

ttps://www.aicrowd.com/challenges/flatland

1.　↑のページをパソコン（高解像度）で見ると、上のタイトルが左端にめり込んで表示されますが自分だけでしょうか？
2.　その場合、CSSのマージンの設定かあたりが影響してるんでしょうか？

**Name_Not_Found** · 2021/08/18(水) 21:41:46.20

高解像度ではなく低解像度ででは
高解像度モニターではウィンドウの最大化を解除して幅を小さくしていくとそのうちめり込んでいく
ページ側で横幅が強制的に何百ピクセルかは確保されるようにしてるせいで入り切らないのであろう

**Name_Not_Found** · 2021/08/19(木) 15:32:02.87

これいいね

iOSでアドレスバーがあっても高さいっぱいに表示するCSSのテクニック
https://coliss.com/articles/build-websites/operation/css/css-cover-the-entire-height-of-the-screen.html

**Name_Not_Found** · 2021/08/19(木) 20:30:52.26

>>192
さんくす。意味が分からんかったが、この図を見たらわかったわ
https://coliss.com/wp-content/uploads-202003/2020091111-02.png

**Name_Not_Found** · 2021/08/20(金) 13:48:41.59

iOSめんどくさいな(´･ω･`)

**Name_Not_Found** · 2021/08/20(金) 15:29:15.88

うちは無謀にもiOSはサポート外としてる

**Name_Not_Found** · 2021/08/20(金) 15:36:05.36

すげー強気な姿勢が羨ましいな
IEや旧Androidブラウザのサポートを断るのでも苦労したよ
主に社内の上長に対して

**Name_Not_Found** · 2021/08/20(金) 15:36:14.07

サイトへのアクセスが7割以上がスマホで、iOSシェアが高いこの時代に
なかなか無謀ですな

**Name_Not_Found** · 2021/08/20(金) 19:54:34.57

次はGoogleChromeもサポート外にする予定

**Name_Not_Found** · 2021/08/20(金) 21:03:46.63

６割を占めるメインボリュームをサポート外にするかっ

**Name_Not_Found** · 2021/08/20(金) 22:42:39.45

閲覧者は全部サポート外