0商品画像と説明のボックスを横並びに並べる、そんな状況しょっちゅうありますよね。画像サイズとか、商品名とか、テキストの分量が均一だと非常に優秀(上から目線)、なんですがまあそんなことは一度もなく・・・デザインによっては背景画像でdivの入れ子にすることが多かったので、あまりボックスの高さが揃わない、という現象にあたったことがありませんでした。フリーになってからcss3とhtml5だったり、シンプルデザインなサイトの案件が増えてくると、divの入れ子とか正直めんどくさい。sectionに画像とテキストだけ入れてシンプルに・・・とかやっていると高さが揃わない問題勃発!「heightのズレが売り上げに影響するわけないのでスルーしてください」とはさすがに言えず(知り合い案件だとたまに言うけどwww)、どうにか揃えなければならない。いう状況の時って大抵wordpressサイト。できればcssで揃えたい・・・が親要素が必要なものが多いのでウィジェットとか使っているとめんどくさい、というかほぼ無理(できるけどwordpressにした意味が消えるw)。wordpressだとプラグインとかちあったらめんどくさ〜。src="./heightLine.js"></script></head>あとは高さを揃えたいブロックレベル要素にclass=”heightLine”を追加すればOKちなみにボックスの中の見出しテキストも装飾しているから高さを揃えたい(揃えろ)という場合は子要素のクラス名をheightLine-任意の文字列にするだけでjsファイルをいじることなく勝手に揃ってくれます!ポイントは既に作ってあるクラス名をheightLineにうまく置換することですね。場合コーディングしてから「高さを揃えろ」と外野から言われることが多いと思うので(苦笑)、自分で作ったcssクラスを置換する手順が発生すると思います^^;さらにwordpressのウィジェット部分だった!っていう場合についても次は書いて行こうと思います。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。中の人カイカデザインキャッチコピーを『今依頼できるデザイナー・平日フリーランス』(パクリ疑惑)にしたいフリーランスデザイナー。当ブログではまっとうな制作者がつまづきそうもない部分でつまづいている実体験を、もともと持ち合わせてない恥もプライドもかなぐり捨ててさらしております。