コピペですぐ使えるHTMLとCSSデザイン集[枠編](レスポンシブ対応)

こんにちは。ひまみちです。

今回はコピペですぐに使えるCSSのデザインをいくつか作りたいと思います。

見本は画像であくまでもイメージです。
お使いのブラウザウやほかのスタイルの干渉などで必ずしもこのような形になるとは限らないのでご注意ください。
また、フォントタグなどいらないものはご自身で判断して削除しちゃってください。

シンプル(枠＋文字)

HTML

<div class="box">
<p>吾輩は猫である。名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。</p>
</div>

<p>吾輩は猫である。名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。</p>

</div>

CSS

.box{
background-color: #fafafa;
border: 1px solid #ccc;
border-radius: 5px;
padding: 1% 3%;
}
.box p{
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
line-height: 2em;
color: #333;
}

.box{

background-color: #fafafa;

border: 1px solid #ccc;

border-radius: 5px;

padding: 1% 3%;

}

.box p{

font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;

line-height: 2em;

color: #333;

}

タイトル付枠1

HTML

<section class="box">
<h1>吾輩は猫である</h1>
<p>吾輩は猫である。名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。</p>
</section>

<h1>吾輩は猫である</h1>

</section>

CSS

.box{
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
background-color: #fafafa;
border: 1px solid #ccc;
border-radius: 5px;
padding: 1% 3%;
}
.box h1{
font-size: 25px;
font-weight: normal;
margin:3% 0 0;
color: #333;
}
.box p{
line-height: 2em;
color: #333;
}

.box{

font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;

background-color: #fafafa;

border: 1px solid #ccc;

border-radius: 5px;

padding: 1% 3%;

}

.box h1{

font-size: 25px;

font-weight: normal;

margin:3% 0 0;

color: #333;

}

.box p{

line-height: 2em;

color: #333;

}

タイトル付枠2

HTML

<section class="box">
<h1>吾輩は猫である</h1>
<p>吾輩は猫である。名前はまだ無い。どこで生れたか頓と見當がつかぬ。何でも薄暗いじめじめした所でニヤーニヤー泣いて居た事丈は記憶して居る。吾輩はこゝで始めて人間といふものを見た。然もあとで聞くとそれは書生といふ人間中で一番獰悪な種族であつたさうだ。此書生といふのは時々我々を捕へて煮て食ふといふ話である。然し其當時は何といふ考もなかつたから別段恐しいとも思はなかつた。但彼の掌に載せられてスーと持ち上げられた時何だかフハフハした感じが有つた許りである。</p>
</section>

<h1>吾輩は猫である</h1>

</section>

CSS

.box{
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;  background-color: #fafafa;
border: 1px solid #ccc;
border-radius: 5px;
padding: 0 0 1%;
}
.box h1{
margin: 0;
padding: 2% 3% 1.5%;
background-color: #eee;
border-bottom: 1px dashed #ccc;
font-size: 1.1em;
font-weight: normal;
color: #333;
}
.box p{
padding: 0 3%;
line-height: 2em;
color: #333;
}

.box{

font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; background-color: #fafafa;

border: 1px solid #ccc;

border-radius: 5px;

padding: 0 0 1%;

}

.box h1{

margin: 0;

padding: 2% 3% 1.5%;

background-color: #eee;

border-bottom: 1px dashed #ccc;

font-size: 1.1em;

font-weight: normal;

color: #333;

}

.box p{

padding: 0 3%;

line-height: 2em;

color: #333;

}

枠付きリスト(li)

HTML

<div class="box">
<ul>
<li>吾輩は猫である。</li>
<li>名前はまだ無い。</li>
<li>どこで生れたか頓と見當がつかぬ。</li>
</ul>
</div>

<ul>

<li>吾輩は猫である。</li>

<li>名前はまだ無い。</li>

<li>どこで生れたか頓と見當がつかぬ。</li>

</ul>

</div>

CSS

.box{
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;  background-color: #fafafa;
border: 1px solid #ccc;
border-radius: 5px;
padding:2.5% 0 2%;
}
.box ul{
margin: 0;
line-height: 2.3em;
}

.box{

font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; background-color: #fafafa;

border: 1px solid #ccc;

border-radius: 5px;

padding:2.5% 0 2%;

}

.box ul{

margin: 0;

line-height: 2.3em;

}

定義リスト(dl)

HTML

<div class="box">
<dl>
<dt>夏目漱石</dt>
<dd>坊つちやん</dd>
<dd>吾輩は猫である</dd>
<dt>芥川龍之介</dt>
<dd>蜘蛛の糸</dd>
<dt>太宰治</dt>
<dd>人間失格</dd>
</dl>
</div>

<dl>

<dd>坊つちやん</dd>

<dd>吾輩は猫である</dd>

<dt>芥川龍之介</dt>

</dl>

</div>

CSS

.box{
font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;  background-color: #fafafa;
border: 1px solid #ccc;
border-radius: 5px;
padding:2.5% 0 2%;
}
.box dl{
margin: 0 0 0 3%;
line-height: 2em;
color: #333;
}
.box dl dt{
font-weight: bold;
}
.box dl dd{
margin: 0;
padding: 0 0 0 3%;
list-style: inside;
}

.box{

font-family: 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif; background-color: #fafafa;

border: 1px solid #ccc;

border-radius: 5px;

padding:2.5% 0 2%;

}

.box dl{

margin: 0 0 0 3%;

line-height: 2em;

color: #333;

}

.box dl dt{

font-weight: bold;

}

.box dl dd{

margin: 0;

padding: 0 0 0 3%;

list-style: inside;

}

シンプル(枠＋文字)

HTML

CSS

タイトル付枠1

HTML

CSS

タイトル付枠2

HTML

CSS

枠付きリスト(li)

HTML

CSS

定義リスト(dl)

HTML

CSS

関連