CSSとは？（HTMLとセットで学ぶ！）

こんにちは。すぷらうとです。

プログラミング言語にはC言語とかPythonとかいろいろあるんですが、「よし、プログラミングを学ぼう！」ということで学習サイトなどを開くと、HTMLはよく”CSS“という言語とセットで学ぶことになっていたりします。このCSSという言語ですが、簡単に言うとHTMLにより作成したwebページを見た目の良いものに整えるという機能があります。たとえば、ヘッダー画像の大きさを変えたりだとか、文字にマウスをかざすと色が変わるようにしたりだとか、こうした見た目をきれいにするコードの多くはCSSによって記述されます。

以前ブログでAtomエディタというエディタを紹介しましたが、そのAtomエディタを二分割してHTMLと同時並行でコードを書いていくというやり方が主流だと思います。Atomエディタのインストール手順や使いやすさについてはMETS OFFICEというサイトが参考になるかと思いますし、同サイトにてAtomは次のように言及されています。

サイトカスタマイズ初心者から高度なプログラミングをする方まで幅広く利用できる使いやすさ抜群のテキストエディタ「Atom」

ですので、HTMLとCSSを使ってwebサイトを作りたい！もしくはその練習がしたい！という場合はまずAtomをインストールすることをお勧めしておきます。

CSSの具体的な学び方ですが、個人的にはドットインストールの「はじめてのCSS」をお勧めしたいと思います。この講座では、実際にwebサイトを作りながらコーディングが学べるので、簡単でありながらも実践に即した講座になっているのではないかと思います。ただし、この講座は「はじめてのHTML」という同じくドットインストールの講座を修了したことを前提としているので、受講する場合はHTMLの講座を終えてからにするとスムーズです。

紹介した通りドットインストールの講座は実践向きだと思いますが、やはり講座で指定されたコードを書くだけでは自分で独自のサイトを作るところまでもっていくことが困難なので、講座を受講したら次の段階として、サイト模写をしてみるのをお勧めします。これは、たとえばAppleのホームページといった既存のwebページを、HTMLとCSSを用いて自分でコーディングしていくという方法です。

実際にやってみると、個人的にはHTMLはもちろん難しいのですが、CSSによってサイトをスタイリッシュに仕上げることに想像以上の難しさを感じました。こうした難しさは受動的にネット講座を受けていることだけではわからなかったことなので、自分ができないことを知るためにも不十分な状態でサイト模写をしてみるのを強くお勧めします。