ぶら下げインデントするサンプル

(htmlSample)
<ul>
<li>※aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</li>
<li>※bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</li>
<li>※ccccccccccccccccccccccccccccccccccccccccccccccccccccccccccccc</li>
</ul>


(cssSample)
ul {
list-style: none;
width: 250px;
font-size: 0.8em;
line-height: 1.3;
}

li {
margin-bottom: 5px;
padding-left: 1em; /*1em（1文字）分、右に動かす*/
text-indent: -1em; /*最初の行だけ1em（1文字）分、左に動かす*/
color: #666666;
}

伸縮する背景の実現方法

（htmlコーディング）
<div class="entry3">
<div class="body">
テキスト<br />
テキスト<br />
テキスト
</div>
<div class="bottom">&nbsp;</div>
</div>

（cssサンプル）
.entry3 {
padding-top:4px;/* ←top.jpgの高さ*/
background:url(images/top.jpg) no-repeat left top;
}
.entry3 .body {
padding:6px 10px 6px 10px;
background:url(images/body.jpg) repeat-y left top;
}
.entry3 .bottom {
height:4px;/* ←bottom.jpgの高さ*/
background:url(images/bottom.jpg) no-repeat left bottom;
font-size:1px;/* ←↓ ブラウザで文字サイズ拡大した際に崩れないように。*/
line-height:1px;
}

entry3クラスで左右のpaddingを設定したり、
bodyクラスで左右のmarginを設定したりすると、
崩れてしまいます。

Cuchina

1年以上ぶりの更新です。。
この1年、、色々ありましたが、
webショップをopenしました。

Cuchina

メンズ＆レディースのアクセサリーショップです。
人気のコットンパールやターコイズブレスなどなど
素敵なアイテムを沢山そろえてお待ちしています♪

天然酵母のスコーン

今日は、天然酵母でスコーンを焼きました。

大好きな「アリエッタ」のスコーンを目指して

ヌーヴェルエール

本日は、前の職場のお友達(先輩)と丸の内ランチ

新丸ビルにある“ヌーヴェル・エール”

とっても美味しく頂きました

心地よいさりげないサービスで、本当に素敵なお店でした

また行きたいと思います。