Webデザインをする上で覚えておきたいHTML/CSSなどマークアップ系言語の種類・特徴
普段がぼくたちが見ているWebサイトのページはほとんどがHTMLに代表されるマークアップ言語によって構築されています。
マークアップ言語とはたとえばヘッダーやフッター見出しなどページのおおまかなレイアウトを作成するときに用いるものです。
WebサイトのみならずブログももちろんHTMLやCSSを用いるので、ブロガーの人たちもサイトのデザインをカスタマイズするためにこれらのマークアップ言語をを利用することは多いと思います。
よくHTML/CSSはテキストエディタを使ったり、実際に自分で文字を打って構築していくのでプログラミング言語と勘違いされることが多いのですが実際には上記のようにマークアップ言語となります。
しかしマークアップ言語にはHTMLやCSS以外にもさまざまな種類があり、それらを覚えることによって今後のWebデザインにも役に立つかもしれないので今回はそんなマークアップ言語の種類と特徴をまとめていきたいと思います。
マークアップ言語の種類
レイアウト系
HTML
現在ウェブサイトのページのレイアウトで使われる最も標準的なマークアップ言語。
HTMLは「HyperText Markup Language」の略で、元々マニュアルや文書の電子化で用いられたSGMLという初期のマークアップ言語から派生したものです。
<head></head>のように始まりと終わりのタグを用いてそこにそのようその内容などを書いていき構築していく。タグは閉じなら無いルールだが改行に使う<br>など閉じる必要の無いものもあります。
Webデザインにおいては欠かせないものでWebデザイン制作会社などの企業からブロガーなどの個人まで幅広く用いるので、そちらの分野で活躍していきたいひとはまずこちらを覚えておくとよいでしょう。
1冊ですべて身につくHTML & CSSとWebデザイン入門講座
- 作者: Mana
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2019/03/16
- メディア: 単行本
- この商品を含むブログを見る
XML
XMLは「Extensible Markup Language」の略で、HTML同様広く使われているマークアップ言語になっています。
XMLは人間の目に入れることもありますが、どちらかというとクローラなどロボットなどが情報を収集するためにも使われます。
主にサーチコンソール(Google)でサイトマップを送信するときや、RSSなどフィードをニュースを得る際にもXMLが使われることがあるので実際になじみがある人も多いと思います。
XHTML
「Extensible HyperText Markup Language」の略でその名のとおり、HTMLとXMLをあわせたようなマークアップ言語です。
XMLベースでHTMLのようなマークアップが可能で、HTMLと似たようなような特徴も多いですが閉じタグ絶対に必要などルールが若干厳しいなど特有の点などもあります。
- 作者: Chuck Musciano,Bill Kennedy,原隆文
- 出版社/メーカー: オライリー・ジャパン
- 発売日: 2003/05/26
- メディア: 単行本
- 購入: 1人 クリック: 79回
- この商品を含むブログ (14件) を見る
MarkDown(MD)
従来のマークアップ言語とは少し異なり、文書を記述するために特化された軽量のマークアップ言語になっています。
シンプルな構造なので記述なども簡単に行うことができ、HTML等にも変換することができるのが特徴です。
ソフトなどをダウンロードされている説明テキスト（README.md）などもマークダウンで記載されていることが多いですし、プログラミング情報サイトのQiitaもマークダウン記法が採用されているなどさまざまなサイトなどにも注目されています。
あ、はてなブログもマークダウン使えますねっ（ゝω・）
Markdownライティング入門 プレーンテキストで気楽に書こう！ (技術の泉シリーズ（NextPublishing）)
- 作者: 藤原惟
- 出版社/メーカー: インプレスR&D
- 発売日: 2018/12/14
- メディア: Kindle版
- この商品を含むブログを見る
デザイン系
CSS
HTMLなどの言語がページのレイアウトを決めるものなら、CSSはHTMLで定義した要素をカスタマイズする際に用います。CSSは「Cascading Style Sheets」の略でHTMLで定義した要素の大きさや色などを指定する際に用います。
大きさや色だけでなく、線の太さや文字のフォントなど自由なカスタマイズが可能なのでこれを覚えることによってだいぶウェブデザインの幅が広がってきます。
SCSS
SCSSはCSSから派生したSaasの構文のひとつで、CSSよりも手間を省いて設計がしやすくなるように設計されています。
ほかのCSSの派生と比べてもCSSと共通する部分が多く、CSSをそのまま書くことができるのではじめて派生形を使うのであればこちらがお勧めです。
特徴としては｛｝（入れ子・ネスト）を多く用いるのが特徴で、要素ごとの情報を火留めて目にしているのが特徴です。
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
- 作者: 谷拓樹
- 出版社/メーカー: インプレス
- 発売日: 2014/07/24
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (4件) を見る
SASS
SASSもSCSSと同じくSaasの構文のひとつで、同じようにCSSよりも書きやすいように設計されていて、SCSSは入れ子({})をたくさん用いるのに対してSASSの場合はかっこを一切使います。
基本的にかっこのかわりにインデント（間隔）を用いて定義していくのが特徴で見た目的にもあっさりしていて見やすいものになっています。
Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ
- 作者: 平澤隆,森田壮
- 出版社/メーカー: インプレス
- 発売日: 2017/09/15
- メディア: 単行本（ソフトカバー）
- この商品を含むブログを見る
LESS
LESSとはその名のとおり少ないことを意識したスタイルシートで、CSSよりも少ない記述・豊富な機能を特徴としています。
書き方としてはSASSに似ていて、さらに変数などを指定できるようになっています。
まとめ
普段ウェブページを作成する際にはHTML/CSSを使用して構築していくことが多いですが、実はさまざまな種類がありそれぞれの用途によってもちいることでより効率的な開発を行うことができます。
いまでもHTMLとCSSの組み合わせが主流ですが、最近のモダンな開発などを行っているスタートアップなどの企業は生産性や効率性を重視する傾向があるのでSCSSなどを使うことも多いそうです。
なのでそういうところで働いて見たいと考える人もそれらを習得することによって有利になるかもしれませんね。
はじめのほうにHTMLなどはマークアップ言語でありプログラミング言語ではないと書きましたが、テキストエディタを用いたり、キーボードをたたいて作業していくところなど共通点もあります。
ほかにもサイトなどを運営していくとそのうちJavaScriptやPHPも使っていきたいと思うこともあると思うので、プログラミングの入り口としてマークアップ言語を選ぶというのもいいかもしれません。
ぼくもはじめはホームページ作成から入っていて、学習コストも低いのでぜひ参考にしてみてください。
