エンジニアのみなさんも、そうでないみなさんもこんにちは。

突然ですが、みなさんはコーディングする時どのようなCSSのメタ言語をお使いですか？

現代の主流は、LessとSass(Sass/Scss)といわれていますが、筆者もSassを愛用しています。

そんなSassに切り替えてから筆者が感じた点をご紹介していきます。

Sassの導入記事についてはこちら↓

カラーコードなどで変数機能が活きる

Sassでは、

$○○○:△△△;　(どちらも任意)

のように最初に「$」をつけると変数として定義して記憶してくれます。

そこでこの機能が活躍するのが、カラーコードです。

#fffや#333など、単純なコードの色であればそれほど手間はかかりませんが、

自分で決定した複雑なカラーコードであると毎回コピペして…というのは面倒ですよね。

そんな時に例えば、

$orange:#FFB443

と変数orangeを設定すれば、

color:$orange

/* コンパイル後 */
color:#FFB443

と出力されます。

変数のいいところが、メンテナンス性の向上にもあります。

変数に格納すれば、#FFB443で設定している箇所を一気に変更したい時も修正が一箇所（変数の記述）だけですみます。

@mixinを用いたレスポンシブ(メディアクエリ)設定

mixinとは、@mixin ××(関数名のようなもの)と一度記述すれば、

何回でも@include ××で@mixinで記述したCSSを引用できる機能です。

しかも、引数も使うことができます。

使いこなせれば非常に便利です。

そして代表的なmixinの使い方としてご紹介したいのが、

メディアクエリをincludeで記述する方法です。

まず例として以下のようにmixinを定めます。

@mixin pc{
  @media (min-width:(800px)) {
    @content;
  }
}

モバイルファーストでWebサイトを作成した際に、

800px以上の画面幅のデバイスで閲覧した時に切り替えるメディアクエリを設定したい場合、

.title{
  margin-top:1em;
  font-size:0.8rem;
}

↓

.title{
  margin-top:1em;
  font-size:0.8rem;

  @include pc{
    font-size:1.5rem;
  }
}

と、追加すればコンパイル後は

.title{
  margin-top:1em;
  font-size:0.8rem;
}

 @media (min-width:800px){
   .title{
     font-size:1.5rem;
   }
}

と出力されます。

この記述の利点は何より、

同一のクラスのメディアクエリであればファイルの下部などではなく、ほぼ同じスペースに記述できるので、

記述の重複などのミスがなくなり、デバイスごとにクラスを探したりすることがなくなります。

筆者がSassの中で最も感銘を受けた機能かもしれません。

目的、パーツごとのファイル分けで管理できる

普通のサイトであれば、ページごとに別々のスタイルシートを読み込むのが一般的かと思います。

しかし、Sassの@import機能で一つのシートに複数のSassファイルを読み込み統合することができます。

筆者はいつも以下のように設定をしています。

header.php

style.scss

@import 'foundation/vars';
@import 'foundation/reset';
@import 'foundation/mixin';
@import 'foundation/base';

@import 'layout/header';
@import 'layout/btn';
@import 'layout/top';

まずヘッダーにはstyle.scssのコンパイル後のファイル(.cssでも.min.cssでもどちらでも可)を読み込みます。

そして、style.scssには読み込みたいファイルを全て@importして、保存をして正常に保存が完了しているか確認します。

そうすると、上から書いたファイルを順番にそれぞれコンパイルしたファイルを生成してくれるのです。

このファイル管理の仕方だと、

• ページが異なっても同じデザインのパーツを管理できる
• 命名規則をしっかり定めれば、チーム内で共有しやすい

といったようなメリットが生じます。

まとめ

いかがだったでしょうか。

今回は筆者が実際に感じたSassについてのメリットなどをご紹介しました。

今まで使ったことがない機能があった方は、ぜひ今回を機にマスターしてみてください。

こんにちは！突然ですがあなたはdlタグ、tableタグ、ul,olタグの違いを説明できますか？

明確な違いを理解して使わなければ、SEO対策がとても不利になってしまいます。

SEO対策についての記事はこちら↓

また、これらのタグはGoogleなどの検索エンジンにサイトの構造を理解させるために、表やリストが登場するサイトでは必要不可欠です。

筆者がSEO対策を練る際に得た様々な知識を本記事にまとめさせていただきました。

どのタグも見たことがない！なんて方にもわかりやすく紹介していきますね！

1. 1.最初にオススメすること
2. 2.dlタグ
3. 3.tableタグ
4. 4.ulタグ、olタグ
5. 5.まとめ

最初にオススメすること

まず、dlタグの中では項目によって<dt>や<dd>を使い分けます。

最初はdtとddどっちがどっちで、どういう意味なんだっけ？って混同しますよね。

これは略している英語の意味を覚えるのが一番わかりやすいです。

そちらも項目ごとに合わせてご説明いたします。

dlタグ

dl = definition list（定義）の略であり、定義リスト(説明リスト)のことを指します。

dlタグの中で使えるタグは、<dt>と<dd>の二つです。

dt:定義する用語（Definition Term）

dd:用語の説明（Definition Description）

使用例

定期公演について
　　開催日時：8/12 10:00～
　　開催場所：日比谷野外音楽堂

↓

<table>
  <caption>定期公演について</caption>
<dl>
  <dt>開催日時：</dt>
  <dd>8/12 10:00〜</dd>

  <dt>開催場所：</dt>
  <dd>日比谷野外音楽堂</dd>
</dl>
</table>

dtとddを横並びにしたいときは、floatなどを活用しましょう。

また、使用例のように<dt>の後に毎回：(コロン)などの一定の文字が来る場合は、dt::afterといった擬似要素でコーディングする方がスタイリッシュなコーディングになりますね！

tableタグ

tableタグの中では、<tr>/<th>/<td>を用います。

tr:テーブルの列（Table Row）

th:テーブルの見出し（Table Header）

td:テーブルのデータ（Table Data）

使用例

定期公演について

↓

<table>
  <caption>定期公演について</caption>
  <tr>
    <th>開催日時</th>
    <td>8/12 10:00〜</td>
  </tr>

  <tr>
    <th>開催場所</th>
    <td>日比谷野外音楽堂</td>
  </tr>
</table>

使い方としては、<table>の中に<tr>、<tr>の中に<th>と<td>を適宜追加していくような形です。

thやtdの個数には特にルールはありません。

また、<caption>は<table>のすぐ下に一つだけ挿入できるタグです。

tableの題名があてられるときは積極的に使いましょう。

ulタグ、olタグ

ol:順序つきリスト（Ordered list）

ul:順序なしリスト（Unordered list）

使用例

カレーの具材の種類
　・人参
　・じゃがいも
　・お肉

カレーの作り方
　1.肉と野菜を炒める
　2.カレールーを入れる
　3.とろみがつくまで弱火で煮込む

↓

<caption>カレーの具材の種類</caption>
<ul>
  <li>人参</li>
  <li>じゃがいも</li>
  <li>お肉</li>
</ul>
<caption>カレーの作り方</caption>
<ol>
  <li>肉と野菜を炒める</li>
  <li>カレールーを入れる</li>
  <li>とろみがつくまで弱火で煮込む</li>
</ol>

順序が関係ないものには<ul>、関係あるものには<ol>を用います。

本サイトの目次は<ol>で構成されています。

デフォルトの状態だと、<ul>にはlist-style-type:disc（黒点）,<ol>にはlist-style-type:decimal（半角英数字）というCSSがついております。

そのまま用いても構いませんが、黒点や数字の分の幅は考慮されずに出力されるので、CSSで調整をしましょう。

list-style-typeには色々な種類があるので、好みのものを用いてください。

まとめ

いかがでしたか？

ぜひタグを正しく使ってSEO対策をして、検索上位に出るようなサイトを作ってください。