HTML - CSSスタイル

SEO対策研究所

Search Engine Optimization:検索エンジン最適化

BRIGHT IDEAS, NICE DESIGNS.

| HOME | HTML - CSSスタイル |
ページランク
Powered by PR-Icon

SEOのプロが使用するテキストリンクサービス http://net-koukoku.biz/
安全で確実なテキストリンクで検索エンジンの上位表示アクセスアップ!

HTML - CSSスタイル

フォント、テキスト、背景

斜体 {font-style:値}

  • none(なし)
  • italic(イタリック体)
  • oblique(斜体)

表示例:italicを指定しています

スモールキャピタル {font-variant:値}

  • normal(通常)
  • small-caps(スモールキャピタル)

表示例:small-capsを指定しています

太さ {font-weight:値}

  • normal(通常の太さ)
  • bold(太字)
  • bolder(より太く。直前の文字の太さからの相対)
  • lighter(より細く。直前の文字の太さからの相対)
  • 100~900(100刻みで指定。数値が大きいほど太くなる)

表示例:boldを指定しています,900を指定しています

サイズ {font-size:値}

  • 単位
  • %(基準書体に対する百分率。相対)
  • xx-small(超特小)
  • x-small(特小)
  • small(小)
  • medium(標準)
  • large(大)
  • x-large(特大)
  • xx-large(超特大)

表示例:xx-largeを指定しています

行の高さ {line-height:値}

  • 単位
  • %(基準書体に対する百分率。相対)
  • 数値のみ(基準書体に対する倍率。相対)

表示例:3emを指定しています

文字間隔 {letter-spacing:値}

  • 単位
  • %(基準書体に対する百分率。相対)

表示例:3emを指定しています

単語間隔 {word-spacing:値}

  • 単位
  • %(基準書体に対する百分率。相対)

表示例:Cascading Style Sheets (値は3emです)

文字色 {color:値}

表示例:視覚系UAでは文字色はBlueです。

背景色 {background-color:値}

表示例:視覚系UAでは背景色はRedです。

背景画像 {background-image:url(画像のURL)}

表示例:背景画像の例です。視覚系UAではこの文字の背景に画像が表示されます。

背景画像の繰り返し {background-repeat:値}

  • repeat(上下左右に繰り返し)
  • repeat-x(左右に繰り返し)
  • repeat-y(上下に繰り返し)
  • no-repeat(繰り返しなし)
ここでは、repeat-yを指定してみました。視覚系UAでは縦に画像が繰り返されます。

余白 {margin:値}(一括)、{margin-(top | bottom | left | right):値}(個別)

  • 単位
  • %(基準書体に対する百分率。相対)

値の一括指定の規則

  • margin:1em(上下左右全て1em)
  • margin:1em 5em(上下1em、左右5em)
  • margin:1em 5em 2em(上1em、左右5em、下2em)
  • margin:1em 2em 3em 4em(上1em、右2em、下3em、左4em)

こうなるので辺によって違う数値を指定するときなどは気をつけてください。

h1 {margin-left:3em}というふうに個別で指定できます。指定していないものは0です。

文章を囲む枠の太さ {border-width:値}(一括)、{border-(top | bottom | left | right)-width:値}(個別)

  • 単位
  • thin(細線)
  • thick(太線)
  • medium(中)

thickを指定して囲んでいます

topとbottomがthickでleftとrightはthinとして、囲んでいます。

枠の形状 {border-style:値}(一括)、{border-(top | bottom | left | right)-style:値}(個別)

  • none(なし)
  • hidden(なし)
  • dotted(丸い点線)
  • dashed(四角い点線)
  • solid(実線)
  • double(二重線)
  • groove(へこんだ感じ)
  • ridge(尖った感じ)
  • inset(内容が沈んだ感じ)
  • outset(内容が浮き出した感じ)

dottedを指定しているので、視覚系UAでは丸い点線で囲まれて表示されます。

視覚系UAではleft,topは四角い点線でright,bottomは尖った感じの線で囲まれています。

topとbottomだけsolidで指定しているので、枠の上下の線だけ実線で表示されます。

枠の色 {border-color:値}(一括)、{border-(top | bottom | left | right)-color:値}(個別)

紫色の実線で囲んでいます。

単位

  • in(インチ。1in=25.4mm)
  • cm(センチメートル)
  • mm(ミリメートル)
  • pt(ポイント。1pt=1/72in)
  • pc(パイカ。1pc=12pt)
  • px(ピクセル。表示上の1ドット幅(デバイス依存です))
  • em(基準書体に対する文字の高さ。相対)
  • ex(基準書体に対する文字xの高さ。相対)

HTML文法チェッカ

Another HTML-文法チェッカ
おそらく日本最強のチェッカ。重要なことからちょっと些細なことまで、きめ細かなチェックがありがたい。
W3C HTML Validation Service [W3C]
天下の W3C 自ら提供しているチェッカ。合格するとバナー掲載が認められます。
WDG HTML Validator
40 種類の文字コードをサポート。サイト全体の一括チェックもできます (45 ページまで)。
BBEdit
Macintosh 用のテキストエディタ。HTML 文法チェッカが内蔵されています。シェアウェアです。
HTML VALIDATOR (based on Tidy)
FirefoxあるいはMozillaブラウザの拡張機能。インストールすると、閲覧中のWebページの(X)HTMLソースが文法的に妥当か否かを教えてくれます。

CSS (CGI系)

W3C CSS Validation Service [W3C]
W3C の公式 CSS チェッカ。合格するとバナーがもらえる。

リンク切れ検出

LinkBot [Tetranet]
15日お試し版と、機能制限したフリーウェア版「LinkBot Express」もあります。

Sponsored Link

優良サイトからのテキストリンク広告が可能
SEO対策テキストリンク広告
http://www.tx-link.net/

テキストリンクで上位表示
独自ドメイン100サイトへテキスト広告
http://net-koukoku.biz/