池澤あやかが教える、はじめてのTumblrカスタマイズ講座「HTML、CSS、JavaScriptとは？」

2014年10月27日 19時00分更新

　女優の池澤あやかちゃんは、文句なしの美女でありながら、Ruby界でも女神と呼ばれるほどの「本物」っぷりを発揮しているガチでギークな女優。「ばりばりプログラムができる」特技を生かして活躍中です。

　そんな池澤あやかちゃんが、ウェブサービス「Tumblr」の使い方やカスタマイズ方法などについて解説する本連載。これまではTumblrのテンプレートなどを利用してカスタマイズしていましたが、リニューアル後はいちからカスタマイズしていく方法を紹介します。しかも、池澤あやかちゃんがホワイトボードを使って解説するビデオ講座！わかりにくい部分の詳細を加筆したテキストを添えることで、初心者にも理解しやすいものになっています。

今回のアジェンダ
・HTML、CSSとは？
・JavaScriptとは？
・ドットインストールの紹介

CSSでデザインを決めてJavaScriptで動きを付ける

　「HTMLとCSSを使って作られたサイトとHTML単体で作ったサイトの違いは、特にビジュアルです。CSSがないと味気ないサイトになってしまいます。画像や文章の位置などを決めて装飾してくれるのがCSSで、中身を請け負うのがHTMLと考えておけばいいと思います」



HTMLにCSSを加えることで、見やすいビジュアルのウェブサイトができあがります（左）。同じサイトでもHTMLのみの場合は、写真とテキストがただ並んで表示されるだけの味気ないものになりがちです（右）

　「CSSで画像や文章を装飾するときに紐づけなくちゃいけないのですが、その紐づけの部分はHTMLで記述します。例えば画像を指定するとき、imgタグ個別に名前を付けてやる必要があります。そうしないと、どの画像を装飾するのかわからないからです。CSSはその名前を元に装飾をしていくわけです。基本的に、ウェブサイトはHTMLとCSSでだいたいできあがります」

　「JavaScriptは、使うことでよりリッチなサイトになります。動くものを記述するときに使います。Tumblrのテンプレートで、サイトをスクロールしていくと記事が随時読み込まれるものがありますが、そうした動きの部分はJavaScriptが使われています」

　「HTML、CSS、JavaScriptはウェブサイト制作の基本になる部分です。もう少し学んでみたい人は『ドットインストール』というサイトを見てください。技術系のものを動画で学べるサイトなので、初心者でもわかりやすくなっています」

ドットインストール
http://dotinstall.com/



3分の動画でプログラミングをマスターできる、初心者向けの学習サイト。さまざまな言語を学ぶことができます



「ドットインストール」で学びたい項目をクリックすると、各動画へのリンクが表示されます。ここでは「CSS入門」を選びました。全18回の講座になっています