<h2>横並びのブロックレベル要素の配置の調整系ー
<a href="m_css.html#no2">HTML+CSS
</a>ー
</h2>
<h3>li のサンプル
</h3>
<div class="demo2sample">
<ul class="demo2">
<li><img src="../lobo_img/m_003.png" alt="サンプル画像" height="100" width="150"></li>
<li><img src="../lobo_img/m_004.png" alt="サンプル画像" height="100" width="150"></li>
<li><img src="../lobo_img/m_005.png" alt="サンプル画像" height="100" width="150"></li>
</ul>
</div>
<p>.demo2sample は横幅470pxで納まっていると分かるよう入れているソースなのでなくて大丈夫です。
</p>
<h3>div のサンプル
</h3>
<div class="demo2-2sample">
<div class="demo2-2">
<div class="column">
<h4>サブタイトルみたいな？
</h4>
<p>その内容みたいな？感じのテキスト
</p>
</div>
<div class="column">
<h4>サブタイトルみたいな？
</h4>
<p>その内容みたいな？感じのテキストテキストテキストテキストテキスト
</p>
</div>
<div class="column">
<h4>サブタイトルみたいな？
</h4>
<p>その内容みたいな？感じのテキストテキストテキストテキストテキスト
</p>
</div>
</div>
</div>
<p>.demo2-2sample は横幅560pxで納まっていると分かるよう入れているソースなのでなくて大丈夫です。
</p>
</div>
CSS
/*---横並びのブロックレベル要素の配置の調整系---*/
.demo2sample{
width:470px;
border:2px solid #F33;
}/* ここまでは参考用のソース */
.demo2{width:480px; margin:0 -10px 0 0; overflow:hidden;_zoom:1; }
.demo2 li{float:left; margin-right:10px; }
.demo2-2sample {
width:560px;
border:2px solid #F33;
}/* ここまでは参考用のソース */
.demo2-2{
width: 570px;
margin: 0 -10px 0 0;
_zoom: 1;
overflow: hidden;
}
.demo2-2 .column{
width: 168px;
min-height:110px;
_height:110px;
padding: 0 5px 5px;
margin-right: 10px;
float:left;
border:1px solid #999;
}
.demo2-2 .column h4 {
background: #666;
padding:5px;
border-bottom:1px solid #999;
color:#FFF;
margin: 0 -5px 5px;
}
リストの最初だけborderを消す
XHTML
<div class="section" id="demo3">
<h2>リストの最初だけborderを消すー<a href="m_css.html#no3">HTML+CSS</a>ー</h2>
<ul class="demo3">
<li>リストメニュー 1</li>
<li>リストメニュー 2</li>
<li>リストメニュー 3</li>
<li>リストメニュー 4</li>
<li>リストメニュー 5</li>
</ul>
</div>
CSS
/* ---リストの最初だけborderを消す--- */
.demo3 {
_zoom:1;
overflow:hidden;
}
.demo3 li {
margin-top:-1px;
padding:5px;
border-top:1px dotted #999;
}
ページ分割系のナビゲーション
XHTML
<h2>ページ分割系のナビゲーションー
<a href="m_css.html#no4">HTML+CSS
</a>ー
</h2>
<ul class="demo4">
<li><strong>1
</strong></li>
<li><a href="#">2
</a></li>
<li><a href="#">3
</a></li>
<li><a href="#">4
</a></li>
<li><a href="#">5
</a></li>
<li><a href="#">6
</a></li>
<li><a href="#">7
</a></li>
<li><a href="#">8
</a></li>
<li><a href="#">9
</a></li>
<li><a href="#">10
</a></li>
</ul>
</div>
CSS
/* ---ページ分割系のナビゲーション--- */
.demo4 {
text-align:center;
}
.demo4 li {
display:inline;
}
.demo4 li strong {
display:-moz-inline-box;
display:inline-block;
padding:2px 7px 4px;
background:#EEE;
border:1px #CCC solid;
}
.demo4 li a {
display:-moz-inline-box;
display:inline-block;
padding:2px 7px 4px;
border:1px #CCC solid;
}
.demo4 li a:hover {
border:1px solid #2D88B3;
background:#2D88B3;
color:#FFF;
}
注意事項系に使える
XHTML
<div class="section" id="demo5">
<h2>注意事項系に使えるー<a href="m_css.html#no5">HTML+CSS</a>ー</h2>
<p class="demo5">※注意事項系に使えるようなサンプル<br>
注意事項系に使えるようなサンプル</p>
</div>
CSS
/* ---注意事項系に使える--- */
.demo5 {
margin-left:1em;
text-indent:-1em;
}
リンクが途中で折り返しされるの防ぐ
XHTML
<div class="section" id="demo6">
<h2>リンクが途中で折り返しされるの防ぐー<a href="m_css.html#no6">HTML+CSS</a>ー</h2>
<ul class="demo6">
<li><a href="#">サンプル</a></li>
<li><a href="#">サンプルサンプル</a></li>
<li><a href="#">サンプルサンプルサンプルサンプルサンプル</a></li>
<li><a href="#">サンプルサンプル</a></li>
<li><a href="#">サンプルサンプルサンプルサンプルサンプルサンプル</a></li>
<li><a href="#">サンプルサンプルサンプルサンプル</a></li>
</ul>
</div>
CSS
/* ---リンクが途中で折り返しされるの防ぐ--- */
.demo6{
width:350px;
border:2px solid #CCC;
padding:20px;
overflow:hidden;
_zoom:1;
}
.demo6 li {
list-style-type:none;
float:left;
margin:3px 10px 3px 0;
}
.demo6 a{white-space:nowrap; }
IEでテキストエリアの縦スクロールバーを非表示
XHTML
<div class="section" id="demo7">
<h2>IEでテキストエリアの縦スクロールバーを非表示ー<a href="m_css.html#no7">HTML+CSS</a>ー</h2>
<h3>テキスト入力エリア</h3>
<textarea class="demo7" rows="10" cols="50"></textarea>
</div>
CSS
/* ---IEでテキストエリアの縦スクロールバーを非表示--- */
.demo7 {overflow:auto; }