読者です 読者をやめる 読者になる 読者になる

2月1日授業内容まとめ

1px=コンピュータで表示できる最小単位
 
・字体=ビットマップ(デバイスフォント)・・・表示が速い  機種:windws
ex,osaka,msゴシックなど
・書体=PostScript,アウトラインデータ(ベクター)・・・イラストレーターと同じデータの
為、処理が字体より遅い。    機種:MAC
 
*フォント指定をしないとline-heightが変わってくる
 
日本の伝統色
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」に指定がなければ打ち消したことになるので領域が広がりません
リストの表現
 
縦ナビゲーション、マージンの相殺
 
 

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:64px;
margin:50px auto;}
.nav li{margin-bottom:18px;
line-height:20px;}
.nav li a:link{color:#2069c3;}
.nav li a:hover{color:#f90;
text-decoration:underline;}
</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>
 
 
 <!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;/*6文字(96px+ボーダーの4px)*/
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>
 
<!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;}


a{text-decoration:none;}

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

/*.nav */
ul.nav{
width:180px;
margin:50px auto;
border-top:dotted 1px #73A1FF;}
ul.nav li{height:32px;
margin:8px;}
ul.nav li a {line-height:32px;
display:block;
border-bottom:dotted 1px #73a1ff;

font-weight:bold;
}


li a:hover{color:blue;
}






</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>