導入

HTMLやCSS、Rubyを学習し始めてから2年弱が経過しました。

先日友達から「プログラミングを学ぼうと思う」と言われ、アウトプットの意味を込めて「教える！」と返事をしました。しかし、「自分が知っている」と「他人に教えること」では大きな違いがありました。実際に教えてみると、うまく伝わらず不明点が多く残ってしまったのです。

このことから、自分の知っている知識を正しく、わかりやすく説明する必要があると気がつきました。
そのための練習として、基礎的なHTML・CSSをここでアウトプットしたいと思います。

概要(ゴール設定)

こちらんの記事ではHTMLとCSSの役割とウェブブラウザで表示する方法について説明します。

webサイトというと様々な言語で構成されていると思われがちですが、実際はHTMLとCSSの2つの言語によって構成されています。

CSSがHTMLを装飾してwebブラウザに表示します。

実際ブラウザ上でどのような違いがあるのか、CSS有り、無しで表示した画像を並べてみました。

両者をみると明らかに左の方がそれっぽいページの見た目をしています。
CSSを使い見た目を整えることで、ユーザーにとって使いやすいサイト・サービスが構築可能です。
よってこの2つの言語はセットて使うことが一般的です。