*

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

おすすめトピックス

関連記事

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

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

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

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

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

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

リストの表示数を制限する
HTMLでulタグのリスト項目の表示数を制限する

HTML で ul タグを使えば以下のようなリストを作れます。 リスト リスト リスト このようなやつですね。順序なしリストと呼ばれて、何かを箇条書する時に便利です。html タグでは以下のように記述します。 この箇条書 […]

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

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

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

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

著者について

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

フォローはこちら

       

       
Illustratorでテキストをアウトライン化できない時に確認すること

Illustrator を使って印刷物などを作っている人ならテ

Gmailのエラー「Gmail requires one or more Google Play services that are not currently avaiable.」で開けない

あるいつもどおりの朝、スマートフォンで Gmail を開こうと

Amazonで自分の書いたレビューを一覧で確認する方法

世界的に最大級の通販サイト Amazon。私もよく使います。利

大垣カフェ「カフェ飯屋ピーナッツ」暖かく自然派なお食事が美味しいアットホームな場所でした

岐阜県大垣市の市民病院近くにオープンした「カフェ飯屋ピーナッツ

Illustratorで矢印に綺麗に境界線を付ける方法

Photoshop では矢印でも文字でも綺麗に境界線をつけるレ

→もっと見る