アーティストならホームページを自分で作成しやがれ!②~CSS編~

前回の続きで「アーティストならホームページを自分で作成しやがれ!」シリーズをお届けしたいと思います。

今回はホームぺージを華やかにするために「CSS」と呼ばれる言語を学びましょう。

CSS(シーエスエス)とはCascading Style Sheetsの略称で、前回使ったHTML文に色を付けたりフォントを変えたりと、HTMLのスタイルを整えるために使用します。

つまり「HTMLはファッションモデル」、「CSSはスタイリスト」という関係性で覚えれば大丈夫です。

さてそれでは使ってみましょう!まず前回作った「test」フォルダの中の「index.html」ファイルにCSSを読み込むという指示を書き加えます。下の画像のように<head></head>で囲んだ部分に<link rel=”stylesheet” type=”text/css” href=”sample.css”>と記載しましょう。

そして<h2></h2>のタグの前後に<body></body>のタグを加えます。

CSS作成画像1

headタグで囲んだ部分は、ページ上に表示されなくてもよいメタ情報というデータを記載する場所です。今後もたくさんのHTMLを書き込むことになりますので覚えておいてください。一方bodyタグは「ここから~ここまでをページ上に表示して」と指示をするタグです。

次は同じフォルダ内にsample.cssというファイルを作成します。

CSS作成画像2

ファイルを作成したらsample.cssに以下のように書き込みましょう。

h2{

color:red;

}

CSS作成画像3

これは「HTMLのh2タグで囲まれている部分のcolorをredにして」という指示になります。このようにHTMLの○○タグ{○○:○○;}がCSSの基本的な書き方になります。この状態でindex.htmlをブラウザで開くとこのようになりました!↓

CSS作成画像4

「Good Night MONTANA」が見事に赤色に変わりました。このようにHTMLとCSSが連携して働いて、皆さんが普段見ているウェブページは描かれているんですね。CSSはタグの中に複数の指示を記載できます。次はfont-styleをitalic(斜体)にしてみましょう。

CSS作成画像5

index.htmlをブラウザで開くと…

CSS作成画像6

斜体になりました!このHTMLとCSSを組み合わせればホームページの基本は覚えたようなものです。これだけでもアーティストの方は創作意欲が出てくれんじゃないでしょうか。次回はこのindex.htmlとsample.cssに手を加えて、さらにホームページらしくしていきたいと思います!

Follow me!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA