mofflog

---人生の3%ぐらい役立つブログ---

Webデザインをする上で覚えておきたいHTML/CSSなどマークアップ系言語の種類・特徴

f:id:moffle8:20190531234938p:plain

こんにちはもっふるでs

 

普段がぼくたちが見ている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デザイン入門講座

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

 

 

XML

XMLは「Extensible Markup Language」の略で、HTML同様広く使われているマークアップ言語になっています。XMLは人間の目に入れることもありますが、どちらかというとクローラなどロボットなどが情報を収集するためにも使われます。

 

主にサーチコンソール(Google)でサイトマップを送信するときや、RSSなどフィードをニュースを得る際にもXMLが使われることがあるので実際になじみがある人も多いと思います。

10日でおぼえるXML入門教室 第2版

10日でおぼえるXML入門教室 第2版

 

 

XHTML

「Extensible HyperText Markup Language」の略でその名のとおり、HTMLとXMLをあわせたようなマークアップ言語です。XMLベースでHTMLのようなマークアップが可能で、HTMLと似たようなような特徴も多いですが閉じタグ絶対に必要などルールが若干厳しいなど特有の点などもあります。

HTML & XHTML 第5版

HTML & XHTML 第5版

 

 

MarkDown(MD)

従来のマークアップ言語とは少し異なり、文書を記述するために特化された軽量のマークアップ言語になっています。シンプルな構造なので記述なども簡単に行うことができ、HTML等にも変換することができるのが特徴です。

 

ソフトなどをダウンロードされている説明テキスト(README.md)などもマークダウンで記載されていることが多いですし、プログラミング情報サイトのQiitaもマークダウン記法が採用されているなどさまざまなサイトなどにも注目されています。あ、はてなブログもマークダウン使えますねっ(ゝω・)

Markdownライティング入門 プレーンテキストで気楽に書こう! (技術の泉シリーズ(NextPublishing))
 

 

 

デザイン系

CSS

HTMLなどの言語がページのレイアウトを決めるものなら、CSSはHTMLで定義した要素をカスタマイズする際に用います。CSSは「Cascading Style Sheets」の略でHTMLで定義した要素の大きさや色などを指定する際に用います。

 

大きさや色だけでなく、線の太さや文字のフォントなど自由なカスタマイズが可能なのでこれを覚えることによってだいぶウェブデザインの幅が広がってきます。

今すぐ使えるCSSレシピブック

今すぐ使えるCSSレシピブック

 

 

SCSS

SCSSはCSSから派生したSaasの構文のひとつで、CSSよりも手間を省いて設計がしやすくなるように設計されています。ほかのCSSの派生と比べてもCSSと共通する部分が多く、CSSをそのまま書くことができるのではじめて派生形を使うのであればこちらがお勧めです。

 

特徴としては{}(入れ子・ネスト)を多く用いるのが特徴で、要素ごとの情報を火留めて目にしているのが特徴です。

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法

 

 

SASS

SASSもSCSSと同じくSaasの構文のひとつで、同じようにCSSよりも書きやすいように設計されていて、SCSSは入れ子({})をたくさん用いるのに対してSASSの場合はかっこを一切使います。

 

基本的にかっこのかわりにインデント(間隔)を用いて定義していくのが特徴で見た目的にもあっさりしていて見やすいものになっています。

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

 

 

LESS

LESSとはその名のとおり少ないことを意識したスタイルシートで、CSSよりも少ない記述・豊富な機能を特徴としています。書き方としてはSASSに似ていて、さらに変数などを指定できるようになっています。

 

まとめ

普段ウェブページを作成する際にはHTML/CSSを使用して構築していくことが多いですが、実はさまざまな種類がありそれぞれの用途によってもちいることでより効率的な開発を行うことができます。

 

いまでもHTMLとCSSの組み合わせが主流ですが、最近のモダンな開発などを行っているスタートアップなどの企業は生産性や効率性を重視する傾向があるのでSCSSなどを使うことも多いそうです。

 

なのでそういうところで働いて見たいと考える人もそれらを習得することによって有利になるかもしれませんね。

 

 

はじめのほうにHTMLなどはマークアップ言語でありプログラミング言語ではないと書きましたが、テキストエディタを用いたり、キーボードをたたいて作業していくところなど共通点もあります。

 

ほかにもサイトなどを運営していくとそのうちJavaScriptやPHPも使っていきたいと思うこともあると思うので、プログラミングの入り口としてマークアップ言語を選ぶというのもいいかもしれません。

 

ぼくもはじめはホームページ作成から入っていて、学習コストも低いのでぜひ参考にしてみてください。