完全に間違っている訳でも無いだろうけど、これを真に受けると間違いそうですよね。。。。( そもそも、こいつが誤解してそうな気は、存分に。。。何も判らない人ならば、https://rscss.io/ に従っておけとかで十分な気がする。。。
imgをpで囲うってどんな理由からですか？
一応ダウトしておくと、・見出しの後に見出しはダメ→説明が足りていない。見出しと見出しが兄弟要素ならダメだけど、階層が分かれていれば見た目上見出しの直後に見出しがあってもいい。・マージンは下に下にが常識→上なら上で統一、下なら下で統一という意味なら合っている。でも上下方向の余白はあとに続く要素があるからこそそれらの間に生まれるわけで、はなから下に余白を確保しておくのはおかしいと思う。それに下だと最後の要素の下マージンを: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タグなど、何で囲うべきかは画像に写っているものや周りの要素との関係性で変わってくる。
Re:4 >・マージンは下に下にが常識>→上なら上で統一、下なら下で統一という意味なら合っている。合ってる理由は？
これって質問？
そんな中級者レベルのこと書いてイキられても笑
技術者なら仕様書に従おう。ロジックに嘘はない。嘘をつくのは人間。
Re:4 見出しが兄弟要素でも暗黙的にアウトライン化されるよ？https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines
Re:5 仕様に則っているという意味ではなく、どっちかに統一しておいた方が開発者が幸せになれるってことね。
Re:10 ごめんなさい、これは自分もアウトラインの認識が間違ってました。ただリンク先の哺乳類と爬虫類のコードみたいに同一section内でh3の後にh2が来るのとか、それとは別にh2のすぐ後にまたh2を置いたりする書き方はないよな、と。
これはいくらなんでも釣りじゃないかと思うが、さらにバズってる記事で・HTML5にはブロック要素とインライン要素という概念がない・W3Cは独自のHTML5（現在策定中の5.3を含む）という仕様策定を終了し、WHATWGが管理している「Living Standard」に一元化したこれ知らんかった新人研修てHTML講座やらされたワイ涙目
例えば、これを厳守したとして、大規模な案件や、数人が管理する案件ならいいと思うんですが、末端のコーダーが影で***丁寧にやっても何のメリットもないですよねフィーあがるんですかね
これ、どこで話題になってるんですか？できれば元ネタを教えていただければと思います。
Re:12 それはそうだね。ややこしいので避けるべきだと思う。後もう一個ツッコミを入れるとしたら階層がわかれてたとしてもsectioning content以外のdivなどで括っても無意味。逆にsectioning contentを使う場合は見出しが有るべき。（必須というわけではない）
Re:15 これだな。かなりいい加減な情報を拡散しやがって…いい度胸だ。https://twitter.com/Makopontass/status/1170959388997120000
Re:11 だからなんで幸せになるの？
Re:11 「あってる」という表現に突っかかってるだけだから、気にする必要なし。言いたいことは分かる。決めたルールは崩さない方が良いということね。上でも下でも、どちらも間違っていないから、「下に」だけを抽出するのは語弊がありすぎるよね。ちなみに、俺は上の方が効率いいと思ってるよ。
Re:13 > HTML5にはブロック要素とインライン要素という概念がないこれはほんとに勘違いしてる人多いよね。というか、xhtmlあたりから始めた老害が多い。
Re:13 ブロックレベル要素とインライン要素な
Re:11 マージン上にすると一番最初が空いてしまうと思うのですが、その場合、:first-of-type とか :not は使わないのでしょうか？
Re:23 これねwいまいち主も理由になってねんだよな
遵守するメリットないから適当にやって納品するのがベスト。これがマークアップエンジニア（笑）の生きる術
Re:18 情報ありがとうございます！なんで拡散されてるのか不思議ですが、参考にしちゃってる人も結構いますね＾＾；
Re:23 &+&{ mrgin-top:20px;}とかの記述で書いちゃえば一番上のマージンは付かないかと！最近はこれが便利でよく使う。
たまに、自己流を発信してる人がいて困ることがある。なので、個人的には、と記載を必須でお願いしたい。それをみたクライアントさんが影響されてしまう。
Re:13 W3CもWHATWGも実際稼働してるメンバーはそんなにかわらんからねちなみにW3CのHTML５ WGのリーダーは日本にいる
Re:27 なるほど、これは確かにいいですね
Re:27 今ちょっと試してみたんですけど、例えば以下の形なら-----.box { p { & + & { margin-top: 20px; } }}-----下のようになってスタイルが効きませんよね-----.box p + .box p { margin-top: 20px;}-----包括する要素がなければうまくいくのですが、こういう box の中の要素に対して、& + & でスタイルを当てるにはどのように記述するのでしょうか・・・？
Re:32 ルートの要素を変えたいなら、こんな感じに変数にいれてる.box {p {$root : &;}}
Re:32 これはsassの運用の問題であってCSSの問題じゃないね。個人的には、シングルクラススタイルなので、この手の問題で困ることはない。
Re:25 俺も数年前からそれ
Re:18 Twitterのアイコンでお察しな感じだね。自分に陶酔してるタイプ。
勿論、結局のところ場合によって最適解が異なるのは当たり前なんだけど、じゃあ初心者に対して「場合によりますよ」って言うのはなんか違う気がする。「紙を切りたいのにどの道具使えばいいの？」ってQに講師は「はさみだよ」ってAしていて、それに対して「いやカッターやペーパーカッター、サークルカッター、切り絵用紙など用途によって異なる」とか言ってるのに近い。紙を切りたいってレベルの質問をしてる人なんだからとりあえずはさみでいいじゃん。rscssに従えっていうのも、これからcss勉強しようって人に英語のページどーんっていうのは雑。まあ、w3qらしい回答。俺はそんな叩くほどのもんでもないと思うけど、100％技術者脳の人には受け付けられないんだろうなあ。
Re:37 ハウスルールでしかないレベルの事をまるで標準仕様のように発言してるから反感買ってるんだよ。
Re:37 表現の問題だよ。「紙を切るときはハサミでなくてはダメ」こんな表現をされたら語弊がありまくりでしょって話。「紙を切るときはハサミが便利である」これなら反感はないはず。
Re:38 ハウスルールっていうのはわかるが、入口がハウスルールであることは「どうでもいい部分に悩む時間がなくなる」っていう初心者あるあるに対する一つの解決法ではあると思ってる。勿論、１００％の嘘を教えるのはダメなのは前提。今回の場合は表現が確かに強いとは思うが、だからといって叩くようなものではない気がする。技術者として一定の水準に立てば、このツイートのどこまでが正しいのかなんていうのは判断できるようになるだろ。
Re:40 一定の水準に立ってないヤツらに向けて発してて、そしてそいつらがしっかり裏も取らずに鵜呑みにしてるのが困るってのよ。こういうのが変な「マナー」になってうっすら定着しちゃうんだよ。
Re:39 のがいいよ表現って便利ではあるんだけど、受け取る側としては非常に弱いんだよね。選択権が受け取る側だから。紙を手で切ってる人に対して「紙を切るのははさみがいいよ」って言って実際はさみ使うのかって話。使うでしょって言うんだったら俺とは考え方が違うんだなーって感じ。上と同じこと書くけど、技術者として一定の水準に立てば、このツイートのどこまでが正しいのかは判断できるようになる。全技術者はこれを守れ！っていうのだったらまた話は変わるけど、駆け出しマークアップにってことなら俺はいいかなって思う。
Re:41 素人の間でよくわからんマナーとか定着したところで、プロの人にはどうでもよくね？
Re:41 一定の水準にすら達していない人はこのツイート以上にルール違反のやばいマークアップするし、そもそもマークアップも変化が常にあるからマナーはほぼ定着しないでしょっていうのが個人的な意見。マナーが定着するには業界における発言力の強い人・メディアが、根拠と共に発言しないと無理。初心者同士の小さなコミュニティで定着したことが業界全体に来るなんてことは「WEB」技術者間ではありうるのか。また、小さな制作会社だとそれぞれに大なり小なりハウスルールがあるわけだけど、それが業界全体に影響を与えるかということ。
Re:42 そもそもなんですけど、その初心者に強制する必要なんてあるんでしょうか。「ルールを作りましょう」という議題の上に、仮のルールを用意するっていう文脈ならわかりますが、そんな文脈感じましたか？
Re:46 右も左もわからない初心者に対して効率よく教える・効率よく経験積む・少しでも管理しやすくするにはある程度強制する必要があると思う。それこそケースバイケースだが、スタイルをインラインで基本書いちゃダメとかそういうレベルは強制してでも変えていかないと、モンスターのようなコードが生まれかねないでしょ。そんなページの改修とか俺はしたくないよ。ってかそういうレベルの話になると犯罪にならない限り個人の価値観によるわけで正しい間違いって話じゃないと思ってる。それこそ叩くほどのことじゃない。
Re:47 叩くほどのことじゃないかどうかってのも個人の価値観によるわけで。。
Re:48 うん、だから俺は最初から一人称じゃん。一般論とか精神論とかを語ってるわけじゃなくて、最初のレス通り、「俺は」叩くほどのもんでもないと思ってるだけ。
Re:5 だから下下にした方が良い理由ってなんなんだよ。マージンは要素の周りに空白なんだから上下両方にづけるべきだと思う。等間隔なら上下両方。
Re:50 否定はしないけど、珍しい意見だね。一般的に下や上にマージンの方向を固定するのは、マージンの相殺があるからだよ。方向を固定することによって相殺をコントロールするってわけ。ちなみに、個人的には、上下にマージンをつけるべき根拠をもっと詳しく知りたいな。
Re:51 margin-top というプロパティが存在してる時点で下だけに固定する意味が解らん。上下左右どこに付けてもええがな。不都合は各々工夫して回避しろや。流儀のハナシに正解はない。不毛。
Re:28 個人的には「コピペでできる10選」みたいな記事が困る。これ貼り付けるだけだから簡単ですよねって、他の要因と絡んで面倒だったりするし。
Re:52 誰も上下にマージンつけてはいけないなんて言ってないぞ？マージンの方向を固定することによってメリットがあるからそうしているだけで、逆に、固定しないことで得られるメリットを訊いてるだけ。
どれも間違ってるっていうほどかな？どっちかというと正しい寄りだけどな。初心者に教えるならまずはこっからでいいと思うが。どっかのツイート拾って鼻息荒く攻めるのとかやめようや。
Re:4 うるせえよ。どこのツイートか知らんがそんなに燃えるな。反論するなら140文字以内にしろ。
55 件の回答
完全に間違っている訳でも無いだろうけど、これを真に受けると間違いそうですよね。。。。
( そもそも、こいつが誤解してそうな気は、存分に。。。
何も判らない人ならば、https://rscss.io/ に従っておけとかで十分な気がする。。。
imgをpで囲うってどんな理由からですか？
一応ダウトしておくと、
・見出しの後に見出しはダメ
→説明が足りていない。見出しと見出しが兄弟要素ならダメだけど、階層が分かれていれば見た目上見出しの直後に見出しがあってもいい。
・マージンは下に下にが常識
→上なら上で統一、下なら下で統一という意味なら合っている。でも上下方向の余白はあとに続く要素があるからこそそれらの間に生まれるわけで、はなから下に余白を確保しておくのはおかしいと思う。それに下だと最後の要素の下マージンを: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タグなど、何で囲うべきかは画像に写っているものや周りの要素との関係性で変わってくる。
Re:4
>・マージンは下に下にが常識
>→上なら上で統一、下なら下で統一という意味なら合っている。
合ってる理由は？
これって質問？
そんな中級者レベルのこと書いてイキられても笑
技術者なら仕様書に従おう。ロジックに嘘はない。
嘘をつくのは人間。
Re:4
見出しが兄弟要素でも暗黙的にアウトライン化されるよ？
https://developer.mozilla.org/ja/docs/Web/Guide/HTML/Using_HTML_sections_and_outlines
Re:5
仕様に則っているという意味ではなく、どっちかに統一しておいた方が開発者が幸せになれるってことね。
Re:10
ごめんなさい、これは自分もアウトラインの認識が間違ってました。
ただリンク先の哺乳類と爬虫類のコードみたいに同一section内でh3の後にh2が来るのとか、それとは別にh2のすぐ後にまたh2を置いたりする書き方はないよな、と。
これはいくらなんでも釣りじゃないかと思うが、
さらにバズってる記事で
・HTML5にはブロック要素とインライン要素という概念がない
・W3Cは独自のHTML5（現在策定中の5.3を含む）という仕様策定を終了し、WHATWGが管理している「Living Standard」に一元化した
これ知らんかった
新人研修てHTML講座やらされたワイ涙目
例えば、これを厳守したとして、
大規模な案件や、数人が管理する案件ならいいと思うんですが、
末端のコーダーが影で***丁寧にやっても何のメリットもないですよね
フィーあがるんですかね
これ、どこで話題になってるんですか？
できれば元ネタを教えていただければと思います。
Re:12
それはそうだね。ややこしいので避けるべきだと思う。
後もう一個ツッコミを入れるとしたら階層がわかれてたとしてもsectioning content以外のdivなどで括っても無意味。
逆にsectioning contentを使う場合は見出しが有るべき。（必須というわけではない）
Re:15
これだな。かなりいい加減な情報を拡散しやがって…いい度胸だ。
https://twitter.com/Makopontass/status/1170959388997120000
Re:11
だからなんで幸せになるの？
Re:11
「あってる」という表現に突っかかってるだけだから、気にする必要なし。
言いたいことは分かる。決めたルールは崩さない方が良いということね。上でも下でも、どちらも間違っていないから、「下に」だけを抽出するのは語弊がありすぎるよね。ちなみに、俺は上の方が効率いいと思ってるよ。
Re:13
> HTML5にはブロック要素とインライン要素という概念がない
これはほんとに勘違いしてる人多いよね。
というか、xhtmlあたりから始めた老害が多い。
Re:13
ブロックレベル要素とインライン要素な
Re:11
マージン上にすると一番最初が空いてしまうと思うのですが、その場合、:first-of-type とか :not は使わないのでしょうか？
Re:23
これねw
いまいち主も理由になってねんだよな
遵守するメリットないから適当にやって納品するのがベスト。
これがマークアップエンジニア（笑）の生きる術
Re:18
情報ありがとうございます！
なんで拡散されてるのか不思議ですが、
参考にしちゃってる人も結構いますね＾＾；
Re:23
&+&{
mrgin-top:20px;
}
とかの記述で書いちゃえば一番上のマージンは付かないかと！最近はこれが便利でよく使う。
たまに、自己流を発信してる人がいて困ることがある。なので、個人的には、と記載を必須でお願いしたい。
それをみたクライアントさんが影響されてしまう。
Re:13
W3CもWHATWGも実際稼働してるメンバーはそんなにかわらんからね
ちなみにW3CのHTML５ WGのリーダーは日本にいる
Re:27
なるほど、これは確かにいいですね
Re:27
今ちょっと試してみたんですけど、例えば以下の形なら
-----
.box {
p {
& + & {
margin-top: 20px;
}
}
}
-----
下のようになってスタイルが効きませんよね
-----
.box p + .box p {
margin-top: 20px;
}
-----
包括する要素がなければうまくいくのですが、こういう box の中の要素に対して、& + & でスタイルを当てるにはどのように記述するのでしょうか・・・？
Re:32
ルートの要素を変えたいなら、こんな感じに変数にいれてる
.box {
p {
$root : &;
}
}
Re:32
これはsassの運用の問題であってCSSの問題じゃないね。
個人的には、シングルクラススタイルなので、この手の問題で困ることはない。
Re:25
俺も数年前からそれ
Re:18
Twitterのアイコンでお察しな感じだね。自分に陶酔してるタイプ。
勿論、結局のところ場合によって最適解が異なるのは当たり前なんだけど、じゃあ初心者に対して「場合によりますよ」って言うのはなんか違う気がする。
「紙を切りたいのにどの道具使えばいいの？」ってQに講師は「はさみだよ」ってAしていて、それに対して「いやカッターやペーパーカッター、サークルカッター、切り絵用紙など用途によって異なる」とか言ってるのに近い。
紙を切りたいってレベルの質問をしてる人なんだからとりあえずはさみでいいじゃん。
rscssに従えっていうのも、これからcss勉強しようって人に英語のページどーんっていうのは雑。まあ、w3qらしい回答。
俺はそんな叩くほどのもんでもないと思うけど、100％技術者脳の人には受け付けられないんだろうなあ。
Re:37
ハウスルールでしかないレベルの事をまるで標準仕様のように発言してるから反感買ってるんだよ。
Re:37
表現の問題だよ。
「紙を切るときはハサミでなくてはダメ」
こんな表現をされたら語弊がありまくりでしょって話。
「紙を切るときはハサミが便利である」
これなら反感はないはず。
Re:38
ハウスルールっていうのはわかるが、入口がハウスルールであることは「どうでもいい部分に悩む時間がなくなる」っていう初心者あるあるに対する一つの解決法ではあると思ってる。
勿論、１００％の嘘を教えるのはダメなのは前提。
今回の場合は表現が確かに強いとは思うが、だからといって叩くようなものではない気がする。技術者として一定の水準に立てば、このツイートのどこまでが正しいのかなんていうのは判断できるようになるだろ。
Re:40
一定の水準に立ってないヤツらに向けて発してて、そしてそいつらがしっかり裏も取らずに鵜呑みにしてるのが困るってのよ。こういうのが変な「マナー」になってうっすら定着しちゃうんだよ。
Re:39
のがいいよ表現って便利ではあるんだけど、受け取る側としては非常に弱いんだよね。選択権が受け取る側だから。
紙を手で切ってる人に対して「紙を切るのははさみがいいよ」って言って実際はさみ使うのかって話。使うでしょって言うんだったら俺とは考え方が違うんだなーって感じ。
上と同じこと書くけど、技術者として一定の水準に立てば、このツイートのどこまでが正しいのかは判断できるようになる。全技術者はこれを守れ！っていうのだったらまた話は変わるけど、駆け出しマークアップにってことなら俺はいいかなって思う。
Re:41
素人の間でよくわからんマナーとか定着したところで、プロの人にはどうでもよくね？
Re:41
一定の水準にすら達していない人はこのツイート以上にルール違反のやばいマークアップするし、そもそもマークアップも変化が常にあるからマナーはほぼ定着しないでしょっていうのが個人的な意見。
マナーが定着するには業界における発言力の強い人・メディアが、根拠と共に発言しないと無理。初心者同士の小さなコミュニティで定着したことが業界全体に来るなんてことは「WEB」技術者間ではありうるのか。
また、小さな制作会社だとそれぞれに大なり小なりハウスルールがあるわけだけど、それが業界全体に影響を与えるかということ。
Re:42
そもそもなんですけど、その初心者に強制する必要なんてあるんでしょうか。
「ルールを作りましょう」という議題の上に、仮のルールを用意するっていう文脈ならわかりますが、そんな文脈感じましたか？
Re:46
右も左もわからない初心者に対して効率よく教える・効率よく経験積む・少しでも管理しやすくするにはある程度強制する必要があると思う。それこそケースバイケースだが、スタイルをインラインで基本書いちゃダメとかそういうレベルは強制してでも変えていかないと、モンスターのようなコードが生まれかねないでしょ。そんなページの改修とか俺はしたくないよ。ってかそういうレベルの話になると犯罪にならない限り個人の価値観によるわけで正しい間違いって話じゃないと思ってる。それこそ叩くほどのことじゃない。
Re:47
叩くほどのことじゃないかどうかってのも個人の価値観によるわけで。。
Re:48
うん、だから俺は最初から一人称じゃん。一般論とか精神論とかを語ってるわけじゃなくて、最初のレス通り、「俺は」叩くほどのもんでもないと思ってるだけ。
Re:5
だから下下にした方が良い理由ってなんなんだよ。
マージンは要素の周りに空白なんだから上下両方にづけるべきだと思う。等間隔なら上下両方。
Re:50
否定はしないけど、珍しい意見だね。
一般的に下や上にマージンの方向を固定するのは、マージンの相殺があるからだよ。
方向を固定することによって相殺をコントロールするってわけ。
ちなみに、個人的には、上下にマージンをつけるべき根拠をもっと詳しく知りたいな。
Re:51
margin-top というプロパティが存在してる時点で下だけに固定する意味が解らん。上下左右どこに付けてもええがな。不都合は各々工夫して回避しろや。流儀のハナシに正解はない。不毛。
Re:28
個人的には「コピペでできる10選」みたいな記事が困る。
これ貼り付けるだけだから簡単ですよねって、他の要因と絡んで面倒だったりするし。
Re:52
誰も上下にマージンつけてはいけないなんて言ってないぞ？
マージンの方向を固定することによってメリットがあるからそうしているだけで、逆に、固定しないことで得られるメリットを訊いてるだけ。
どれも間違ってるっていうほどかな？
どっちかというと正しい寄りだけどな。
初心者に教えるならまずはこっからでいいと思うが。
どっかのツイート拾って鼻息荒く攻めるのとかやめようや。
Re:4
うるせえよ。
どこのツイートか知らんがそんなに燃えるな。
反論するなら140文字以内にしろ。