質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

2024閲覧

リストの端に多数の画像を配置する際のコーディングの仕方

miyoshi_work

総合スコア69

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2017/02/23 07:23

お世話になっております。

この度、記事一覧のリストの端(四隅)に、画像を散りばめたデザインを作ろうと思っております。

▼デザインイメージ

イメージ説明

(星とリボンが画像のイメージです。
それぞれすべて違うデザインの画像になります。)

これの実装に当たって、
下記のようなソースで実装いたしました。

下記コード実装

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などの擬似要素をつかって背景画像として出しておりますが、こちらの方が綺麗なコードとして評価が高くなったりするのでしょうか?

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

検索エンジンのアルゴリズムは公表されていないので断定はできませんが、少なくともHTML, CSSの文法的には間違っていないと思いますので、そこで何か評価が下がることはないと思います。
また、Googleの検索エンジンはソースコードの綺麗さよりも、情報の品質を重視しているという噂があり、ウェブマスター向けガイドライン(品質に関するガイドライン)には以下のような情報の品質を重視していると読める記述があります。

どうすれば自分のウェブサイトが独自性や、価値、魅力のあるサイトといえるようになるかを考えてみる。同分野の他のサイトとの差別化を図ります。

また、HTMLの文法など検索エンジンをを意識することも大切ですが、検索エンジンの立場からすると、サイトを訪れる人を最優先に考えたページのほうが好まれるようです。

検索エンジンではなく、ユーザーの利便性を最優先に考慮してページを作成する。

投稿2017/02/23 08:01

s8_chu

総合スコア14731

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

最近のコーディングはデザイン要素の為だけのタグ配置を避ける傾向にあります。
結果beforeやafterを使用して、あるべき要素にオマケとしてデザイン要素をくっつけたりするわけです。

こちらなど参考になるのではないでしょうか?
http://www.mdn.co.jp/di/articles/2366/?page=5

投稿2017/02/23 07:41

shaak

総合スコア607

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

自分ならliに:beforeと:afterでやります。
きっと、力技と感じるのは、中のテキストの高さが変わったときにずれてしまうという懸念がある為かと思います。

css

1ul, 2li { position:relative;} 3ul:before, 4ul:after, 5li:before, 6li:after { display:block; position:absolute; width:30px; height:30px; background-position:center center; z-index:10;} 7ul:before { bottom:0; left:0;} 8ul:after { bottom:0; right:0;} 9li:before { top:0; left:0;} 10li:after { top:0; right:0;} 11ul:before { background-image:url(yyy.jpg);} 12ul:after { background-image:url(zzz.jpg);} 13li:nth-child(1):before { background-image:url(aaa.jpg);} 14li:nth-child(1):after { background-image:url(bbb.jpg);} 15li:nth-child(2):before { background-image:url(ccc.jpg);} 16li:nth-child(2):after { background-image:url(ddd.jpg);} 17・・・

投稿2017/02/23 08:41

1000

総合スコア204

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問