さっそくテンプレートを作ってみたわけですが。
作る時に気をつけたことについて、書いていきたいと思います。
テンプレートの見た目
商品名 ネーム記載のブランド 購入店舗
- サイズ
- 何故購入に至ったか、必要だった理由、決め手など
- 実際に使っているのは場面、コーデなど
- お気に入りポイント
- 着用していて気になる点
- よく合わせる服やアクセサリなど
- その他記載しておくべきこと
HTMLソース
<div class="wardrobe_wrapper">
<h4 class="wardrobe_header"><span class="wardrobe_title">商品名</span> <span class="wardrobe_brand">ネーム記載のブランド</span> <span class="wardrobe_shop">購入店舗</span></h4>
<div class="wardrobe_img"><img class="hatena-fotolife" title="*****:plain" src="*****.jpg" alt="*****:plain" width="200" /></div>
<dl class="wardrobe_dl">
<dt></dt>
<dd>サイズ</dd>
<dt></dt>
<dd>何故購入に至ったか、必要だった理由、決め手など</dd>
<dt></dt>
<dd>実際に使っているのは場面、コーデなど</dd>
<dt></dt>
<dd>お気に入りポイント</dd>
<dt></dt>
<dd>着用していて気になる点</dd>
<dt></dt>
<dd>よく合わせる服やアクセサリなど</dd>
<dt></dt>
<dd>その他記載しておくべきこと</dd>
</dl>
</div>
CSSコード
/*■ワードローブアルバム 外枠*/
div.wardrobe_wrapper{
border:1px solid #cccccc;
padding:0px;
}
/*■ワードローブアルバム 見出し*/
h4.wardrobe_header{
margin:0px 0px 10px 0px;
}
span.wardrobe_brand:before{
content:"（"; /*ブランドの前*/
}
span.wardrobe_brand:after{
content:"/"; /*ブランドの後ろ ショップ名との区切り*/
}
span.wardrobe_shop:after{
content:"）"; /*ショップ名の後ろ*/
}
/*■ワードローブアルバム 画像*/
span.wardrobe_img{
padding:5px 3%;
}
/*■ワードローブアルバム リスト*/
dl.wardrobe_dl{
padding:3%;
line-height:1.2; /*これやらないと段組みが縦にずれる*/
}
dl.wardrobe_dl dt{
float:left; /*横並び設定*/
clear:left; /*横並び設定*/
width:6em; /*項目名の幅*/
}
dl.wardrobe_dl dd{
margin-left:6em; /*項目名の幅*/
margin-bottom:0.5em; /*項目名の行間*/
}
/*項目名入力*/
dl.wardrobe_dl dt:nth-of-type(1):before{
content:"サイズ";
}
dl.wardrobe_dl dt:nth-of-type(2):before{
content:"購入の経緯";
}
dl.wardrobe_dl dt:nth-of-type(3):before{
content:"実際の用途";
}
dl.wardrobe_dl dt:nth-of-type(4):before{
content:"特長";
}
dl.wardrobe_dl dt:nth-of-type(5):before{
content:"難点";
}
dl.wardrobe_dl dt:nth-of-type(6):before{
content:"コーデ";
}
dl.wardrobe_dl dt:nth-of-type(7):before{
content:"メモ";
}
解説
- 定義リスト<dl>を使う
- 項目名は自由に変えられるようにする
- 商品名・ブランド・購入店舗は目次にしたい
定義リスト<dl>を使う
<table>でもいいのですが、「項目名－説明文」の組み合わせなので、文法的にはこちらが正しいかな、と。縦横にそれぞれ複数の項目が並ぶような時は<table>一択なんですが。これなら<table>風の横並び表示もできるし、見づらかったら改行表示に変更できるし、融通が利きます。
項目名は自由に変えられるようにする
項目名を何にしようかかなり悩み、とりあえずこれと決めてはみたものの、後で項目名を変えたくなる可能性が大。そこで、CSSのcontentプロパティを使って、あとからまとめて変更できる仕様にしてみました。
<dt>に:nth-of-type(n)セレクタを使うことで、「(n)番目の<dt>について」という指定を行っています。で、各内容をcontentプロパティで表示。多分ないとは思いますが、もし後から項目数を増やしたくなったら、後ろに追加限定ですが、増やすことも可。項目の順番を入れ替えようと思ったらソース全部変更しないといけませんが、まあそんなことはないでしょう。おそらく。あったらその時だ。
ちなみに、
【HTML】
<dt class="size"></dt>
<dd>サイズ</dd>
【CSS】
dl.wardrobe_dl dt.size:after{
content:"サイズ";
}
こんな感じで各<dt>にクラス名を与えて指定してもいいのですが、見たまま編集画面だとCSSで指定した項目名が表示されない(Google Chrome)ので、何かでうっかり<dt>の順番を入れ替えちゃった時、間違いに気付きにくいかな、と。単純に順番で管理することにしました。
商品名・ブランド・購入店舗は目次にしたい
最初は全部定義リストに突っ込んでしまおうと思っていたのですが、この3項目は目次として表示させたいと思ったので、中見出し<h4>にまとめました。はてなの目次機能は便利ですねー。
「（）」や「/」など3項目間の区切り文字も、後で変えられるよう項目名同様にCSSで管理しています。
とりあえずこんなことを踏まえて作りましたよ、というメモ。
構造的にはこれでとりあえず決定。細かいデザインは随時変更する予定です。