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/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にする