10日目　CSS　リスト装飾　と　PhotoShop

●Dreamweverでの外部stylesheetの作り方

ファイルの新規からページタイプcssを作成

htmlのソースコード

<head>の中に

を打ち込めば外部スタイルシートをリンクさせられる

成功していればhtmlタグの中にstylesheetがでてくる

f:id:chawannmusi:20160203160544p:plain

htmlの中のstylesheetにCSSを打ち込んでいけばブラウザでプレビューが楽にできる

※stylesheetタグからはプレビューができない

●リスト装飾　演習

f:id:chawannmusi:20160204202013p:plain

----------------------------------------------------------------------

■html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ナビゲーション</title>
<link rel="stylesheet" href="CSS/style.css">
</head>

<body id="top">
<ul>
<li id="b1"><a href="#box1">box1へ</a></li>　/*box1へ飛ぶ*/
<li id="b2"><a href="#box2">box2へ</a></li>
<li id="b3"><a href="#box3">box3へ</a></li>
<li id="b4"><a href="#box4">box4へ</a></li>
</ul>
<div id="box1"><p><a href="#top">box1</a></p></div>　/*bodyにidをつけてbody（一番上）へ飛ぶ*/

----------------------------------------------------------------------------------

■CSS

@charset "utf-8";
/*reset*/
html, body, div, ul, li {
margin: 0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}

ul { list-style: none; }
a { text-decoration: none; }

/*ページのスタイル*/
ul {
padding: 20px;
background-color: #CCC;
width: 200px;
}

li {
font-size: 24px;
margin-bottom:50px;
/*親のulにwidthが指定されているから100％の横幅になる*/
}

li a {
display: block;
background:#FFFF00;

/*親のliにwidthが指定されているからliに横幅指定しなくても100％の横幅になる*/
}

div {
margin-top: 100px;
width: 200px;
height: 200px;
display: block;}
p {
height: 200px; /*line-heightと揃えることで上下中央*/
line-height:200px; /*heightと揃えることで上下中央・文字の高さを指定しないとaの範囲が変わらない*/
font-size: 30px;
text-align: center;
}

div p a{
display: block;
color: #FFF;}

div p a:hover {
background: #000;
color: #FF0;
border:4px solid #FF0;
}
#box1 { background:#3FF; }
#box2 { background:#09F; }
#box3 { background: #309; }
#box4 { background: #003;
margin-bottom: 1000px;} /*#box4のボタンへ飛んだ時に画面の一番上にくるように下を空ける*/

-------------------------------------------------------------------------------------------

・<a></a>（anchor）はマウスの反応を受け取ることを示す。

<li>という箱の中に<a>で囲まれている文字があって

<a＞は文字に依存して幅高さが変わる為、何も設定をしないと文字の上だけマウスが反応する。

それを<li>の箱いっぱいにマウスの受け取り皿を設定するために

「display: block;」

li {
font-size: 24px;
margin-bottom:50px;
/*親のulにwidthが指定されているから100％の横幅になる*/
}

li a {
display: block;
background:#FFFF00;

/*親のliにwidthが指定されているからliに横幅指定しなくても100％の横幅になる*/
}

●Photoshop

f:id:chawannmusi:20160205155410j:plain