C A R
 
 

目 次

TOYOTA


CROWN

18.2km/L

MARK X

10km/L

プリウス

30.4km/L


SUZUKI


ワゴンR

33km/L

ハスラー

32km/L

スイフト

26.4km/L


HONDA


N-BOX

25.6km/L

バモス

16.8km/L

FIT

26km/L

!DOCTYPE html>

html lang="ja">

head>

 <meta charset="utf-8">
 <title>CSS Practice</title>

!--[if lt IE 9]>

script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

![endif]-->

style> body {

 background-color: #ffffe0;
 margin: 25px;
 color: #333;

} h2.a {

 margin: 2.5em 1em 1em 0em;
 padding: 5px 0px 0px 0.5em;
 border-top: 0px;
 border-right: 0px;
 border-left: #006400 0.5em solid;
 border-bottom: #006400 2px solid;
 font-weight: bold;

} h3.a {

 margin: 1.5em 1em 1em 2em;
 padding: 5px 0px 0px 0.5em;
 border-top: 0px;
 border-right: 0px;
 border-bottom: #e6e6fa 1px solid;
 border-left: #e6e6fa 0.5em solid;
 font-weight: bold;

} h3.b {

 margin: 1.5em 1em 1em 2em;
 padding: 5px 0px 0px 0.5em;
 border-top: 0px;
 border-right: 0px;
 border-bottom: #00ced1 1px solid;
 border-left: #00ced1 0.5em solid;
 font-weight: bold;

} .sample-solid {

   border: 1px solid gray;
   width: 80px;
   height: 40px;
   margin: 0em 0em 0em 1em;

} .sample-dashed {

   border: 1px dashed gray;
   width: 100px;
   height: 40px;
   margin: 0em 0em 0em 1em;

} .sample-dotted {

   border: 1px dotted gray;
   width: 80px;
   height: 40px;
   margin: 0em 0em 0em 1em;

} .sample-10 {

   border: 10px solid #993333;
   width: 80px;
   height: 40px;
   margin: 0em 0em 0em 1em;

}

/style>

/head>

body>

h1 style="margin: 50px 20px 40px; text-align: center;">スタイルシート</h1>

h1 style="text-align: center;">ボックスモデル</h1>

h1 style="text-align: center;">マージン・パディング・ボーダー</h1>

h2 class="a">index</h2>

<ul>
 <li><a href="#s0">lenght</a></li>
 <li><a href="#step05">#0.5テーマ</a></li>
 <li><a href="#step1">#1テーマ</a></li>
</ul>

h2 class="a"><a id="step0">lenght</a></h2>

ul>

<li>相対単位では em、絶対単位では px
<li>em:要素のフォントサイズ - 相対的
<li>px:ピクセル(1px=1/96in) - 絶対的

/ul>

h2 class="a"><a id="step1">マージン</a></h2>

ul>

<li>外側の余白指定

/ul>

p>例は画像に対しての外側の余白指定

/p>

h5>margin:1em</h5>

div style="border:1px solid #999999; width:300px;">

 <div>あああああああああああああああ</div>
 <img src="./back.gif" alt="" style="margin:1em">
 <div>あああああああああああああああ</div>

/div>

h5>margin:0em</h5>

div style="border:1px solid #999999; width:300px;">

 <div>あああああああああああああああ</div>
 <img src="./back.gif" alt="" style="margin:0em">
 <div>あああああああああああああああ</div>

/div>

h2 class="a"><a id="step2">パディング</a></h2>

ul>

<li>内側の余白指定

/ul>

p>例は外枠からの余白指定

/p>

h5>padding:3px</h5>

div style="border:1px solid #666666; padding:3px; width:100px">

  ああああああああああああああああああああああああああああああああ

/div>

h5>padding:20px</h5>

div style="border:1px solid #666666; padding:20px; width:100px">

  ああああああああああああああああああああああああああああああああ

/div>

h2 class="a"><a id="step3">ボーダー</a></h2>

ul>

<li>ボーダーラインの太さ、線種、色をまとめて指定

/ul>

p>サンプル

/p>

h5>1px solid</h5>

div class="sample-solid"></div>

h5>1px dashed</h5>

div class="sample-dashed"></div>

h5>1px dotted</h5>

div class="sample-dotted"></div>

h5>10px solid</h5>

div class="sample-10"></div>

h3 class="a">ラベンダー</h3>

h3 class="b">ダークターコイズ</h3>

hr />

/body>

/html>


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2017-09-26 (火) 14:27:45 (1045d)