2020-07-16

class=”○○○” の単語は自由でもいい。だけど分かりづらいのはダメ。

プログラミング

daiki

こんにちは、daikiです。

今回は、プログラミングでコードを書く際の「class」を指定する単語は自由でもいいけど、分かりやすい単語にした方がいいですよ。という話をしたいと思います。

プログラミング初心者の方、参考にどうぞ。

このheaderの部分です↓

<div class="header">
</div>

では詳しく解説します。

classの指定はhtmlとcssを合わせると反映する


htmlでclassを指定して、cssに書き込むと反映されるのは知っていますね?
一様、説明します。

こんな感じで書き込む。

※Progateから引用(以下略)

すると、こうなります↓

背景色が水色になり文字色が白に変わっていますね。
これがclassの反映です。

htmlで書き込んだコードをcssで書き込むことで色などを変化させることができます。

イメージはこんな感じ。

  • thml➔本体(文章、画像など)
  • css➔装飾(色、文字サイズ、位置など)

イメージを掴むと分かりやすいですね。

難しく考えると頭が追いつかないので、簡単に覚えておくといいですよ。

class=○○○ は自由に書いてOK

<div class="header">
</div>

headerの部分は書き換えてもいいですよ。
※ただし、htmlとcssの単語は合わせる。

例えば、header部分をtitleに変更する。

htmlとcssを同じように書き込む↓

headerで書いた時と同じように表示されます。
これでもう理解したと思います。

classを指定する単語は、別になんでもいいというわけです😌
ただ、注意点があります。

分かりづらいのはダメ

classの指定は自分の分かりやすい単語にしてもいいですが、分かりづらいのは辞めた方がいいです。

なぜなら、反映されてなかった時の問題点が発見しづらいからです。

例えば、サイト上の頭の部分にバグがあると、htmlかcssの「header部分がおかしいな。」とすぐに理解できると思います。

ですが、「abc」のように意味を持たない文字を書き込んでいたら分からないですよね?

一つや二つは覚えているかもしれませんが、コードを何十個も書き込むと覚えてられないです。

なので、classを指定する単語は簡単で分かりやすいものにした方がいい

簡単すぎるのは辞めましょう

自由に書いていいのはいいですが、簡単すぎるのも逆に分かりづらくなります。

例えば、「atama」とか「hed」とか「header1」。
こういうのは辞めた方がいいですね。

簡単で分かりやすいですが、次の指定が書きづらい

例えば、

<div class="header">
	<div class="header-logo">
	</div>
</div>

これなら、記事上のロゴ部分に問題があってもすぐに対処できる。

ですが、これならどうでしょう?

<div class="atama">
	<div class="atama1">
	</div>
</div>

記事上に問題があったとして、htmlやcssを見てみるとこれが書かれている。
これを、すぐに理解できますか?

「atama1ってどれだよ!?」となると思います。

なので、自由に書けるからと言ってなんでもいいわけではありません。

自分が理解しやすく、他人が見ても一目で分かりやすい単語を選ぶべきです。

初心者はカリキュラム通りに書く

classを指定する意味が理解できたと思います。
なので、ここからは「初心者の人はどうすればいいか?」を少しだけアドバイスします。

結論から言うと、初心者の人は指定されたカリキュラム通りに進めるのがいいです。

ProgateならProgate通り。
ドットインストールなら、ドットインストール通りで書き込む。

基本はどちらも同じですけどね。

headerならheader。
header-logoならheader-logo。

一語一句、間違えずに書くこと。
全体の仕組みを理解するまではコレで良いと思います。

変に自由度を求めると理解しづらくなるので、それは辞めましょう。

まずはコードを書くという事を慣れることが大事
なので初心者の方は、まずは言われた通りに書いていくことをおすすめします。

目安としては100時間はコードを書いてから自由度を求めた方がいいです。

慣れたら自分の型を作るといい

コードを書いて100時間を超えると自然と英単語を打ち込むことができるようになっていると思います。
それぐらいなら自由度を求めてOKです。

ただし、先ほども言いましたが簡単すぎるのはダメですよ。
第三者が見ても分かりやすいものにしましょう。

自分の型を作ると作業効率が爆上げします。

僕の型でよければ紹介します。

型と言っても、そんなにカッコイイものではないですけどね(^^;
第三者でも分かりやすく単純化しています。

こんな感じ↓

<div class="header">
	<div class="header-logo">
		<div class="header-list">
		</div>
	</div>
</div>

<div class="main">
	<div class="main-title">
		<div class="main-text">
		</div>
	</div>
</div>

<div class="contents">
	<div class="contents-title">
		<div class="contents-text">
		</div>
	</div>
</div>

<div class="footer">
	<div class="footer-logo">
		<div class="footer-list">
		</div>
	</div>
</div>

基本はシンプルに構成する。

Progateとかを進めていると、copy-conteinerとか出てくるんですよね。

conteinerは模写という意味なんです。
けど、初心者の方はすぐに理解できないですよね?

なので僕は、こういう所も簡単にしています。

実際Progateならこうなっています。

<div class="main">
	<div class="copy-conteiner">
	</div>
</div>

この間に本文を書くんですよね。
それなら、titleの方が分かりやすい。

そう思って、僕は変えています。