CSSに関する質問です。初心者ですが笑わないで下さい。パート2


・前置き
 前回の質問(http://www.hatena.ne.jp/1108906913)で、divで作ったボックスを全部リンクにする方法を教えていただきました。それに続く質問ですので、一度目を通してください。

・やりたいこと
前回、ダミーのdivボックスを作成し、それに合うかたちで<a>タグをボックス要素に変えました。

今度は、この<a>タグで作ったボックスの中を、「段組み」にしたいです。簡単な図を書きました(http://d.hatena.ne.jp/notjust/20050222)、ご覧下さい。



・試してみたこと
ボックス要素にリンクは貼れないということで、<a>ボックス内にdivボックスとかを作るのは、NG…ですよね?

・知りたいこと
1)CSSのみで、<a>ボックス内(display: block)で、さらに段組みなどをすることはできる?
2)できるなら、その方法と簡単なソースを教えてくださいませ。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2005/02/22 16:25:01
  • 終了:--

回答(3件)

id:KAIUN No.1

KAIUN回答回数24ベストアンサー獲得回数32005/02/22 16:43:36

ポイント10pt

サンプル図のような段組でしたら、透明GIFを入れて左寄せにすると同じような形にすることができます(CSSのみ、ではないですけど、一番簡単ですね)。

↓ソースはこんな感じです。

<a href=”#”><img src=”img/spacer.gif” width=”50” height=”80” border=”0” align=”left”>あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ

</a>

完全に左右2段にするとかですと、ご承知のように、Aタグの中にDIVタグは使えなくなってしまいますので、実現はむずかしいかなあ…

id:notjust

回答ありがとうございます。

むーなるほど。

サンプル図は、「中を整形したい」がタイトルのようなもので、それに写真や説明を書いたつもりなんです…。

ほんと、バカですいません。

完全な左右二段は難しいか…。うむむ…。

2005/02/22 16:52:18
id:smoking186 No.2

186回答回数74ベストアンサー獲得回数62005/02/22 16:57:15

ポイント40pt

サンプルを作ってみました。a要素で作ったボックス内でspan要素を使って段組をしています。

htmlの構造としては

-a#box

--span.box_title

--span.box_body

となっています。span.box_body中にimg要素があります。

ソース中にそのままCSSが載っていますので御参照下さい。

id:notjust

す、すごい…。これ、これです。

ありがとうございます。

思いつきもしなかった…。なんか、巧い!っていう感じです。

一応、他の方法も無いか続けてみます。

2005/02/22 17:05:12
id:KAIUN No.3

KAIUN回答回数24ベストアンサー獲得回数32005/02/22 17:10:12

ポイント10pt

連続回答すいません。

divタグじゃなくspanタグならいいのかどうかちょっと自信がないんですけれども、

下記のような指定をすれば、完全2段に分けることは可能です。

ただあらかじめ文章を2つに分けることになってしまいますが、もしそれでも大丈夫ということでしたら。

(外していたらごめんなさい。ポイントは結構です)

例)

<style>

a{

display:block;

background-color:#eee;

width:200px;

font-size:0.8em}

a:hover{

background-color:#FFFFCC}

#dan1{

display:block;

width:90px;

float:left;}

#dan2{

display:block;

width:90px;

float:right;

}

</style>

--以下、HTMLのソース--

<a href=”#”><span id=”dan1”>ああああああああああああああああああああああああああああああああ</span><span id=”dan2”>いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい</span></a>

id:notjust

何度もありがとうございます。

XPのIEでは大丈夫なのですが、Safariだと崩れるみたい。

ぼくの直し方が下手なのかも…。

いじくってみます。ありがとうございました。

2005/02/23 00:27:32

コメントはまだありません

この質問への反応(ブックマークコメント)

トラックバック

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません