9/28 ☼ CSS/Illustratorペンツール

CSS

CSS基礎

【セレクタの種類】

  • IDセレクタ：1ページ内で同じ名前を1回しか使用できない
  • classセレクタ：1ページ内で同じ名前を何度も使用できる

名前の付け方は非常に重要！

【CSSによるページデザインの流れ】

  1. 文章構造を考える。
  2. 意味づけ(マークアップ)する。
  3. div要素でコンテンツをグループ化（ブロック化）する。
  4. 「id名」「class名」を使い分けてグループ名をつける。
  5. 組み上げる。

「例」下記のデザインを作る


  • HTML＆div要素によるコンテンツのブロック化
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>例題</title>

 <style type="text/css">
<!--
#header {
  background-color: #CC9933;
  width: 800px;
  height: 150px;
}

#nav {
  background-color: #CC3399;
  width: 800px;
  height: 50px;
}

#content {
  background-color: #99FF99;
  width: 600px;
  height: 350px;
}

#sidebar {
  background-color: #9999CC;
  width: 200px;
  height: 350px;
}

#footer {
  background-color: #996666;
  width: 800px;
  height: 50px;
}
-->
</style>
</head>

<body>
 <div id="header"></div>
 <div id="nav"></div>
 <div id="content"></div>
 <div id="sidebar"></div>
 <div id="footer"></div>
</body>
</html>



<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>例題</title>

<style type="text/css">
<!--
#container {
  width: 800px;
  margin: 0 auto 0 auto;
}

#header {
  background-color: #CC9933;
  width: 800px;
  height: 150px;
}

#nav {
  background-color: #CC3399;
  width: 800px;
  height: 50px;
}

#wrapper {
  width: 800px;
}

#content {
  background-color: #99FF99;
  width: 600px;
  height: 350px;
  float: right;
}

#sidebar {
  background-color: #9999CC;
  width: 200px;
  height: 350px;
  float: left;
}

#footer {
  background-color: #996666;
  width: 800px;
  height: 50px;
  clear: both;
}
-->
</style>
</head>

<body>
<div id="container">

 <div id="header"></div>
 <div id="nav"></div>

<div id="wrapper">
 <div id="content"></div>
 <div id="sidebar"></div>
</div>

 <div id="footer"></div>

</div>
</body>
</html>
  • 完成


【注意すること】

  • CSSの前に必ずHTMLの文法チェックをする事。
  • 検索エンジンは上の方のページが代わり映えしなければ見ない。
  • 読ませたいcontentの部分、先に読ませたい更新情報は上にもってくる。
  • 先に読ませながら、右に並べるときには「float(浮き上がるという意味) :right」で設定する。
  • padding:そもそもの大きさをふくらませようとする。IE6は要注意！レイアウトが崩れやすいので使い方の注意が必要。
  • margin:他のものとの間を開けたい時に使う。内側から外側へと設定する。

【最近のデザイン傾向】

  • DTPそのもののまるでチラシの様なものが求められる場合もある。
  • たとえばラーメン屋：「うまいものはうまそうに見せる！」
  • テレビCMのように人の記憶に残るもの、「ちょっと変だな」と思わせ意図的に誘導する。

Illustratorペンツール＆GIFアニメ

GIFアニメのやり方をすっかり忘れている。要復習！！

「ドリル」多分５０点もいかない・・ぐらいの今の記憶力・・・
再勉強致します・・・・