*

関連記事などに画像付きリストをCSSで簡単に作るサンプル

公開日: : ノウハウ

画像付きリスト

画像つきリストとは上図のようなイメージです。しばしばブログなどでは関連記事や人気記事の表示などに使われている事が多いですし、インターネットショッピングサイトではサイドメニューの商品カテゴリリストに採用されています。

ポイントは画像と言ってもリストマークではなく純粋に img タグで読み込んだ画像がリストに含まれているという所です。これを CSS で実現しようとするといくつかの方法がありますが、あまりソースがゴチャゴチャすると可読性も悪くなるのでやはりなるべくシンプルに作りたいものです。

そこで、なるべくシンプルな構造でこの画像つきリストを作ってみたので紹介します。

html部分

<ul>
   <li><img src="画像1"><p>タイトル1</p></li>
   <li><img src="画像2"><p>タイトル2</p></li>
   <li><img src="画像3"><p>タイトル3</p></li>
</ul>

html 部分はごくシンプルにリストの中に画像とタイトルを内包しているだけです。

ul li{
   width:200px;
   border-bottom:1px solid #aaa;
   margin:3px 0px 3px 0px;
} 

ul li img{
   float:left;
   margin-right:8px;
}

ul li p{
   padding:15px 0px 15px 0px;
}

実際にお使いいただくにはあなたの作成しているサイトに合わせて微調整が必要になると思いますが CSS もこれだけです。

まず、リストの幅は任意の幅にしてください。そして li には下線と上下の余白を設定しています。続いて li 内の画像には float:left で画像とタイトルが横並びになるようにしています。最後に p ではタイトル部の上下の余白を調整しています。

他の方法としては dl dt dd タグを用いる定義リストを使う方法がありますが、タグが3つもある為ソースがゴチャゴチャして見難くなります。ul li を用いたリストのほうがシンプルに構成できます。

サイト作りの参考になれば幸いです。

  • Pocket

おすすめトピックス

関連記事

videoタグのmp4動画にもサムネイル画像を表示させるには

ニコニコ動画や Youtube を始め、インターネット上で動画を見たり配信する機会が珍しくない時代となりました。むしろ毎日アップロードされる動画が多すぎて見てもらう為の競争となっていると言っても過言ではありません。 そこ […]

これを見れば簡単!スマホサイトのフッターメニューをサクッと作るサンプル

スマートフォンなどのモバイル端末でウェブサイトを見る人が急増し、今の時代スマートフォン用サイトを作る事が当たり前となりました。スマホ用に別の html ファイルを用意するより一つの html で両方に対応するレスポンシブ […]

イメージマップ
mapのareaリンクにロールオーバーを実現する簡単な代替策

一つの画像内に複数のリンクを貼る事ができる html の map タグと area タグがあります。これをイメージマップと言います。このイメージマップを使ってとあるコンテンツを作っていたのですが、画像内のリンク領域にマウ […]

画像のALT属性に文字を入れる気にならないのは画面に表示されないからだと思う

画像の ALT 属性って知っていますか?ALT 属性とは画像に付加するテキスト情報で、画像について手短に説明したテキストを入力する事が望ましいです。画像が表示されない時に何の画像かわかる為の代替テキストとして、音声読み上 […]

divタグ
div要素のクラス名をnth-childの擬似クラスで何番目を指定しても効かない

CSS3 が登場して擬似クラス nth-child が使えるようになって、要素の何番目のみにスタイルを適用するような事が非常に簡単になりました。従来ではクラスなどを駆使して無理やり指定していました。これではソースも CS […]

css3
CSS3で要素の2番目以降、1番目以外にスタイルを適用する擬似クラス

スタイルシート(CSS)はウェブサイトにデザインを適用するための言語。そのスタイルシートのバージョンは今では3になっており、かなり表現力豊かで優秀になっています。 例えば ul li タグのリストの場合、従来の CSS2 […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
彦根市の緑豊かで温かい雰囲気の民家カフェ「MokuMoku」でランチ

滋賀県彦根市にある隠れ家的民家カフェ「MokuMoku(モクモ

世界一のジェラート
彦根市にある世界一のジェラート店「ジェラテリアアズーロ」で滋賀ならではの味を堪能

世界一のジェラートのお店が滋賀県に、彦根市にあるなんて。半信半

スマホで遊園地経営ゲーム「ローラーコースタータイクーンタッチ」レビュー

自分で夢のワンダーランドを作る遊園地経営シミュレーションゲーム

大垣で和風生パスタ!半個室で落ち着くニーニャニーニョ桜小町

岐阜県大垣市にニーニャニーニョ桜小町というパスタ店がありました

滋賀県の高校野球予選を観戦するのに入場料金はいくら?

夏、7月。全国の高校球児達が甲子園を目指して熾烈な野球の戦いが

→もっと見る