アイコンやサムネイルの横にタイトルと概要文があるような時。
とりあえず、暑いっす。えぇ。 ここ最近の暑さにやられ気味なhirasawaです。そんなやられ気味な状況なので、HappyLifeも夏っぽくしてみました。 あと、弊社のベトナム事業部の女性マネージャーがブログを開始しました。 ベトナムに興味がある方や女性マネージャーに興味がある方、更新率も高いので、ぜひに。 さて、そろそろ本題に。 こんな感じで、アイコンとかサムネイルがあってその横にタイトルと概要文があるような、そんなデザインってよく見かけるかと。 今回は、これの組み方の一つとしてサンプルを用意してみました。 サンプルの確認は以下より。 サンプルを見る こういうデザインの場合、どうやって組もうか結構悩むんです。 何に悩むって、この画像をどうやってマークアップするか。 今まで多かったパターンは、基本的には定義リストを選んで、ddに入れたりしてましたが、コレだとリンクを画像とdtに張る必要があっ
Lucky bag::blog: dt と dd を横並び
定義リスト dl 内の dt と dd を CSS を使って横並びさせる方法ってのはいくつかあるんだけど、最近どうも記憶力が低下してきた気がするんで、完全自分用メモとして記しておく。 多分オーソドックスな方法 とりあえず最もオーソドックスであろう方法。これ意外にもあるのかもしれないけど、多分今んとこ自分は知らない。（margin を使った方法は前にも記事にしたことがあるけど、一応今回も入れておく） dl_sample01.html float を使った方法 margin を使った方法 position を使った方法 <dl> <dt>foo</dt> <dd>bar</dd> <dt>foo</dt> <dd>bar</dd> </dl> ちなみに margin を使った方法での margin 値の算出方法は、dt と dd それぞれの line-height 値の半分を足し、それに dt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
