【コピペで使える】スマホ対応のCSSリストデザイン
たーさん格好良く見せようとすると意外と難しいCSSリストデザイン。今回は、「シンプル」「機能的」「オシャレ」の3条件を満たすCSSリストデザインに挑戦してみたいと思います。
ul liのタグを使ったデザインは、結構素っ気ない感じになってしまいがち・・・。
なんか格好がつかないから、背景色をつけてみようか、う～ん、枠線をつけてみようか、などとやっててもなんか気に入らない。
そんなこんなしているうちにリストデザインだけでだいぶ時間を使ってしまったなんてこと、一度は経験があるのではないでしょうか？
今回目指すリストデザイン
今回は以下のような仕様のリストデザインを目指したいと思います。
- ・リストのエリアをタップできる
- ・タップできる感を出すためにリストの右端に矢印を設置
- ・テキストは二段構成
html
<ul class="simple-list">
<li>
<a href="">タイトル1<br /><span>ディスクリプション </span></a>
</li>
<li>
<a href="">タイトル2<br /><span>ディスクリプション</span></a>
</li>
</ul>
css
@charset "UTF-8";
.simple-list {
margin-top: 10px;
margin-bottom: 30px;
list-style:none;
font-size:16px;
margin:0;
padding:0;
}
.simple-list li {
padding: 10px 0 10px 0;
border-bottom: 1px solid #d8d8d8;
position: relative;
margin:0;
}
.simple-list li:hover {
opacity:0.8;
}
.simple-list li a {
display:block;
width:100%;
text-decoration:none;
color:#000;
}
.simple-list li span {
font-size:12px;
color:#666;
}
.simple-list li::after {
content: "〉";
position: absolute;
color: #d8d8d8;
right: 5px;
top: 23px;
}
さいごに
コーディングをはじめる際の参考にして頂けると幸いです。
投稿者プロフィール
- 代表者
-
東海大学工学部を卒業後、東芝情報システム株式会社（旧グループ会社含む）に入社。半導体（SRAM）の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。
その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。
開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。
現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。
見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。
