忍者ブログ

栃木県のおもしろあるある

関東地方の1県栃木県にまつわるあるある情報紹介ブログです。

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

スタイルシートの本規格

こんばんは、
燃えPaPaです。

先日よりスタイルシートの解説を行っておりますが、
当ブログでは、
主に実践編での、
サイトに使う用のスタイルシートの書き方や、
特徴的なスタイルシートのサンプル等を紹介していますが、

もし英語力が強くて、
最新のスタイルシートの策定ルールが気になった場合

本家のW3C(WEB上のコード規格の国際的な統一を図る組織)の策定したルール付けが

http://www.w3.org/Style/CSS/

に載っております。

興味持った方は、ぜひご一読を

英語苦手な人は・・・
すいません。

ボチボチこのブログにて解き明かしてゆきますので。


燃えPaPa
PR

fontプロパティの数々

サイトを作成する上で、かなり序盤に設定することとなる、
スタイルシートの基本プロパティです。

font: style variant weight size / height family

以降で説明する、style や variant などを一度に指定する方法です。height を指定する時は size とスラッシュ( / )で区切って指定します。size と family 以外は省略可能です。fonttype には、現在のアイコンラベルやウィンドウメニューに現在使用されているフォントを示す値として caption, icon, menu, message-box, small-caption, status-bar のいずれかを指定します。CSS2 では inherit(継承)も指定可能です。

指定例:
BODY, TD, TH {
    font: italic bold 100%/150% serif;
}


上記スタイル(font)で一括に指定もできますが、
以下、それぞれは、クラスごとに区切って、部分部分に指定するのに、多用されます。


font-variant: variant

normal(既定値:通常), small-caps(大文字)のいずれかを指定します。
CSS2 からは inherit(継承)も指定可能です。
small-caps を指定すると、アルファベットの小文字が(すこし小さめの)大文字で表示されるようになります。

指定例:
H1, H2 { font-variant: small-caps; }


font-weight: weight

フォントの太さを normal(既定値), bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 のいずれかで指定します。
IE4.0 や Netscape 4.0 では通常と太字の 2種類しかサポートしていないので、normal(通常)と bold(太字)以外を使用することは少なそうです。

指定例:
DT { font-weight: bold; }


font-size: size

フォントの大きさを指定します。
絶対指定として xx-small, x-small, small, medium(既定値), large, x-large, xx-large、相対指定として larger, smaller、絶対単位指定として 10in, 10cm, 10mm, 10pt, 10pc, 相対単位指定として 10px, 10ex, 10em などを、割合指定として 120% などを指定します。単位を省略して 20 のようには指定できないので注意してください。

周りのフォントに対する相対的な大きさを指定する時は 120% などのパーセント指定が無難です。small や smaller などや、em や ex などの単位は、ブラウザにより解釈が異なるため、予想外のフォントサイズになるという悲劇がおこることがあります。

画像サイズにあわせてフォントの大きさを固定したいという要望がありますが、ブラウザによって単位の解釈が異なるため、すべてのブラウザで同じフォントの大きさを実現するのは困難なようです。

指定例:
BODY, TH, TD { font-size: 16pt; }

スタイルシートの基本ルールその2

引き続きスタイルシート定義ルールについて解説します。

前回記事で、スタイルシートを
head内にまとめて記載、もしくは別ファイルで定義したい場合、
h1 { color: #ff0000; }
のように、書き方を説明しましたが、
その内容をファイル内に組み込む場合、


・head内指定の方法

<style type="text/css">
<!--
body {
font-size:14px;
color:#000000;}
-->
</style>

のように、<head> から </head> の間にスタイルを書いていくことになります。
この場合、記載するhtmlファイルのheadが量に応じて大きくなってしまうという欠点もあります。

その場合、下記方法がオススメです。


・別ファイル記載の方法

style.css
のように、css拡張子のファイルを作成し、
その中身に直接スタイル定義
body {
font-size:14px;
color:#000000;
}
などを書きます(ファイルの文頭文末に区切り文字等は必要なし)。

そして、そのファイルを保存し、
headの中に

<link href="style.css" rel="stylesheet" type="text/css">

として記載することで、そのスタイルが有効になります。

スタイルシートの基本ルール

スタイルシートはWEB上の表現の制御として、
主に3箇所に記載することで評価され、効果があります。

・htmlタグに直接記載
・head内に記載
このふたつは効果を出したいページそのものの中に記載するものになります。

・外部ファイル(CSSファイル)に記載
この場合、別ファイルを作り、反映させたいページ内で、該当のスタイルを記載したファイルを読み込ませることとなります。

なお、スタイル表記の基本は

htmlタグ内に直接記載する場合は、
< h1 style="color: #ff0000;">
のように、タグの中に、style="" の表記で定義を記載し、

head内にまとめて記載、もしくは別ファイルで定義したい場合、
h1 { color: #ff0000; }
のように、
スタイルを指定したいタグ名を書き、その後に{}でスタイルの定義を書く
ということになります。

CSS近況

こんばんは、
燃えPaPaです。

ほとんど当ブログの日記カテゴリと変わらないところもありますが、

私自身の近況でなく、
スタイルシートに関する昨今の世間の流れ等の報告は、
このカテゴリでやろうと思いまして、
カテゴリ作りました。

ちょいと世間で新しい情報出ましたら、
ここで方向しようかと思います。


燃えPaPa

box-shadow

こんばんは、こうちゃんです。

こちら、CSSを使って画面を美しくする上級技のひとつで、
box要素に影をつける、

box-shadow

です。
こちら、どこかでご覧になったことがあるかもしれませんが、CSS3のプロパティでボックス要素に影をつけて、立体感を出すことができます。
設定により、右下に影を出して立体感を演出したり、ボヤけた影にして浮き上がるように見せたり、使いどころは多数です。

使い方は

box-shadow:横方向 縦方向 (ぼかし) (広がり) (影の色) (影の向き);

で、横、縦の要素はpx指定で、必須になります。
そこから各種要素を指定し、効果を決めていきます。

いくつか例を出していきますと、


ボックス要素を作り、
<div style="box-shadow: 5px 5px; border: 1px solid #000; width: 80px; height: 40px;"></div>
などのようにすると、右下に影が出ます。


box-shadow: 5px 5px;
の、横、縦、の要素は、正の値で、右、下に影が伸び、マイナスで指定をすれば、左、上方向に影が伸びるようになります。

サイト中で使用すると、強調したい部分が浮き上がって見えてきれいに見えます。

ぼかし
<div style="box-shadow: 5px 5px 10px; border: 1px solid #000; width: 80px; height: 40px;"></div>


ぼかしを指定すれば、指定方向にぼかしが伸び、また長さを指定しないと全体にぼかしがつきます。

広がり
<div style="box-shadow: 5px 5px 0px 5px; border: 1px solid #000; width: 80px; height: 40px;"></div>
を指定すると、影というより、ボックス要素からそのまま端がつながって影が出ます。



<div style="box-shadow: 5px 5px 0px -5px; border: 1px solid #000; width: 80px; height: 40px;"></div>

広がりは、マイナスを指定することで、逆に影の端が減るように映ります。


色指定
<div style="box-shadow: 5px 5px #6666ff; border: 1px solid #000; width: 80px; height: 40px;"></div>
影は、色を指定しなければ黒で、指定すればその色の影がつきます。

内向きの影
影は、デフォルトでは内向きにつき、insetをつけることで、内向きにも影をつけることができます。
<div style="box-shadow: 5px 5px inset; border: 1px solid #000; width: 80px; height: 40px;"></div>

内・外両方にも
内、外、両方に同時に影つけすることもでき、
その場合、外向きの要素を指定したあとにカンマ区切りで内向きの要素も指定します。
<div style="box-shadow: 5px 5px 10px,5px 5px 10px inset; border: 1px solid #000; width: 80px; height: 40px;"></div>


いかがでしょうか。
慣れないとややうるさい画面効果になってしまうかもしれませんが、
工夫次第で見栄えのする領域を作ることができ、強調したい部分などにつけて、目をひくボックスを作ったりして、サイト作りに幅を持たせることができますので、
ぜひ習得してみてください。

こうちゃん