Webデザインの勉強の仕方

Webデザインの勉強の仕方

  • テキストはゆっくり読む(速読法などもってのほかです)
  • 疑問がでてきたら考える(脳に考えていることを教えます)
  • ノートに鉛筆で書いてみる(手で書けることはPC入力はできます)
  • 寝る前にはTVなどをみないで頭を休ませる(脳は動くときと休むときのメリハリが必要です)
  • 水をたくさん飲む(脳は水がたっぷりのなかにあると最高の働きをします)
  • 声に出す(誰かに教えただけでも学習効率があがります)
  • 休憩する
  • 現実の何かに置き換えてみる(メタタグをつくることと同じです)
  • 実行あるのみ
  • 泥臭く、愚直に、徹底的に実行する。それが大事
インターネットで調べる
  • どんな方法があるのか調べてみる
  • 自分にできそうな方法をピックアップしてみる(選ぶことがポイント)


ここで注意が必要なのは、いつ作られた情報(Webサイト)なのかということです。古い情報で始めてしまうと、後で軌道修正がしにくくなります。
最新のものに注目しましょう。(もちろん初心者向けのもの)

あれって何?

  • すべてのはじまりは「好奇心」
  • 初心者は、わからないことを調べること
  • 調べてわかったことは、自分なりのメモにする
  • やるべきことをやらないと、鼻がのびるよ「ピノッキオ」みたいに
自宅での宿題

Let's Go! 経験者用課題

  • 画像系のソフトを持っている人は臆せず描いて、ブログに載せましょう
  • もちろん、CSSで記述できる人はやってみる
  • できるはずだじゃだめ!
  • 16日が開講日で何も始まっていない? そんなの関係ない。(やろうと思うことが、工夫のはじまり)



この形を描いてみる。

  • 四角は3つ
  • 文字も3つ
  • あとは、「色」と「文字の大きさ」を決める
  • 四角の端と文字の間をあけて、読みやすく配置
HTML化してみる
  • セレクタ名、空きのとりかたにより、記述の仕方はいろいろあります


《例》

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML基本構造</title>
<style>
#container {
  width: 400px;
  margin: 50px auto 0 auto;
  padding: 15px 20px;
  background-color: #dbdbdb;
}
#header {
  margin: 10px 0 15px;
  padding: 10px;
  background-color: #56c25f;
}
#content {
  height: 200px;
  margin: 10px 0;
  padding: 10px;
  background-color: #56c25f;
}
h1, h2 {
  color: #fff;
  font-size: 1.4em;
  font-weight: normal;
  margin: 0;
  padding: 0;
}
</style>
</head>
<body>
<div id="container">
<h1>html</h1>
<div id="header">
<h2>head</h2>
</div>
<div id="content">
<h2>body</h2>
</div>
</div>
</body>
</html>