12月
3

点線を使った下線を引いてノートのようにデザインするCSS

By admin  //  デザイン  //  No Comments
本来、リファレンスよりこういったものの方が読んでいて楽しいと思うし書くほうも書き甲斐がある。
さて、CSSだけでもきれいなデザインはできます。
今回は下線を点線にしてノートのような感じにデザインするためのCSSを紹介します。
全く難しいものではなく、CSSのborderというプロパティを使うだけの簡単な方法です。

点線を使った下線を引いてノートのようにデザインする

使うCSSはborder-bottom。
下線のスタイルをdottedやdashedにするだけです。
dottedは点線で表現され、dashedは少し横長の点線で表現します。
※詳しくは枠線のスタイル、太さ、色をまとめて指定する”border”プロパティ
まずはスタイルシートはこのように指定します。
/*スタイル1*/
div.note1
{
border-bottom:1px dotted #666666;
}
/*スタイル2*/
div.note2
{
border-bottom:1px dashed #666666;
}
スタイル1
<div class="note1">コンテンツ1</div>
<div class="note1">コンテンツ2</div>
<div class="note1">コンテンツ3</div>
<div class="note1">コンテンツ4</div>
<div class="note1">コンテンツ5</div>

スタイル2
<div class="note2">コンテンツ1</div>
<div class="note2">コンテンツ2</div>
<div class="note2">コンテンツ3</div>
<div class="note2">コンテンツ4</div>
<div class="note2">コンテンツ5</div>
これらを実際にブラウザで現すとこのようになります。
スタイル1
コンテンツ1
コンテンツ2
コンテンツ3
コンテンツ4
コンテンツ5


スタイル2
コンテンツ1
コンテンツ2
コンテンツ3
コンテンツ4
コンテンツ5
簡単ですが、こういった細かい部分がデザインを左右します。
シンプルだけれど使えるCSSデザインです。
例えばこんな感じでメニューに使ってみるという手もあります。
メニュー1
メニュー2
メニュー3
メニュー4
メニュー5
おいしそうな食事の写真

Leave a comment

↓サーバーを借りるなら↓
サーバーについてはこちら


↓ドメインをとるなら↓
ドメインについてはこちら

↓ネットショップを始めるなら↓

人気の記事