スタイルシートリファレンス

特質系肉体派システムエンジニア燃えＰａＰａの運営する、１からサイト作成をするとなると必須なスタイルシートの各プロパティに関してのリファレンスブログです。スタイルシートの必要なプロパティの、詳しい使い方を辞書的に利用可能なようにつくります。

[1] [2] [3] [4] [5] [6]

無題

こんばんは、
燃えＰａＰａです。

ちょっと私の関連サイトの件で、
ご報告が

無念でございます。
先日ご紹介していた、
出張ヘアメイクのサイトが・・・
仲良しの縁のサイトで応援（外部・内部SEO対策等）していたのですが・・・

たぶん、ペナった感じですorz
（googleでペナルティを受けることをペナると呼ぶ）

一時期、
サイト名で検索しても、トップページが表示されなくなり、
（この場合はほぼ確実にペナルティ）

それから少しして、
インデックスが戻ってはきたのですが・・・

サイト名で検索しても、
トップページよりも、リンクページの方が上位にくる始末です・・・

これは、想像すると、
かつてペナって、
それが、その後の審査されて評価が戻ったというよりも、

疑わしいので、
とりあえず評価をゼロにしてから再始動、みたいな感じですね

もともと、出張ヘアメイク、で結構上位（安定して１ページ目）
に来ていただけにもったいないですorz

この順位を戻すのは
結構大変かもです。

というか実質また１からSEO対策になるので、
結構大変なんです。
（似たようなケースで経験済み）

ただ、今まで、リンク施策等がちょっと偏っていたので、
少しリンクの形を散らす等の対策が有効そうです。

これまで
・ほとんどもらってる被リンクのアンカーテキストはサイト名のみ、
・トップページに対して集中
↓
これから
・被リンクを下層ページにもふるように
・サイト名でのリンク、キーワードでのリンク、URLリンクを満遍なく
・時に違う趣旨のテキストでもリンク（こちら、このブログ等のテキストでも）

な感じに変更する予定です。

燃えＰａＰａ

2012/05/17(Thu) 日記 Comment(0)

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; }

2012/02/01(Wed) font Trackback(0) Comment(0)

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

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

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

・head内指定の方法

<style type="text/css">

＜/style＞

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

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

・別ファイル記載の方法

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

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

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

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

2012/02/01(Wed) ルール Trackback(0) Comment(0)

色指定ルール

スタイルシートだけに問わず、

WEBで作業をしていると、色指定をすることが多々あります。

color: #ffffff;

などがそれにあたります。

この場合、color:　プロパティのように、文字色指定の場合、背景色指定の場合、
場面は多々ありますが、
色の指定ルールは共通なので、今回ご説明します。

PC上での色は、

光の三原色、RGB、すなわち、レッド（赤）、グリーン（緑）、ブルー（青）の
３色の光の重ね合わせで全色を表現しています。

一昔前までは、
色数も16色や256色、という少ない種類しか表現できませんでしたが、
今は、High Color（16ビット）やTrue Color（24ビット）
といって、

65,536色
16,777,216色

までの色を表現できます。

この場合、スタイルシートやHTML等で色指定する場合、
通常、24ビットまでの表現域を前提として、
RGB各色256段階の指定により、色を表現します。

具体的には、
各値を0～255まで使い、それを16進法で、表現、00～ffとして、
#ffffff　（先頭２文字赤、次２文字緑、最後２文字青）
として指定。

また、単純に、各値を16段階で表現して、
#fff　（それぞれ赤、緑、青に対応）
として、指定することもできます。

この指定方法と、
色の割合の変化による、実際の色合いがわかれば、
サイトデザイン等で、色にひと工夫可能になります。

なお、
このようなRGBの数値では色のイメージがわかない方は

http://www.colordic.org/

このサイトのように、色見表で欲しい色のRGBの数値をチェックするとよいです。