classの決め方について

Question

模写コーディングをしています。
わからないところというより質問なのですが、画像のdivで囲っているところのclass名が同じなんですけどそれは何かメリットあるのでしょうか？私も真似をするべきなのでしょうか？回答よろしくお願いします。

Comments

[m.ts10806]

どういうルールでの模写なんでしょうか。
前提や背景なしに他人には答えられません。
すべての人が同じ場所を同じルールや制約で模写するわけじゃないでしょうし。HTML,CSSを習得する過程で模写を選択しない人もいます。（私はしたことないです）

Answer 1

模写コーディングをしています。

模写だから意味が分からないんです。
仮に模写するにしても、一切htmlを見ずに見た目だけを参考にhtmlを組んでいくだけでも試行錯誤する点が多数見つかるはずで、その気付きの一つとしてclass名を同じにした方が良いというのもあるはずです。
それが完成（またはうまくいかなくても）した時にhtmlを見て答え合わせをする事で

class名が同じなんですけど

**class名を揃えれば良かったのか！とかclass名を揃える事で簡潔になるのか！**みたいな感想に変わるはずです。

追記

模写とは答えは見ずに自己流で真似をしていくということなのですね。途中でつまずいたら答えは見ずにどうするのでしょうか？

答えを見ずに考え続ける事が正解です。

本来WEBデザインを作るのに答えは無い訳で、答え合わせのしようがありません
目的のデザインに向けて自分なりに考えてhtmlを組んでスタイルを当て込んでいくしかありません
組んだhtmlにスタイル当て込んでも上手くデザインの調整が出来ないのなら、html自体を大きく組み替えてスタイルを０から当て込む（または大枠の部分だけ残すなどして）スタイルを当てなおすなど。

完成形と言うのは質問者自身が納得できる質のhtml/cssである事と、目的のデザインになったかどうかです。

いずれはhtmlタグの使い方が正しさも考慮する必要はあるけれど、いくらタグの使い方が正しくても見た目がグッチャグチャなら意味ありません
タグが正しい事でGoogle先生に拾ってもらいやすくなったりはしますが、そもそもデザインを組む目的は対人間です
よって正しいタグの使い方は後追いで学習しても良いです。自力で組める頃にはその程度の調整なんて簡単でしょうから。

自分は模写した事も無いし答え合わせという考えをしたことはありません。

という長い前置きの上で、答えがあるならさっさと答えを見て次に進むのも技術者（？）には必要な考え方です。
もう無理だと思ったら答えを見ても良いでしょう。その代わり答えを見た時はその答えになっている理由を探して理解しましょう。

Comments

[koukousei]

模写にもルールなどがあるのですね。私はまだ右も左もわからない状態なので、恐縮ですが質問をさせてください。初めはどういうルールですれば良いのでしょうか？（ちなみに、知識がある方にアドバイスをもらいLINEのウェブサイトがシンプルでやりやすいということなのでしています。）

[hentaiman]

自分の作りたい見た目を作れば良いと思うけど、作りたいデザインが全く思い浮かばなくて模写するしかないなら回答に書いたようにソースを見ずにデザインだけを参考にhtmlを組んで見た目を真似てみる事です。

真似るデザインとしてbootstrapの見た目（https://getbootstrap.jp/）なんか手頃じゃないかな？固定ヘッダーは一旦置いておくとして

１．まずは好きなようにhtml・cssを作る
→汎用的じゃない（同じ記述のCSSを繰り返し書いている）事に気付くはず

２．htmlやスタイルを独自ルールでまとめる
例えばフォント系のCSSを
.style1{color:red; font-weight:bold;}と書くのをやめて
.red{color:red} .bold{font-weight:bold}と分ける事で使いまわせるようにするなど

３．スタイルの分け方や命名規則につまづいて、例えばBEMなどを取り入れる
→面倒になる

４．bootstrapに頼る
→bootstrapでの命名規則やスタイル分けを自然と学ぶ
→物足りないとか、bootstrapに不便さを感じる

※３と４の順序は逆でも良いです。そしてBEMでなくても良いです（「CSS　BEM」で検索すれば色々見つかります）

５．そして独自のコーディングスタイルを築く

ただ、とあるデザインガチ勢はイラレからhtml/css/jsを出力したコードを組み直したりしていたので、上記とはまた別のパターンで学習していると思います。
学習の仕方は人それぞれという事で飽くまで参考程度に。

[koukousei]

模写とは答えは見ずに自己流で真似をしていくということなのですね。途中でつまずいたら答えは見ずにどうするのでしょうか？

[hentaiman]

Google先生に聞く。
と言う内容をより丁寧にしたものを回答に追記しましたのでご確認ください。

Answer 2

何かメリットあるのでしょうか？

複数の要素に同じスタイルや、JS処理を加えることができます。
他にも同じ仕様の複数の要素という意味合いで様々な面で有用になります。

私も真似をするべきなのでしょうか？

それはこちらで答えることではありません。
どこまで模写するかによりますので、
質問者自身が決めて下さい。

Comments

[koukousei]

一つに統一することで作業を一つにまとめられて効率よくできるということでしょうか？
模写は右も左も分からないのでとりあえずできるところまでしようと思っています。

[miyabi_pudding]

> 一つに統一することで作業を一つにまとめられて効率よくできるということでしょうか？

他にもいろいろと役割がありますが、
ひとまず、そのように覚えておくとよいかと。

[koukousei]

わかりました。アンサーありがとうございます。

Answer 3

クラス名の命名規則はそれだけで抗争が起きそうなのでどの派閥につくかいろいろ調べましょう「CSS 命名規則」とかで調べるとでてきます。ちなみにわたしは「CSS コンポーネントで Webpack がマングリングしてくれるからどーでもいいじゃん」派です。

真面目な話

class を辞書から引くと(共通の性質を有する)部類、種類とでてきます。つまり似た要素をまとめる役割を果たすのが class 属性になります。例えば同じ段落要素 <p> でも <p class="short-story"> とすることで小話用の <p> タグとわかり、それ専用に CSS を当てたりすることが出来ます。

これと対になるのが id 属性です。ID は identifier、識別子のことでこの名前があれば一発で要素を引き当てることが出来ます。つまり同一ページ内で重複しては絶対にいけません。これも特別にその要素にだけ CSS を当てたり、JavaScript で操作したりしやすくなります。

実は両方ともなくてもうんと頑張れば CSS 当てたり JavaScript で操作できたりするのですが、あまりにもバカバカしい（掛け算を足し算の繰り返しでやるようなもの）なのでみんな使ってます。

あ、あと name 属性っていうのがあったりしますがこいつのことは一旦忘れてやってください……。

Comments

[koukousei]

なるほど。派閥があるわけなのですね。これからその点も勉強していこうと思います。