人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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)できるなら、その方法と簡単なソースを教えてくださいませ。

●質問者: notjust
●カテゴリ:コンピュータ 趣味・スポーツ
✍キーワード:CSS ng ソース タグ ダミー
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● KAIUN
●10ポイント

http://www.hatena.ne.jp/

はてな

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

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

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

</a>

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

◎質問者からの返答

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

むーなるほど。

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

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

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


2 ● 186
●40ポイント

http://186.bz/hatena/20050222/index.html

hatena - 20050222 -test

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

htmlの構造としては

-a#box

--span.box_title

--span.box_body

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

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

◎質問者からの返答

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

ありがとうございます。

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

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


3 ● KAIUN
●10ポイント

http://www.livedoor.com/

livedoor

連続回答すいません。

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>

◎質問者からの返答

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

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

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

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ