HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

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

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

原型

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

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

 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

説明文がはいるよていでごわす。

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

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

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

説明文がはいるよていでごわす。

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

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

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

説明文がはいるよていでごわす。
ごわごわごわす。

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

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

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

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

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="http://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)

スポンサーリンク

関連記事

スポンサーリンク

カテゴリー