2012-05-17

授業日誌　5/17　Photoshop

ラップアラウンドで巻き戻す（body背景画像）

境界を調整

2012-05-16

授業日誌　5/15

確認テストの解説・解答

勘違いしているとこが、あったので記述し直しました。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; cyarset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>確認テスト</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
ul {
list-style-type: none;
}
img {
border: none; /*ボーダーのリセット*/
}
body {
color: #fff;
background-color: #ccc;
font-size: 1.0em;
font-family: "ヒラギノ角ゴ Pro W3", 
	  "Hiragino Kaku Gothic Pro", 
	  "メイリオ", 
	  Meiryo, 
	  Osaka, 
	  "ＭＳ Ｐゴシック", 
	  "MS PGothic", 
	  sans-serif;
text-aligh: center; /*IE6対策*/
}
#container {
background-color: yellow;
width: 800px;
height: auto; /*可変 なりゆきで変わる*/
margin: 0 auto; /*空きは半分半分で分かれる*/
padding: 10px;
overflow: hidden; /*自動の可変の大きさ*/
}
#header {
background-color: #a3bed5;
width: auto; /*実質780px*/
height: 100px;
margin: 0 0 10px 0;
}
h1 {
color: #fff;
font-size: 1.6em;
font-family: serif;
padding: 20px 0 0 20px;
}
#content {
background-color: #dcd78a;
width: 540px;
height:290px;
margin: 0 0 10px 0;
padding: 10px;
float:right;
}
#sidebar {
background-color: #9cc56e;
width: 200px; /*実質は220px*/
height: auto;
padding: 10px 10px 0 10px;
float: left;
}
#sidebar li {
width: 200px;
height;80px;
margin: 0 0 10px 0;
}
#footer {
background-color: #e0b9d2;
clear: both;
width: auto;
height: 50px;
}
#footer address {
font-style: normal;
text-align: center;
padding-top: 15px;
}
-->
</style>
</head>
<body>
<div id="container">
		<div id="header"><h1>ここにサイトタイトルを入れる</h1></div>
	<div id="wrapper">
		<div id="sidebar">
		<ul>
		<li><img src="images/0509.jpg" width="200px" height="80px" alt="バナー"/></li>
		<li><img src="images/0509.jpg" width="200px" height="80px" alt="バナー"/></li>
		<li><img src="images/0509.jpg" width="200px" height="80px" alt="バナー"/></li>
		</ul>
		</div>
		<div id="content">
		<h2>ここに見出しが入る</h2>
		<p>ここに本文が入る</p>
		</div>
	</div>
		<div id="footer">
		<address>フェリカテクニカルアカデミー　〒171-0022　豊島区南池袋2-4-3　連絡先：000-0000</address>
		</div>
</div>
</body>
</html>

2012-05-16

授業日誌　5/16　Photoshop

PS01

PS02

PS03

2012-05-15

CSS01

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>正しく構成化されたHTMLの例（CSSが適用されている場合）</title>
<style type="text/css">
#shopping {
border: 1px solid #ccc;
font-size: small;
padding: 10px;
width: 400px;
}
#shopping h2 {
background-color: #0066cc;
padding: 3px;
color: #fff;
margin: 0;
font-size: small;
font-weight: normal;
}
#shopping ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#shopping li {
border-bottom: 1px dotted #ccc;
padding: 3px;
margin: 0;
}
</style>
</head>
<body>
<div id="shopping">
<h2>今日買った物</h2>
<ul>
<li>豚肉</li>
<li>じゃがいも</li>
<li>玉ねぎ</li>
<li>にんじん</li>
</ul>
</div>
</body>
</html>

2012-05-15

授業日誌　5/15　 Photoshop

家にある。Photoshop Elements で、画像の移動をやってみました。

選択ツールを使って今日のところをやってみました。

2012-05-14

授業日誌　5/14

floatの確認テスト

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; cyarset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>確認テスト</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
color: #fff;
background-color: #ccc;
font-family: "ヒラギノ角ゴ Pro W3", 
	  "Hiragino Kaku Gothic Pro", 
	  "メイリオ", 
	  Meiryo, 
	  Osaka, 
	  "ＭＳ Ｐゴシック", 
	  "MS PGothic", 
	  sans-serif;
}
#container {
background-color: yellow;
width: 800px;
height: auto;
margin: 0 auto;
padding: 10px;
overflow: hidden;
}
#header {
background-color: #a3bed5;
width: 760px;
height: 100px;
margin: 10px ;
padding: 10px;
}
#sidebar {
background-color: #9cc56e;
width: 200px;
height: auto;
margin: 10px ;
padding: 10px;
float: left;
}
#content {
background-color: #dcd78a;
width: 520px;
height:290px;
margin:10px 0 10px 10px;
padding: 10px;
float:left
}
#footer {
background-color: #e0b9d2;
clear: both;
width: 780px;
height: 50px;
margin: 0 10px 10px;
}
#footer address {
text-align: center;
padding-top: 15px;
}
</style>
</head>
<body>
<div id="container">
		<div id="header"><h1>ここにサイトタイトルを入れる</h1></div>
	<div id="wrapper">
		<div id="sidebar">
		<ul>
		<li><img src="images/0509.jpg" width="200px" height="80px" alt="バナー"/></li>
		<li><img src="images/0509.jpg" width="200px" height="80px" alt="バナー"/></li>
		<li><img src="images/0509.jpg" width="200px" height="80px" alt="バナー"/></li>
		</ul>
		</div>
		<div id="content">
		<h2>ここに見出しが入る</h2>
		<p>ここに本文が入る</p>
		</div>
	</div>
		<div id="footer">
		<address>フェリカテクニカルアカデミー　〒171-0022　豊島区南池袋2-4-3　連絡先：000-0000</address>
		</div>
</div>
</body>
</html>

2012-05-13

CSS15　ボックスモデル

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>ボックスモデル(15)</title>
<style type="text/css">
<!--
*{
margin:10px;
}
body {
background-color: #CCCCCC;
}
p {
color: #B6D1D8;
background-color: #fff;
padding:15px;
font-family:sans-serif;
line-height: 1.6em;
font-weight: bold;
width: 400px;
}
-->
</style>
</head>
<body>
<p>BOX and PADDING<br>
この領域はボックスといいます。テキストなどのコンテンツ内容を表示する領域です。このボックスと内容との余白をパディングといいます。</p>
</body>
</html>