あるサラリーマンのアフィリエイト挑戦日記

どこにでもいる普通のサラリーマン「まるぞう」が、アフィリエイトというサービスにチャレンジし、副収入を得る様子を書き綴っていきたいと思います。果たしてどうなることやら?



ネットビジネスの基本を知りたい?
和佐大輔と木坂健宣のネットビジネス大百科

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
  1. --/--/--(--) --:--:--|
  2. スポンサー広告|
  3. トラックバック(-)|
  4. コメント(-)

スタイルシートで段組に挑戦(その2)

こんにちは、まるぞうです。
なんとかメルマガも第2号まで発行できて
ホッと一息ついています。しかし、読者獲得の
ためにもさらにがんばらないといけません。
まるぞうの挑戦はまだまだ続きますよ~。

さて、前回はスタイルシートで段組するために利用するfloatプロパティの紹介とdivタグの紹介をしました。今回はその利用方法を紹介します。

スタイルシートで3段組を実現するためには、まず2段組を実現させる必要があります。3段組は2段組を応用して実現させるので、まず2段組をどうやって実現したのか紹介します。

2段組のイメージはAブロックBブロックに分けて、こんな感じに考えます。(色が若干おかしいのは許してくださいね(^^;)
2dan1.jpg


これをHTMLで表現してみると、こんなかんじになります。
<div class="A-block">
ここにAブロックの内容を書きこみます。
</div>
<div class="B-block">
ここにBブロックの内容を書きこみます。
</div>

class="A-block" と表現しているところがスタイルシートでレイアウトを定義するためのクラス名というものですね。
そして、classで定義したレイアウトに対して、スタイルシートで回り込みの指定をしてあげることになります。

スタイルシート側での表現はこんなかんじです。

div.A-block {
float: left;
width: 75%;
}

この表現で、divタグのA-blockクラスは「ページ幅の75%であり、後のデータを右側に回りこむ」と指定したことになります。
つまり、Aブロックの後に続くBブロックAブロックの右側に回りこんで表示されることになります。

では、3段組をどうするかというと、2段組と考え方は一緒で、
中央のBブロックに対してCブロックを右側に回りこませるとOKです。
3dan2.jpg


これをHTMLで表現してみると、こんなかんじになります。
<div class="A-block">
ここにAブロックの内容を書きこみます。
</div>
<div class="B-block">
ここにBブロックの内容を書きこみます。
</div>
<div class="C-block">
ここにCブロックの内容を書きこみます。
</div>

さらに、スタイルシート側でB-blockに対する設定を追加します。

div.A-block {
float: left;
width: 25%;
}
div.B-block {
float: left;
width: 50%;
}

これでなんとか3段組ができあがりです。よかったよかった。

ただし、実は上記の方法で3段組は実現できるのですが、それぞれのブロックの量によってはブロックの高さがそろわず、見た目に美しくないということになってしまいます。(^^;

アイス好きスキ!ドットコムで使用している段組も、中央本文のコンテンツが一番多いので問題にはなっていないのですが、両端のコンテンツの量が増えると表示がカッコ悪くなってしまうのです。このあたりは現在いろいろと調べているところなので、回避方法がわかったら紹介しますね。(^^;
ただいまいろいろ実験中なので、ホームページのソースと今回紹介したソースに食い違いがありますが、許してください。m(__)m

それではまた。

この記事がよかったと思われたら、blog総合検索ランキングをクリックしていただけると嬉しいです。

スポンサーサイト
  1. 2005/04/17(日) 14:42:59|
  2. HPに挑戦|
  3. トラックバック:0|
  4. コメント:3
<<今週は全然動けないです。。 | ホーム | スタイルシートで段組に挑戦(その1)>>

コメント

はじめまして( ^o^)
勉強になります。
またよらせて頂きますヽ(^。^)ノ
  1. 2005/04/21(木) 22:07:11 |
  2. URL |
  3. コイチ #-
  4. [ 編集]

ありがとうございます

コイチさん、こんにちは。

コメントをありがとうございます。
わたしの調べた情報が少しでも役立って
いるのでしたら大変嬉しいです。

これからもよろしくお願いしますね。(^^)
  1. 2005/04/24(日) 18:32:08 |
  2. URL |
  3. まるぞう #-
  4. [ 編集]

色関連でなかなか良いかも

最近 色関連で なにかと参考になりそうな ホームページを見つけました。
http://www.color-assist.com/

ホームページを作成するときに 色の配色で悩んだ場合に
使えそうで便利そうです。
  1. 2005/04/25(月) 10:40:56 |
  2. URL |
  3. とよ #-
  4. [ 編集]

コメントの投稿

管理者にだけ表示を許可する

トラックバック

トラックバックURLはこちら
http://maruzou.blog3.fc2.com/tb.php/58-03f01a5d

まるぞう

07 | 2017/08 | 09
Sun Mon Tue Wed Thu Fri Sat
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

Recent Entries

Recent Comments

Recent Trackbacks

Archives

Category

Links

Search

その他リンク

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