【 Webシステム開発 】HTMLとCSSの基本を理解しよう

こんにちは、x-climbです。

今回は、学べるシリーズ「 HTML & CSS 」についてです。

本来であれば、最初に解説すべき項目でしたが、触れていませんでしたので今回取り上げてみたいと思います。

では早速みていきましょう。

HTML

HTMLの基本

HTMLは、Webサイトを作る上で基礎となる言語です。

とはいえ、HTMLだけではWebサイト自体は作ることはできません。

HTMLに加えてCSSや他の開発言語と組み合わせることで初めてWebサイトが完成します。

HTMLは、ハイパー・テキスト・マークアップ・ランゲージ（HyperText Markup Language）の略でして、基本的にWebサイト上で表示される文字はHTMLと思って問題ありません。

HTMLのメリット

HTML自体は、非常にシンプルなので初心者にとっては非常に学びやすい言語と言えるでしょう。

HTMLの知識なしにWebサイトは作れませんので、プログラミング学習の第一歩と言っても過言ではありません。

細かく言えば、Markup言語と呼ばれるものなので、正確にはプログラミング言語とはいいませんが。

ネット環境、ブラウザ、エディタがあればHTMLは学習可能な為、ハードルはそこまで高いものではありません。

HTMLの次に学習するのがCSSとなります。（基本的な学習の流れ）

CSS

CSSの基本

CSSをシンプルに言うと、Webサイトのデザインを指定する為の言語です。

CSSは、カスケーディング・スタイル・シート（Cascading Style Sheets）の略でして、HTMLで骨組みを作り、CSSでデザインを整えていくという流れです。

プログラミング初心者は、HTML→CSSの順に学習するのが一般的です。

デザインを整えるというのは、Webサイトのカラーや配置などを指します。

HTMLとCSSを組み合わせることで、簡単Webサイトであれば作成できてしまいます。

CSSで覚えておくべき項目は下記のとおり。

①セレクタ
②プロパティ
③値

①〜③の要素を知ることにより、CSSの理解が深まります。

深ぼりした内容は別記事にて解説します。

CSSのメリット

CSSの主なメリットは下記のとおり。

①HTMLでは実現できない装飾が可能
②レイアウトが自由に構築可能
③SEOに有利に働く
④学習がしやすい

近年のSEOは、ユーザーにとって見やすいWebサイトが評価されています。

例えば、スマホ対応のWebデザインはレスポンシブと呼ばれており、レスポンシブに対応していないサイトはユーザビリティを低下させるということでSEO的にも不利と言われています。

まとめ

いかがでしたでしょうか？

今回は、HTMLとCSSの基本的なイメージができればOKです。

HTML、CSS共に初心者にとって学びやすい言語であり、また、Webシステム開発に不可欠な言語でもあります。

次回は、より深ぼりして解説していきます。

▶︎ JavaScript

▶︎ jQuery

▶︎ Python

▶︎ Ruby

▶︎ PHP