試作(CSS)

メインコンテンツにかっけーランキングパーツを作りたい。

とりあえず、

イメージの表示位置をスタイルでフレームの外に出す。

なんちゃらかんちゃら
 

バックグラウンドでやってみる。

なんちゃらかんちゃら
背景画像ってわけだから、フレームの下ってことになる。なので、これはだめ。やっぱ img で画像を移動させる必要がある。
 

画像と文字を横に並べる

なんちゃらかんちゃら
 
 
 
わっ!フレームの高さがなくなった。それはそうか、div で、実態を隠している。さて、どうしよう。
 
最初ので高さが発生していたのは、img の下に文字がきていたからだな。
じつは、この中に説明文を書きたいとおもっているので・・・ でも、それは、色抜きフレームの中。
とりあえず、色抜きフレームをこの中に書いてみよう。
 

色抜きフレームを中に入れる

なんちゃらかんちゃら商品名

説明文がはいるよていでごわす
ふむ、いい感じ・・・だけど、クラウン+商品名と説明文の間が空きすぎだな。
なんでだろう? こういうときは、ファイヤーフォックスでCSSの影響範囲を確認すればいいのだな。
 
2015y01m12d_153141592 なるほど、クラウンのボックスの高さがでかくなってる。divブロックを移動させたとおもってたけど違うのか。
頭が伸びるってかんがえるのが正解か。クラウンのボックスに高さを指定してためしてみよう。
 

クラウンのDIVに高さを与えてみる(クラウン画像のサイズ80×67)

なんちゃらかんちゃら商品名

説明文がはいるよていでごわす
変化なし・・・ top:-30 で頭が伸びた? あら? bottom の位置はかわってないってことか? bottomも-30にしてみよう
 

クラウンのDIVで底の位置も移動させる

なんちゃらかんちゃら商品名

説明文がはいるよていでごわす
ふむ、だめだな。イメージで移動させてるからかな? position:relative;top:-30px;bottom:-30px; を div に対してかけてみよう。
&nbsp

クラウンの位置移動を div 側にかけてみる

なんちゃらかんちゃら商品名

説明文がはいるよていでごわす
DIVのブロックサイズは、小さくなった。。。回り込みクリアの <br clear=”all”><div style=”clear:both;”></div> が、なぜその位置から始まるのかって問題なのか。一応、div のheight:67px;は、外したけど変わらず。なんでだ?
 
ん?試しに商品名の </div> の後ろに文字をいれてみたら・・・ くっつく。つまり float:left が効いているってことだな。 もしかして、 <br clear=”all”><div style=”clear:both;”></div> が大きく改行してるってことか?  

商品名の</div>の後ろに文字を書いてみた。

なんちゃらかんちゃら商品名
もじもじ
説明文がはいるよていでごわす
 

<br clear=”all”><div style=”clear:both;”></div>をとっぱらった

なんちゃらかんちゃら商品名
もじもじ
説明文がはいるよていでごわす
あらあら、いい感じじゃん。説明文の<div> をmarginでやや下に移動させる。ついでに最後のところに回り込みクリアを入れてみる。
 

位置調性と回り込みクリアをいれる

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす

ん?・・・そか、回り込みが効いているからマージンが効かないのか。。。さて、どうしたものか。
 
そしたら、商品名のブロックに高さを与えてみるか。

位置調性と回り込みクリアをいれる

なんちゃらかんちゃら商品名
説明文がはいるよていでごわす

相対位置指定の画像と商品名を一塊のブロックにして・・・ そすると実態がなくなるので、説明文は、ぎゅいんと上に上がる。
それを margin を使ってぐぐぐと下へ移動させる。。。 
最後に、クリアブロックをいれているので、下の行間がやや広い感じはするけど、そこはあきらめてこれを原型としよう。
そのソースがこれだ。
<div style="margin:30px 0 0 0;background-color:#ffffcc;padding:2px 10px 0px 10px;border:solid 2px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;">
 <div>
  <div style="float:left;position:relative;top:-30px;bottom:-30px;"><img src="<?php echo home_url(); ?>/img/clown_01.png"></div>
  <div style="float:left;font-size:24px;text-decoration:bold;position:relative;top:10px;">なんちゃらかんちゃら商品名</div>
 </div>
 <div style="margin:40px 10px 0px 10px;padding:20px;background-color:#ffffff;border:solid 1px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;">説明文がはいるよていでごわす</div>
 <br clear="all"><div style="clear:both;"></div>
</div>
・・・ あの~・・・ systaxhilighter 役に立たないんですけど~・・・(--;
なして、変換が逆向きなんだろう? これ時々起るんだよね。わけわかんね。
自作するのが一番かな?・・・ とりあえず、こっちで。


<div style="margin:30px 0 0 0;background-color:#ffffcc;padding:2px 10px 0px 10px;border:solid 2px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;"> <div>

<div style="float:left;position:relative;top:-30px;bottom:-30px;"><img src="<?php echo home_url(); ?>/img/clown_01.png"></div>

<div style="float:left;font-size:24px;text-decoration:bold;position:relative;top:10px;">なんちゃらかんちゃら商品名</div>

</div>

<div style="margin:40px 10px 0px 10px;padding:20px;background-color:#ffffff;border:solid 1px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;">説明文がはいるよていでごわす</div>

<br clear="all"><div style="clear:both;"></div>

</div>

あれ? syntaxhilighter 動いてるじゃん・・・ わけわからんプラグインだ。
 
次へ(2/3)

スポンサーリンク

関連記事一覧