今回は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ページがこちら▼
そして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にはこのように見た目やレイアウトを整える役割があります。
[waku]【最低限覚えておいたほうがよい項目】
font-family | フォントの種類を指定 |
font-size | 文字サイズの指定 |
color | 文字色の指定 |
line-height | 行間の指定 |
height | 高さの指定 |
width | 幅の指定 |
border | 線(ライン)の指定 |
background | 背景関連の指定 |
display | レイアウト関連の指定 |
position | レイアウト関連の指定 |
z-index | レイアウト関連の指定 |
margin | レイアウト関連の指定 |
padding | レイアウト関連の指定 |
[/waku]
スタイルを決める項目はたくさんあるので色々調べて試してみてください。
今回は以上になります。
次回は、javascriptの基礎についてお伝えしたいと思います。