質問: お世話になっております。 この度、記事一覧のリストの端(四隅)に、画像を散りばめたデザインを作ろうと思っております。 ▼デザインイメージ ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/1244aa05da0ff1ad3812a3ad05643677.png) (星とリボンが画像のイメージです。 それぞれすべて違うデザインの画像になります。) これの実装に当たって、 下記のようなソースで実装いたしました。 下記コード実装 ``` ul{ margin:0; padding:0; } li { list-style:none; height:80px; padding:8px; padding-left:80px } li:nth-child(even){ background-color:#eee } /* リスト角の画像用css */ .decoration_img { border: 0; } .decoration_img span { position: absolute; z-index: 10; } .decoration_img span:nth-child(1) { top: -19px; right: 0 } .decoration_img span:nth-child(2) { top: 121px; left: 0; } .decoration_img span:nth-child(3) { top: 106px; right: 0 } .decoration_img span:nth-child(4) { top: 264px; left: 0; } .decoration_img span:nth-child(5) { top: 264px; right: 0 } .decoration_img span:nth-child(6) { top: 397px; left: 0 } .decoration_img span:nth-child(8) { top: 534px; right: 0 } .decoration_img span:nth-child(9) { top: 408px; right: 0; } ``` ``` テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト テキスト ``` このコードで見た目の反映は全く問題はないのですが、 なんとなく間違った、力技のコーディングのように感じます。 上記のコードは、SEO的にだったり、コードとして問題あるものなのでしょうか? --- また、こちらのサイトでは:beforeなどの擬似要素をつかって背景画像として出しておりますが、こちらの方が綺麗なコードとして評価が高くなったりするのでしょうか?
回答: 最近のコーディングはデザイン要素の為だけのタグ配置を避ける傾向にあります。 結果beforeやafterを使用して、あるべき要素にオマケとしてデザイン要素をくっつけたりするわけです。 こちらなど参考になるのではないでしょうか? http://www.mdn.co.jp/di/articles/2366/?page=5