2012-12-06

illustratorでボタンを作る

授業

CSS Sprite

CSS Spriteとは

ひとつの画像の一部分を見せながら、画像を移動させ、変化したように見せること。

今回はボタンをつくりました。

反応後はバックにグラデーションがかかるように作っています。

【HTML】

<!DOCTYPE>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSS Sprit</title>
<link href="css/base.css" rel="stylesheet" media="screen, print">
</head>
<body>
<div id="nav">
<ul>
<li id="home"><a href="#"><em>home</em></a></li>
<li id="food"><a href="#"><em>food</em></a></li>
<li id="drink"><a href="#"><em>drink</em></a></li>
<li id="info"><a href="#"><em>info</em></a></li>
<li id="contact"><a href="#"><em>contact</em></a></li>
</ul>
</div>
</body>
</html>

【CSS】

@charset "UTF-8";

/* reset */
html, body, div, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, address,
ul, ol, li, dl, dt, dd,
table, th, td, form, fieldset {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family:
		"Hiragino Kaku Gothic Pro",
		"ヒラギノ角ゴ Pro W3",
		Meiryo, 
		"メイリオ", 
		Osaka, 
		"MS P Gothic", 
		"ＭＳ Ｐゴシック", 
		sans-serif;
}
ul {
	list-style-type: none;
}
a {
	text-decoration: none;
}
img {
	border: 0;
}
em {
	visibility: hidden;
}

/* nav */
#nav {
	width: 800px;
	height: 60px;
	margin: 50px 0 0 50px;
}
#nav li {
	float: left;
	display: inline;
}
#nav li a {
	width: 160px;
	height: 60px;
	display: block;
	background-image: url(../images/btn1013.jpg);
	background-repeat: no-repeat;
}

/* individual */
#nav li#home a {
	background-position: left 0;
}
#nav li#home a:hover, #nav li#home a:active {
	background-position: left -80px;
}
#nav li#food a {
	background-position: -160px 0;
}
#nav li#food a:hover, #nav li#food a:active {
	background-position: -160px -80px;
}
#nav li#drink a {
	background-position: -320px 0;
}
#nav li#drink a:hover, #nav li#drink a:active {
	background-position: -320px -80px;
}
#nav li#info a {
	background-position: -480px 0;
}
#nav li#info a:hover, #nav li#info a:active {
	background-position: -480px -80px;
}
#nav li#contact a {
	background-position: right 0;
}
#nav li#contact a:hover, #nav li#contact a:active {
	background-position: right -80px

</css>

★入力メモ★

【div】や【li】など、ボックス内にボックスがある場合は、
両方にマージンを入力していても、どちらかの値の大きい方が採用されます
【display : inline ;】＝文字のように並べますという命令。IE対策。【float】とセットで使われる。
【visibility : hidden ;】＝画像の上に文字がのってる場合、この入力がないと文字on文字になる。
他にも【off-left : -999em ;】や【display : none ;】があるが、
visibility〜が欧米ではよく使われる。

2012-12-06

CSS練習課題：横ナビ

授業

練習課題1

以下の画像と同じように表示させるCSSを記述しなさい

【HTML】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リストメニュー（１）</title>
<link rel="stylesheet" href="css/style.css" media="screen, print">
</head>
<body>
<div id="nav">
<ul>
<li class="first"><a href="#">リストメニュー１</a></li>
<li><a href="#">リストメニュー２</a></li>
<li><a href="#">リストメニュー３</a></li>
<li><a href="#">リストメニュー４</a></li>
<li><a href="#">リストメニュー５</a></li>
</ul>
</div>
</body>
</html>

【CSS】

@charset "utf-8";

#nav {
	margin: 50px;
}
#nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#nav li	{	
	font-size: 0.875em;
	display: inline;
	margin: 0 0 0 10px;
	padding:5px 0 5px 10px;
	border-left: 1px solid #999;
}
#nav li.first {
	border-left: none;
}
#nav li a:link	{
	color: #000;
	text-decoration: none;
}
nav li a:visited {
	color: #90C;
}
#nav li a:hover {
	color: #FA0;
}

練習課題2

以下の画像と同じように表示させるCSSを記述しなさい

【HTML】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>リストメニュー（１）</title>
<link rel="stylesheet" href="css/style.css" media="screen, print">
</head>
<body>
<div id="nav">
<ul>
<li class="first"><a href="#">リストメニュー１</a></li>
<li><a href="#">リストメニュー２</a></li>
<li><a href="#">リストメニュー３</a></li>
<li><a href="#">リストメニュー４</a></li>
<li><a href="#">リストメニュー５</a></li>
</ul>
</div>
</body>
</html>

【CSS】

@charset "utf-8";

#nav	{
	font-size: 0.75em;
	margin: 50px;
}
#nav ul	{
	margin: 0;
	padding: 0;
	list-style-type: none;
}
#nav li	{
	float: left;
}
#nav li a	{
	color: #000;
	text-align: center;
	text-decoration: none;
	display: block;
	width: 120px;
	line-height: 25px;
	border-right: solid 1px #AAA;
}
#nav li.first a:link	{
	border-left: solid 1px #AAA;
}
#nav li a:hover	{
	background-color: #E8EEB6;
}

2012-12-04

ぬり絵ソフト「photoshop」

授業

選択範囲を選ぶ

細かい微調整ができたり、便利なツールの使い方は是非覚えておこう！

【　Ctrl＋D　】: 選択範囲をすべて解除する。
【　選択範囲＋shift 】: カーソルに「＋」がつき、今の範囲からさらに追加して選べる。
【　選択範囲＋alt 】: カーソルに「−」がつき、今の範囲から部分を選んで解除する。
【　Ctrl＋shift＋I 】: 選択範囲を反転させる。
【　自動選択ツール（マジックワンド）】: おおまかな部分をクリックするだけで、簡単に範囲選択ができる。

2012-12-01

デザイン

授業

風姿花伝

能の世阿弥の一節。

その「モノ」になって考えること、一体化することから見えるものがある。

webのデザイン

付加価値をいかにつけるか、感じさせることが大切。
人が欲しい、と思うのはどんなもの？なぜ？
流行っているものには必ず理由がある。
街中の様々な「デザイン」されたものを客観的に見て考えてみよう。

伝える表現

伝える内容を考える
ラフ案を作る
図にしてみる
再構成をして図解化する

デザインの実践

まず「観察する」。それから「点」、「線」、「面」、「文字」、「色」で表現してみる。

ゲシュタルトの法則

同じ意味や役割をもたせる
全体がぼけても塊が判断できるグループ化をする
混乱させないデザイン
地と図を上手く使う
余白を使い、要素に注目させる

情報の「喰いあい」には注意！

あれもこれもと、色んな場所に商品をちりばめすぎると、
ユーザーが混乱して選べなくなったり、サイトから離れる原因にもなる。

2012-11-30

CSS練習課題：縦ナビ

授業

以下の画像と同じように表示させるCSSを記述しなさい

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>正しく構造化されたHTMLの例（CSSが適用されている場合）</title>
<link rel="stylesheet" href="css/style.css" media="screen, print">
</head>
<body>
<div id="shopping">
<h2>今日買った物</h2>
<ul>
<li>豚肉</li>
<li>じゃがいも</li>
<li>たまねぎ</li>
<li>にんじん</li>
</ul>
</div>
</body>
</html>

@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
}
#shopping {
	border: 1px solid #ccc;
	font-size: small;
	margin: 50px 0 0 50px;
	padding: 10px;
	width: 400px;
}
#shopping h2 {
	background-color: #06c;
	padding: 3px;
	color: #fff;
	font-size: small;
	font-weight: normal;
}
#shopping ul {
	list-style-type: none;
}
#shopping li {
	border-bottom: 1px dotted #ccc;
	padding: 3px;
}

【CSS12】

f:id:knserk0526:20121201054657j:image:w360

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>エコロジー＆環境問題</title>
<link rel="stylesheet" href="css/style.css" media="screen, print">
</head>
<body>
<div class="box">
<h1>エコロジーへの取り組み</h1>
<p>
エコロジーや環境問題への関心は、年々高くなっています。<br>
Computer Technology Groupsでは早くからエコロジーの研究に取り組んできました。自然エネルギーの活用もすすめており、二酸化炭素（CO2）の排出量を減らす努力もしています。<br>
専門家の招致、育成にも努め、来春には環境研究施設を設立する予定です。 </p>
<p>
また、紙やプラスチック、コンピューター・パーツのリサイクルにも力を入れ、あらゆる面での活動をひろげています。<br>
リサイクル商品のラインナップも豊富で、オンラインのショッピングコーナーではもちろんのこと、各地域のリサイクルセンターでもお買い求めいただけます。 </p>
<address>Copyright (C) Computer Technology Groups. All rights reserved.</address>
</div>
</body>
</html>

@charset "utf-8";

* {
	margin: 0;
	padding: 0;
}
body {
	font-family: sans-serif;
	font-size: 1.0em;
	text-align: center; /* IE6対策　コンテンツの中央揃え */
}
.box {
	width: 480px;
	margin: 0 auto;
}
h1 {
	font-size: large;
	color: #fff;
	margin: 20px 0;
	padding: 20px 0;
	background-color: #9acf9c;
 }
 p {
	font-size: 0.875em;
	line-height: 1.5;
	color: #555;
	text-align: left;
	margin: 0 0 20px 0;
 }
 address {
	font-size: 0.7em;
	font-style: normal;
	color: #55924f;
	padding-top: 8px;
	border-top: solid 9px #9acf9c;
 }

＊入力メモ＊

【text-align: center;】: 文字の整列が中央揃え
【/*〜*/】: でメモがわり。実際には表示されない。
【font-family:sans-serif;】: フォントの種類を全部打つのが面倒なときはこれでまとめられる。

2012-11-29

色々なセレクタ

授業

セレクタ

idセレクタ

サイトをレイアウトするためのdiv要素など、
ページ内で１回しか出てこない部分を指定するようにする。

<h1 id="colorgreen">大見出し要素</h1>

クラスセレクタ

同じ要素の中で特定の部分にだけスタイルを適用させたい場合に使う。
同じページ内で複数の場所に指定が可能。

<h2 class="colorgreen">中見出し要素</h2>

wrapperとcontainer

html文書のケースの役割。
優先順位はないが、英語圏では基本、container＞wrap

擬似クラス

link：（未訪問）
visited：（訪問済み）
fover：（カーソルがリンクに重なったとき）
active：（リンクに対してアクティブな瞬間）

<li>と<li a>の違いの把握が必要

<li>: 文字にかかわる部分。文字の大きさ、文字の並びなど。
<li a>: マウスの受ける条件。ボタンの範囲、色など。

入力メモ

float:（〜）; ＝文字並びを指定。（〜）には方向を入れる。leftなど。
（<li>にかかる）
display: block ; ＝選んだ範囲がボタンになるようにディスプレイする。
（<li a>にかかる）
list-style-type: none; ＝<li>の黒丸をなくすこと。
text-decoration: none; ＝アンカーを外すこと。
"#"＝リンク先を＃に指定すると、飛ぶ場所がなくてもボタンが反応するようにできる。

画像背景をつけてみよう

<style>
body{
     background-image: url("○○");
     background-repeat:〜〜〜〜
}
</style>

○○はファイルの場所を入力。（例）img/01.jpg
background-repeat：のあとに、
repreat-yで縦並びにリピート。repeat-xで横に並べる。

2012-11-29

CSS

授業

リンクの文字色（擬似クラス）

【以下のような表示を作りなさい】

<body>
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>
</ul>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>:link, :visited, :hover, :active</title>
<style>
ul {
	list-style-type: none;
}
li a {
	font-size: 1.6em;
	font-weight: bold;
}
li a:link {
	color: coral;
}
li a:visited {
	color: turquoise;
}
li a:hover {
	color: skyblue;
}
li a:active {
	color: lawngreen;
}
</style>
</head>
<body>
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>
</ul>
</body>
</html>

リンクの背景色（擬似クラス）

【以下のような表示を作りなさい】

<body>
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>
</ul>
</body>
<html>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>:link, :visited, :hover, :active</title>
<style>
ul {
	list-style-type: none;
}
li a {
	display: block;
	color: white;
	font-size: 1.5em;
	font-weight: bold;
	width: 300px;
	padding: 2px 10px;
	margin: 2px 0px;
	text-decoration: none;
}
li a:link {
	background-color: coral;
}
li a:visited {
	background-color: turquoise;
}
li a:hover {
	background-color: skyblue;
}
li a:active {
	background-color: lawngreen;
}
</style>
</head>
<body>
<ul>
<li><a href="#">LINK-link-coral</a></li>
<li><a href="#">LINK-visited-turquoise</a></li>
<li><a href="#">LINK-hover-skyblue</a></li>
<li><a href="#">LINK-active-lawngreen</a></li>
</ul>
</html>

背景色と余白

【以下のような表示を作りなさい】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>background-color</title>
<style>
* {
	margin: 0;
	padding: 0;
}
h2 {
	color: #FFF;
	font-size: 1.0em;
	background-color: #1565b5;
}
p {
	font-size: 0.875em;
	line-height: 1.2;
	background-color: #bdd4eb;
}
h2,p {
	padding: 1.0em;
}
</style>
</head>
<body>
<h2>background-colorの設定</h2>
<p>見出しには濃いめの色を背景に指定し、文字を白抜きにします。段落には見出しよりも薄い色を指定します。さらに見出しと段落の上下のマージンを0にして、ボックスの上下をくっつけ、パディングを1em指定します。</p>

</body>
</html>

背景画像を設定

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>background-repeat</title>
<style>
body {
	background-image: url("img/bee.gif");
}
</style>
</head>
<body>
<p>背景画像がタイル状に表示されます。</p>
</body>
</html>

背景画像を設定（水平方向に繰り返し）

↓↓↓

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>background-repeat</title>
<style>
body {
	background-image:url("img/line1.jpg");
	background-repeat:repeat-x;
}
h1 {
	color: #30647A;
	font-family:serif;
}
</style>
</head>
<body>
<h1>Page Design</h1>
</body>
</html>

【background-repeat:repeat-x;】を【repeat-y】にすると、縦にリピート。

CSS Sprite

CSS Spriteとは

★入力メモ★

練習課題1

練習課題2

選択範囲を選ぶ

*webのデザイン*

*伝える表現*

*デザインの実践*

*ゲシュタルトの法則*

*情報の「喰いあい」には注意！*

【CSS12】

＊入力メモ＊

idセレクタ

クラスセレクタ

wrapperとcontainer

擬似クラス

<li>と<li a>の違いの把握が必要

画像背景をつけてみよう

リンクの文字色（擬似クラス）

リンクの背景色（擬似クラス）

背景色と余白

背景画像を設定

背景画像を設定（水平方向に繰り返し）

webのデザイン

伝える表現

デザインの実践

ゲシュタルトの法則

情報の「喰いあい」には注意！