FC2ブログでアフィリエイトを始める人の為のガイドブログです。 管理者と一緒に勉強しませんか?
<<06 1234567891011121314151617181920212223242526272829303108>>

カテゴリ別記事名検索リンク

カテゴリ別に記事名一覧を用意。読みたい記事を探して一発リンクが可能です。

スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

アフィエイト工房デザインのリンク集



キーワードアドバイスツールプラス アクセスアップ・SEO対策・検索エンジン登録
キーワード出現頻度解析
--/--/-- --:-- | スポンサー広告 | page top↑

アフィリエイト関連書籍

表を作りたい~CSSでの指定~
CSSは良くわからないという方は
下記記事に軽く目を通してからお読みください(笑)
表を作りたい~CSSでの指定(前置き)~

では表を使う時に便利なCSSでの指定です。
  1. まずはHTMLの基本タグを決めます
    <table cellpadding="5" class="hyou_shouhin">
    <tr>
    <th>商品名</th><th>説明</th><th>値段</th>
    </tr>
    <tr>
    <td>商品名1</td><td>商品説明</td><td>1000</td>
    </tr>
    </table>
    これで下記のようになります。
    商品名説明値段
    商品名1商品説明1000
  2. これに色々な指定をCSSで設定します。
    ここでは、文字情報・枠線情報・背景色を設定してみます。
    CSSのどこに書いても構いません。
    .hyou_shouhin {
    color: #black;
    font-size: medium;
    font-weight: normal;
    font-style: normal;
    border-style: solid;
    border-color: #black;
    border-width: 1px 2px 3px 4px;
    background-color: #aqua;
    }
    上を設定するとこうなります。
    商品名説明値段
    商品名1商品説明1000
  3. それぞれの設定の説明
    color:文字の色 #000000 や #000 でもOK!
    font-size:文字の大きさ px や pt などで数値設定しても良いです。
    font-weight:文字の強調(太さ)
     100 200 300 400 500 600 700 800 900 で数値指定も出来ます
     400 が normal 700 が bold と同じです。
    font-style:文字の斜体設定 italic と oblique があります。
     ブラウザにより影響されるので、通常は italic を使います。
    border-style:枠線の種類
     ブラウザによって表示できないものもあります。
     solid 実線 / double 二重線 /
     groove くぼみ線 / ridge 浮き出し線 /
     inset インセット / outset アウトセット /
     dotted 点線 / dashed 破線
    border-color:枠線の色 #000000 や #000 でもOK!
    border-width:枠線の太さ 上 右 下 左
     の順番で指定してます。
    background-color:表の背景色
     background-image を使えば画像も設定可能です。
     background-image: url(画像URL); のように書きます。

もっと詳しい設定も可能です。
それは次回にまわしましょう(笑)。
スポンサーサイト

アフィエイト工房デザインのリンク集



キーワードアドバイスツールプラス アクセスアップ・SEO対策・検索エンジン登録
キーワード出現頻度解析

テーマ:カスタマイズ - ジャンル:ブログ

2006/02/15 22:56 | カスタマイズ(CSS&JavaScript編) | トラックバック(0) | コメント(0) | page top↑

アフィリエイト関連書籍

表を作りたい~CSSでの指定(前置き)~
以前、HTML構文として
<table> タグの解説らしきモノを書きました。
表を作りたい!
表を作りたい!~詳細指定~
今回はそれを踏まえてCSSでの指定をしてみましょう。

今回はCSSは良く判らないと言う方の為に前置きを書きます。
実際の表の指定の為に知っておいて欲しい事ですので
簡単に目を通しておいて下さい。
  1. CSSはHTMLの構文をデザインするモノ。
    HTMLとCSSの関係は以前書いていますので、
    詳細(CSS基礎知識)はそちらに譲るとして、
    この事が具体的にどういう事か書きましょう。
  2. HTMLは簡単なモノだけを書き、詳細はCSSで指定する。
    CSSで詳細指定をしておけば、
    新しい構文全てにその指定を反映させられるのです
    つまり、商品レイアウト用、一覧表用などのように
    目的別にCSSで指定しておけば、常に複雑なHTML構文を
    書かなくて済む
    のです。
  3. <p>~</p> と <div>~</div>を憶えておきましょう。
    この2つは段落(範囲)指定のHTMLです。
    表などをCSSで指定する際、
    これで独立した範囲として指定しておく方が何かと便利です。
    <p><table>~</table></p>
    <div><table>~</table></div>
    のように書きます。
  4. <p> と <div> の違い
    <p> を使うと、その前の範囲との間に1行分スペースが置かれます。
    スペースを空けたくない時は、<div> を使ってください。
  5. class 属性と id 属性
    この2つは <p> <div> で指定した範囲に名前をつける属性です。
    <p class="任意の名前">~<p> や <p id="任意の名前">~<p>
    <div class="任意の名前">~<div> や <div id="任意の名前">~<div>
    のように使います。
    任意の名前は漢字やひらがな・カタカナでも指定できますが
    日本語限定になってしまうので、半角英数で指定するようにしましょう。
    例えば、<p class="hyou1">~<p> とか
    <p class="hyou_shouhin">~<p> と言った具合です。
    スペースハイフンは使うとエラーになる可能性があるので
    使用しないよう注意して下さい。
  6. class と id の関係
    範囲の中の範囲と言えば良いでしょうか。
    class 属性で指定した範囲の中に、さらにいくつかの指定を
    反映させるのに id 属性を使います。
    最も始めのうちは使い分けなど出来ないので
    基本的に class を使うと良いでしょう。
こんな所でしょうか(笑)。
次回に表の詳細指定の方法を記事にしますので
お楽しみに!

アフィエイト工房デザインのリンク集



キーワードアドバイスツールプラス アクセスアップ・SEO対策・検索エンジン登録
キーワード出現頻度解析

テーマ:カスタマイズ - ジャンル:ブログ

2006/02/14 21:25 | カスタマイズ(CSS&JavaScript編) | トラックバック(0) | コメント(2) | page top↑

アフィリエイト関連書籍

| ホーム | 前ページ


当ブログは以下の環境にて作成しております

OS:Win2000Pro  ブラウザ:IE6.0

上記以外の環境にて閲覧の場合、何か不具合が発生する場合があります。
何かおかしい?と思われる事がありましたら、BBSにコメントいただければ幸いです。

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。