Webサイト制作を学ぼうとしたとき、多くの人がHTML・CSS・JavaScriptという3つの技術に触れると思います。
これらを学んで簡単なサイトであれば作れる！という段階まで来るとある壁にぶつかります。
「一通り触ったけど、次に何を学べばいいんだろう？」
はじめまして。フロントエンドエンジニアのくめっち（@kume_KROWL）です。
僕は約一年前に未経験からKROWLを通じてWeb業界に入りました。
上記の疑問はその当時、僕が感じていたものなのですが
調べてもイマイチ欲しい情報が見つからなかった経験があります。
今回は当時の僕のように、ある程度Web制作の基礎を学んだ人が次に学ぶべき技術、知識を紹介したいと思います！
テキストエディタの機能をフル活用しよう
皆さん、テキストエディタは何を使っていますか？
以前、ひらやま（@ichigeorge）がBracketsの紹介記事を書いていましたが
こういったテキストエディタには便利な機能がたくさん搭載されています。
しかも、プラグインをインストールすることで便利な機能を追加し、自分の使いやすいようにカスタマイズすることができます。
その中でも最もメジャーと言っても過言ではない「Emmet」という機能は、コードを書く人なら必ず使用するべきです。
Emmetを使ってできること
HTMLの場合
例えば
<div id="wrap">
<ul class="list">
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
<li class="item"><a href=""></a></li>
</ul>
</div>このようなコードを記述したい場合、
div#wrap>ul.list>li.item*3>a上記のように書いて設定したキー（デフォルトではTab）を押すだけでできてしまいます。
最初に知った時は衝撃でした。なぜこんな便利なものがあるのにみんな黙っていたのかと。
しまいにはこれです。
!「!」一つで下記のようになります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>もう二度とDOCTYPEなんて書きません。
しかもこれがHTMLだけではないのです。
CSSの場合
display: block;くらい書いてやってもいいですが、もっと楽をしましょう。
.hoge {
d:b
ta:c
}これが
.hoge {
display: block;
text-align: center;
}こうです。
d(isplay):b(lock)
t(ext-)a(lign):c(enter)
ってことですね。
もう暗号です。
最終的にはこうなります。
.hoge {
d
}↓
.hoge {
display: block;
}省略の次元を軽々しく超えてきますね。
「d」というアルファベットの秘めたる力を感じます。
恐らくですが、先述のように「display: block;」の「block」を指定しない場合、
Emmet側で設定された一番メジャーなものを自動的に表示してくれるのかもしれません。
「どうせblockだろ？」と見透かされているわけです。
他にも無数のショートカットが用意されているので、下記サイトなどを見ながら色々試して見てください！
https://docs.emmet.io/cheat-sheet/
オススメの拡張機能は他にも沢山あるのですがエディタにもよって違いがあるので色々触ってみて自分だけのエディタを作ってみてはいかがでしょうか。
メタ言語を使おう
HTMLやCSSをある程度使えるようになったら、次に覚えたいのがメタ言語です。
メタ言語とは、簡単にいうとHTMLやCSSをより便利に記述するための言語です。
今回はその中でももっとも使用頻度の高いCSSのメタ言語である「Sass」を紹介していきます！
Sassとは？
まず、Sassは厳密にいうと下記の二つの書き方が存在しています。
- SASS記法
- SCSS記法
今回紹介するのはSCSS記法にあたり、拡張子は.scssになります。
他にも様々なメタ言語が存在していますが、こちらのSCSS記法は元々のCSSに記述が近いこともあり、特に普及しているようです。
実際に見てみましょう！
header {
background-color: #000;
}
header ul {
margin: 60px 0;
}
header ul li {
color: #fff;
}こちらはheaderと、その子要素であるul,liタグにスタイルを指定しているCSSですね。
この3つくらいであればまだいいのですが、複数のセレクタを指定していくとその度に親要素を記述することになって面倒ですよね？
これをSassというメタ言語ではこのように記述することができます。
header {
background-color: #000;
ul {
margin: 60px 0;
li {
color: #fff;
}
}
}元々のCSSとそんなに記述が変わらず
要素が入れ子になることで、視覚的にも親子関係がわかりやすくなりました！
このように要素が入れ子になることを「ネストされる」ともいいます。
他にも、JavaScriptのように変数や関数を扱うことができます。
今回はすぐに実践できそうな機能をいくつか紹介します！
変数
$common_height: 100px;
.item {
height: $common_height;
}
.card {
height: $common_height;
}↓
.item, .card {
height: 100px;
}共通の値はこのように変数で管理することでデザインの変更があった場合も、一箇所を変更するだけで済みます。
関数
@function half($val) {
@return $val / 2;
}
.card {
width: half(100px);
}↓
.card {
width: 50px;
}使用頻度が高い処理は関数として定義しましょう。
特にメディアクエリを関数化するとレスポンシブ対応が一気に楽になるのでオススメです！
スタイルの継承
.button {
padding: 20px;
color: #fff;
background: #000;
font-size: 1.4rem;
}
.button-red {
@extend .button;
background: red;
}↓
.button {
padding: 20px;
color: #fff;
background: #000;
font-size: 1.4rem;
}
.button-red {
padding: 20px;
color: #fff;
background: #000;
// .button-red に指定した「background: red」によって打ち消される
font-size: 1.4rem;
background: red;
}このように他の要素のスタイルを継承することができます。
上記の例のように基本形を作って色やサイズを変える時によく使います。
Sassには、このような便利な機能がたくさんあるので、ぜひ試してみてください！
HTMLのメタ言語としては「Pug」や「EJS」というものも現場でよく使われています。
私が仕事で静的なサイト制作を行う時はだいたいPugとSassを使っています。
SassからCSSに変換してブラウザでも扱えるようにしたりと導入のハードルは少しありますが、サイト制作のスピードが劇的に上がるので、この機会に是非使ってみましょう！
CSSの命名規則を覚えよう
仕事としてサイト制作を行なっていると、他の方が記述したコードを触ることがあります。
その時にクラス名が抽象的すぎてわからないと不便ですよね？
または自分でつけたクラス名だとしても「.title」、「.item」などの範囲が広すぎる命名をしてしまい後から書き直すことになるかもしれません。
サイト制作の永遠の課題であるクラス名の命名ですが、
実は広く普及している命名規則がいくつかあり、現場ではそのルールに沿ってつけることが多いです。
個人的によくネットの情報で見かける有名なものは以下の3つになります。
- OOCSS
- BEM
- SMACSS
このような命名規則を使うとクラス名がわかりやすいだけではなく、
同じような要素を他のところでも使いまわしたりとCSSをより便利に扱うことができます。
今回はその中でよく使われているBEMに触れたいと思います。
BEMというのは下記の頭文字を取ったものになり、要素をこの3つの機能に分けていきます。
- Block
→独立したかたまり、様々な要素をまとめている親要素 - Element
→Blockの構成要素 - Modifier
→BlockやElementの状態
これを
block__element--modifierというように記述していきます。
…さっぱりわからないですね。もうちょっと具体的に見てみましょう。
<ul class="list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>このような要素があったとします。
実際にサイトの中で使うとこんな悩みが出てくると思います。
- itemという名前を他のところでも使いたい
- 3つ目のitemだけ色が違う
これがBEMを用いて記述すると下記のようになります。
<ul class="list">
<li class="list__item"></li>
<li class="list__item"></li>
<li class="list__item--red"></li>
</ul>このように書けば
「list」という要素は「item」の子要素の一つで、3つ目だけ色が赤い
という情報が一目でわかります。
要素が増えた時にも対処できます。
<ul class="list">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>
<ul class="menu">
<li class="item"></li>
<li class="item"></li>
<li class="item"></li>
</ul>このように「menu」という要素の中にも「item」を使った場合、
どちらの「item」なのかわからなくなってしまいますが、BEMを用いて記述することでスタイリングも容易になります。
<ul class="list">
<li class="list__item"></li>
<li class="list__item"></li>
<li class="list__item--red"></li>
</ul>
<ul class="menu">
<li class="menu__item"></li>
<li class="menu__item"></li>
<li class="menu__item"></li>
</ul>しかも！
この記事内でも紹介したSassなどを使うとさらに恩恵を得られます。
上の例をSassで記述すると
.list {
&__item {
font-size: 1.6rem;
&--red {
color: red;
}
}
}
.menu {
&__item {
font-size: 1.4rem;
}
}このようにHTMLを見なくても要素の親子関係なども理解しやすくなります。
実際の現場ではこのような命名規則をそのまま使うだけではなく、他の要素なども取り込んで使われることが多いようですが
基本を押さえておけば新しいルールにも柔軟に対応できるようになるのではないでしょうか。
まとめ
今回紹介した技術は、わからなければサイト制作ができないというものではありません。
しかし、いざ現場に入ってみると、本当に様々な技術を駆使してサイト制作に取り組んでいます。
これらを学んでおくことで、現場で即戦力として活躍できるようになるかもしれません。
理解するのに時間がかかるものもありますが、何事も触ってみなければわかるようにはなりません。
冒頭でも書きましたが私は入社前から勉強しておきたかったです。そしたらもっと楽できたのに…
HTMLやCSS、JavaScriptの学習をしている方に向けて無料のコーディング課題をKROWLサイトで配布中！
難易度別に用意してあるサンプルサイトのデザインデータを元に、サイト制作のスキルを磨こう！
