江戸川区・東西線葛西駅のホームページ制作・システム開発会社

三MENU

スタイルシートでデザインする その1

・<style></style>タグを<head>内に定義し、CSS言語でデザインを記述する

※CSS … Cascading-Style Sheet

・<style></style>タグでbodyセレクタをデザインしてみる

書式:

<head>

<style>

セレクタ(HTMLタグ){

属性:値;

属性:値;

}

</style>

</head>

※{ … 中括弧、波括弧

※属性(property):値(value)

「生き物クラスの中の人間クラスと犬クラスの話し」

※オブジェクトを定義する為に、クラスを宣言する

class{

property:value;

property:value;

で表される。

・bodyセレクタをcolor:redで文字色を赤にする

・background-color:blueで背景色を青にする

※色の話し

・光の三原色RGB(赤・緑・青) ※インクはC(シアン)M(マゼンダ)Y(イエロー)K(ブラック)

…色はRGBそれぞれの強さを16進数2桁(0〜255)で表して、それらを組み合わせて表現する

…RBを混ぜると…紫 RGを混ぜると? GBを混ぜると?

…全ての色をMAXで混ぜるとFFFFFF=?

…黒は?

…グレーは?

○スタイルシートを別ファイルにする

・<link href='style.css' rel='stylesheet' type='text/css' />を指定してスタイルシートを外部ファイル化する(外部ファイル"*.*"をインクルードするという)

○その他のCSS

・/*○○○*/でコメントアウトする

・font-familyを'Microsoft Sans Serif', 'MS Pゴシック'に優先順に設定する

※P(Propotionalフォント)の説明

・font-sizeを0.9emに指定する

※%, em, pxの違い

・font-style:italicで斜体にする

・font-weight:boldで太字にする

・text-decoration:line-throughで打ち消し線を表示する

・text-decoration:underlineで下線を表示する

・text-decoration:noneで装飾を取り消す

○独自でセレクタを作成する

・ブロック要素は<div class='*'></div>で、インライン要素は<span class='*'></span>タグで。

※div = division

・background-color、colorを指定する

・border-color:#ccccccで線色をグレーにする

・border-style:solid, dotted, noneを指定する

・border-width:4px 1px 1px 1pxを指定する

※pixelはモニターの最小単位

・float:left; で2列左詰めにする

・指定要素のheight、width、

・paddingを指定する

・text-align:rightで右寄せを指定する ※その他 left, center も作ってみる

・margin:0 auto; でセンタリングする

・セレクタの中にセレクタを作成し、margin でマージンを指定する(width:100%;height:100%;にしておく。これは目一杯広げるという意味)

※ID/Name と Class の違い

・車で例えると、class は型式、id/name は車台番号(固有の番号)になる

・セレクタに名前をつけるには <div id='***' name='***'> とする

・特定のセレクタ(idで指定されるセレクタ)にクラスを適用する際は #***{} で CSS の定義を書く

contact

様々なニーズにお応えいたします。詳しくはメールにて。