1月29日授業内容
*スタイル中の初めのところにリセットを設定することでブラウザでの表示を安定させることができる。
ex1.
html,body,h1,p,ul,li{
margin:0;
padding:0;
line-height:1.0;
}
ex.2
html,body,h1,h2,p{
margin:0;
padding:0;
line-height:1.0;
font-family:"Hiragino Kaku Gothic ProN"
,
Meiryo
,
sans-serif;
}
・HTMLとCSSのコードのチェック以下の2つのサイト
・id名は1ページに1箇所、classは何度でも使える。
・説明が必要な画像はimg
・説明の必要がないのがbackground-image
・background-position(P93)
今日のHTML&CSS入力内容
・文字色と背景色と囲み - 演習
・CSSによるブラウザへの表示Add Star
①
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>いてふの実-宮沢賢治</title>
<style>
/*reset*/
html,body,h1,h2,p{ margin:0px;
padding:0;
line-height:1.0;
font-family:"Hiragino Kaku Gothic ProN", Meiryo, sans-serif; }
/*reset*/
#container{width:530px;
margin:auto;}
body{font-size:16px;}
h1{margin-bottom:16px;
margin-top:10px;}
h2{background-color:#5db254;
color:white;
padding:10px;}
p{line-height:1.6;
font-size:0.875em;/*14px*/
padding:16px;
width:496px; border:1px solid #5db254;}
</style>
</head>
<body>
<div id="container">
<h1>宮沢賢治作品</h1>
<h2>いてふの実</h2 <p>そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。<br> そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。<br> その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。<br> 実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。<br> 今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。</p>
</div>
</body>
</html>
②
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
html,body,h1,h2,p{
margin:0px;
padding:0;
line-height:1.0;
font-family:"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;}
#container{width:530px;
margin:auto;}
h1{margin:16px;
margin-left:0;}
h2{
margin-bottom:20px;
padding-bottom:45px;
background-image:url(img/13.jpg);
background-repeat:no-repeat;
background-position:center bottom;/*センターとボトムの間は半角スペース1つ開ける*/
text-align:center;
font-family:
"ヒラギノ明朝 ProN"
"HG明朝E"
"MS P明朝"
"MS 明朝”;}
p{line-height:1.6;
padding:16px;
width:496px;
border:1px solid #5db254;}
</style>
</head>
<body>
<div id="container">
<h1>宮沢賢治作品</h1>
<h2>いてふの実</h2>
<p>そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。<br>
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。<br>
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。<br>
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。<br>
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。
</div>
</p>
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
html,body,h1,h2,p{
margin:0px;
padding:0;
line-height:1.0;
font-family:"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;}
#container{width:530px;
margin:auto;}
h1{margin:16px;
margin-left:0;}
h2{
margin-bottom:20px;
padding-bottom:45px;
background-image:url(img/13.jpg);
background-repeat:no-repeat;
background-position:center bottom;/*センターとボトムの間は半角スペース1つ開ける*/
text-align:center;
font-family:
"ヒラギノ明朝 ProN"
"HG明朝E"
"MS P明朝"
"MS 明朝”;}
p{line-height:1.6;
padding:16px;
width:496px;
border:1px solid #5db254;}
</style>
</head>
<body>
<div id="container">
<h1>宮沢賢治作品</h1>
<h2>いてふの実</h2>
<p>そらのてっぺんなんか冷たくて冷たくてまるでカチカチの灼きをかけた鋼です。<br>
そして星が一杯です。けれども東の空はもう優しい桔梗の花びらのやうにあやしい底光りをはじめました。<br>
その明け方の空の下、ひるの鳥でも行かない高い所を鋭い霜のかけらが風に流されてサラサラサラサラ南の方へ飛んで行きました。<br>
実にその微な音が丘の上の一本いてふの木に聞える位澄み切った明け方です。いてふの実はみんな一度に目をさましました。そしてドキッとしたのです。<br>
今日こそはたしかに旅立ちの日でした。みんなも前からさう思ってゐましたし、昨日の夕方やって来た二羽の烏もさう云いひました。
</div>
</p>
</body>
</html>
③
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>リセットCSSを記述する前に</title>
<style>
html,body,h1,p,ul,li{
margin:0;
padding:0;
line-height:1.0;
}
h1,p,ul{color:#fff;
font-family:"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
ul{list-style:none;}/*リストの黒丸を消すため*/
h1{background-color:#95CCE2;}
p{background-color:#EFB15F;
}
li{background-color:#98DC77;}
</style>
</head>
<body>
<h1>ページのテーマ</h1>
<p>ここに本文が入る</p>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>
</body>
</html>
・新規作成→配置→テンプレートのみチェックし開く
*リンクは絶対使わないこと
カニのイラスト方法
かにをトレース
①ルーラー表示(ctrl + R)をした状態で、円のx軸とy軸に線を合わせて交点を基準に楕円形ツールを使って真円を書く。
②ctrl +Altを押した状態で右目にコピーする。
目に赤色、白目、黒目をつける
(他の物と同一の色をつけたい場合:色付け対象を選択後、スポイトツールで色付けしたい色をクリックする。)
④リフレクトツールを使って垂直方向に反転させる。オブジェクトの重ね順で一番後ろにする。
アウトライン表示しながら、ハサミの大きさは拡大縮小ツールで調整する。
⑥缶の丸い部分をルーラーを使って綺麗な楕円を書き、下に同じ形をコピーする。
*下の円の上部半円をダイレクト選択ツールを使って選択肢デリートで消す。
次にペンツールで上下の円を支点にして両サイドに2本直線を書く
缶に色付けする。
⑧作った缶を選択して回転ツールで角度を変える(⑦の角度が記憶されているはず。)
10:ペンツールで口の線を描いたあと線の太さと線の丸みをつける。