HTMLとCSSはセットで勉強しないと意味が無いほど互いに依存しています。
HTMLは骨格だけでデザインは出来ない。
CSSはデザインできるけど骨格は作れない。
今回はCSSの基礎知識と、前回作ったHTMLの骨格にちょっとしたCSSを入れてみたいと思います。
CSSとは
CSSは、Cascading Style Sheets(カスケーディング スタイル シート)の略です。
HTMLが骨格を作るとしたら、CSSはそのHTMLをどのように表示するかを定義したものです。
具体的には文字の大きさや色を設定できたり、スマホ対応もCSSで行います。
実はスタイルの定義はHTML内でも出来ます。
例えばh1タグの文字の大きさを変えたいとしましょう。
CSSが無いと下記のようにHTML内に直接書き込むことになります。
<h1 style="font-size: 36px;">WEBプログラミングを始めるために初心者は何から勉強すればいいのか？</h1>
しかしこれだとHTMLが複雑になってしまいます。
複雑にならないよう骨格と装飾を別に定義し、見やすくしたものがCSSです。
CSSの記述方法
[aside type=”normal”]h1 { font-size: 36px; }[/aside]
h1 の部分をセレクタといい、スタイルを適用する対象を定義します。
{ から } のことをブロックといい、ここにスタイルを記述します。
font-size の : (コロン) より前の部分をプロパティといい、スタイルの種類を定義します。「font-size」は文字のサイズのことです。
36px の : (コロン) より後の部分を値といい、スタイルの種類に対し値を設定します。「36px」は36ピクセルのことで、「font-size: 36px」で文字サイズが36ピクセルになります。
そして、プロパティと値のセットの後には必ず ; (セミコロン) をつけます。
上の例では文字サイズでしたが、文字の色も同時に定義したい場合も多々あります。
複数定義するには下のように書きます。
h1 {
font-size: 36px;
color: #333333;
}
CSSはどこに書くのか
スタイルはどこに書くのか？
主に書く場所は3箇所あります。
HTMLのタグ内
<h1 style="font-size: 36px;">WEBプログラミングを始めるために初心者は何から勉強すればいいのか？</h1>
上でも紹介した例のように、HTMLタグ内に style というプロパティを持たせ、上記の例のように記載できます。
これは上でも説明しましたが、HTMLが複雑になるためおすすめはしません。
テストで一時的にスタイルを適用する場合には良いかもしれません。
HTMLヘッダー内
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>プロフィール｜フリーエンジニアライフ</title>
<meta name="description" content="20歳の元調理師がフリーランスのエンジニアになりスキルを下にネットビジネスで安定収入を得ています。">
<style type="text/css">
h1 {
font-size: 36px;
color: #333333;
}
</style>
</head>
<body>
～
上記のようにHTMLの <head> ～ </head> に <style>タグを書いて、そこに定義することが出来ます。
これはHTMLタグ内に書くよりは整理されますが、HTMLファイル内が複雑になることには変わりないためあまりおすすめはしません。
しかし、<head>タグ内に書く場合もあります。
それはPHPなどで動的にスタイルを切り替えてデザインを切り替えたい場合です。
通常はそういったことはあまりありませんが、例えばWordPressのテーマを作成し、管理画面でカスタマイズした内容で表示を切り替えたい場合などにそうします。
CSSファイル内
これはHTMLファイルとは別にCSSファイルを作成し、それを読み込む方法です。
HTMLヘッダー内で下のようなコードを書いて読み込みます。
<link rel="stylesheet" type="text/css" href="style.css">
href プロパティで対象のCSSファイルを読み込みます。
rel プロパティは、読み込むファイルが何かを定義します。スタイルシートの場合は「stylesheet」と書きます。
type プロパティにはMIME タイプが入ります。読み込むファイルがどんな形式のファイルかを定義します。スタイルシートの場合は「text/css」と書きます。
この書き方が一番一般的なやり方で、骨格はHTMLで装飾はCSSときれいに分離できます。
実際にCSSを当ててみる
前回のHTMLに画像と文章を挿入(マークアップ)するで作成したサンプルHTMLを見てください。
[btn class=”simple”]CSSを当てる前のサンプル[/btn]
全て左に寄ってしまって、画像のサイズもバラバラです。
body > * {
max-width: 1160px;
margin: 0 auto;
}
#headimg img,
main img {
width: 100%;
}
非常にシンプルですが、上記のようなコードを作成しました。
HTMLは、ヘッダー内に下記コードを追記しました。
<link rel="stylesheet" type="text/css" href="sample004style.css">
このCSSを当てたバージョンのサンプルがこちらです。
画面が中央により、なんとなく整理された感が出ました♪
[btn class=”simple”]CSSを当てたバージョンのサンプル[/btn]
CSSの解説は下をどうぞ。
コンテンツ幅を指定し中央に寄せる方法
body > * {
max-width: 1160px;
margin: 0 auto;
}
まずセレクタの「body > * 」を見てください。
body と書かれた部分はbodyタグのことを指し、 > は直下の要素と言う意味で、* は全てのタグを指します。
つまり、bodyタグ内に書かれたHTMLタグのうち孫要素以下は除く body タグ直下のHTMLタグ全てという意味です。
header、nav、main、footerタグが対象となります。
HTMLタグはHTMLに画像と文章を挿入(マークアップ)するの記事を参照してください。
次に「max-width: 1160px;」です。
プロパティの max-width のうち width は横幅を意味します。つまり横幅の最大値は 1160px だということです。それ以上大きくはなりません。
そして、「margin: 0 auto;」ですが、これは中央に寄せる定義です。
margin はHTMLタグで指定されたエリアの外側の余白を定義するプロパティです。
そして値を2つ指定した場合は、1つ目の値が上下の余白で、2つ目の値が左右の余白になります。
上下は余白無しで、左右は自動ということになり、左右に自動を定義すると左右中央に表示されるようになります。
今はまだ難しい内容だと思うので、「margin: 0 auto;」こう書けば左右中央に寄るとだけ理解してください。
画像の大きさを指定
#headimg img,
main img {
width: 100%;
}
img は画像を挿入するときに使うHTMLタグです。
#headimg は headimg という id を指定されたタグという意味です。
idは #～ で指定し、class の場合は .～ のようにドットを頭につけることで指定できます。
今回は、メイン画像とmainタグ内の画像全てに対し、横幅を100%にするよう定義しました。
ちなみに、
img {
width: 100%;
}
のように書くと、全ての画像のことになりますが、こうすると一番上のロゴ画像も横幅いっぱいのサイズになってしまいます。
まとめ
今回は非常に簡単なスタイルシートの例でCSSについて解説しました。
CSSは、骨格を作るHTMLと役割分担するために分けて作成する。
CSSを適用することで見栄えがよくなり、見やすくなります。
しかし、まだメニューのところが変ですね。
次の記事でこれを横並びにしてメニューっぽくしてみます。
コメント