///

dlを使って、dtとddを横並びにする

wrote :

dl{
width:○○px;
}
dt{
float:left;
width:△△px;
}
dd{
margin-left:△△px;
}
  • floatをdtにのみ適用させるのがポイント。
    これにより、ddが数行に渡っても、次のdtはそのddの後に表示される。
  • ddのmarginにdtに指定した幅と同じ値を取ることでdtとddを別々のボックスとなるのがポイント。
    また、ddにmarginを指定せずにborderを指定した場合、ddの上にdtがフロートしている状態になるので、dtの横にborderが表示される。

川上 武範(かわかみ たけのり)
1975年生。シンプルシンプルデザイン代表兼Webクリエイター。たびのとWebサイト運営責任者。

企画からサイト設計、正しいマークアップを意識したWebサイト制作やユーザー視点の情報設計を得意としている。

シンプルシンプルデザイン
たびのと
twitter : たけたけ@OnlyTwo

メディア掲載
2016年10月25日 レバテックフリーランスの記事「自作Webサービス記事紹介まとめ」でサイト内の記事「Webサービス「たびのとTOKYO」を作ってみました」を紹介していただきました。