はじめに
HTML&CSS入門講座の第二弾として、CSSとは?、HTML、CSSの勉強に必要なツールついて紹介します。
この記事を読むと次の疑問について知ることができます。
・HTMLとCSSの違い
・CSSの仕組み
・CSSのLevel
●HTMLとCSSの勉強に必要なツールとは何ですか?
・エディター(Visual Studio Code)
・ブラウザー(Google Chrome)
CSSとは?
HTMLのみで書かれたトップページの場合、それを表示した際には、文字や画像が上から順に並んだような味気ない単調なページとなり、寂しいページとなってしまいます。
そのような際に、このトップページの「見出しは文字の色を緑色にし、大きくして中央寄せにしたい」などHTMLで書かれた各要素の見栄え(デザイン)を変更できる(修飾できる)ようにするのがCSSなんです。
HTMLとCSSの違い
HTMLは、前のHTML&CSS入門講座(1)で書いたように、あなたが書いた文書(Webページ)を世界に向けて公開するために、作成するときに使う言語になります。
一方、CSSは、前述したようにHTMLで書かれた各要素のデザインを変更するために利用し、HTMLとCSSは一緒に使われるもので、切っても切れない仲ということができます。
CSSの仕組み
HTMLは、文書の骨格を作り、CSSはその骨格に色々と肉付けして、一つの綺麗なWebページを作成していきます。
HTMLである骨格は、各文書の要素(ボックス)からなり、その要素(ボックス)は文書をタグとタグで括ったものになります。
これら要素(ボックス)ごとに、CSSで指定して、背景、色、大きさ、配置などいろいろなデザインを変更して見栄えの良いページ(あなた好みの)を作成していくわけです。
CSSは、HTMLと分離でき、1つのCSSで別な場所のHTMLの要素(ボックス)に適用することもできます。
CSSは、HTMLとは切っても切れない仲ではありますが、それぞれ別個の言語であり、世界にあなた好みのサイトを公開して発信するためには最低限知っておかなくてはいけない知識と思います。
CSSのLevel
CSSは、World Wide Web Consortium (W3C) が勧告しますが、1996年12月にCascading Style Sheets、 level 1 (CSS1)が、機能の追加により上位互換のlevel 2(CSS2)が1998年5月に、level 2 revision 1 (CSS 2.1)が2011年6月に順次勧告され、現時点では、一部は国際規格となっていますが、全てについての level 3 (CSS3)は(未勧告)となっています。
Cascading Style Sheets, level 3は、今の事実上の最上位互換CSSということができます。 したがって、今の時点ではCSS3を勉強することが一番良い選択となります。
HTMLとCSSの勉強に必要なツール
エディター(Visual Studio Code)
パソコン上でHTML、CSSを書いていくための帳面と鉛筆に相当するものを用意する必要があります。
Windowsパソコンであれば、テキストエディターのメモ帳が標準で付属して、使えないことはないですが、HTML、CSSなどの言語を書く上ではあまりお勧めできません。
私のお勧めは、Visual Studio Codeというプログラミング用のエディターであり、タブにより文書をいくつも開くことができ、HTMLやCSSの言語を書くのにも適した補完機能があり大変便利です。
このVisual Studio Codeの良いところは、拡張機能によりない機能を追加できるとともに、頻繁にバージョンアップが行われていること、無料で利用できることです。
Visual Studio Codeについての記事は、次を参照ください。
ブラウザー(Google Chrome)
今のブラウザーであれば、どれでもHTML、CSSで書かれた文書を人間が理解できるように翻訳してくれますが、私のお勧めのブラウザーはGoogle Chromeです。
もし、Google Chromeが嫌いで、Windowsパソコンを利用している方ならMicrosoft Edgeでも良いと思います。
Google Chromeのお勧めの理由は、このブラウザーは表示速度も速く、拡張機能によりChromeにはない機能を付加することができ、その付加機能が豊富にそろっていることです。
Microsoft Edgeは、最近になってChromeの拡張機能を取り込めるようになり、使い勝手が格段に上がったので第2の候補として上げました。
Google Chromeを利用するには、Googleのアカウントをとる必要がありますが、無料で取れますし、アカウントをとることにより、Gmail、他のGoogle系のアプリケーションが無料で利用できますので、ぜひアカウントを取得することをお勧めします。
Google Chromeのダウンロードサイトは、次のサイトから行うことができます。
おわりに
如何だったでしょうか?
CSSとは何ですか?、HTMLとCSSの違い、CSSの仕組み、CSSのLevel、HTMLとCSSの勉強に必要なツールとは何ですか?、エディター(Mery)、ブラウザー(Google Chrome)などについて解説してきました。
この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。
以上です。
コメント