お世話になっております。
この度、記事一覧のリストの端(四隅)に、画像を散りばめたデザインを作ろうと思っております。
▼デザインイメージ
(星とリボンが画像のイメージです。
それぞれすべて違うデザインの画像になります。)
これの実装に当たって、
下記のようなソースで実装いたしました。
css
1ul{ 2 margin:0; 3 padding:0; 4} 5 6li { 7 list-style:none; 8 height:80px; 9 padding:8px; 10 padding-left:80px 11} 12 13li:nth-child(even){ 14 background-color:#eee 15} 16 17/* リスト角の画像用css */ 18.decoration_img { 19 border: 0; 20} 21.decoration_img span { 22 position: absolute; 23 z-index: 10; 24} 25.decoration_img span:nth-child(1) { 26 top: -19px; 27 right: 0 28} 29.decoration_img span:nth-child(2) { 30 top: 121px; 31 left: 0; 32} 33.decoration_img span:nth-child(3) { 34 top: 106px; 35 right: 0 36} 37.decoration_img span:nth-child(4) { 38 top: 264px; 39 left: 0; 40} 41.decoration_img span:nth-child(5) { 42 top: 264px; 43 right: 0 44} 45.decoration_img span:nth-child(6) { 46 top: 397px; 47 left: 0 48} 49.decoration_img span:nth-child(8) { 50 top: 534px; 51 right: 0 52} 53.decoration_img span:nth-child(9) { 54 top: 408px; 55 right: 0; 56}
html
1 <div class="decoration_img"> 2 <span> <img src="http://placehold.jp/24/ff4963/ffffff/40x40.png?"></span> 3 <span> <img src="http://placehold.jp/24/ccc/ffffff/40x40.png?"></span> 4 <span> <img src="http://placehold.jp/24/ff4963/ffffff/40x40.png?"></span> 5 <span> <img src="http://placehold.jp/24/ccc/ffffff/40x40.png?"></span> 6 <span> <img src="http://placehold.jp/24/ff4963/ffffff/40x40.png?"></span> 7 <span> <img src="http://placehold.jp/24/ccc/ffffff/40x40.png?"></span> 8 <span> <img src="http://placehold.jp/24/ccc/ffffff/40x40.png?"></span> 9 </div> 10 11 <ul> 12 <li> 13 テキスト<br> 14 テキスト 15 </li> 16 <li> 17 テキスト<br> 18 テキスト 19 </li> 20 <li> 21 テキスト<br> 22 テキスト 23 </li> 24 <li> 25 テキスト<br> 26 テキスト 27 </li> 28 <li> 29 テキスト<br> 30 テキスト 31 </li> 32 </ul>
このコードで見た目の反映は全く問題はないのですが、
なんとなく間違った、力技のコーディングのように感じます。
上記のコードは、SEO的にだったり、コードとして問題あるものなのでしょうか?
http://www.izumi.akita.jp/child
また、こちらのサイトでは:beforeなどの擬似要素をつかって背景画像として出しておりますが、こちらの方が綺麗なコードとして評価が高くなったりするのでしょうか?
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。