cssを学ぶ
スタイルシート(Cascading Style Sheet:CSS)
HTML で作ったページの見栄えをもっとよくするための技術。ページ外にスタイルの設定を書き込んだシートを作る事により、多くのページがあってもスタイルシートを修正するだけですべてのページが修正できる。
CSSとHTMLの違い
CSSはHTMLよりもっと細かい設定が可能である。
また、設定の仕方にも種類があって@部分的に適用する方法、Aページ全体に適用する方法、Bリンクを使って複数ページに適用する方法がある。
設定方法
1.タグにはさまれた部分に適用する〜インラインで設定する〜
タグに直接書き込む方法。HTMLと同じように書き込んだタグ内にスタイルが反映される。
スタイルの一括変換をしたあとに個別のタグについて設定したい場合に使うのが効果的である。
2.ページ全体に設定する
HTMLファイルのヘッダー部分( タグで囲まれた部分)にスタイルを書き込む方法。
同じタグ内容の統一、または修正する場合にこの一箇所だけ直せばよい。
headタグにCSSを書き込む場合は<style>(type="text/css")〜</style>を用いる。
3.リンクを使って外部から複数ページを設定する
CSSファイルを使い、HTMLファイルにこのシートのリンクを貼る事で設定する方法。
外部CSSファイルには<style>は必要なく、設定したいタグとそのタグに対するプロパティ・値を書くだけでよい。保存形式は、名前.cssの拡張子を使う。
CSSファイルをHTMLファイル内に貼り付ける場合は
<link rel="stylesheet" href="name.css" type="text/css">
と記述する。
ボックス
CSSでは、文字やテーブル等タグで囲まれた一まとまりをボックスと呼び、余白や枠、背景等の装飾が可能である。
枠の太さ
枠の太さを、h1タグやtableタグなどに指定する。ほぼ全てのタグに適用することが可能である。
それぞれの値には、
単位付きの数値、thin(細い)・medium(中)・thick(太い)を指定できる。
border-width: 値1 値2 値3 値4
枠の形式
border-style:形式
形式一覧
none |
solid |
double |
groove |
ridge |
inset |
outset |
dotted |
dashed |
余白
枠内余白
padding: 値1 値2 値3 値4
周辺余白
margin: 値1 値2 値3 値4
幅、高さ
width: 値
height: 値