【初心者】対話式!ホームページ作りの”きほん”①目標設定

更新日時:

mamaMadeの鈴木です。

先日スクールに通ってる生徒さんに授業で使うテキストを選んで頂きました。

今回選ばれたのが対話式!ホームページ作りの”きほん”でした。まだ新しい書籍のためかレビューもなかったのですがわかりやすそう。ということで決まりました。スクールで学んでる生徒さんの勉強方法やつまずきやすいポイントを紹介します。

勉強時間の目安と目標設定

このスクールに通う生徒さんたちは子育て中なのでスキマ時間で学べるというのがポイントになります。

各自で目標を設定しました。1冊のテキストを終わらせる目標です。事情はそれぞれなので1ヶ月という方もいれば2ヶ月という方もどちらにしても自分がやる気を継続させられるように設定します。

【問題点】ママたちはパソコンを使った勉強がなかなか出来ない。

  • お子さんがいるとなかなかパソコンが開けないという問題が・・・ここでは無理せずできることを探します。⇒テキストを読む(一度最後まで読むと更に良いようです。)教室に来た時に実践する。
  • 今回選んだテキストが小問題がファイル別で出題されているのでやりやすいようです。

初心者が挫折するわかりにくいポイント

練習用データの使い方

ダウンロード方法

右クリックで対象ファイルに保存をクリックとなってますがWindows8.1以前の場合は名前を付けて保存をクリック

データファイルのない練習問題

第2章(P.28)の練習用データindex.htmlは書籍の説明通りに記述してみましょう

【よくある質問】テキストと同じようにやってるのに同じように表示されない。

  • cssの記述をしたのに適応されない場合のよくある間違い
  • ;(セミコロンがない)慣れてくればすぐわかるのですが初心者は全く気づきません。

第2章(P.28)の練習用データindex.htmlは書籍の説明通りに記述してみましょう

ここで使うsublime text2のショートカットキー

char+tab
文字コードの入力
title+tab
titleの入力
h1+tab
見出し
p+tab
段落
div+tab
グループに区切る
c+tab
コメントタグ
h2#home+tab
<h2 id ="home"></h2>

練習問題は問題をよく読んで順番に

練習用データをsublime Text2で開きます。ブラウザに表示してましょう。
手順通り入力し更新して変更箇所を確認しながら進めてください。
赤文字、ボードに書かれた記述が練習問題です。

完成形にあるaccess.html,concept.html,menu.htmlも練習してみよう

第4章 CSSについて

所要時間:2時間

P.83~

cssでのデザインで気をつけるポイント

時間かかったところ

  • :コロンの半角、全角の違い
  • 【解決策】使ってるフォントを変える

sublimeの特徴
フォントを変更した
全角入力時の画面表示の特徴
befor afterの記載あるものないものの練習データの使い方

第5章

画像
img+tab

画像を歪まないように表示する
38-2
画像チェックしてみましょう
ウィンドウズの場合右上縮小タブで縮小して見てください。何かに気づきませんか?

SNSでもご購読できます。


コメントを残す

*