-
1:ID:j5soIk · 1週間前

・見出しの後に見出しはダメ
・マージンは下に下にが常識
・HTMLに直にCSSを指定してはダメ
・titleはdescriptionの前にかく
・heightはpaddingなどで高さを確保する
・imgは実はpで囲うのが正しい

↑ちょい話題になってるCSSに関するこのツイート、どれも間違ってるor説明不足で実にこうばしい。
講師やってるらしいがこの人の生徒かわいそ・・・。

55 件の回答

2:ID:n/OnR0 · 1週間前

完全に間違っている訳でも無いだろうけど、これを真に受けると間違いそうですよね。。。。
( そもそも、こいつが誤解してそうな気は、存分に。。。

何も判らない人ならば、https://rscss.io/ に従っておけとかで十分な気がする。。。

3:ID:GfdYqE · 1週間前

imgをpで囲うってどんな理由からですか?

4:ID: · 1週間前

一応ダウトしておくと、

・見出しの後に見出しはダメ
→説明が足りていない。見出しと見出しが兄弟要素ならダメだけど、階層が分かれていれば見た目上見出しの直後に見出しがあってもいい。

・マージンは下に下にが常識
→上なら上で統一、下なら下で統一という意味なら合っている。でも上下方向の余白はあとに続く要素があるからこそそれらの間に生まれるわけで、はなから下に余白を確保しておくのはおかしいと思う。それに下だと最後の要素の下マージンを:last-of-typeとか:notなんかの擬似クラスで処理しなきゃいけなくなるから個人的には上マージンの方がいい。

・HTMLに直にCSSを指定してはダメ
→インラインスタイルをダメと言っているのか、cssファイルでhtmlタグに何らかのスタイルを当てるのをダメと言っているのか、cssファイルで要素名に対してスタイル直当てがダメと言っているのか、曖昧すぎてどれだかわからない。

・titleはdescriptionの前にかく
→charset以外は順番がどうなっていても特に変わりはない。まあ重要度的にtitleの後にdescriptionを置きたいという心情はわかるしこれは妥当か。

・heightはpaddingなどで高さを確保する
→ものによるとしか言えない。というか「要素全体の高さはheightだけで決めず、なるべく中身そのものの高さ+paddingで調節した方がいい」という風にでも書くべき。それでも何のUIの話か明示しない限り抽象論にしかならんけど。

・imgは実はpで囲うのが正しい
→これも場合によるから断定しちゃダメでしょ・・・。pで囲うのは間違いじゃないけれど(ブログ的な読み物コンテンツの中で必要不可欠な画像に対して、それ単体で段落とする場合とか)、imgを何も囲わずにそのまま置くのはあまりよくないってだけで、pタグ・pictureタグ・figureタグ・divタグなど、何で囲うべきかは画像に写っているものや周りの要素との関係性で変わってくる。

5:ID:EKueHm · 1週間前

Re:4
>・マージンは下に下にが常識
>→上なら上で統一、下なら下で統一という意味なら合っている。
合ってる理由は?

6:ID:yBcJlO · 1週間前

これって質問?

8:ID:lT.Fvo · 1週間前

そんな中級者レベルのこと書いてイキられても笑

9:ID:rx9mYw · 1週間前

技術者なら仕様書に従おう。ロジックに嘘はない。
嘘をつくのは人間。

10:ID:53xsd. · 1週間前

Re:4
見出しが兄弟要素でも暗黙的にアウトライン化されるよ?
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines

11:ID: · 1週間前

Re:5
仕様に則っているという意味ではなく、どっちかに統一しておいた方が開発者が幸せになれるってことね。

12:ID:3ccFI8 · 1週間前

Re:10
ごめんなさい、これは自分もアウトラインの認識が間違ってました。
ただリンク先の哺乳類と爬虫類のコードみたいに同一section内でh3の後にh2が来るのとか、それとは別にh2のすぐ後にまたh2を置いたりする書き方はないよな、と。

13:ID:k4SWUr · 1週間前

これはいくらなんでも釣りじゃないかと思うが、
さらにバズってる記事で

・HTML5にはブロック要素とインライン要素という概念がない
・W3Cは独自のHTML5(現在策定中の5.3を含む)という仕様策定を終了し、WHATWGが管理している「Living Standard」に一元化した

これ知らんかった
新人研修てHTML講座やらされたワイ涙目

14:ID:Oou88P · 1週間前

例えば、これを厳守したとして、
大規模な案件や、数人が管理する案件ならいいと思うんですが、
末端のコーダーが影で***丁寧にやっても何のメリットもないですよね
フィーあがるんですかね

15:ID:xk8Z41 · 1週間前

これ、どこで話題になってるんですか?
できれば元ネタを教えていただければと思います。

17:ID:53xsd. · 1週間前

Re:12
それはそうだね。ややこしいので避けるべきだと思う。
後もう一個ツッコミを入れるとしたら階層がわかれてたとしてもsectioning content以外のdivなどで括っても無意味。
逆にsectioning contentを使う場合は見出しが有るべき。(必須というわけではない)

18:ID:2QKqkL · 1週間前

Re:15
これだな。かなりいい加減な情報を拡散しやがって…いい度胸だ。
https://twitter.com/Makopontass/status/1170959388997120000

19:ID:Vygv22 · 1週間前

Re:11
だからなんで幸せになるの?

20:ID:kT78iH · 1週間前

Re:11
「あってる」という表現に突っかかってるだけだから、気にする必要なし。
言いたいことは分かる。決めたルールは崩さない方が良いということね。上でも下でも、どちらも間違っていないから、「下に」だけを抽出するのは語弊がありすぎるよね。ちなみに、俺は上の方が効率いいと思ってるよ。

21:ID:kT78iH · 1週間前

Re:13
> HTML5にはブロック要素とインライン要素という概念がない

これはほんとに勘違いしてる人多いよね。
というか、xhtmlあたりから始めた老害が多い。

22:ID:71ld0L · 1週間前

Re:13
ブロックレベル要素とインライン要素な

23:ID:rzcV0m · 1週間前

Re:11
マージン上にすると一番最初が空いてしまうと思うのですが、その場合、:first-of-type とか :not は使わないのでしょうか?

24:ID:Hi/vrk · 1週間前

Re:23
これねw
いまいち主も理由になってねんだよな

25:ID:SjSxLP · 1週間前

遵守するメリットないから適当にやって納品するのがベスト。
これがマークアップエンジニア(笑)の生きる術

26:ID:xk8Z41 · 1週間前

Re:18
情報ありがとうございます!
なんで拡散されてるのか不思議ですが、
参考にしちゃってる人も結構いますね^^;

27:ID:llaPgK · 1週間前

Re:23
&+&{
mrgin-top:20px;
}
とかの記述で書いちゃえば一番上のマージンは付かないかと!最近はこれが便利でよく使う。

28:ID:v1Fq/1 · 1週間前

たまに、自己流を発信してる人がいて困ることがある。なので、個人的には、と記載を必須でお願いしたい。
それをみたクライアントさんが影響されてしまう。

29:ID:53xsd. · 1週間前

Re:13
W3CもWHATWGも実際稼働してるメンバーはそんなにかわらんからね
ちなみにW3CのHTML5 WGのリーダーは日本にいる

31:ID:TrfIcL · 1週間前

Re:27
なるほど、これは確かにいいですね

32:ID:GBapFF · 1週間前

Re:27
今ちょっと試してみたんですけど、例えば以下の形なら
-----
.box {
p {
& + & {
margin-top: 20px;
}
}
}
-----
下のようになってスタイルが効きませんよね
-----
.box p + .box p {
margin-top: 20px;
}
-----
包括する要素がなければうまくいくのですが、こういう box の中の要素に対して、& + & でスタイルを当てるにはどのように記述するのでしょうか・・・?

33:ID:53xsd. · 1週間前

Re:32
ルートの要素を変えたいなら、こんな感じに変数にいれてる
.box {
p {
$root : &;
}
}

34:ID:kT78iH · 1週間前

Re:32
これはsassの運用の問題であってCSSの問題じゃないね。
個人的には、シングルクラススタイルなので、この手の問題で困ることはない。

35:ID:gbJcSC · 1週間前

Re:25
俺も数年前からそれ

36:ID:HZWFyG · 1週間前

Re:18
Twitterのアイコンでお察しな感じだね。自分に陶酔してるタイプ。

37:ID:m0YzfO · 1週間前

勿論、結局のところ場合によって最適解が異なるのは当たり前なんだけど、じゃあ初心者に対して「場合によりますよ」って言うのはなんか違う気がする。
「紙を切りたいのにどの道具使えばいいの?」ってQに講師は「はさみだよ」ってAしていて、それに対して「いやカッターやペーパーカッター、サークルカッター、切り絵用紙など用途によって異なる」とか言ってるのに近い。
紙を切りたいってレベルの質問をしてる人なんだからとりあえずはさみでいいじゃん。
rscssに従えっていうのも、これからcss勉強しようって人に英語のページどーんっていうのは雑。まあ、w3qらしい回答。
俺はそんな叩くほどのもんでもないと思うけど、100%技術者脳の人には受け付けられないんだろうなあ。

38:ID:2QKqkL · 1週間前

Re:37
ハウスルールでしかないレベルの事をまるで標準仕様のように発言してるから反感買ってるんだよ。

39:ID:kT78iH · 1週間前

Re:37
表現の問題だよ。
「紙を切るときはハサミでなくてはダメ」
こんな表現をされたら語弊がありまくりでしょって話。
「紙を切るときはハサミが便利である」
これなら反感はないはず。

40:ID:m0YzfO · 1週間前

Re:38
ハウスルールっていうのはわかるが、入口がハウスルールであることは「どうでもいい部分に悩む時間がなくなる」っていう初心者あるあるに対する一つの解決法ではあると思ってる。
勿論、100%の嘘を教えるのはダメなのは前提。
今回の場合は表現が確かに強いとは思うが、だからといって叩くようなものではない気がする。技術者として一定の水準に立てば、このツイートのどこまでが正しいのかなんていうのは判断できるようになるだろ。

41:ID:2QKqkL · 1週間前

Re:40
一定の水準に立ってないヤツらに向けて発してて、そしてそいつらがしっかり裏も取らずに鵜呑みにしてるのが困るってのよ。こういうのが変な「マナー」になってうっすら定着しちゃうんだよ。

42:ID:m0YzfO · 1週間前

Re:39
のがいいよ表現って便利ではあるんだけど、受け取る側としては非常に弱いんだよね。選択権が受け取る側だから。
紙を手で切ってる人に対して「紙を切るのははさみがいいよ」って言って実際はさみ使うのかって話。使うでしょって言うんだったら俺とは考え方が違うんだなーって感じ。
上と同じこと書くけど、技術者として一定の水準に立てば、このツイートのどこまでが正しいのかは判断できるようになる。全技術者はこれを守れ!っていうのだったらまた話は変わるけど、駆け出しマークアップにってことなら俺はいいかなって思う。

44:ID:lT.Fvo · 1週間前

Re:41
素人の間でよくわからんマナーとか定着したところで、プロの人にはどうでもよくね?

45:ID:m0YzfO · 1週間前

Re:41
一定の水準にすら達していない人はこのツイート以上にルール違反のやばいマークアップするし、そもそもマークアップも変化が常にあるからマナーはほぼ定着しないでしょっていうのが個人的な意見。
マナーが定着するには業界における発言力の強い人・メディアが、根拠と共に発言しないと無理。初心者同士の小さなコミュニティで定着したことが業界全体に来るなんてことは「WEB」技術者間ではありうるのか。
また、小さな制作会社だとそれぞれに大なり小なりハウスルールがあるわけだけど、それが業界全体に影響を与えるかということ。

46:ID:kT78iH · 1週間前

Re:42
そもそもなんですけど、その初心者に強制する必要なんてあるんでしょうか。
「ルールを作りましょう」という議題の上に、仮のルールを用意するっていう文脈ならわかりますが、そんな文脈感じましたか?

47:ID:m0YzfO · 1週間前

Re:46
右も左もわからない初心者に対して効率よく教える・効率よく経験積む・少しでも管理しやすくするにはある程度強制する必要があると思う。それこそケースバイケースだが、スタイルをインラインで基本書いちゃダメとかそういうレベルは強制してでも変えていかないと、モンスターのようなコードが生まれかねないでしょ。そんなページの改修とか俺はしたくないよ。ってかそういうレベルの話になると犯罪にならない限り個人の価値観によるわけで正しい間違いって話じゃないと思ってる。それこそ叩くほどのことじゃない。

48:ID:53xsd. · 1週間前

Re:47
叩くほどのことじゃないかどうかってのも個人の価値観によるわけで。。

49:ID:awnsAU · 1週間前

Re:48
うん、だから俺は最初から一人称じゃん。一般論とか精神論とかを語ってるわけじゃなくて、最初のレス通り、「俺は」叩くほどのもんでもないと思ってるだけ。

50:ID:ksUa4c · 1週間前

Re:5
だから下下にした方が良い理由ってなんなんだよ。
マージンは要素の周りに空白なんだから上下両方にづけるべきだと思う。等間隔なら上下両方。

51:ID:kT78iH · 1週間前

Re:50
否定はしないけど、珍しい意見だね。
一般的に下や上にマージンの方向を固定するのは、マージンの相殺があるからだよ。
方向を固定することによって相殺をコントロールするってわけ。
ちなみに、個人的には、上下にマージンをつけるべき根拠をもっと詳しく知りたいな。

52:ID:2QKqkL · 1週間前

Re:51
margin-top というプロパティが存在してる時点で下だけに固定する意味が解らん。上下左右どこに付けてもええがな。不都合は各々工夫して回避しろや。流儀のハナシに正解はない。不毛。

53:ID:MPdIgN · 1週間前

Re:28
個人的には「コピペでできる10選」みたいな記事が困る。
これ貼り付けるだけだから簡単ですよねって、他の要因と絡んで面倒だったりするし。

54:ID:kT78iH · 6日前

Re:52
誰も上下にマージンつけてはいけないなんて言ってないぞ?
マージンの方向を固定することによってメリットがあるからそうしているだけで、逆に、固定しないことで得られるメリットを訊いてるだけ。

55:ID:pAJBI7 · 3日前

どれも間違ってるっていうほどかな?
どっちかというと正しい寄りだけどな。
初心者に教えるならまずはこっからでいいと思うが。
どっかのツイート拾って鼻息荒く攻めるのとかやめようや。

56:ID:pAJBI7 · 3日前

Re:4
うるせえよ。
どこのツイートか知らんがそんなに燃えるな。
反論するなら140文字以内にしろ。

4 件の回答が除外されました。[詳細]
コメントの受付は終了しました。

一緒に読まれている質問

ページ上部に戻る