コピペだけでつかえる業務一覧やアイテム一覧のデザインパターン集

弊社ではウェブサイトの受託案件も数多く対応させていただいております。
それらのほぼすべてのサイトが、いわゆるテンプレートにコンテンツを埋め込んでいくような簡易なものではなく、クライアントのニーズにあわせてゼロから制作しています。
そんななかでもやはりよくつかうパターンというのは存在しますので、それらのテンプレートを残しておくことで、よりスピーディーな納品を実現できるようにとの考えからこのようなものをまとめていますが、特に自分だけができるようなスキルでもないので、下記に公開しています。

ベーシックタイプ

デモはこちら

<div id="services">
	<div class="container">
		<h2>業務一覧<span>Service</span></h2>
		<p class="desc">いろはにほへとちりぬるを<br>わかよたれそつねならむうゐのおくやまけふこえて<br>あさきゆめみしゑひもせす色はにほへど散りぬるを<br>我が世たれぞ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず</p>
		<div class="row">
			<div class="column">
				<figure><img src="画像のURL" alt="画像の説明"></figure>
				<h3>メニュータイトル<span>Menu title</span></h3>
				<p>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす色はにほへど散りぬるを我が世たれぞ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず</p>
				<a href="">詳しくみる</a>
			</div>
			<div class="column">
				<figure><img src="画像のURL" alt="画像の説明"></figure>
				<h3>メニュータイトル<span>Menu title</span></h3>
				<p>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす色はにほへど散りぬるを我が世たれぞ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず</p>
				<a href="">詳しくみる</a>
			</div>
			<div class="column">
				<figure><img src="画像のURL" alt="画像の説明"></figure>
				<h3>メニュータイトル<span>Menu title</span></h3>
				<p>いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせす色はにほへど散りぬるを我が世たれぞ常ならむ有為の奥山今日越えて浅き夢見じ酔ひもせず</p>
				<a href="">詳しくみる</a>
			</div>
		</div>
	</div>
</div>
body {
	margin: 0;
}
#services {
	
}
#services .container {
	padding: 2em 0;
}
#services .container h2 {
	text-align: center;	
}
#services .container h2 span {
	display: block;
	font-size: .75em;
}
#services .container p.desc {
	margin: 1em 0 2em;
	font-size: 1.25em;
	line-height: 1.8;
	text-align: center;	
}		
#services .container .row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0 auto;
	width: 960px;
}
#services .container .row .column {
	width: 31%;
	margin: 0 1%;
}
#services .container .row .column figure {
	margin: 0;
}
#services .container .row .column figure img {
	width: 100%;
	height: auto;
}
#services .container .row .column h3 {
	margin: .5em 0;
}
#services .container .row .column h3 span {
	display: block;
	font-size: .75em;
}
#services .container .row .column p {
	margin: .5em 0;
	font-size: .875em;
	line-height: 1.8;
}
#services .container .row .column a {
	font-size: .875em;
	color: inherit;
	text-decoration: none;
	transition: .3s;
}
#services .container .row .column a:hover {
	opacity: .8;
}
お問い合わせ・ご相談

お見積りのご依頼やそのほかのお仕事のご相談などはお問い合わせフォームからお問い合わせください。

お問い合わせする
会社案内ダウンロード

弊社の会社案内をPDFでご用意しております。社内での検討時などにご利用ください。

ダウンロードする

お電話でのお問い合わせはこちら

※電話番号はおかけ間違いのないようご注意ください。
※セールス目的のお電話はお断りしております。