X

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

■ このスレッドは過去ログ倉庫に格納されています
2021/04/08(木) 08:48:14.74ID:???
ここは初心者からベテランまで、全ての人を対象に優しく答えるスレです
類似質問、重複質問、丸投げ大いに結構。HTML / CSS 関係の事なら何でもOK
分からない人は何回聞いても結構。
質問するときはIDを出すためにメール欄を age にすることをおすすめします。
回答してくれる方は優しい人のみ！　質問者に対して暴言を吐く人はこのスレを見るな！！
終わった話を蒸し返すやつは このスレにくるな！！！
自分で調べろという回答も禁止！！回答するかさもなくば何も書き込むな！！
質問側も節度あるレスで！質問前にスレ内を検索しましょう

■次スレについて
基本的にレスナンバー>>980を取った人（立てられない場合は次の宣言者）が立てて下さい
重複を避けるため、独断でスレ立てはせず必ず意思表示をしてから立てて下さい（>>980を取った場合も）
立てられない事が予め分かっている場合は、>>980付近の書き込みは自重しましょう

■前スレ
HTML/CSS のどんな質問にも優しく答えるｽﾚ 45
https://mevius.5ch.net/test/read.cgi/hp/1601474123/
HTML/CSS のどんな質問にも優しく答えるｽﾚ 46
https://mevius.5ch.net/test/read.cgi/hp/1608967433/

■関連スレ
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
2021/05/28(金) 20:41:32.81ID:???
>>360
Good job.
I surprised that Even yellow fool monkey like you can understand it.
2021/05/29(土) 14:58:25.50ID:???
VSCode の拡張機能、open in browser では、ローカルファイル・アクセスだから、CORS 制限あり
file:///C:/Users/Owner/Documents/test.htm

一方、Live Server では、サーバーを立てているから、CORS にならない
http://127.0.0.1:5500/test.htm

同様に、コマンドプロンプト・PowerShell から、
1-liner で、Ruby で作られた遅いウェブサーバー、WEBrick を起動すると、
ruby -run -e httpd . -p 8080

これも、サーバー経由だから、CORS にならない
http://localhost:8080/test.htm

Ruby on Rails では、Node.js のwebpack-dev-server を使っている
2021/05/29(土) 15:25:37.82ID:???
>>353
これでも嫁

Flexboxを使うなら知っておきたい「flexアイテム」の幅の計算方法
ttps://parashuto.com/rriver/development/how-flex-item-width-is-calculated
364Name_Not_Found
垢版 |
2021/05/30(日) 12:30:10.76ID:wal/WiYr
https://developer.mozilla.org/ja/docs/Web/CSS/:empty#browser_compatibility
ブラウザーの互換性の箇所に書かれている数字はなんでしょうか？
chrome 1となっていますが、最初のバージョンから対応しているという意味になりますでしょうかな(´・ω
2021/05/30(日) 14:06:51.93ID:???
イエス
366Name_Not_Found
垢版 |
2021/05/30(日) 19:36:50.20ID:wal/WiYr
>>364
arigatou
367Name_Not_Found
垢版 |
2021/05/31(月) 18:43:33.04ID:qQ6wXCDd
http://newpuru.doorblog.jp/
このサイトのフィードってjavascriptのみで構築されているんでしょうか？
だってlivedoorブログのドメインなので、phpは使えないはずですす
2021/05/31(月) 19:18:23.03ID:???
今、書籍を見ながら仮のウェブページを作っています。
レスポンシブに対応させるべく、viewportの設定ををしています。
head内に下記のmeta タグを追加しましょうと書いてますが、head内ならどこに書いても構わないですか？

<meta name="viewport" content="width=device-width, initial-scale=1">
2021/05/31(月) 19:35:44.02ID:???
聞く前に手を動かせ、困ってから質問しろ

と、俺もここでよく言われたわ
2021/05/31(月) 19:42:28.65ID:???
>>368
構わんし
なんならinitial-scaleもいらん気もする
少なくとも自分は書かん
2021/05/31(月) 19:44:35.71ID:???
>>368
できるだけ早めに読み込まれるように、なるべく上の方に書け
372368
垢版 |
2021/05/31(月) 19:50:09.49ID:???
>>370
>>371
ありがとうございます
2021/05/31(月) 19:56:27.03ID:???
>>372
これでも嫁

最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
ttps://coliss.com/articles/build-websites/operation/work/html-boilerplate-by-mmatuzo.html
2021/06/01(火) 02:33:55.18ID:???
そういやinitial-scaleとか書かなくなったなぁ
375Name_Not_Found
垢版 |
2021/06/02(水) 02:22:52.89ID:u9GtWXB2
html、cssの基本的な事は大体理解しました。
しょぼいhpくらいなら作れるようになりました。
そこで、もっとカッコいいhpを作りたいのですが、どの様な本を参考にしたら良いか
量が多すぎて分かりません。
お勧めの参考書があったら教えて下さい。
2021/06/02(水) 03:30:32.51ID:???
<section>
　<h2>
　　<div class="contentes">

<section>
　<div class="contentes">
　　<h2>

この2つ、いつも書き方が迷うんだけど
div.contentsってあったほうが良いの？
2021/06/02(水) 03:32:29.16ID:???
h2にdivは入れられません
2021/06/02(水) 04:12:15.24ID:???
え？まじで・・・
たしかに前者でいつもやってきたけど、
section枠の中にdiv枠作って・・見出し、ってのができないのか
2021/06/02(水) 05:48:06.38ID:???
contentsな
2021/06/02(水) 06:47:47.41ID:???
>>376
タグを閉じないのか？
2021/06/02(水) 06:51:02.64ID:???
>>375
まずどういうサイトを作りたいのか、プランを煮詰める

今ある知識で可能な範囲でサイトを組む

今ある知識ではできないことを洗い出す

自分に足りないことを調べる、勉強する
2021/06/02(水) 08:34:42.65ID:???
>>380
いや、あくまで出だしの差を書いただけだからタグは当然閉じるよ
2021/06/02(水) 09:02:24.35ID:???
displayとpositionが難しいでしゅ
2021/06/02(水) 09:03:19.33ID:???
>>376
div先だと文句言われるぞ
2021/06/02(水) 09:43:43.46ID:???
>>378
いやだから
h2の中にdivは入れられない
divの中にh2は入れられる
h2の中にdiv入れても表示はされるけどコードとして間違ってる
そういう時はh2の中にspan入れてdisplayをblockにするンだわ
2021/06/02(水) 10:24:51.94ID:???
htmlとcssの用語、タグの意味を体系的に図解してあるサイトはありますか？

ちなみに自分はプログラマで、htmlはいじりだしてから20年くらいになりますが、
今風のサイトを自分で作れるようになりたいんです。
387Name_Not_Found
垢版 |
2021/06/02(水) 11:35:19.75ID:cpLdM8tk
メインカラムとサイドバーの余白の指定ってどうしてますか？
pcとスマホのレスポンシブを考えた場合、margin-right:16px;みたいな、ピクシェルでの指定はしないほうがいいのでしょうか？
スタンダードを教えて下さい。
2021/06/02(水) 11:47:53.71ID:???
>>368
VSCode で、! と入力すると、emmet が働いて、以下のように展開される

<!DOCTYPE html>
<html lang="ja">
<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>
</head>

<body></body>
</html>
389Name_Not_Found
垢版 |
2021/06/02(水) 11:56:34.14ID:cpLdM8tk
>>387
例えば自分は8の倍数ルールでデザインしているのですが、
この場合、余白をピクセル指定をしないと8の倍数とはならないわけですよね。
2021/06/02(水) 13:20:47.00ID:???
>>386
MDN

HTML
https://developer.mozilla.org/ja/docs/Web/HTML

CSS
https://developer.mozilla.org/ja/docs/Web/CSS
2021/06/02(水) 14:11:46.77ID:???
よく考えたら高解像度モニタが普及してきてブラウザ表示領域を縦長
例えば1280x1600にして使ってるような人もいると思うんだけど
この手の人を考えて書くことあります？
トップページを100vwx100vhで決め打ちしちゃうとき困ることもあると思うんだけど
2021/06/02(水) 14:35:49.87ID:???
>>391
無視してる
2021/06/02(水) 15:08:34.83ID:???
ガン無視だな
394Name_Not_Found
垢版 |
2021/06/02(水) 15:13:20.21ID:mMs5M0FT
質問させていただきます。
HTMLでできるのかJavaScriptでできるのか分からないのですが
webサイト上の新しいリンクをクリックした時にGoogle Chrome指定で開くことってできますか？
2021/06/02(水) 16:46:43.89ID:???
>>392
>>393
ガン無視了解です
ありがとうございました
396Name_Not_Found
垢版 |
2021/06/02(水) 17:23:19.21ID:cpLdM8tk
marginのpx指定というのは使わないでサイトを構築したほうがいいのでしょうか？
2021/06/02(水) 18:00:40.58ID:???
8の倍数だのpx指定だの、便利かどうか慣れてるかどうかなんて人それぞれだから
個人サイトだったら好きにしろ
398Name_Not_Found
垢版 |
2021/06/02(水) 18:06:12.61ID:+UhZwpA/
Swiperに関しての質問でも大丈夫でしょうか?
他スレありますか?
2021/06/02(水) 20:53:24.13ID:???
>>398
内容によるけど、スクリプトに関してなら他にも色々

Webサイト制作初心者用質問スレ part252
https://mevius.5ch.net/test/read.cgi/hp/1595561376/
+ JavaScript の質問用スレッド vol.121 +
https://mevius.5ch.net/test/read.cgi/hp/1410603104/
+ JavaScript の質問用スレッド vol.123 +
https://mevius.5ch.net/test/read.cgi/tech/1491143438/
2021/06/03(木) 21:10:57.22ID:???
class="hero"
って何の名残？google的には現代でも意味があるクラス名？
2021/06/03(木) 21:15:47.26ID:???
>>400
Bootstrapがで始めた頃
キービジュアルになるような大きなバナーにheroってクラス名がついてたのを真似したのの名残り

今のBootstrapでは使われてない
2021/06/03(木) 21:16:43.25ID:???
あとクラス名なんてGoogle先生にはなんの意味もない
2021/06/03(木) 23:03:57.48ID:???
>>401
そうなんだ、ありがとう
テンプレートに使うクラス名の付け方って難しいわ・・
1語、2語とか、これで本当にいいのか悩んでしまう
2021/06/03(木) 23:20:59.73ID:???
>>400
メインビジュアルの別名をヒーローイメージという
2021/06/03(木) 23:59:44.42ID:???
hogehoge
foo
406Name_Not_Found
垢版 |
2021/06/04(金) 10:06:49.01ID:lbnE/1sX
スマホ、iPhoneの背景全画面のcssがうまく行かず悩んでいます。
リロードするとうまくいくのですが
初回は必ずbackgroundcolorの色が下部の足りない部分に出てきてしまいます。
2021/06/04(金) 17:52:29.57ID:???
文字だけじゃわからないか、一眼レフで状況がわかる様子のモニターを撮影してアップロードして
408406
垢版 |
2021/06/04(金) 18:22:43.16ID:lbnE/1sX
サイトのURL貼ってもいいですか？
2021/06/04(金) 18:23:32.09ID:???
>>406
100vhじゃいかんの？
実際には初期ビューより少し長くなっちゃうけど
2021/06/04(金) 18:23:49.75ID:???
>>408
かもん
411406
垢版 |
2021/06/04(金) 19:44:54.20ID:lbnE/1sX
https://shirakedo.com/news.html
https://shirakedo.com/discography.html
のiPhoneXRサファリでみた時のページになります。
スクロールすると下部が黒（background）になります。
リロードすると治ります。
height:100vh;したりといろいろいじってしまい
スッキリしないコードになってる気もしますが・・・
2021/06/04(金) 19:52:14.30ID:???
下部ってナビゲーションバーのこと？これ半透明の黒でいいんじゃないの
background: rgba(0, 0, 0, 0.85);　指定されてるけど
413406
垢版 |
2021/06/04(金) 19:57:08.32ID:lbnE/1sX
>>412
newsページでいくと
.news {
background: url(../img/news-vertically.jpg) #000 no-repeat center center ;
ほにゃらら
｝
の#000が画面をスクロールするときに表示されてしまいます。
分かりづらいので＃FFFに変更しておきますね。
2021/06/04(金) 20:04:05.67ID:???
>>411
これは？

CSSでheight: 100vh;を定義したのに、iOSのスマホで高さいっぱいに表示されないのを解決するCSSのテクニック

ttps://coliss.com/articles/build-websites/operation/css/css-fix-for-100vh-in-ios.html
415406
垢版 |
2021/06/04(金) 20:08:27.09ID:lbnE/1sX
>>414
解決しました！ありがとうございます！
本当にありがとうございます！
416406
垢版 |
2021/06/04(金) 20:18:14.98ID:lbnE/1sX
すみません、解決してないっぽいです。
2021/06/04(金) 20:24:59.91ID:???
ああ〜自分iPhone持ってないから借りて見たらこういう事か
iPhone8のsafariで見ると背景の高さを内の要素が超えてる事になってるね
firefoxだと大丈夫だ
418406
垢版 |
2021/06/04(金) 21:08:33.98ID:lbnE/1sX
>>417
アンドロイドもあるのですがfirefoxとchromeでは大丈夫でした。
iPhoneのサファリのみ表示がおかしくなります。
2021/06/04(金) 21:22:12.89ID:???
safariはねー
いろいろあるよねー
ユーザー多いから無視できないという(´･ω･`)
2021/06/04(金) 21:26:03.23ID:???
>>418
iOS Safariでbackground-attachment:fixedが効かない不具合
https://shanabrian.com/web/html-css-js-technics/css-ios-safari-bug-background-attachement-fixed.php
2021/06/04(金) 23:26:57.20ID:???
background-attachment:fixedはiOS SafariどころかMacOSのほうでも
ずっと未対応なだけであって、別に不具合ではない
Appleがクソなことにかわりはないけどね

https://caniuse.com/mdn-css_properties_background-attachment_fixed
2021/06/05(土) 00:42:55.15ID:???
うわーん、pタグのmargin-bottomとその下のh2のmargin-topが重なってしまう・・・
どうすれば良いの？
2021/06/05(土) 01:17:36.63ID:???
>>422
とりあえず「CSS margin 相殺」で検索
2021/06/05(土) 02:05:01.03ID:???
padding
2021/06/05(土) 09:07:12.56ID:???
ありがとう、理解できた。
透明なhr挟んでも良いのか。

統一性を持たせようとしても、チマチマ修正して破綻しそう
2021/06/05(土) 22:33:15.24ID:???
>>411
iPhoneで見てるだけなのでコードは読んでないのだけど
背景用にdiv.bgを用意して

position: fixed;
height: 100;
background-size: cover;

とするのはどうだろう
Safariに限らずbackground-attachment: fixedは昔みたいに機能しなくなってきてるから
自分はもう使わなくなってる
2021/06/05(土) 22:34:41.00ID:???
>>425
だからみんな
マージンは片方だけ使うようになっていくのだと思う
2021/06/06(日) 03:38:20.30ID:???
>>423
やっぱ初心者はマージンの相殺で躓くよなｗ
2021/06/06(日) 04:36:03.74ID:???
上だけ使う派？
下だけ使う派？

でも、結局その親タグのpaddingの世話になるかしないとダメよね
俺は上だけ派
2021/06/06(日) 13:04:15.91ID:???
上が無難だと思ってる
＋使って、何かと自分の間って書くことが多いな
2021/06/06(日) 13:05:07.81ID:???
>>428
あとマージンの飛び出しも
この仕様は誰が得するのかいまだにわからん
2021/06/06(日) 16:15:47.47ID:???
>>431
初期設定の段階での敢えてそうしたのか漏れなのか
でも今更仕様変更されたら阿鼻叫喚になる図しか見えない
433Name_Not_Found
垢版 |
2021/06/06(日) 18:50:48.69ID:+MtbuAp7
上から写真、テキストのカードリストを横に3つ並べるデザインがあって、スマホサイズにした時カラムで縦に並ぶようにしたんだけど横幅が100%にならずに小さく真ん中に縦方向に並んでしまう……なんでだろう？？
2021/06/06(日) 19:24:53.54ID:???
formタグの要素の順番は変わってもいいですか？
<form action='foo.php' method='post'> …
と
<form method='post' action='foo.php'> …
などで
2021/06/06(日) 21:14:06.81ID:???
>>429
何に対するマージンなのかを考えるとたいてい左と上になるな
2021/06/07(月) 01:10:01.96ID:???
マージンの相殺はほんと意味わからん仕様よな
どういう理論やねん
2021/06/07(月) 05:41:10.27ID:???
先輩ワイ、div内のpaddingと中にあるタグのmarginの使い分けを聞かれ沈黙

その後、咄嗟に「これは宗教だから好きにしてok」と返答したわ
2021/06/07(月) 07:18:54.22ID:???
そいえば昔（10年くらい前）
paddingはなるべく使うな
なるべくmarginでどうにかしろ
ってルールの仕事があったわ
理由聞いとけばよかった
2021/06/07(月) 09:35:02.91ID:???
でもpaddingあるほうが、見出しの背景色には便利じゃ無い？
440406
垢版 |
2021/06/07(月) 18:40:00.46ID:iZ97Rio5
みなさんありがとうございます。

>>426
おっしゃるとおりbackground-attachment: fixedはあまりうまく動かないようですね。
とりあえず
display:block;
でしのぐことにしました。
2021/06/07(月) 23:55:16.02ID:???
>>438
あーそういう指導するサイトもあった
あれなんなんだろうな
box-sizing概念ない時代だからな
2021/06/08(火) 00:09:12.50ID:???
今現役の人に聞きたいのですがfloatって使いますか？
2021/06/08(火) 00:14:55.26ID:???
そりゃflexより使いやすいときあるからな
箱に並べるだけがfloatじゃ無いし
2021/06/08(火) 00:23:28.95ID:???
ありがとうございます。
今勉強中でfloatは現場ではもう使わないと聞いたので不安になって質問させてもらいました。
2021/06/08(火) 00:49:43.02ID:???
たまにfloatも使うというルールにするより
使わないというルールにしているのは良いと思うよ
そんなに気にしないで良い

今の子は良いな、float知らなくても食べていけるんだから(食べられるとは言ってない)
2021/06/08(火) 01:21:40.44ID:???
>>442
必要なら
2021/06/08(火) 01:23:58.43ID:???
floatの本来の使い方の回り込みは
float使わにゃならんし

レイアウト目的で使うのか？という質問なら
ほぼないんじゃない？
flexとgridで大体なんとかなるじゃろ
俺らが20年間ずっと欲しいと思ってきた機能の集大成だし
2021/06/08(火) 01:53:01.67ID:???
20年片手間にやってきたけど、grid知らねぇ・・・
2021/06/08(火) 03:23:55.97ID:???
IEさえ駆逐されればgridの時代がやってくる
2021/06/08(火) 03:24:29.51ID:???
>>448
20年やってたならあれだ
昔懐かしいテーブルレイアウトみたいな感じよ
2021/06/08(火) 03:33:58.55ID:???
> 俺らが20年間ずっと欲しいと思ってきた機能の集大成だし
そういう声が多いからflexが作られたのだ
2021/06/08(火) 05:38:59.18ID:???
>>450
なにぃ、1pxのspacer.gifはもういらねぇってのかい？
2021/06/08(火) 05:52:44.80ID:???
>>452
うむ
今はtdのheightで空間を空けるのがナウい
2021/06/08(火) 08:11:17.29ID:???
float の用途は新聞とか本でみかける、テキストに写真や図表を入れるレイアウトが本分だよな
今どきそんなレイアウトをWebで使うことはほぼないけど
2021/06/08(火) 09:05:04.57ID:???
PCビューではそのやり方はまだまだ使うけど、
もしかして俺が知らないだけ？

それをレスポンシブでwidth:100%にして文の上か下に画像が来るようにしているわ
2021/06/08(火) 09:12:10.26ID:???
599px以下はレスポンシブでスマホ用、それ以外はwidth:960px用のPC用という扱いだけど、
これだとタブレットの縦が、一部の幅になってしまう。
width=deviceなんとかの影響だと思うけど、このタブレットの時はwidth=960pxみたいなのってmetaタグにできる？
wordpressのheader用phpだけど、ifとかいる？javascriptとかでするの？
2021/06/08(火) 11:35:31.66ID:???
Word Press のスレで聞けば？
2021/06/08(火) 11:41:55.26ID:???
>>448
そのレベルの古参ならgridはめちゃフィットするはず

当時のテーブルレイアウトであれこれやって
バッドノウハウとして腐れてた経験が
今になって活きる
2021/06/08(火) 11:56:24.83ID:???
この世界は定期的に勉強してないとどんどん変わるから浦島太郎よｗ
10年後のWEB界隈はどうなってるのか想像もつかない
2021/06/08(火) 12:17:30.65ID:???
最近はスマホの普及によるレスポンシブ対応で進化早いように思えたけどここから先はそんなに変わらないんじゃないかな
レイアウトで言えばもう印刷物並みのデザインができるようになったからね
動画を組み込める分だけ印刷物を超えたかもしれない
今はもうCWVとかそういう改善に目を向けられているように思う
■ このスレッドは過去ログ倉庫に格納されています
5ちゃんねるの広告が気に入らない場合は、こちらをクリックしてください。