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

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

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

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

では表を使う時に便利なＣＳＳでの指定です。
  1. まずはＨＴＭＬの基本タグを決めます
    <table cellpadding="5" class="hyou_shouhin">
    <tr>
    <th>商品名</th><th>説明</th><th>値段</th>
    </tr>
    <tr>
    <td>商品名１</td><td>商品説明</td><td>1000</td>
    </tr>
    </table>
    これで下記のようになります。
    商品名説明値段
    商品名１商品説明1000
  2. これに色々な指定をＣＳＳで設定します。
    ここでは、文字情報・枠線情報・背景色を設定してみます。
    ＣＳＳのどこに書いても構いません。
    .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;
    }
    上を設定するとこうなります。
    商品名説明値段
    商品名１商品説明1000
  3. それぞれの設定の説明
    color：文字の色　#000000　や　#000　でもＯＫ！
    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　でもＯＫ！
    border-width：枠線の太さ　上　右　下　左
    　の順番で指定してます。
    background-color：表の背景色
    　background-image を使えば画像も設定可能です。
    　background-image: url(画像ＵＲＬ); のように書きます。

もっと詳しい設定も可能です。
それは次回にまわしましょう(笑)。

アフィエイト工房デザインのリンク集
キーワードアドバイスツールプラス アクセスアップ・SEO対策・検索エンジン登録
キーワード出現頻度解析

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

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

アフィリエイト関連書籍
表を作りたい〜CSSでの指定(前置き)〜
以前、ＨＴＭＬ構文として
<table> タグの解説らしきモノを書きました。
表を作りたい！
表を作りたい！〜詳細指定〜
今回はそれを踏まえてＣＳＳでの指定をしてみましょう。

今回はＣＳＳは良く判らないと言う方の為に前置きを書きます。
実際の表の指定の為に知っておいて欲しい事ですので
簡単に目を通しておいて下さい。
  1. ＣＳＳはＨＴＭＬの構文をデザインするモノ。
    ＨＴＭＬとＣＳＳの関係は以前書いていますので、
    詳細(ＣＳＳ基礎知識)はそちらに譲るとして、
    この事が具体的にどういう事か書きましょう。
  2. ＨＴＭＬは簡単なモノだけを書き、詳細はＣＳＳで指定する。
    ＣＳＳで詳細指定をしておけば、
    新しい構文全てにその指定を反映させられるのです。
    つまり、商品レイアウト用、一覧表用などのように
    目的別にＣＳＳで指定しておけば、常に複雑なＨＴＭＬ構文を
    書かなくて済む    のです。
  3. <p>〜</p> と <div>〜</div>を憶えておきましょう。
    この２つは段落(範囲)指定のＨＴＭＬです。
    表などをＣＳＳで指定する際、
    これで独立した範囲として指定しておく方が何かと便利です。
    <p><table>〜</table></p>
    <div><table>〜</table></div>
    のように書きます。
  4. <p> と <div> の違い
    <p> を使うと、その前の範囲との間に１行分スペースが置かれます。
    スペースを空けたくない時は、<div> を使ってください。
  5. class 属性と id 属性
    この２つは <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 | カスタマイズ(ＣＳＳ＆JavaScript編) | トラックバック(0) | コメント(2) | page top↑

アフィリエイト関連書籍
| ホーム | 前ページ≫


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

OS:Win2000Pro 　ブラウザ:IE6.0

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