スタイルシート

スタイルシートの情報について、私が好んで使う記述方法を書いています。
カテゴリ
SEO対策とユーザビリティ向上
SEO対策とユーザビリティ向上/一覧 (32)


SEO基礎講座


2018年1月
 
19 20
21 22 23 24 25 26 27
28 29 30 31      

新着エントリ
Google AdSense リンクが斜体文字 (2/25)
Google AdSense「Ads by G」 (2/17)
「まだ違反している」 Google AdSense チームからの返信 (1/28)
1日に1回しか入力されないユニークキーワードは63%(ヤフー) (1/28)
やっと Google AdSense チームに返信できました (1/27)
Google AdSense チーム に返信したらエラー (1/25)
Googleの プログラムポリシーに違反していた (1/24)
「検索結果のページからページ 1 件を削除しました」という Google のメッセージ (1/16)
Googlewashing (11/28)
Google PageRank を確認できるツール (11/27)
検索キーワードランキングレポート (6/23)
「Yahoo!Japan に登録された」とは? (6/22)
YST(Yahoo Search Technology) (6/21)
3桁のコードでカラー指定 (6/20)
margin(マージン)、padding(パディング) (6/18)
Googleの「もしかして」は固有名詞にも対応している (6/17)
必ずしも正確なキーワードで検索されるわけではない (6/16)
H1タグのフォントサイズとマージン変更 (6/16)
SERP(検索結果ページ) (6/15)
検索サービス Ask.jp の検索エンジン Teoma(テオマ) (6/14)
グーグル・アドセンスとグーグル・アドワーズ (6/13)
ブロック要素とインライン要素 (5/12)
P4P(検索結果連動型広告) (4/10)
ホスト pool-**-**-**-**.phil.east.verizon.net (3/8)
ホスト ***.yst.corp.yahoo.com (3/7)
ページ外要因を上げるためのトラックバックについて (2/1)
スニペット (1/26)
クラスタリング (1/25)
パーシャルインデックス (12/18)

新着トラックバック/コメント

リンク集


アーカイブ
2004年 (4)
10月 (2)
11月 (1)
12月 (1)
2005年 (20)
1月 (2)
2月 (1)
3月 (2)
4月 (1)
5月 (1)
6月 (11)
11月 (2)
2006年 (6)
1月 (6)
2007年 (2)
2月 (2)


アクセスカウンタ
今日:17
昨日:63
累計:263,844


RSS/Powered by 「のブログ

[PR]



2005年06月20日(Mon)▲ページの先頭へ
3桁のコードでカラー指定

HTML言語では、例えば文字の色を指定する場合には、
<font color="#ff0000;">あいうえお</font>
 → あいうえお
のように、#(シャープ)から始まる6桁のカラーコードを指定します。

将来無くなる方向の <font> タグを使わずに、<span>タグを使ってスタイルシートで指定する記述は下記のようになります。
<span style="color:#ff0000;">あいうえお</span>
 → あいうえお

さて、スタイルシートでのカラー指定は、HTML言語と同様に6桁のカラーコードを使用することが可能ですが、実はスタイルシートには独自の指定方法として、3桁のカラーコードによる指定が可能です。
例えば下記のように指定します。(表示内容は先に示した例と同じ)
<span style="color:#f00;">あいうえお</span>
 → あいうえお

3桁のコードは、1桁目が、2桁目が、3桁目がという順番で並んでおり、この光の3原色を0〜fまでの16進数の値を指定して調節します。
0に近いほどその色は弱くなり、fに近いほどその色が強調されます。
ちなみに、 オールゼロ(#000)は黒、オールf(#fff)は白になります。

また、カラーは3桁の16進数の値による指定方法以外に、「0〜255の値による指定方法」と「%(パーセント)指定による方法」も用意されています。

記述例
<span style="color:rgb(255,0,0);">あいうえお</span>
 → あいうえお

<span style="color:rgb(100%,0%,0%);">あいうえお</span>
 → あいうえお

2005年06月18日(Sat)▲ページの先頭へ
margin(マージン)、padding(パディング)

margin(マージン)、padding(パディング)は、ページのレイアウトを考える上で重要なプロパティです。margin、padding を簡単に説明すると余白領域です。下図をご参照下さい。

margin(マージン)領域
padding(パディング)領域
スタイルシートを使いこなして綺麗なページを作ろう

上記テキスト スタイルシートを使いこなして綺麗なページを作ろう は、枠線を描いている<div>タグに囲われていますが、枠線の内側の余白領域(白色の領域)は padding プロパティで指定し、枠線の外側の余白領域(紫色の領域)は margin プロパティで指定しています。

スタイルシートの例
div {
margin:10px 0px 5px 20px;
padding:5px 10px;
border:1px solid #000000;
}

補足:
margin で指定している値は左から「上」「右」「下」「左」(時計まわり)
padding で指定している値は左から「上と下」「左と右」です。
margin:10px; というように1つの値だけ指定すると、上下左右全て同じ値に指定したことになります。
border は枠線を設定するプロパティです。


2005年06月16日(Thu)▲ページの先頭へ
H1タグのフォントサイズとマージン変更

H1タグ(<H1>)は、SEO対策上重要とされるタグの1つであり、強調したいキーワードをこのタグ内に含めると効果があるとされている。
ただし、デフォルトではフォントサイズがブラウザの設定(IEで言えば「文字のサイズ」)により、動的に変わる。
また、デフォルトでマージンも指定されており、H1タグの次の行に書いた文章との間に間隔が空く。
レイアウトや見た目上、デフォルトのままでH1タグを使用するのは使い勝手が悪いことから、スタイルシートでフォントサイズとマージンを指定して、デフォルトの設定を変更する手法がよく用いられる。

H1タグ スタイルシートの例
h1 [
font-size:16pt;
margin:0px;
}