とりあえず、原型はできたわけ。⇒前回記事

原型

 
んで、作業に先立ち、サンプル商品の画像

 

画像+説明文って感じにしてみる

案の定・・・　ただ並べたらこうなるね？
 
ブロックを作る・・・左寄せ、で、画像と説明文の間に縦の点線をいれたい。  

画像+説明文、それぞれブロックにする

ブロックにしてしまうと高さがなくなるので、こうなるね。どうも、高さがなくなるってのが困るな。
 

画像+説明文、それぞれブロックにする ul を使って見る

なんでulを使ってるんだろうと思ってたので、ULを使って見た。
たかさがなくなることに違いはなかった。
じゃあ、なんでグローバルナビとかって ul なんだろう？ div の横並びでもいいやん・・って思った。
 
さて、高さか・・・　まぁ、商品画像のブロックに高さをくれてやればいいんだけど、なんかその、高さ固定とかってやりたくないんだよね。融通が利かなくなるのが嫌いなんだ。とりあえず、一応の完成形を作るという意味で高さを与えてみる。
 

商品画像ブロックに高さを与える

あら？ブロックに与えないとだめか？
 

商品画像+説明のブロックを ul から div にしてみる

高さは解決するけど、右側のマージンはなんだ？
 

左マージンの正体は？考えながら縦線をさらっと入れ、左右の幅があってないところも直す。

あれ？ヒントつかんだ。
商品名のDIVの後ろに改行いれたらこうなった。
 

クラウン+商品名のブロックの後ろに br を入れてみた。

つーことはだ・・・そか、クラウン+商品名の・・・ なにが効いてたってことか。その何かが不明。ブロック内の float が外にも影響する？CSSって、この辺りのスコープがわかりにくい。スコープって概念はないってことだべな。明示的にクリアしてやらないと、発見したらそれがそれ以降も続くと。
ま、とりあえず、早々に、画像の方にマージンをつける。
 

商品名のDIVの後ろに br を入れてみた。

てーとだ・・・　気が付いた。クラウン+商品名のボックスと商品画像+商品説明のブロックの行間が空いた・・（－－；
これは、改行ピッチなわけだから、このブロック全体の改行ピッチを狭くしてやる・・・てーと説明文の改行ピッチが狭くなりすぎるので、説明文のブロックの改行ピッチをスタンダードにする。。。か。
 
こんな感じか？
 

上下二つのブロックの行間ピッチを狭くする (line-height)

変化なし・・・
改行ではなくて、float をクリアしてみた。
 

フロートのクリアで改行させてみる

状況はもっと悪くなった(笑）
 
ちなみに、 line-heightで何かうまくいった試しが一度もないことを付け加えておく。line-heightの使い方がいまいち不明。
なんとか行間を詰めたい。位置指定で動かしたくない。さて、行間を詰める方法は？・・・
 
ここまでの状況を図解してみる。


 
そういえば・・・
 

style でクリアしてみる

だめか・・・ ブロック抜けるときに style で clear:both; を入れてみたんだけどね。
う～ん、br だとピッチが広い。 clear は効かない。 line-heightは問題外。さてっと・・・
ん？ p タグ？
 

pタグ でクリアしてみる

効かない・・・　あらためていう。 line-heightで解決した問題など一つもない！・・・　％じゃだめなのかな？＜まだ期待してる

pタグ でクリアしてみる

あ～～～、期待した自分が情けない！　全然だめ効いてない。　説明文の方は効いてるみたいだけど、肝心のブロック間の改行ピッチをかえられない・・・ブロック全体にもう一度かけてみよう。
 

ブロック全体の改行ピッチを変えてみる(line-height)

あら？　いい感じ。
初めて line-height でうまくいくものが出そうな気配。
 

全体ブロックの下パディングを入れる/商品名の上パディングを入れる（改行ピッチ調整分、位置が上がってしまったので）

あ・・・実はだめじゃん。商品画像がみぎによった。　なんで？　う～ん・・・
 

ここまでの完成形

<div style="margin:30px 0 0 0;background-color:#ffffcc;padding:2px 10px 20px 10px;border:solid 2px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px; line-height:-50%;">
 <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;padding:10px 0 0 0;">
   <div>なんちゃらかんちゃら商品名</div>
  </div>
 </div>
<br />
 <div style="margin:40px 10px 0px 10px;padding:20px 0px 20px 0px;background-color:#ffffff;height:157px;border:solid 1px #D48D00;border-radius:5px; -webkit-border-radius:10px; -moz-border-radius:10px;">
  <div style="margin:0 0 0 20px;float:left;border-right:dashed 1px #ccc;"><a href="http://ck.jp.ap.valuecommerce.com/servlet/referral?sid=2252541&pid=883222491" target="_blank" ><img src="https://tecinfo.yuzumaru.co.jp/wp/wp-content/uploads/2015/01/2108576.gif" style="padding: 0 20px 10px 0;"></a></div>
  <div style="float:left;">説明文がはいるよていでごわす。<br />ごわごわごわす。</div>
 </div>
 <br clear="all"><div style="clear:both;"></div>
</div>

⇒次へ(3/3)