HTMLとCSS(Sass)が意外と難しい件

どうも、おぎくぼです。

今回はHTMLとCSS(Sass)が意外と難しいということについて書いてみます。

HTMLとCSSは簡単だから、誰でもすぐにできるようになる」と巷ではよく言われています。

これは半分正しくて半分間違っていると私は思います。

個人的な開発のレベルでしたら、数ヶ月の勉強だけでも問題なく書けると思うのでHTML/CSSができると言えるでしょう。

ただ仕事としてお客様に納品したり、自社のサービスをつくり、これから運営していくと考えると少し高いレベルのコーディング力が求められるので、すぐにできるようになるとは言い難いと思います。

やはり仕事にすると難しいと感じるところが多くあります。

今回の記事では仕事をする上で求められることや、そこで感じる難しさについてお伝えできたらなぁと思います。

HTMLについて

HTMLを仕事として使用する場合には“セマンティックなマークアップ”が求められます。

セマンティックなマークアップ

“セマンティックなマークアップ”とは簡単にいうと、文章構造的に正しくタグに意味を持たせてマークアップしようということだと私は考えます。(違うかも。)

上記の2つのコードを見比べてみてください。どちらともCSSでスタイリングし、表示されるものは同じとします。

表示されるものは同じでも、HTMLの構造は全く異なります。

この2つを比較するとセマンティックなマークアップができているのはコード1です。

<section>タグで文章構造的なまとまりを作り、タイトルには見出しタグの<h2>タグを使用し、本文には段落を表す<p>タグを使用しています。

それに対しコード2は、特に意味を持たないまとまりを表す<div>タグで全体を囲い、タイトルには段落を表す<p>タグを使用し、本文には特に意味を持たないまとまりを表す<span>タグが使用されています。

文章の構造的にはかなりおかしいですよね。(今回は極端に)

可能な限りタグには意味を持たせたいので、<div>や<span>タグはあまり使用したくないです。

使用するのはレイアウトを整えたいときです。それ以外は常にタグに適切な意味を持たせ、マークアップしなくてはいいHTMLとは言えないです。

そもそもマークアップとは

そもそもマークアップとはなんぞやと。

マークアップはサイトの構造に意味付けをすることです。そのためにタグを使用します。

そもそもHTMLはプログラミング言語ではありません。HTMLはマークアップ言語なのです。

何かを動かしたりするわけではなく、サイトの構造をタグという印で意味づけをする言語です。

ここはわりと勘違いが多い気がします。HTMLはプログラミングではありませんよ。

CSS(Sass)について

*CSSはSass(scss)で記述します。ご了承ください。

CSSはHTMLより遥かに難しいです。HTMLとの違いはカオスになりやすいところです。

CSSの設計がクソだといろいろきついです。

仕事としてCSS使うときに最低限求められることを私なりにまとめてみます。

規則性がある
・再利用可能である
・変更に強い

規則性がある

CSSには規則性が大切です。特にクラスの命名規則は予め決めておかないとカオスになります。

また、記述の仕方(プロパティの順番やスペースを入れるべきところなど)を統一することも大切です。

その理由は

・コードが綺麗に保たれる
・複数人での作業が進めやすい

が挙げられると思います。

コードが綺麗に保たれる

規則がないとコードがかなり汚くなります。これではサイトに変更点が発生したときにかなりの工数がかかることになってしまいます。

予め規則性を持たせてコードを綺麗に保つことは将来的にやっておくべきことです。

複数人での作業が進めやすい

規則性があると複数人での作業が進めやすくなります。

他の人の書いたコードを変更したり、追加したりが楽になります。

また、これも綺麗なコードを保ちカオスになることの防止につながります。

再利用可能である

再利用可能なCSSの記述をすることで無駄な工数を減らし、コードをコンパクトにすることができます。

こちらは先ほどのコードを少し変えました。

このコードは一見綺麗に見えますが、再利用は難しそうです。

newsとはいっているので、このクラス名はnewsでしか使わないのが望ましいでしょう。

ではこのコードはいかがでしょうか?こちらはsectionを省略したsecが使われています。

newsよりも抽象化されたので、再利用ができそうです。

sectionはページの中で大体同じレイアウトなので先に作っておいて、後から少し手を加えるのがいいかなと思います。

もしnewsのところだけ少しレイアウトを変更したかった場合は、secの後に-newsとつけてあげれば簡単に変更できます。

こんな感じで書けば、少しの記述で済みます。

このように再利用できるコードが求められます。

変更に強い

変更に強いCSSを予め記述しておくことで、保守が楽になります。

変更に強くするにはSassで書くことをお勧めします。

SassはCSSと違い、変数やミックスインといった機能が使用できます。

このように記述しておけば、

ここだけ変更すれば全てに適応されるので、大規模なページでも変更に強くなります。(変数だけまとめたファイルを作成することが望ましいです。)

Sassをうまく使えば少ない記述で済むことが多いので、絶対に使ったほうがいいですよ。

まとめ

今回はHTML/CSSを仕事として使うには意外と難しいんだよーということをお伝えできたかなと思います。

こういうことを意識してコーディングするんだなとか、こういうところを勉強してみようと考えられるきっかけになれたら嬉しいです。

私もまだまだ勉強中なので一緒に頑張りましょう。

これから始めるよーって方はとりあえずをProgateやってHTML/CSSを感じてみてください。

最後まで読んでいただきありがとうございます。

ではまた。