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/09/19(日) 08:07:35.41

できるよ

**Name_Not_Found** · 2021/09/19(日) 08:39:27.80

まじで？
ulの上にflexではなく、ul単体に書いていける？

**Name_Not_Found** · 2021/09/19(日) 09:15:42.50

>>472
ためせばええやろ
https://jsfiddle.net/onahuyp1/

**Name_Not_Found** · 2021/09/19(日) 09:22:13.83

>>473
君はまずマークアップ言語じゃなくて日本語を正しく使えるようにしよう

**Name_Not_Found** · 2021/09/19(日) 10:22:50.24

>>474
、
>>473は結局中央寄せできてるよね？
それだけでええやろ

**Name_Not_Found** · 2021/09/19(日) 10:23:21.81

>>473
後出しですまん、確かにwidth指定したらいけるんだけど、
コンテンツによっては左寄りになったり段落ちするから可変でできるかなと
上にwrapperで囲ってflexしかないか

**Name_Not_Found** · 2021/09/19(日) 10:31:16.28

>>476
どんな構造かしらんが
要するにulだからどうこうとかは無いって事さ。
divもulも同じだって事。
可変ならwidth:*%とかいくらでも方法あるが
んな複雑な構造ならflexでガチガチに固めたほうが安心でしょう

**Name_Not_Found** · 2021/09/19(日) 10:47:13.71

>>476
max-width:100%とwidth:固定値はどう？
flexが手軽だけど

**Name_Not_Found** · 2021/09/19(日) 11:32:37.96

たまに子要素のtop-marginが親要素に反映させちゃうことない？
親要素にoverflow hiddenしたら解決するのだけど、
hiddenできない時もあるし、メカリズムがわからない

**Name_Not_Found** · 2021/09/19(日) 12:11:36.03

メカリズム・・・

**Name_Not_Found** · 2021/09/19(日) 12:59:55.86

>>476
wpapperにtext-align centerで
ulをdisplay inline-blockじゃダメ？

**Name_Not_Found** · 2021/09/19(日) 13:04:07.59

>>479
marginの相殺じゃない

**Name_Not_Found** · 2021/09/19(日) 13:34:52.02

>>476
もしIEのこと考えなくていいなら
width: fit-contentかmax-contentは？

**Name_Not_Found** · 2021/09/19(日) 13:49:13.10

>>417 Stylusだけでデベロッパーツールをどの程度レビューすることはできるか
無理じゃないか

**Name_Not_Found** · 2021/09/19(日) 14:45:23.27

>>481
「インラインにした要素を中央寄せ」だから俺もこうするなあ
flexとか聞きかじったせいで変に難しく考えるんだろうな

**Name_Not_Found** · 2021/09/19(日) 16:15:01.07

「インラインにした要素を中央寄せ」なんてどこに書いてある？

>>470には
display: blockだから中央寄せできると思ったのに

ってかいてあるだろ

**Name_Not_Found** · 2021/09/19(日) 18:00:08.51

>>486
なにが君を傷つけたのかわからないが謝るよ
だから　は　だったら　のタイポな

>>476でwidth固定せず可変にしたいと言っているから
それならinline-blockとかにするのが早いと俺も思ったんだよ

殺しにこないでね
ネット怖いなあ

**Name_Not_Found** · 2021/09/19(日) 18:17:22.57

>>487
謝らなくていいよ
傷ついてないし殺す意味が分からないわ

width固定せず可変って
<div style="max-width:80%">
これもblockのままwidth固定せずの可変だろう

文末に全部(^-^)マークあると思って。

**Name_Not_Found** · 2021/09/19(日) 18:21:51.19

>>488
横だけど(^-^)
顔文字ついている方が怖いぞ(^-^)
笑顔で怒ってるように見えるわｗ(^-^)

**Name_Not_Found** · 2021/09/19(日) 18:23:42.41

たぶん内容量に応じて可変にしたいんじゃないかな
そうなるとmax-widthで制限してもwidthは初期値100%のままだから
80%に内容量が満たないと結局text-align次第になる

**Name_Not_Found** · 2021/09/19(日) 18:41:16.30

というか、ちょっと否定的なこと書かれたぐらいで、殺しに来るなとかネット怖いとか
むしろキレて煽りに来てると思ったわｗ

**Name_Not_Found** · 2021/09/19(日) 18:49:03.83

質問者のしたい事をエスパーするなんて不毛すぎるわ

**Name_Not_Found** · 2021/09/19(日) 19:45:39.15

>>476だけど、言葉足らずで荒れ気味になってしまってすまん
>>490の言う通りで
テキスト量に応じて中央を保ちたいということね

https://jsfiddle.net/69ezmLck/

**Name_Not_Found** · 2021/09/19(日) 20:02:02.32

485 487 490だけど
エスパー成功していたようでなによりだよ

**Name_Not_Found** · 2021/09/19(日) 20:19:19.18

>>481さんの言われる通りですね。
ulをinline-blockにするのは目からウロコでした

**Name_Not_Found** · 2021/09/19(日) 20:27:52.84

なんか自演と感じる箇所あるな

**Name_Not_Found** · 2021/09/19(日) 20:49:07.83

でもwrapperでtext-align: center;とか指定すると
継承プロパティうぜぇってなるよな

**Name_Not_Found** · 2021/09/19(日) 20:50:57.38

>>496
思い込み激しいハゲだな

**Name_Not_Found** · 2021/09/19(日) 20:52:32.50

div挟んで階層増やせば気にならんよ

**Name_Not_Found** · 2021/09/19(日) 20:55:52.93

なんで意味が分からなかったのかなんとなくわかった
可変の使い方が違うからだわ
インライン要素に可変て普通使わんだろｗ

<span>テキスト</span>

**Name_Not_Found** · 2021/09/19(日) 20:58:57.97

そもそもどういうデザインにしたらいいのかがわからないのですが、根本となる考え方はなんでしょうか？
ブログのデザインになります。

何となくかっこいいなぁと思うデザインはあるのです。
その理由がわからないですが。

**Name_Not_Found** · 2021/09/19(日) 21:56:18.72

>>501
そのブログの目的とユーザー層によって正解のデザインは変わる。

例えば村の高齢者向けのお役立ちブログにカッコ良さっていらない。むしろ邪魔。
読みやすさ、わかりやすさのが重要

逆にファッション発信サイトがダサイとか一昔前のトレンドデザインとかありえない。

カッコイイデザインが必要ならあらゆるデザインや流行を常に見るべき
（インテリア、ファッション、雑誌、映画、ネイル、コスメ、ゲーム、プロダクトデザイン、建築、内装）

**Name_Not_Found** · 2021/09/19(日) 22:53:03.53

> カッコイイデザインが必要ならあらゆるデザインや流行を常に見るべき
正確には意識高い系の人種がパッと見でかっこいいと思うようなデザイン

**Name_Not_Found** · 2021/09/19(日) 23:51:08.34

iPhone13のサイト見てかなりウザいと思ってしまうんだが
何の先進さも無いiPhoneの性能を誇大広告するやり方もどうかなと

**Name_Not_Found** · 2021/09/20(月) 00:39:34.27

>>501
ノンデザイナーズデザインブックとか読んだ？

**Name_Not_Found** · 2021/09/20(月) 03:42:21.15

>>505
横だけど昔買ったけど、1度も開いてないわ・・・

**Name_Not_Found** · 2021/09/20(月) 06:27:18.32

>>502
ターゲットも特に決めてないんですよね
プログラミング関係なので、年齢層は色々だろうし
わかりやすさを重視したデザインというのもあるでしょうかね

>>505
読んでないですね、、、
何かサイトはないでしょうか？

**Name_Not_Found** · 2021/09/20(月) 07:30:16.43

地雷やぞ、相手するな

**Name_Not_Found** · 2021/09/20(月) 09:05:21.29

Bootstrap, ElementUI などのCSS フレームワークを見れば？

**Name_Not_Found** · 2021/09/20(月) 09:56:09.45

>>509
フレームワーク使うにしてもデザインの根幹がわかっていないといけないと思うんですが

**Name_Not_Found** · 2021/09/20(月) 10:06:54.97

今までの人生でデザインやファッション、アートに全く興味無かった人が
そんな理論で理解しようたってできるわけないやろ
今までの興味と感心の積み重ねが根幹だぜ

**Name_Not_Found** · 2021/09/20(月) 10:11:57.42

人間がドア開けてカギ閉めて階段おりて走って自転車のってって
この動作をロボットで再現させるため以外に
研究者でもなければ理論的に考えたくもないだろ？
デザインも分解すれば説明できなくもないが、そんな膨大な事したくないし無意識や感覚とはそういう事だ

**Name_Not_Found** · 2021/09/20(月) 10:15:02.08

相手したらいかん

**Name_Not_Found** · 2021/09/20(月) 10:30:59.25

PHP, WPスレのアイツか

**Name_Not_Found** · 2021/09/20(月) 13:32:44.92

>>511
興味はあったんですよ　ろくなデザインができんかっただけで

**Name_Not_Found** · 2021/09/20(月) 14:03:44.15

それを才能が無いというのでは？
そういう人は他人のデザインを真似てそれっぽく仕上げる術を身につければよし

**Name_Not_Found** · 2021/09/20(月) 14:12:44.96

構うなや！

**Name_Not_Found** · 2021/09/20(月) 14:15:35.61

>>515
買い物はどこですることが多い？
アート、デザイン、ファッションなどで購読していた雑誌とか好きなサイト、ブランドとかある？

**Name_Not_Found** · 2021/09/20(月) 14:16:02.60

>>517
そんなやばい奴なの？

**Name_Not_Found** · 2021/09/20(月) 14:59:18.79

画像のように文字数が決まっていない文字を幅目一杯（最大）に広げたい時はどうすればよいですか？
https://imgur.com/FPPntbv

letter-spacingで文字数ごとに設定はするのですが、必ず右側に少し余白ができてしまいます。

**Name_Not_Found** · 2021/09/20(月) 15:09:33.91

text-align: justify;

**Name_Not_Found** · 2021/09/20(月) 15:24:31.06

>> 521
2文字の時がすぐ折り返してしまうのですが、よい解決方法はないですか？

**Name_Not_Found** · 2021/09/20(月) 15:35:02.82

ないだろ

**Name_Not_Found** · 2021/09/20(月) 16:44:53.51

>>518
買い物はイオンが多いですかね。
好きなのはファッションブランドなどより、アウトドアブランドです。
モンベルとかコロンビアとか。機能性のないデザインは嫌いだと思います。

釣具のメカなんかにも魅力を感じますね。これも機能性があるからだと思うんです。

**Name_Not_Found** · 2021/09/20(月) 16:47:18.58

text-align: justify;
text-align-last: justify;

**Name_Not_Found** · 2021/09/20(月) 19:00:07.79

>>521
ほんと今の子は良い時代だよな

**Name_Not_Found** · 2021/09/20(月) 19:48:48.56

>>524
イオン・・・
デザインやアート好きとはやはり無縁そうだな。
音楽とかカルチャーとかも興味無さそうだな
まあ持とうとして持つものではないが

**Name_Not_Found** · 2021/09/20(月) 19:57:52.31

相手するなって

**Name_Not_Found** · 2021/09/20(月) 20:11:59.03

実は全部自演だったら怖い

**Name_Not_Found** · 2021/09/20(月) 20:15:00.11

あああ(短)　いいい(短)　ううううううううううう(長)

という情報をレスポンシブのときに

あああ　いいい
ううううううううううう
とするためにはどんなタグを使えば、うううを下に段落ちすることができる？

table的に3セルだから
dt>ddは使えないよね？
tableを使うのかな

**Name_Not_Found** · 2021/09/20(月) 20:16:56.47

flex

**Name_Not_Found** · 2021/09/20(月) 20:47:54.24

flexの子には何を使えば良い？

**Name_Not_Found** · 2021/09/20(月) 22:01:36.51

子にはwidth
親にはflex-wrap

**509** · 2021/09/20(月) 22:10:48.78

デザインなどは、Bootstrap, Tailwind, ElementUI などのCSS フレームワークを調べれば、
たいてい有料のテンプレートなども紹介している

そういうのを研究してみれば？

**Name_Not_Found** · 2021/09/20(月) 22:48:06.06

bootstrapのテンプレート眺めるなんかはやるなあ

**Name_Not_Found** · 2021/09/20(月) 23:43:08.38

>>533
サンクスだわ、やってみる

**Name_Not_Found** · 2021/09/21(火) 00:53:45.52

flexつかわなくてもinline-blockでいけるような
細かい調整したいならあれだけど

**Name_Not_Found** · 2021/09/21(火) 08:27:28.78

一番下のフッタにある
Cマーク 2018-2021みたいに何年から何年ってやつは、開業時からの年でもいいの？
web公開した時からの年数が書いているのかしら

**Name_Not_Found** · 2021/09/21(火) 09:12:54.37

コピーライトは著作物の公開時の年だけでいい

**Name_Not_Found** · 2021/09/21(火) 09:14:23.58

>>539
ありがとう、老舗だから1880-2021にしかけたわ

**Name_Not_Found** · 2021/09/21(火) 09:43:47.01

>>538
web公開してからの年数書いてる人もいるね
古くから運営してるサイトなら実績アピールにはなるかも
webとはいえ実店舗同様に長く続けるのはなかなか難しかったりするしね

**Name_Not_Found** · 2021/09/21(火) 09:50:41.94

横だが
既に作成済みのサイトのリニューアル（全差し替え）は前の公開日を引き継ぎ、であってる？

**Name_Not_Found** · 2021/09/21(火) 10:13:42.03

もともとはコピーライトの年数みたいなのを指しているから
リニューアル前の画像などが含まれているならリニューアル前の年にしても問題無いかと

**Name_Not_Found** · 2021/09/21(火) 11:43:32.76

>>543
ありがとん

**Name_Not_Found** · 2021/09/21(火) 13:13:33.87

>>542
ウチは年号はSinceで統一してる
要するに最初にサイト立ち上げた年を表記
リニューアルを強調したいなら両方の年数入れればいい

**Name_Not_Found** · 2021/09/21(火) 18:12:08.81

>>545
重ねてありがとん

**Name_Not_Found** · 2021/09/21(火) 20:29:39.55

ええねんで

**Name_Not_Found** · 2021/09/21(火) 20:46:41.95

body{width:960px}があったら、
その中のsection.footerでPCブラウザ横幅いっぱいのbackground-colorってできないの？
section.footer{background-color:#aaa}だとbodyの960pxまでしか色がつかないよね

**Name_Not_Found** · 2021/09/21(火) 20:52:36.53

そうだよ。
息子に父を超えることはできないんやで

**Name_Not_Found** · 2021/09/21(火) 20:56:33.75

そりゃまぁbodyが960px幅しか無いならそうなるよね、としか

**Name_Not_Found** · 2021/09/21(火) 21:01:28.29

ちっ

**Name_Not_Found** · 2021/09/21(火) 21:39:59.75

>>548

子供にposition : fixedしたら一応できる
下のは画面下固定の幅いっぱいのフッターにするような感じの装飾

footer{
position:fixed
width:100%
height:任意
背景色などなど
bottom 0;
left 0;
}

position fixed
要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されませんdeveloper.mozilla.org

スマホ(特にiPhone)でどうなるか要注意

**Name_Not_Found** · 2021/09/21(火) 21:40:59.02

自分はこの方法はあまり好きではない

**Name_Not_Found** · 2021/09/21(火) 21:44:04.64

>>548
親がbodyか
ごめん勘違い
無理かも

**Name_Not_Found** · 2021/09/21(火) 21:45:45.36

ちっ

**Name_Not_Found** · 2021/09/21(火) 22:56:15.74

古いxhtmlサイトのメンテ頼まれて
divが7層とかあってbodyにwidthがあって絶望する時あるある

**Name_Not_Found** · 2021/09/22(水) 03:28:50.62

>>552,554
ありがとう、参考になったけどbodyの1024は削除してやりなおしているけど宗教的な問題が

.container {width:1024px}
1：body > div.container > section.hoge
2：body > section.hoge > div.container

1・2、どっちにしようか書いたり消したりで何時間も迷ってるわ
正解は無いと思うけど、どっちが良いんだろう

**Name_Not_Found** · 2021/09/22(水) 04:15:44.01

どういうものを作りたいのか知らんが、目的に合ったデザインの
htmlテンプレート探して、基本構造を見てみるといい

**Name_Not_Found** · 2021/09/22(水) 04:29:14.47

>>558
コンテンツは1024pxの中に入りつつ
headerとfooterはブラウザの横幅いっぱいに背景色があるというベタな感じかな

色々なサイトを見てもコンテナの解釈がバラバラな感じで、同じくらいあるだけに余計迷う

**Name_Not_Found** · 2021/09/22(水) 05:00:41.66

コピペで簡単！ヘッダを実装するシンプルなHTMLとCSSの17種類のテンプレート -headers.css
https://coliss.com/articles/build-websites/operation/css/blueprint-html-and-css-for-website-headers.html

**Name_Not_Found** · 2021/09/22(水) 05:01:08.09

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ
https://webliker.info/46840/

**Name_Not_Found** · 2021/09/22(水) 08:57:48.31

透過度付の色指定の方法で、rgba じゃない方法はある？
他で色コードを #123456 と書いてるのにそこだけ rgba(18, 52, 86, …) と指定するのはメンテもしづらいし、red とか blue みたいな色名で指定することだってあるし。
こういうのに単に透過度を追加指定できるといいんだけど。

**Name_Not_Found** · 2021/09/22(水) 09:21:58.00

sassでカラーをパーシャルにまとめる

**Name_Not_Found** · 2021/09/22(水) 10:18:46.01

>>562
sassならhexに透明度を追加したらコンパイル時にrgbaにしてくれる

**Name_Not_Found** · 2021/09/22(水) 12:01:30.19

しらんやった、、使お

**Name_Not_Found** · 2021/09/23(木) 20:38:19.94

擬似要素（after）を指定しているのに幅によって消えることってありますか？

指定しているafterが幅を狭くした時にだけ消えてしまいます。
文字通りhtmlからafterが無くなります。

**Name_Not_Found** · 2021/09/23(木) 21:00:06.89

>>566
@media widthで読み込むstyleが変わってんじゃないの

**Name_Not_Found** · 2021/09/23(木) 22:06:31.03

通常ならchromeのデベロッパーツールで見るとafterを指定したタグの中に
「::after」って出るはずだけど、出てるのかな？

**Name_Not_Found** · 2021/09/23(木) 23:56:53.23

いまだに
::after
:after
か、わからない。
html5ならどっちが主流？

**Name_Not_Found** · 2021/09/24(金) 00:02:31.77

CSS2→ :after
CSS3→ ::after

::after (:after) - CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/::after