前回の記事では、Webアプリにおける、HTMLの役割について説明しました。
この記事ではCSSの役割について説明します。
CSSの役割
CSSの役割を一言で表すと、
「Webページの見た目をかっこよくするためのツール」
です。
前回の記事で、HTMLファイルを読み込んだ以下のページをご覧いただきました。
HTMLのルールに基づいて記載することで、Webブラウザが自動的に文字の大きさを変更してくれるんでした。
けど、こんな白黒のページ、誰も見てくれないですよね？
もっとオシャレなデザインにしたいですよね？
文字の色を変えたりとか、背景の色を変えたりとか、、、
そうやってWebページをかっこよく、オシャレにするためにCSSを使います。
CSSを使ってみた
CSSを使うと、さっきのページが以下のようになります。
「かっこよくない！オシャレじゃない！」
そう思ったあなた、すみません。
私の今のCSSのスキルではオシャレにするには時間がかかりすぎるので、ここではこの程度で許してください。
伝えたいことは、
・冒頭の文字が中央に寄っている
・2~3行目の背景が緑色になって、文字の色が白色になっている
・最後の文字がピンクになっている
です。
CSSを使えば、HTMLで書いたWebページに色づけしたりすることができるのです。
CSSの正式名称は「カスケーディングスタイルシート」です、
“カスケーディング”の部分はなにやら難しいので置いておいて、注目すべきは”スタイルシート”の方です。
スタイル、つまり見た目を定義するためのシートのことをスタイルシート、CSSと読んでいます。
CSSを使えば、HTMLファイルの見た目を変更することができるようになります。
CSSの使い方
先ほどのページは、もともと以下のようなHTMLファイルでした。
このHTMLファイルに、自分で作ったのCSSを適用したいので、以下のように変更します。
色々、増えたんですが、ここで見て欲しいのは以下の一行です。
この一行で
「このHTMLファイルと同じディレクトリ（フォルダ）の中にいる”example.css”というファイルを読み込んで、スタイルシートとして適用してください！」
ということをWebブラウザに指定しています。
これにより、私がtext.htmlと同じディレクトリ（フォルダ）に保存した以下のexample.cssファイルが読み込まれます。
実際には、text.htmlと同じディレクトリ（フォルダ）の中に、以下のファイルを作成しておきました。
これが、CSSファイルの中身です。
CSSの中では、以下の内容が書かれています。
・HTMLの<h1> ~ </h1>をWebページの中央に持ってきて
・HTMLの<p> ~ </p>の背景を緑にして、文字色を白色にして
・HTMLの<h2> ~ </h2>の文字色をピンクにして
CSSファイルの中で出てくるh1, p, h2のそれぞれがHTMLのどの部分を変更して欲しいのかを指定しています。
こうやって、HTMLで書かれたWebページのスタイルを変更することができるのです。
もちろん、ここで使っているCSSの書き方は基本中の基本でしかないです。
CSSを駆使すれば、みなさんが見たことのあるような、もっとオシャレなWebページを作成することができるようになります。
CSSファイルはどこにある？
ここで質問です。
Webアプリを利用する際にCSSファイルはどこにあるのでしょうか？
これは、今までの記事を読んでくださった方だったら簡単に予測がつくと思います。
そうです。
CSSファイルは、Webサーバの中にあるのです。
まず、WebブラウザはWebサーバから、以下のようにHTMLファイルをGETします。
HTMLファイルをもらったWebブラウザは、ファイルを上から順番に読み込んでいきます。
読み込んでいる途中で、以下の行が現れます。
そこで、WebブラウザはWebサーバに
「このCSSファイルももらって良いですか？」
と依頼します。
こうやって、WebブラウザはHTMLファイルを読み込み、CSSファイルも読み込んで、開発者が指定した通りのWebページを表示してくれているのです。
HTMLとCSSはプログラミング言語ではない
さて、前回と今回の記事でHTMLとCSSの役割について説明してきました。
この二つの種類のファイルは、Webページを開発者の思い通りに表示するためには、なくてはならない存在です。
言い換えれば、この二つの種類のファイルを使えば、自分が思い描くようなWebページを作り上げることができるのです。
なので、Webアプリ開発においてHTMLとCSSは非常に重要な存在になります。
ただし、ここで気をつけて欲しいことがあります。
この二つは、非常に重要な存在ですが、プログラミング言語ではありません。
あくまで、”Webページを表示させる”ために使うべきツールであって、これ自体がプログラミング言語ではないのです。
あなたの目的が、
・Webページを作ること
であれば、HTMLとCSSを学習すれば十分です。
一方で、あなたの目的が、
・Webアプリを作ること
であれば、HTMLとCSSに加えて、プログラミング言語を学習する必要があります。
では、どういったものを”プログラミング言語”というのでしょうか。
そこは、次回の記事で説明していこうと思います。
コメント