【ステップ4「CSSの基礎」】HTMLマスター講座

業界歴10年のWEBエンジニアが教えるHTMLマスター講座

今回はCSSについて紹介します。

前回のhtmlタグを使用したWEBページでは、単に文字が表示されているだけだったと思います。

正直、まだ見づらいと思いませんか?

そこでもっと見やすくするために存在するのがCSSです。

CSSとは?

CSS(Cascading Style Sheets)とは、別名スタイルシートとも呼ばれます。

名前の通り、「スタイル=見た目」を決めるものです。

CSSの使い方

cssはhtmlタグ同様に書く場所や書き方にルールがあります。

CSSを書く場所について

CSSを書く場所は大きく分けて3箇所あります。

1つ目は、htmlタグの中に書く

(例)<p style="color: red;">テキストが入ります。</p>

2つ目は、htmlファイル内に書く(styleタグで囲んで書きます)

(例)
<html>
<head>
<style>
p{
color: red;
}
</style>
</head>
<body>
<p>テキストが入ります。</p>
</body>
</html>

3つ目は、外部の.cssファイルに書く(htmlファイルにcssファイルを読み込ませる記述が必要です)

(例)まずはhtmlファイルの中身
<html>
<head>
<link rel='stylesheet' href='/style.css' type='text/css' media='all' />
</head>
<body>
<p>テキストが入ります。</p>
</body>
</html>

次にCSSファイルの中身
p{
color: red;
}

以上、CSSの各場所になります。

ここでのポイントは、複数の場所で同じ対象をしていたスタイルを書いた場合、上記の順番で優先度が決まります

htmlタグに記載した場合→1位
htmlファイルに記載した場合→2位
外部のcssファイルに記載した場合→3位

そのため、外部のcssファイルに記載するのが一般的で汎用性も高くなります。

 

CSSの書き方について

次にCSSの書き方を紹介します。

例えば、pタグでコーディングした文字の色を赤くする場合の書き方は次の通り。

p{
color: red;
}

そしてpタグの文字サイズを大きくする場合の書き方はこちら。

p{
    font-size: large;
}

そして複数のスタイル(見た目)をまとめて指定する場合の書き方はこちら。

p{
color: red;
font-size: large;
}

CSSでは、こんな感じでhtmlタグに対してスタイル(見た目)を指定できます。

今回、htmlタグのpタグに対してスタイルと指定しましたが、class名やid名でも指定できます。

◆class名「txt」の場合
.txt{
font-size: large;
}

◆ID名「point」の場合
#point{
color: red;
}

【補足】
classとは、htmlタグをグループ化するための目印のようなものです。
ページ内で何度も利用できます。
(例)class名に「txt」がついているpタグをまとめて赤色にしたい場合

【html】
<p class="txt">テキスト1</p>
<p class="txt">テキスト2</p>
<p class="txt">テキスト3</p>

【CSS】
.txt{
color: red;
}

IDとは、classと違いページ内で基本的に1つしか使えないものになります。

また、IDの主な利用目的はCSSで見た目を指定するためではなく、javascriptやaタグなどのから特定の要素(htmlタグ)を指定するために利用されることが多いです。

参考までID名でスタイル(見た目)を指定する書き方を紹介します。

【html】
<h1 id="point">タイトル</h1>
<p class="txt">テキスト1</p>
<p class="txt">テキスト2</p>
<p class="txt">テキスト3</p>

【CSS】
#point{
color: red;
font-size: large;
}

以上が、CSSの書き方になります。

WEBページの見た目を変えてみる

次に実際にhtmlコーディングしたWEBページの見た目を整えて(変えて)みます。

まず、htmlでコーディングしただけのWEBページがこちら▼

htmlコーディングしただけの画面
htmlコーディングしただけの画面

そしてCSSでスタイル(見た目)を整えたものがこちら▼

htmlコーディング後、CSSでスタイルを整えた画面
htmlコーディング後、CSSでスタイルを整えた画面

いかがでしょうか?
だいぶ見やすくなったと思いませんか?

今回適用したCSS(スタイル)はこちら。
※htmlファイル内で定義したのでstyleタグがついてます

<style>
body{
margin: 0 0;
}
.box{
padding: 20px;
max-width: 600px;
width: 100%;
}
h1{
margin: 0 0 35px 0;
font-size: 26px;
color: #333333;
border-bottom: solid 1px #666666;
border-left: solid 6px #888888;
padding: 3px 0 3px 10px;
}
p{
color: #333;
line-height: 1.75;
margin-bottom: 35px;
}
ul{
margin-bottom: 35px;
background: #dbf1ff;
padding: 20px 35px;
}
ul li{
color: #333333;
margin-bottom: 7px;
}
table{
border-collapse: collapse;
width: 100%;
}
table tr th,
table tr td{
padding: 10px 15px;
border: solid 1px #cccccc;;
}
</style>

CSSにはこのように見た目やレイアウトを整える役割があります。

【最低限覚えておいたほうがよい項目】

font-family フォントの種類を指定
font-size 文字サイズの指定
color 文字色の指定
line-height 行間の指定
height 高さの指定
width 幅の指定
border 線(ライン)の指定
background 背景関連の指定
display レイアウト関連の指定
position レイアウト関連の指定
z-index レイアウト関連の指定
margin レイアウト関連の指定
padding レイアウト関連の指定

スタイルを決める項目はたくさんあるので色々調べて試してみてください。

 

今回は以上になります。

次回は、javascriptの基礎についてお伝えしたいと思います。

▶ステップ5.javascriptの基礎