その他のプロパティコミュ

要素の浮動化・回り込みを指定する

float

すべての要素

<img alt="フレンチクルーラー" src="/oekaki/39619.png" title="フレンチクルーラー" style="float:left; margin:10px;" />

<p>日本のミスタードーナツは、　（略）　クリーンなイメージとは言えない状況にある。</p>

日本のミスタードーナツは、株式会社ダスキン　ミスタードーナツ事業本部（大阪府吹田市芳野町）が事業展開をしている。1970年（昭和45 年）1 月27日、日本での事業を開始し、翌1971年（昭和46 年）に1号店である「箕面ショップ」（大阪府箕面市）をオープンさせた。日本で一番古くからあるファーストフード店である。ミスタードーナツではその名のとおり、ドーナツを主力商品としているが、日本の店舗では飲茶メニューなどのドーナツ以外のメニューも展開している。他のファーストフードとは違い、おやつ感覚のメニューが多いためか女性客が中心のため、男性一人が店内で飲食するのはなかなか勇気がいるのである。最近はモスバーガーとコラボレーションし、「モスド」ブランドを展開している。清掃業務をメインとするダスキンが運営しているにも関わらず、賞味期限切れや異物混入など衛生面での品質管理がずさんで、クリーンなイメージとは言えない状況にある。

回り込みを解除する

clear

ブロックレベル要素

<img alt="ﾕｰﾗｼｱｶﾜｳｿｽ(´・ω・) " src="/oekaki/28211.png" title="ﾕｰﾗｼｱｶﾜｳｿｽ(´・ω・)" style="float:left; margin:10px;" />

<p>左の絵はユーラシアカワウソです。はくはく氏作。</p>

<p style="clear:both;">ｶﾜｳｿｽ(´・ω・)　　　（＝「かわうそかわいい！」って思った時の感情を言葉にしたもの）</p>

左の絵はユーラシアカワウソです。はくはく氏作。

ｶﾜｳｿｽ(´・ω・)　　　（＝「かわうそかわいい！」って思った時の感情を言葉にしたもの）

ボックスからはみ出た部分の表示方法を指定する

overflow

ブロックレベル要素

<div style="width:150px; height:80px; overflow:visible; border:1px solid black; float:left; margin:10px;">
<p>overflow:visibleを指定しています。一般的なブラウザの場合、この内容は枠線からはみ出して表示されます。</p>
</div>

<div style="width:150px; height:80px; overflow:hidden; border:1px solid black; float:left; margin:10px;">
<p>overflow:hiddenを指定しています。通常、はみ出た内容は隠れて表示されません。</p>
</div>

<div style="width:150px; height:80px; overflow:scroll; border:1px solid black; float:left; margin:10px;">
<p>overflow:scrollを指定しています。通常、上下左右のスクロールバーが表示されます。</p>
</div>

<div style="width:150px; height:80px; overflow:auto; border:1px solid black; margin:10px;">
<p>overflow:visibleを指定しています。一般的なブラウザの場合、この内容に対しては自動的にスクロールバーが表示されます。</p>
</div>

表示形式（インライン・ブロック・リスト・非表示）を指定する

display

すべての要素

<p style="font-size:13px; text-align:center;">リンク領域を広くする</p>

<a href="http://www.yahoo.co.jp/" title="Yahoo! JAPAN" target="_blank" rel="nofollow" style="display:block; width:200px; height:40px; background-color:#B0C4DE; margin:10px auto; border:2px solid #4682B4; text-align:center;">Yahoo! JAPAN</a>

<a href="http://www.google.co.jp/" title="Google" target="_blank" rel="nofollow" style="display:block; width:200px; height:40px; background-color:#B0C4DE; margin:10px auto; border:2px solid #4682B4; text-align:center;">Google</a>

<a href="http://jp.msn.com/" title="MSN Japan" target="_blank" rel="nofollow" style="display:block; width:200px; height:40px; background-color:#B0C4DE; margin:10px auto; border:2px solid #4682B4; text-align:center;">MSN JAPAN</a>

リンク領域を広くする

Yahoo! JAPAN

Google

MSN JAPAN

リストマーカーを指定する

list-style

ul・ol・li要素及びdisplay:list-itemが指定された要素

<ul>
<li>階層１</li>
<ul>
<li>階層２</li>
<ul>
<li>階層３</li>
</ul>
</ul>
</ul>

<ul><li style="list-style:none; list-style-image:none; background-color:#F5F5F5;">none</li></ul>

<ul><li style="list-style:disc; list-style-image:none; background-color:#F5F5F5;">disc</li></ul>

<ul><li style="list-style:circle; list-style-image:none; background-color:#F5F5F5;">circle</li></ul>

<ul><li style="list-style:square; list-style-image:none; background-color:#F5F5F5;">square</li></ul>

<ul><li style="list-style:decimal; list-style-image:none; background-color:#F5F5F5;">decimal</li></ul>

<ul><li style="list-style:lower-roman; list-style-image:none; background-color:#F5F5F5;">lower-roman</li></ul>

<ul><li style="list-style:upper-roman; list-style-image:none; background-color:#F5F5F5;">upper-roman</li></ul>

<ul><li style="list-style:lower-alpha; list-style-image:none; background-color:#F5F5F5;">lower-alpha</li></ul>

<ul><li style="list-style:upper-alpha; list-style-image:none; background-color:#F5F5F5;">upper-alpha</li></ul>

<ul><li style="list-style:url('/oekaki/174344.png'); background-color:#F5F5F5;">/oekaki/174344.png</li></ul>

• 階層１
  • 階層２
    • 階層３

• none

• disc

• circle

• square

• decimal

• lower-roman

• upper-roman

• lower-alpha

• upper-alpha

• /oekaki/174344.png

リストマーカーの表示位置を指定する

list-style-position

ul・ol・li要素及びdisplay:list-itemが指定された要素

<ul><li style="list-style:disc; list-style-image:none; list-style-position:outside; background-color:#F5F5F5;">outside</li></ul>

<ul><li style="list-style:disc; list-style-image:none; list-style-position:inside; background-color:#F5F5F5;">inside</li></ul>

• outside

• inside

表のボーダーの表示方法を指定する

border-collapse

table要素

<table style="border-collapse:separate; border:4px solid black; width:300px; margin:0px auto; height:200px;">
<tbody>
<tr>
<td style="border:1px solid black;"></td>
<td style="border:1px solid black;"></td>
<td style="border:1px solid black;"></td>
</tr>
<tr>
<td style="border:1px solid black;"></td>
<td style="border:1px solid black;"></td>
<td style="border:1px solid black;"></td>
</tr>
<tr>
<td style="border:1px solid black;"></td>
<td style="border:1px solid black;"></td>
<td style="border:1px solid black;"></td>
</tr>
</tbody>
</table>

表の列幅を固定する

table-layout

table要素

<table style="table-layout: fixed; width: 600px; margin:0px auto;">
<caption>各国通貨の一覧</caption>
<tbody>
<tr>
<th>国名</th>
<th>地域</th>
<th>通貨</th>
</tr>
<tr>
<th>アメリカ</th>
<td>北アメリカ</td>
<td>USドル</td>
</tr>
<tr>
<th>日本</th>
<td>アジア</td>
<td>円</td>
</tr>
</tbody>
</table>