*

関連記事などに画像付きリストを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

おすすめトピックス

関連記事

マウス
CSSのみでマウスのロールオーバーでopacityだと背景が濃いと白くならない対処法

画像のロールオーバーと言えば、ウェブサイトでリンクが付いた画像やバナーにマウスを乗せた時に色が変わったり何かしら変化がある処理を言います。一昔前には画像のロールオーバー一つに javascript を使って大変面倒で h […]

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

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

iframe内のjavascriptを無効にする方法

html の iframe(インラインフレーム)とは、一つのページ内に小窓を作ってその内部に別ページや別サイトを表示させるタグです。iframe 内のページは自分で作る事もありますが、他の人が作る事もあります。どういう事 […]

スマホを操作する手
スマホでWeb閲覧時代にスマホサイトでNGだと思う事3つ

ちょっと前まではインターネットを見るなら、通販するならパソコン!という時代でしたが、既にこれは終わった時代です。ここ2,3年は、インターネットを閲覧、通販においてもスマートフォン率がだんだん上昇しています。これは当サイト […]

リファラーによってiframe内のリンク先をjavascriptで変更する

リファラーによってインラインフレーム内にあるリンクのリンク先を変えれたら便利になるなと思って javascript で自作してみました。こんな事したいと思う人は多分いないニッチなものだと思います。 どういう時に使いたかっ […]

プレースホルダ
検索窓に薄い文字を入れて何を入力するのか分かりやすくするプレースホルダ

ネット上で何かを検索したい時、どこを見ますか? そう、検索窓ですよね。検索窓は EC サイトやネットショップ、何かを検索する必要があるウェブサイトには大概付きものでお馴染みのものです。 たまに見るのが検索窓に薄い文字で予 […]

上部広告

著者について

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

フォローはこちら

       

上部広告

       
コンビニ受け取り
不在がちでもAmazonの注文の品をコンビニで受け取る事ができます【ファミリーマート編】

ネットショッピングは今では物を購入する手段としてメジャーな存在となりま

安全靴
カジュアルで疲れにくく痛くない!安くて履きやすいおすすめ安全靴【喜多】

倉庫や工場、建設業の方ならお馴染みの物かと思いますが、安全靴と

CapsLockキー
CapsLockキーにイライラ、いらないので無効化してさしあげた

キーボードの CapsLock キーって知ってますか?あなたの

AMP
WordPressを簡単にAMPに対応するテーマやテンプレートを紹介

ウェブサイトの SSL 対応と同様に、いずれ AMP にも対応

Photoshopで写真の一部の色を変える色の置き換え機能の使い方

この写真のこの部分だけ色を変えたい!この商品画像の色を変えたい

→もっと見る