※CSS(スタイルシート)
１. きほん
２. ３つの書き方
１. きほん
２. ３つの書き方
サンプル
準備中･･
主なプロパティ
３.背景(background)
４.枠線(border)
５.余白(margin.padding)
６.リスト(list-style)
７.文字(colorなどなど)
準備中･･
主なプロパティ
３.背景(background)
４.枠線(border)
５.余白(margin.padding)
６.リスト(list-style)
７.文字(colorなどなど)
- きほん？
-
css(スタイルシート)は、HTML文書に対して、フォントや枠線、コンテンツの余白や背景などの「見栄え」を指定するために作られた言語です(たぶん)。
例えば背景表示タグとしてよく見るこれ↓
<style type="text/css"><!--body{background-image:url("URL");}--></style>
これがcssです。
はじめは「なんか訳分からん文字がいっぱい･･((;д;))」と思いますが、用途を理解してしまえば割と便利だったりします。
HTMLでの「要素」と「属性」のように、CSSも同じような方式で出来てます。
基本はこれ↓
セレクタ{プロパティ:値;}
上にある、body{background-image:url("URL");}の部分ですね。
body要素に対して{背景-画像を:○○にする;}って意味です。
h1{background-color:#000000;}なら、h1要素に対して{背景-色を:黒にする;}って意味になります。
こんな風に、HTML要素をセレクタにして(又はclassやidをつけて)、それに対し色んなプロパティを指定できるのがcssです。
･･と、ごちゃごちゃ書くよりも実際やってみるのが一番早いと思うので詳しくはサンプルをご参照下さい〜。
- ３つの書き方
-
cssを記述するには下記の３つの方法があります。
1.ヘッダ指定
<head>内に、<style type="text/css">〜</style>で囲んで記述します。(参照)
この時必ず、<style type="text/css"><!--セレクタ{ プロパティ:値;}--></style>という風にコメントアウトを入れます。
コレがないと、cssに対応していないブラウザでは中のタグがズラズラ表示される場合があります。あと、</style>を閉じ忘れると画面が真っ白になったりするので注意です。
2.インライン指定
<body>内で、HTMLタグの属性にstyle="プロパティ:値;"を使って直接記述します。
例：<div style="background-image:url(URL);">〜</div>
3.外部指定
cssファイル(拡張子は.css)を別で作ってページに読み込ませます。
携帯スペースで出来るところは少ないのでサラッと流しますが、外部cssはセレクタ{プロパティ:値;}だけを書いて作ります。
これを<head>内にリンクさせれば、HTMLを弄らずに見栄えを変更出来るというスンポー。
例：<link href="ファイル名.css" type="text/css" rel="stylesheet">
外部指定にすると呼び出すのに一瞬タイムラグがあるので、トップページだけはヘッダに直接書いてますが、うちのサイトではほぼこれを使ってます。