２月１日授業内容まとめ

http://d.hatena.ne.jp/web-0818/20160211/p1

1px=コンピュータで表示できる最小単位

・字体＝ビットマップ（デバイスフォント）・・・表示が速い　　機種：windws

ex,osaka,msゴシックなど

・書体＝PostScript,アウトラインデータ（ベクター）・・・イラストレーターと同じデータの

為、処理が字体より遅い。　　　　機種：MAC

*フォント指定をしないとline-heightが変わってくる

日本の伝統色

http://htmlcss.jp/color/japan.html

470色見本

http://fromkato.com/color/color.php?id=470

・Font-weight・・・昔、マルチプルマスターを使ってフォントの太さを変えていた。

＊欧文書体は100～900（＊書体による）の指定ができるが、日本語はboldしか使えない。

normal=400

bold=700相当

・擬似クラス「a : 擬似クラス」・・・＊入力のときにスペースを入れない

未訪問のリンク:link

訪問済みのリンク:visited

マウスカーソルが重なったとき:hover

リンクをクリックしたとき:active

＊リンクに疑似クラスを使用する際には、link → visited → hover → active 、といった順序で記述する必要があります。

①、②

display: block

本来「インラインレベル要素」である部分を「ブロックレベル要素」として扱うようにする設定
「display: block」が設定されていない場合は、マウスの反応できる領域は文字の領域のみ
幅は、自動的に親要素の幅まで広がる
高さは、「line-height」か「padding」で指定する
「li」に padding を指定しても「li a」に指定がなければ打ち消したことになるので領域が広がりません

リストの表現

http://d.hatena.ne.jp/web-0818/20160214/p1

縦ナビゲーション、マージンの相殺

http://d.hatena.ne.jp/web-0818/20160215/p1

f:id:paris1204:20160203084713g:plain

③の記入例

li: first-child{
border-top: 1px solid #aaa;}

④、⑤の記入例

ol{
list-style-position:inside;}/*リストマークの位置*/

①<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>リストの装飾</title>
<style>
/*reset */
html,body,h1,ol,li{
margin:0;
padding:0;
line-height:1.0;
font-mamily:"Hiragino Kaku Gothic ProN",
meiryo,
sans-serif;}

/*body */
body{font-size:16px;}

/*layout */
#container{
margin:50px auto;
width:400px;
}

h1{
margin-bottom:30px;
font-size:1.5em;}
ol{
list-style-position:inside;}/*リストマークの位置*/
li{
padding: 10px 20px;
border-bottom:1px solid #aaa;}
li: first-child{
border-top: 1px solid #aaa;}
a{text-decoration:none;}
a:link {color: #0000fe;}
a:visited {color: #880088; }
a:hover {color: #ff6600 ;text-decoration: underline; }
a:acttive {color: #ff000;}

</style>
</head>

<body>
<div id="container">
<h1>リストの装飾</h1>
<ol>
<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>
</ol>
</div></body>
</html>

②<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>リストの装飾</title>
<style>
/*reset */
html,body,h1,ol,li{
margin:0;
padding:0;
line-height:1.0;
font-mamily:"Hiragino Kaku Gothic ProN",
meiryo,
sans-serif;}

/*body */
body{font-size:16px;}

/*layout */
#container{
margin:50px auto;
width:400px;
}

/*element */
ul{
list-style-type:none;
width:400px;
margin:50px auto;}

li {line-height:40px;
font-size:24px;
font-weight:bold;
}

a:link {color:#0000fe;}
a:visited {color: turquoise; }
a:hover {color: skyblue text-decoration: underline; }
a:acttive {color: lawngreen;}

</style>
</head>

<body>
<div id="container">
<h1>リストの装飾</h1>
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>

</ul>
</div></body>
</html>

③

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>リストの装飾</title>
<style>
/*reset */
html,body,h1,ol,li{
margin:0;
padding:0;
line-height:1.0;
font-mamily:"Hiragino Kaku Gothic ProN",
meiryo,
sans-serif;}
a{text-decoration:none;}

/*body */
body{font-size:16px;}

/*layout */
#container{
margin:50px auto;
width:400px;
}

/*element */
ul{
list-style-type:none;
width:400px;
margin:50px auto;}

li {
font-size:24px;
font-weight:bold;
}
li a{
margin-bottom:5px;
padding-left:24px;
display:block;
line-height:60px;
background-color:#fcf;
color:white;}

a:visited {background-color: turquoise; }
a:hover {background-color: coral; }
a:active {background-color: lawngreen; }
</style>
</head>

<body>
<div id="container">
<h1>リストの装飾</h1>
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>

</ul>
</div></body>
</html>

④

⑤

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
/*reset*/
html,body,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
line-height:1.0;
margin:0;
padding:0;}

ul{list-style:none;}

a{text-decoration:none;}

/*body */
body{backround:#fff;
font-size:16px;}

/*.nav */
ul.nav{
width:100px;/*６文字（96ｐｘ＋ボーダーの４px）*/
margin:0 auto;
color:white;
}
li{height:70px;
text-align:center;}

li a{line-height:70px;
display:block;
font-weight:bold;
color:white;}

li a:hover{border:2px solid;
line-height:66px;
}

#new{background-color:#900;
}
#new a:hover{
border-color:#900;
background-color:white;
color:#900;}
#info{background-color:orange;
}
#info a:hover{
border-color:orange;
background-color:white;
color:orange;}
#item{background-color:#0F0;
}
#item a:hover{
border-color:#0F0;
background-color:white;
color:#0F0;}
#shop{background-color:olive;
}
#shop a:hover{
border-color:olive;
background-color:white;
color:olive;}

#company{background-color:#033;}
#company a:hover{
border-color:#033;
background-color:white;
color:#033;}

</style>
</head>

<body>

<ul class="nav">
<li id="new"><a href="#">新着情報</a></li>
<li id="info"><a href="#">お知らせ</a></li>
<li id="item"><a href="#">製品情報</a></li>
<li id="shop"><a href="#">店舗案内</a></li>
<li id="company"><a href="#">会社案内</a></li>
</ul>

</body>
</html>

⑥