スタイルシートの書き方（右クリックで保存）

Download Report

Transcript スタイルシートの書き方（右クリックで保存） 

スタイルシートの書き方
HTMLとスタイルシート
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=Shift_JIS”>
<title>タイトルとなる文章をここに書く（例えばデザイン空間プロフィール）</title>
<style type="text/css">
<!-ここにスタイルシートを記入します
-->
</style>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<!-- ここにブラウザに表示させる部分（画像と文字）を記入します-->
</body>
</html>
長さの指定方法
px ピクセル
画面のピクセル
em 英字の「M」の高さを基準とした大きさ
ex 英字の「x」の高さを基準とした大きさ
SPANタグとDIVタグ
何も働きがないタグ
このタグにstyle属性を使ってスタイルを設定したりクラスやIDでスタイルを適用します。
何も働きがないから自分の思い通りの設定をすることが可能。
<SPAN style="color:blue;font-size:12pt">～</SPAN>
このように記入すればこの中に記入された文字は
フォントの大きさが12pt
青色になります。
SPANタグとDIVタグの使い分け：
改行しない場合はSPANタグ
改行したい場合はDIVタグ
つまり文書の一部分のみにスタイルを設定したい場合はSPANタグを使い、
まとまった文章にスタイルを設定したい場合はDIVタグを使います。
【IDセレクタ】
id=“aaa”の記述で命名されたものは，CSS
ファイルでは，
#aaa {
と書かれる。idは頭に「#」 をつける
#container { …
#banner { …
#content { …
#links-left { …
#calendar { …
など。
【CLASSセレクタ】
class=“bbb”の記述で命名されたものは，
CSSファイルでは，
.bbb {
と書かれる。CLASSは頭に「.」をつける
.description { …
.navi { …
.blog { …
.blogbody { …
.date { …
.title { …
.text { …
.sidetitle { …
.side { …
.powered { …
.copyright { …
など。
【基本セレクタ】
頭に何も付いてないものは，HTMLのタグが書かれている。
h3 {
こうすると，<h3>のタグではさまれた部分を Box と見なす。
body { …
p{…
h1 { …
h2 { …
h3 { …
など。
スタイルシートで表現方法を宣言
idとclassを使ってスタイルシートで表現方法を宣言するときには、
<STYLE>
<!-DIV.class-name { font-size:large;}
DIV#id-name { font-size:large;}
-->
</STYLE>
スタイルシートの定義の仕方は、左から順に、
タグの名前：この部分を省略すると、クラスまたは固有名のみが有効になります。
class属性のときはピリオド（.）、id属性のときはハッシュ（#）。
固有名またはクラス名：この部分を省略すると、タグ名全てが指定対象になります。
カッコ内｛ ｝：この中にスタイルを記述 ｛プロパティー1：値； プロパティー2：値；｝
配置に関する設定
ボックス（box）の回り込み
スタイルシートで段組（レイアウ
ト）する際のボックスモデル
（div）の事
boxA
boxB
<html>
<head>
<title>～</title>
<style type="text/css">
<!-#box_a{
float : left;
}
#box_b{
float : right;
}
-->
</style>
</head>
<body>
<div id="box_a">boxA</div>
<div id="box_b">boxB</div>
</body>
</html>
回り込みの解除
回り込みの解除には【clear : both;】を利用します。
細かくは【clear : left;】【clear : right;】とありますが【clear : both;】だけ知っていればOKです。
boxA
boxB
boxC
<html>
<head>
<title>～</title>
<style type="text/css">
<!-#box_a{
float : left;
}
#box_b{
float : left;
}
#box_c{
clear : both;
}
-->
</style>
</head>
<body>
<div id="box_a">boxA</div>
<div id="box_b">boxB</div>
<div id="box_c">boxC</div>
</body>
</html>
余白に関する設定
余白の名前
コンテンツ
黒色のborder（線）部分が親要素のタグ及びbodyと見て下さい。
赤色部分がborder（線）
コンテンツ（文章や画像やデータ）部分から赤色のborder（線）部分まで
グレーの部分がパディング：padding
赤色のborder（線）部分から黒色のborder（線）部分までの
白の部分がマージン：margin
border（線）から
内側がパディング：padding
外側が マージン：margin
マージン
boxA
boxBのコンテンツ
<html>
<head>
<title>～</title>
<style type="text/css">
#boxB{
margin : 20px;
}
</style>
</head>
<body>
<div id=“boxB”>boxBのコンテンツ
</div>
</body>
</html>
マージンの指定方法
スタイルシートの指定
margin : 1px;とした場合
margin : 1px 1px;とした場合
margin : 1px 1px 1px;とした場合
margin : 1px 1px 1px 1px;とした場合
どこを指定しているか
上下左右すべて=1px
上下=1px、左右=1px
上=1px、左右=1px、下=1px
上=1px、右=1px、下=1px、左=1px
例）４方向とも同じ場合
margin : 20px 20px 20px 20px;
margin-top : 20px;
margin-right : 20px;
margin-bottom : 20px;
margin-left : 20px;
パディング
boxA
boxBのコンテンツ
boxB のマージンを20px と
boxB のパディングを30px
<html>
<head>
<title>～</title>
<style type="text/css">
#boxB{
margin : 20px;
padding : 30px;
}
</style>
</head>
<body>
<div id=“boxB”>boxBのコンテンツ
</div>
</body>
</html>
通常リスト
・リスト
・リスト
・リスト
・リスト
・リスト
<ul>
<li>リスト
<li>リスト
<li>リスト
<li>リスト
<li>リスト
</ul>
【・】を取りたい場合は <ul style="list-style-type : none;">
横並びのリスト
リスト | リスト | リスト | リスト |
<html>
<head>
<title></title>
<style type="text/css">
<!-LI{
margin : 0px;
display:inline;
}
-->
</style>
</head>
フォント，テキスト関連
<html>
<head>
<title>これだけは知っておきたいCSS</title>
<style type="text/css">
h1{
font-family:"ＭＳ Ｐ明朝", sans-serif;
font-size:32;
font-style:normal;
font-weight:bold;
line-height:1.5em;
color:#FF0000;
text-align:center;
}
h2{
font-family:"ＭＳ Ｐゴシック", sans-serif;
font-size:20;
font-style:italic;
font-weight:bold;
line-height:1.5em;
color:#0000FF;
text-align:left;
}
</style>
</head>
<body>
<h1>これは大見出しです</h1>
<div>
<h2>これは中見出し（１）です</h2>
<p>ここに中見出し（１）の本文を記述します</
</div>
<div>
<h2>これは中見出し（２）です</h2>
<p>ここに中見出し（２）の本文を記述します</
</div>
</body>
</html>
フォント関連
font-family
・字体を指定する
・書式 { font-family: "family-name", generic-family }
・主な値
family-name：ＭＳ Ｐ明朝，Courierなど
generic-family：serif，sans-serif，cursive，fantasy，monospace（等間隔）など。値は""で囲まないこと
font-size
・大きさを指定する
・主な値
○px（ピクセル数），xx-small，x-small，medium，large，x-large，xx-large
font-style
・斜体を指定する
・主な値
normal（デフォルト），italic（イタリック），oblique（斜体）
font-weight
・太さを指定する
・主な値
100～900（100の倍数で指定。大きいほど太い），normal（標準），bold（太い），bolder（親要素のフォント
より太い，lighter（親要素のフォントより細い）
font
・フォントに関するプロパティをまとめて指定する
・主な値
フォント関係のプロパティ値を半角スペースで区切って記述する（font-style font-weight font-size/lineheight font-family）。font-sizeとfont-family以外は省略可能
color
・文字など要素の色を指定する
・主な値
カラーネーム，RGB値
テキスト関係
•
line-height
・行送りの幅を指定する
・主な値
○px（文字の高さを含むピクセル数），○em（1文字の高さに対する倍率），○%（1文字の高さに対する
パーセント）
letter-spacing
・文字の間隔を指定する
・主な値
○px（文字の幅を含むピクセル数），○em（1文字の幅に対する倍率），○%（1文字の幅に対するパー
セント）
text-align
・テキストのそろえ位置（左右）を指定する
・主な値
left（左そろえ，デフォルト），right（右そろえ），center（中央そろえ），justify（左右いっぱいに均等割り付
け）
vertical-align
・テキストのそろえ位置（上下）を指定する
・主な値
baseline（通常の位置），bottom（下そろえ），middle（中央），top（上そろえ），sub（下付き文字の位置），
super（上付き文字の位置）
テキスト関係
•
float
・画像などが配置されているときに，テキストの回りこみを指定する
・主な値
right（画像を右に配置するとき），left（画像を左に配置するとき）
clear
・テキスト回り込みの解除を指定する
・主な値
right（右），left（左）
text-decoration
・テキストの装飾を指定する
・主な値
none（装飾無し，デフォルト），underline（下線），overline（上線），
line-through（取り消し線）。同時に複数を指定できる
※aタグ内部でnoneを指定すると下線を非表示にできる
擬似クラス
CSSには，タグ要素の状態に応じてスタイルを適用できる疑似クラスという仕
組みがあります。例えば，リンクを指定した要素に対して，リンク先へ未訪問，
訪問済みといった状態に応じて表示方法（多くの場合，文字や背景の色）を変
えるのに利用することができます。
a:link { }
・未訪問リンクのスタイル
a:active { }
・選択したリンクのスタイル
a:visited { }
・すでに訪問したリンクのスタイル
a:hover { }
・マウスのポインタをリンク上に置いたときのスタイル
擬似クラス
<html>
<head>
<title>擬似クラスのテスト</title>
<style type=“text/css”>
<!-a:link {font-weight:bold}
a:visited {color:gray}
a:hover{
border-style:solid;
border-width:1px}
a:active {font-style:italic}
-->
</style>
</head>
<body>
<a href=“http://www.google.co.jp” target=“_blank”>googleへ</a>
</body>
</html>
見出し
よくある例
h4 {
width:12em;
border-bottom:solid 5px #CCCCCC;
padding:0.2em 0.4em;
}
h4 {
width:12em;
border:solid #CCCCCC;
border-width:0 0 1px 12px;
padding:0.4em 0.4em;
}
h4 {
width:12em;
border:solid #CCCCCC;
border-width:1px 1px 1px 12px;
padding-top:0.4em;
padding-bottom:0.4em;
padding-left:0.4em;
}
画像を使った見出し
背景画像を入れる例：
h4 {
width:12em;
background:url(image-uri);
padding:0.5em 1em;
}
さらにborder を入れる例：
h4 {
width:12em;
background:url(image-uri);
padding:0.5em 1em;
border:solid #999999;
border-width:0 1px 1px 0;
}
背景画像を透過GIFにしておけば，
背景色が透ける
h4 {
width:12em;
background:#FFE9FF url(image-uri);
padding:0.5em 1em;
}
階層が分かりやすい見出し
h4 {
border-left:solid 8px #CCCCCC;
padding:1em 0.4em;
}
h5 {
margin-left:15px;
border-left:solid 6px #CCCCCC;
padding:0.7em 0.4em;
}
h6 {
margin-left:30px;
border-left:solid 4px #CCCCCC;
padding:0.4em;
}
画像
画像の大きさ指定
<html>
<head>
<title>TAG index Webサイト</title>
<style type=“text/css”>
<!-#example { border: 5px red solid; }
a img { border: none; }
-->
</style>
</head>
<body>
<p><img src=“image/photo.jpg” alt=“サンプル” width=“200” height=“133”
id=“example”></p>
<p><a href=“index.html”>
<img src="image/photo.jpg" alt="サンプル" width="200" height="133"></a>
</p>
</body>
</html>
バナー
background.jpg (JPEG 画像, 800x150 ピクセル)
#banner {
background-image: url(./background.jpg); /*背景画像のURLを指定 */
background-repeat: no-repeat; /*画像が小さい場合、繰り返して表示するか */
background-position: center; /*画像の表示位置 */
text-align: right;
/*タイトル文字の位置 */
}
リンクのアタマに画像
Google
背景画像にしてa要素の中に
.link {
background:url(image-uri) no-repeat left center;
padding-left:14px;
}
<a href="http://www.google.co.jp/" class="link">Google</a>
imgタグを書くよりずっと簡単に入れられる。
リンク全部にこれをやったら，画像ばっかりになって，逆に大事なリンクが目立
たなくなる。
画像が必要ないときにはclass="link"を書かなければいい。
透過GIF にしておけば，背景色が違うところにも使える。
CSSを書く際の5つのテクニック
CSSを書く際の5つのテクニック1-2
1. サイズ指定の際はピクセルを使うな。
body { font-size: 62.5% }
p { font-size: 1.2em; line-height: 1.5em; }
px指定してしまうとブラウザの文字サイズに反応しなくなってしまうので。
2. 階層構造はインデントして読みやすくしよう
h1 {}
h1#logo { font-size: 2em; color: #000; }
h2 {}
h2.title { font-size: 1.8em; font-weight: normal; }
CSSを読む際に分かりやすいように工夫する。
CSSを書く際の5つのテクニック3-5
3. セクションごとにコメントを入れて構造化しよう
/* Structure */
...
/* Typography */
...
CSSを見やすくするためのコメントを入れる。しかしサイズが肥大化してくると
分かりづらくなる場合は、コメントをつけてさらに別のファイルに分けたほうが
よい。
4. divを使いすぎないようにしよう
必要以上にdivを設定しすぎないように注意。
5. 最初にすべての要素を初期化しよう
* { margin: 0; padding: 0; }
各要素のデフォルトのマージンが0になり、デザインしやすくなります。
便利なHTML要素- sup，em
sup，sub（上付・下付 ）
面積の単位「m2」や化学記号「03」などをWeb
に書くときは，
m<sup>2</sup>
O<sub>3</sub> とやるといい。
supは上付文字に，subは下付文字にしてくれる。デフォルトの状態
が気に入らなければ，CSSで
sup { font-size: 0.8em; vertical-align: 0.4em; }
sub { font-size: 0.8em; vertical-align: -0.2em; }