■ ヒントだよ！HTML & CSS ■

    topへ     前のページに戻る     ページ閉じる

■ ボーダーのスタイルを指定する

border-style:none;   ボーダテスト枠 

border-style:hidden;   ボーダテスト枠 

border-style:dotted;   ボーダテスト枠 

border-style:dashed;   ボーダテスト枠 

border-style:solid;   ボーダテスト枠 

border-style:double;   ボーダテスト枠 

border-style:groove;   ボーダテスト枠 

border-style:ridge;   ボーダテスト枠 

border-style:inset;   ボーダテスト枠 

border-style:outset;   ボーダテスト枠 

■ ボーダーの幅を指定する

boder-style:solid; border-width:thin;

boder-style:solid; border-width:medium;

boder-style:solid; border-width:thick;

boder-style:solid; border-width:10px;

■ マージンを指定する

■ パディングを指定する。

■ アウトラインのスタイルを指定する

outline-style:none;

outline-style:auto;

outline-style:dotted;

outline-style:dashed;

outline-style:double;

outline-style:groove;

outline-style:ridge;

outline-style:inset;

outline-style:outset;

■ アウトラインの幅を指定する

boder-style:solid; outline-width:thin;

boder-style:solid; outline-width:medium;

boder-style:solid; outline-width:thick;

boder-style:solid; outline-width:10px;

■ ボックスの表示型を指定する - displayの例

cssの記述

ul li {
display: inline-block;
width: 100px; height: 50px;
border: solid #32cd32 2px;
background-color: #98fb98;
}

htmlの記述

<ul>
<li>ブロッコリーのパイ</li>
<li>セロリ100%ジュース</li>
<li>白菜のミルフィーユ</li>
</ul>

以下表示例

• ブロッコリーのパイ
• セロリ100%ジュース
• 白菜のミルフィーユ

※今回のCSS指定とclassでのCSS指定では指定範囲が異なるようです。

    topへ     前のページに戻る     ページ閉じる