chapter1 : Flexbox

Webデザインを勉強している初学者がどうしてもぶち当たりがちな壁が、横並びの鬼門「float」の概念です。
僕も以前、某プログラミングスクールで学習していた際に理解するのに時間がかかりました。周りの受講生も理解に苦しむ人は多々いましたね。

ここで初学者には難解なfloatの概念を打ち砕いてくれるのが「Flexbox」という便利な概念。

floatで躓いている人は下記サイトを見てみてください。

chapter 2 :Emmet

あなたはコードを書いていてエラーにぶち当たったことはありますか？
ぶち当たったことがある人にお聞きします。
そのエラーの原因は単純なスペルミスだったことはありませんか？

これはコードを書いたことがある人ならほとんどの人が当てはまると思います。まあ人間ですからスペルミスくらいあります。ただエラー探しって内容によっては時間と労力をめちゃめちゃ消費しますよね。

でもEmmetを使えばそんな単純なミスを極限まで少なくできます。

スペルミスの原因は手入力をしてしまうことです。だったら手入力を極力やらないでおけばいいじゃんってことでEmmet。

迷わずEmmet。

迷わずTabキー。

時間効率爆上がりです。

Emmetで使える省略コードは下記記事でたくさん紹介されているので覗き見してみてください。
全部暗記する必要はありませんが使っているうちに体がどんどん覚えていくはずです。

chapter3 : クラス名の考え方

クラス名ってなんでもいい訳じゃないんです。

まず絶対にNGな命名方法が4つ。
◼︎日本語(class="うんち")
◼︎全角英数字(class="UNCHI66")
◼︎数字から始まる(class="66unchi")
◼︎「-(ハイフン)」「_(アンダースコア)」

余談なんですけど「_」のことみなさんなんと呼んでますか？
僕は今日まで「アンダーバー」と呼んでました。でもこれ和製英語らしく、正しくは「アンダースコア」だそうです。びっくり。

次にNGではないけどあまり良くない命名方法が1つ。
◼︎日本語ローマ字(class="unnchi")

「unnchi」とか「unnko」とか僕が例を挙げるときによく使うやつです。
ただあれはあくまでも堅苦しくない説明を心がけた結果なので優しく見守っていただけたらと思います。

こんな感じでNGルールがいくつか存在します。
ただし、これといって正解がある訳でもないんですよ。
でも暗黙のルール的なものがあります。

例えばページのヘッダータイトルのクラスを指定する際に以下のようなクラス名だったら、それがヘッダータイトルを指すものだと連想できますか？

<h1 class="sentence">2022年の占い</h1>

h1タグだしなんとなくタイトルというのは分かるかもしれませんが、どの部分のタイトルなのかぱっと見じゃわかんないですよね。

なので今回のような場合はこんな感じにするとOKです。

<h1 class="header-title">2022年の占い</h1>

ぱっと見でヘッダーのタイトルのことだなって連想できますよね。

そもそもどうして分かりやすいクラス名にしなければいけないのかというと、そのコードを編集するのが自分だけとは限らないからです。

自分で運営しているブログやECサイトであれば我流でもいいと思うんですけど、組織で運用していくのであればそうもいきませんよね。

なので今のうちからわかりやすいクラス名をつけることを癖づけておくことをお勧めします。

クラス名の考え方について分かりやすくまとめてあるブログを見つけたので参考にしてみてください。

それでは今日はこの辺で終わります。
ありがとうございました。
けけ丸