２月2日授業内容
画像の挿入
リストの表現
＊上下のマージンは相殺されるので注意
＊displayの欄にinlineの設定する場合は文字の幅での表示のみ。（もともとインライン）
なので幅、高さを指定するときはblockにする。
押すと参照できる。
@charset "utf-8";
/*reset */
html,body,div,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;
}
ul{list-style:none;}/*マーカーを消す*/
a{text-decoration:none;}/*下線を消す*/
/*ページのスタイル*/
ul{background-color:olive;/*liはulの値を、li aはliの値を引き継ぐ*/
width:200px;}
li{font-size:26px;
margin-bottom:50px;
background-color:#fff;
}
li a{display:block;
}
li a:hover{background-color:black;
color:white;}
div{margin-top:100px;
width:200px;
height:200px;/*line-heightと揃えることで上下中央*/
line-height:200px;/*heightと揃えることで上下中央*/
text-align:center;
font-size:3.0em;
/*color:white;(divタグでリンク（＃topへの）を作る前の段階では入力する)*/}
div p a{display:block;
color:white;}/*divタグの中のpタグの中のaの指定という意味
リンクになったのでcolorを設定しないといけない*/
div p a:hover{background-color:white;
border:4px solid #c0f;
}/*aの中でboderを指定した場合内側にかかれる為、幅、高さを調整する必要はない*/
#box1{background-color:red;
}
#box1 p a:hover{color:red;}
#box2{background-color:gold;
}
#box2 p a:hover{color:gold;}
#box3{background-color:pink;
}
#box3 p a:hover{color:pink;}
#box4{background-color:olive;
margin-bottom:50px;}
#box4 p a:hover{color:olive;}
/*reset */
html,body,div,ul,li{font-family:"Hiragino Kaku Gothic proN",
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;
}
ul{list-style:none;}/*マーカーを消す*/
a{text-decoration:none;}/*下線を消す*/
/*ページのスタイル*/
ul{background-color:olive;/*liはulの値を、li aはliの値を引き継ぐ*/
width:200px;}
li{font-size:26px;
margin-bottom:50px;
background-color:#fff;
}
li a{display:block;
}
li a:hover{background-color:black;
color:white;}
div{margin-top:100px;
width:200px;
height:200px;/*line-heightと揃えることで上下中央*/
line-height:200px;/*heightと揃えることで上下中央*/
text-align:center;
font-size:3.0em;
/*color:white;(divタグでリンク（＃topへの）を作る前の段階では入力する)*/}
div p a{display:block;
color:white;}/*divタグの中のpタグの中のaの指定という意味
リンクになったのでcolorを設定しないといけない*/
div p a:hover{background-color:white;
border:4px solid #c0f;
}/*aの中でboderを指定した場合内側にかかれる為、幅、高さを調整する必要はない*/
#box1{background-color:red;
}
#box1 p a:hover{color:red;}
#box2{background-color:gold;
}
#box2 p a:hover{color:gold;}
#box3{background-color:pink;
}
#box3 p a:hover{color:pink;}
#box4{background-color:olive;
margin-bottom:50px;}
#box4 p a:hover{color:olive;}
<!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><a href="#box1">box1へ</a></li>
<li><a href="#box2">box2へ</a></li>
<li><a href="#box3">box3へ</a></li>
<li><a href="#box4">box4へ</a></li>
</ul>
<div id="box1"><p><a href="#top">box1</a></p></div>
<div id="box2"><p><a href="#top">box2</a></P></div>
<div id="box3"><p><a href="#top">box3</a></p></div>
<div id="box4"><p><a href="#top">box4</a></p></div>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ナビゲーション</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body id="top">
<ul>
<li><a href="#box1">box1へ</a></li>
<li><a href="#box2">box2へ</a></li>
<li><a href="#box3">box3へ</a></li>
<li><a href="#box4">box4へ</a></li>
</ul>
<div id="box1"><p><a href="#top">box1</a></p></div>
<div id="box2"><p><a href="#top">box2</a></P></div>
<div id="box3"><p><a href="#top">box3</a></p></div>
<div id="box4"><p><a href="#top">box4</a></p></div>
</body>
</html>
・リセットCSSと書体指定
*予習する
テキストp126
・（練習１の鷲）
細かく選択範囲を指定するときは、自動選択ツールで鷲を選ぶ。
境界線を調整（中心上部）→値を設定(*不要なカラーの除去にチェックを入れる)→鷲の周りをなぞる→”境界線を調整”をokを
押して閉じる。対象のライナーを選択した状態で新規ライナーを押す。新規ライナーで
背景色を変える（ctre + backspace or alt + backspace）
・選択範囲の解除はctrl +D
・コピースタンプツール
コピースタンプツール→直径の指定（編集のした）→対象の中心でaltを押しながらクリック。
空いているところでドラッグしていくとスタンプできる。
・ぼかし（練習１のtable）
新規レイヤーを開く→
フィルター→ぼかし→ぼかし（ガウス）を選択しプレビューしながら下の
ピクセルを調整し、ぼかしを調整する。
ぼやけているところを消しゴムツールで消してパスタのみ強調
させる。
・グラデーションツール（消しゴムの下）を使ってボタン作成（＊現実世界で多方面から見たときに不自然なボタンは作らないこと））
①グラデーションツール→編集の下のグラデーションインジケータで色を調整する。
横書きツールでボタン１と入力し、ドラッグした状態でフォント、フォントサイズなどを調整する。（文字は中央に配置する）
調整する。
③新規レイヤーをあと３つ作成しボタン１～４までを作る（目の形のボタンを押したままだとレイヤーの表示が重なる）
