>> HTML入門トップに戻る

CSSの使い方

今回はCSSを使って、タグの属性を一括で指定する方法を説明します。
まず、CSSの書き方から説明します。
基本的には以下のように書きます。

div{
	color:#ffffff;
	background:#555555;
}
a{
	display:block;
	font-size:16px;
}

上記のようにタグ名を書いて、括弧でくくり、
その中に属性を書いてコロン:を書いた後、値を設定してセミコロン;を書きます。
CSSの設定ファイルは別ファイルに保存して取り込むのが普通ですが、
直接対象のページ内に書くことも出来ます。
その場合はstyleタグを使います。

<style type="text/css">
div{
	color:#ffffff;
}
</style>

このstyleタグはhead部に書かなければならないので注意して下さい。
別ファイルにCSSを記述して取り込む場合は、
linkタグを使います。

<link rel="stylesheet" type="text/css" href="../main.css">

hrefの属性の値に該当のCSSファイルを指定すれば、その内容が取り込まれます。
これもhead部に書きます。
私はこちらの方法をオススメします。

CSSではまずタグによる一括指定が可能です。
下記のコードを見てください。

div{
	/*文字色*/
	color:#222222;
	/*枠線(線の太さ、色、線の種類)*/
	border:2px #ffffff solid
	/*テキストの横方向の位置*/
	text-align:left;
	/*文字のサイズ*/
	font-size:16px;
	/*背景色*/
	background:#333333;
	/*フォント*/
	font-family:"MS Goshic"
	/*余白*/
	margin:0px;
	/*要素内の余白*/
	padding:0px;
}

もしこのように書けば、
このCSSを取り込んだ全てのdiv要素にこの設定が適用されます。
各属性の書き方については、ネット上にあるリファレンスを見て書き方を覚えてください。
css内でコメントを書く際には、/**/でコメントを囲みます。

これだとdiv要素全てに影響が出てしまうので、
対象範囲を限定したいときがあります。
そういうときはクラスやIDを指定して設定します。
例えば、
<div class="test">
あいうえお
</div>
このようなdivタグがあり、class属性にtestという名前を設定しています。
このtestクラスが設定されているdiv要素に対してだけ、
設定を適用するにはこう書きます。

div.test{
~属性~
~属性~
}

divの後にドット(.)を書いて、クラス名を書くだけです。
その後に書いた属性の内容が、divタグのtestクラスを持つ要素のみに適用されます。
また、タグ内に、ID="test"とIDを指定していた場合は、

div#test{
~属性~
~属性~
}

と、divの後ろにシャープ(#)を書いてID名を書き、属性の設定を書きます。

他にも色々な書き方があります。
タグ名の後ろにスペースを空けて、またタグ名を書きます。

div a{
~属性~
~属性~
}

この場合はdiv要素内の、a要素全てに対してこのCSSが適用されます。
div要素の中にないaタグについてはこの設定は適用されません。


次に、カンマで区切った書き方です。

div,a,p{
~属性~
~属性~
}

この書き方はdiv,a,p要素にまとめてCSSを適用する書き方です。

大体このようにしてCSSを書き、設定することができます。
理解できましたでしょうか?
属性の説明を色々省略しましたが、リファレンスを見ながら色々いじっていれば、
簡単に覚えますので、是非チャレンジして下さい。

次回はマウスカーソルを乗せたときなどのイベントの設定にについて説明します。

>> 【イベントの設定について】に進む
>> HTML入門トップに戻る
●更新履歴
2016/08/16 Java入門ページにページを幾つか追加
2016/04/08 Java入門ページ作成
2016/03/09 メニューレイアウト変更。ブラウザキャッシュのクリアをお願い致します。
2016/03/09 PDOトランザクション、自動コミットモードをオフ追加
2016/03/09 PDO 例外処理 try catch追加
2016/03/09 PDO update文実行追加
2016/03/09 PDO delete文実行追加
2016/03/09 PDO insert文実行追加
2016/03/09 PDO selectでデータを取得、fetchAll、queryメソッド追加
2016/03/09 PDO bindValueとbindParamの違い追加
2016/03/09 PDO prepare プリペアドステートメントの使い方追加
2016/03/04 ソースコードをクリップボードにコピーする機能を追加
2016/03/04 C言語、C++のページのソースコードを一部修正
2014/01/31 C言語関数一覧ページに11ページほど追加
2014/01/31 C言語関数一覧ページに30ページほど追加
2014/01/30 C言語関数一覧ページ作成中
2013/07/01 レイアウト変更に伴いブラウザキャッシュのクリアをお願いします。
2013/07/01 MySQL入門ページ作成
2013/07/01 PHP入門ページにSQLite学習項目追加
2013/06/25 ドメイン変更、レイアウトを一部変更
2013/03/14 レイアウトを一部変更
2012/08/13 C言語よくある課題・宿題ページ開設!
2012/08/13 シューティングゲーム作成第33章追加!
2012/08/11 ドメイン変更&サーバ移設完了
2012/04/21 シューティングゲームプログラミング第2,3章の内容を修正
2012/04/19 シューティングゲームプログラミング第2章の内容を修正
2012/04/03 Googleカスタム検索を設置!
2012/04/03 シューティングゲームプログラミング第32章追加!
2012/04/03 シューティングゲームプログラミング第31章追加!
2012/03/31 サイトをリニューアルしました!
2012/03/25 シューティングゲームプログラミング第30章追加!
2012/03/19 シューティングゲームプログラミング第29章追加!
2012/03/16 シューティングゲームプログラミング第28章追加!
2012/02/27 シューティングゲームプログラミング第27章追加!
2012/02/03 シューティングゲームプログラミング第26章追加!
2012/01/31 シューティングゲームプログラミング第25章追加!
2012/01/20 シューティングゲームプログラミング第23,24章追加!
2012/01/11 シューティングゲームプログラミング第22章追加!
2012/01/05 トップページ、ゲームプログラミング関連のトップページのデザインを変更
2012/01/04 シューティングゲームプログラミング第21章追加!
2012/01/01 シューティングゲームプログラミング第20章追加!
2011/12/25 シューティングゲームプログラミング第19章追加!
2011/12/22 シューティングゲームプログラミング第18章追加!
2011/12/18 シューティングゲームプログラミング第17章追加!
2011/12/17 シューティングゲームプログラミングページOPEN!
2011/11/21 ゲームプログラミングページOPEN!
2011/11/21 サイトデザインを大幅に変更
2011/11/17 TOPページのデザインを変更。相互リンクページに、複数サイト追加。
2011/11/06 WINAPI学習ページ(33~36章)追加
2011/11/05 WINAPI学習ページ(20~32章)追加
2011/10/27 WINAPI学習ページ(14~19章)追加
2011/10/21 WINAPI学習ページ(13章)追加
2011/10/21 サイトマップ、連絡ページ追加
2011/10/17 WINAPI学習ページ(6~11章)追加
2011/10/16 WINAPI学習ページ(1~5章)追加
2011/10/13 全体のレイアウト変更
2011/10/07 PHP学習ページ(8~11章)追加
2011/10/06 PHP学習ページ(1~7章)作成
2011/10/06 JavaScriptリファレンスページ作成
2011/10/05 C言語学習ページ発展編(10~14章)追加
2011/10/04 C言語学習ページ発展編(1~9章)追加。
2011/10/03 HTML/CSSリファレンスのページ追加。(個々の詳細ページは作成中)
2011/09/30 HTML学習ページ(8章)追加
2011/09/29 JavaScript学習ページ(12~17章)追加
2011/09/28 JavaScript学習ページ(1~11章)追加
2011/09/27 HTML学習ページ(4~7章)追加
2011/09/26 C言語学習ページ(27章)追加、C++学習ページ(17章)、HTML学習ページ(1~3章)追加
2011/09/25 C言語学習ページ(23~26章)を追加
2011/09/24 C++学習ページ(9~16章)追加
2011/09/23 C++学習ページ(3~8章)追加
2011/09/22 C言語の学習ページ(22章)とC++学習ページ(1~2章)追加
2011/09/21 C言語の学習ページ(15章~21章)を追加
2011/09/20 C言語の学習ページ(10章~14章)を追加
2011/09/19 サイト作成(随時更新予定)