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

2月2日授業内容

画像の挿入
 
リストの表現
 
*上下のマージンは相殺されるので注意
 
*displayの欄にinlineの設定する場合は文字の幅での表示のみ。(もともとインライン)
なので幅、高さを指定するときはblockにする。
 
CSSスタイルシートへのリンクはhrefを打ったあとに""の中にカーソルを入れると参照と出るのでインターを
押すと参照できる。
 
@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;}
 
<!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>
 
 
 
 
・リセットCSSと書体指定
 
*予習する
テキストp126
 
 
・(練習1の鷲)
細かく選択範囲を指定するときは、自動選択ツールで鷲を選ぶ。
境界線を調整(中心上部)→値を設定(*不要なカラーの除去にチェックを入れる)→鷲の周りをなぞる→”境界線を調整”をokを
押して閉じる。対象のライナーを選択した状態で新規ライナーを押す。新規ライナーで
背景色を変える(ctre + backspace or alt + backspace)
 
・選択範囲の解除はctrl +D
 
・コピースタンプツール
コピースタンプツール→直径の指定(編集のした)→対象の中心でaltを押しながらクリック。
空いているところでドラッグしていくとスタンプできる。
 
・ぼかし(練習1のtable)
新規レイヤーを開く→
フィルター→ぼかし→ぼかし(ガウス)を選択しプレビューしながら下の
ピクセルを調整し、ぼかしを調整する。
ぼやけているところを消しゴムツールで消してパスタのみ強調
させる。
 
・グラデーションツール(消しゴムの下)を使ってボタン作成(*現実世界で多方面から見たときに不自然なボタンは作らないこと))
①グラデーションツール→編集の下のグラデーションインジケータで色を調整する。
横書きツールでボタン1と入力し、ドラッグした状態でフォント、フォントサイズなどを調整する。(文字は中央に配置する)
②ボタンのレイヤーと、背景のレイヤーをctrlを押しながら押し、移動ツールボタンを押すと2つのレイヤーの軸を調整するツールが出てくるのでそれで
調整する。
③新規レイヤーをあと3つ作成しボタン1~4までを作る(目の形のボタンを押したままだとレイヤーの表示が重なる)