トップページ > コンテンツ > コンピュータ関連その他 > CSS編 > CSS設定例

CSSの指定方法は何パターンか存在する。

• <style>〜</style>タグの中に以下のような記述を書く。

　<要素 id="id名">は一意に特定できるidを指し、#id名{}で指定する。
　<要素 class="class名">は同じクラス名を指定したコンポーネントを全て指し、.class名{}で指定する。
　詳細な選択方法についてはCSSセレクタについて学習すべし。

• <style>〜</style>タグと同様の記述をした外部CSSファイルを用意し、<link rel="stylesheet" href="xxx.css">のような形で読み込ませる。
• <div style="xxxxx">のように要素に直接指定する。

/*全てに適用*/
*{
 margin: 0;
 padding: 0;
}

/*本文*/
body{
   font-family: arial,sans-serif;
}

/*画像*/
image{
}

/*リンク*/
a{
}

/*未訪問のリンク*/
a:link{
} 

/*訪問したリンク*/
a:visited{
}

/*マウスが上に乗っているときのリンク*/
a:hover{
   /*animation系の記述はここに書き、transition系はaに書く。*/
}

/*選択中のリンク*/
a:active{
}

/*
 *id = "~"の所は#で表現する。以下に例を上げる。
 *ul(箇条書き)タグの中のid名で指定された項目。
 *ul#id {という書き方もできたはず。 
 */
#id名 ul{
}

/*クラスの場合は#ではなく.を使う。
 *<a>タグのtestクラス等の場合にはtest.aといった書き方ができる
 */
.クラス名 {
}

/*以下のように複数要素をまとめて指定もできる*/
td,p {
}

/*ラジオボタン等のチェック(css3)*/
input[type=radio]:checked {
}

/*解像度やメディアのタイプに合わせたCSSを指定する*/
@media (メディアのタイプ) {
   body{
   }
}
//@mediaにはscreen,print,(max-width:xxx px)等がある。mediatypeについては、http://msugai.fc2web.com/web/CSS/media.htmlが分かりやすい。
//@mediaでは、device-width等によるデバイス幅の指定やdevice-aspect-ratio等によるアスペクト比の指定も出来る。

//linkタグや@import等も使ってみよう。