2020-07-19

class=”○○○” は小まめに分けた方がいい。むりやり書き込むとデザインが崩壊する。

CSS,プログラミング

daiki

こんにちは、daikiです。

今回は、class=”○○○” は分けるところは必ず分けた方がいいですよ。という HTML & CSS の基礎の話をしたいと思います。

プログラミング初心者がやってしまいがちな問題なので詳しく解説します。

僕は始めの頃にやらかしました。
なので共有です。

結論。

class=”○○○” はしっかりと小まめに分ける。

では、説明します。

class=”○○○” 分けないとデザインが崩壊する。


classの指定は分けないとプレビューを見たときのデザインが崩壊します。

cssは正しいけど、なぜか上手くいかない。
そんな時はhtmlが原因。

<div class="main">
	<h1></h1>
	<h2></h2>
</div>

※Progate使用で説明します。

class=”main”の下に直接h1要素が書かれています。
これでデザインしていくと、後に崩壊します。

正しい書き方はこれ。

<div class="main">
	<div class="contents">
		<h1></h1>
		<h2></h2>
	</div>
</div>

デザインする内容次第で変わりますが、これは癖づけた方がいいです。

厳密に言うと、小まめに書かなくてもデザインが崩れずに組み込むことは可能。
ただ、後に調整するときに楽なのでやっておいて損はない。

これが理由ですね。

楽をしようとすると後々痛い目を見る

プログラミング学習をやり始めて1カ月ほど経てば、かなり慣れてくる頃だと思います。

慣れてくると人は楽をしようとするんですよね。
実際に僕がそうでした。

Progateで学んでいましたが、「この部分いるのかな?」という事が多々あります。

先ほど説明したこれですね。

<div class="main">
	<div class="contents">
		<h1></h1>
		<h2></h2>
	</div>
</div>

class=”contents”の部分を省略して削除する。
これをやってしまうと、後々痛い目を見ます

確かに一行書かなくて楽なんです。
Progate自体のデザインなら、これでも可能。

だけど、後にプログラミングを本格的にやるなら小まめに分けた方がいい
なぜなら、調整が楽だからです

デザインの調整が楽

仮にmain要素のh1部分にバグが発生したとします。

その時class=”contents”という要素を与えておくと、「main要素のcontents部分を調整しよう。」となり、すぐに対処可能。
ですが、class=”contents”を与えていないとどうでしょう?

分かりづらいですよね?
単純なデザインなら簡単に調整可能です。

ただ、プログラミングは学べば学ぶほど複雑になってきます。
なので、classの指定はできるだけ小まめに設定しておいた方が後々助かるという事です。

Progateを進めていると分かると思います。
main要素にいろんなclassを指定している。

<div class="main">
	<div class="contents">
		<h1></h1>
		<h2></h2>
	</div>
	<div class="item">
		<h3></h3>
		<img src="">
		<p></p>
	</div>
	<div class="form">
		<p></p>
		<input>
		<p></p>
		<textarea></textarea>
	</div>
</div>

これは簡単に書き込んだもの。
Progateを進めるとさらに複雑になります。

初心者は指示通りにやるべき


プログラミング初心者の方は教材の通りに進めましょう。
変にオリジナルを入れる必要はありません。

オリジナルでやりたければ、最低でも1年は経験を積んでからの方がいい。
変な癖がついてしまうと、直すのが大変ですので。

かといって、classをつけすぎるのもよくない。

<div class="main">
	<div class="contents">
		<h1 class="title"></h1>
		<h2 class="text"></h2>
	</div>
	<div class="item">
		<h3 class="item-title"></h3>
		<img class="iten-contents" src="">
		<p></p>
	</div>
	<div class="form">
		<p class="form-contact"></p>
		<input class="form-input" type="">
		<p class="form-text"></p>
		<textarea class="form-page"></textarea>
	</div>
</div>

少し大げさに書いていますが、これだと分かりづらいですよね?

classは便利なタグですが、与えすぎると逆に訳が分からなくなります。
なので、使うならシンプルに分かりやすく使用するのがいい。

まずはカリキュラム通りに

どのプログラミング教材でもカリキュラム通りに進めることをおすすめします。

教材なら教材。
アプリならアプリ。

どの学習方法でも指示通りに従いましょう。

classを指定するときに「英語が分からないから簡単にしようかな?」と思っている人はちょっと待ってください!

確かにパソコンを触ったことの無い人だと、
copy-containerとかwrapper-contentsを始めて打ち込むのは大変かと思います。

ですが、これはやってください

プログラミング学習も大事ですが、その前にタイピングになれるのも大事。

特に英語とかは日常で使うことがほとんどないです。
なので打ち込むのは大変かと思います。

ただ、しっかり写径しておくとタイピング速度が速くなり、英語の概念が理解できます。

説明が下手ですみません🙇

copy-containerとか僕も最初は打てませんでした。
だけど毎日繰り返し行うことで、徐々にタイピング速度が上昇。

ついでに英語の仕組みもある程度理解できた。(まだまだですが、、。)

とりあえず、classの指定は必須。
これだけは覚えておいてください。

ただ、与えすぎると逆に良くないので注意が必要。
こういうことを学んだので共有しました。

では。