ウェブログラム ~学習するな実践せよ~

超シンプルなCSSを書いてデザイン!

このシリーズの前記事はこちら(全4記事)

前回書いた超シンプルなHTMLに、超シンプルなCSSを記述していきます。

※このシリーズの目的は初めてのWebサイトをインターネット上に公開することなので、凝ったデザインは作りません。

CSSとはなにか?

CSSとはWebサイトをデザインするためのものです。

例えば文字の色は水色で、背景色はピンクで、画像を丸く切り取って表示したり...など。

HTMLではサイトの構成を記述しますが、CSSではその構成の一つ一つに対してデザインをほどこします。

似顔絵を例にとって考えると、目や鼻はどこにあってというのがHTML、目の色や鼻の高さ大きさ、肌の色などはCSSで作るといったイメージです。

CSSを書いてみる

前回書いた超シンプルなHTMLに超シンプルなCSSを書いていきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルサイト</title>
<style>
body {
background: lightblue;
}
h1 {
font-size: 20px;
color: green;
}
</style>
</head>
<body>
<div>
<h1>こんにちは</h1>
</div>
</body>
</html>

今回追加したのは↓の記述だけです。

 <style>
body {
background: lightblue;
}
h1 {
font-size: 20px;
color: green;
}
</style>

このstyleというタグはCSSであるということを意味しています。styleタグ内に記述するのがCSSということですね。
この例ではbodyとh1というタグに対してデザインをしています。

  • bodyは背景(background)がライトブルーであるということ
  • h1は文字サイズ(font-size)が20pxでも文字色(color)が緑

この2つのデザインを指定してます。

ブラウザで表示すると以下のようなデザインなっています。

ちなみに20pxのpxという単位はWebで使う大きさの単位です。

CSSはこのように一つ一つのタグにたして、デザインを指定するものです。

もっと複雑なデザイン

もっと複雑で凝ったデザインはここではしませんが、Web制作でのCSSによるデザインは以下のようなことをしていきます。

  • 画面上をいくつものブロックに区切って配置を変える
  • ブロックごとの余白を調整する
  • 文字を左寄せや中央寄せ、右寄せなどする
  • 文字やブロックに装飾をする(色を変えたり影をつけて立体的にしたり)

この他にもたくさんのデザインやルールができますが、それは別のシリーズで紹介しているので気になったら勉強してみてください(CSSとは?初心者にも分かりやすく解説!

 

次はJavaScriptを使ってWebサイトに動きをつけていきます。

このJavaScriptを学べばほとんどのWeb制作で使ってるであろう主要スキルHTML、CSS、JavaScriptをカバーできます。