Wave notes

・Webデザイン学習「MOZER」を使ってみました⑤

「アクセスマップをつくろう」

ulの意味知らなかった！

アンオーダードリスト！

お店の地図を入れたり住所を入れたり、これで完成！

かと思ったら

まだ続きが！

Webサイトを仕上げよう

今まで作ったホームページの全体像を最後に見れるのですが

気付いてませんでした。

ナビゲーションがない！ことに

仕上げるというのは全体を見て必要な物があるか？

使いづらくないか？

気付かないとダメでしたね～（－　－；）

リンクも付けてホントに完成だね！

ページ内でリンクするとき便利なのがid属性

クリックするとジャンプするあれ！便利ですよね！

これでホームページ完成！です。

ホームページ作りは終わったようですが、ストーリーは続いてます。

ビルソン（赤いシャツきた牛？さん）が教授に呼ばれているとかで

一緒に行くことになりました。

この人が教授です。

デイジーが授業受けていない言い訳をしていたら

テストしよう！

ってことになりました。

レオンシュタイン教授のテスト

今まで習ったことをどんどん問題にして出してきます（笑）

なんとかできるわー

と余裕だしてたらストーリー進まなくなった（OKの☆でない）

あれ？

これ！何かが抜けてます。

そうです。

sctionの「e」が抜けてます！！

こんな風に間違えて打つとストーリーが進まないので

見直す合図となりますね。

「episode1」が終了したので、チャプターページに戻ると

今まで頑張って作ったHTMLとCSSがブラウザで見られたり

ダウンロードできるようになってます！（驚っ）

無料で、ここまで心のこもったサポートをしてくれるとは想像もしてませんでした。

作ったものが手元にある！というだけで愛着もわきますねー

そして

まだまだ続くよ体験学習（笑）

私の「MOZER」紹介はここで終了とさせていただきます。

ご興味のある方は、続きをどうぞ～

https://mozer.io/

Episode2は

既存のホームページをカッコ良くするお手伝いをするようです。

2017/04/18

Webデザイン学習「MOZER」を使ってみました④

学習目次

・Webデザイン学習「MOZER」を使ってみました④

「パン屋を紹介しよう」

新しい仲間（ビルソン）が増え

かっこいい紹介が完成！

ここまできてストーリーが長いのでは？と思いまして

ペースアップをします！（どこまでするのでしょうか？）

毎回感心していますが、ポイントを押さえた丁寧な説明でわかりやすいー＾＾

続いて

「パンを目立たせよう」

classを使うことが多くて私、今何をしているのか？

頭がぐるぐるしそうな回ですね。

classって名札のようなものですよねー

名札を付けているので、CSSページで何の装飾をつけたのか

一目了然！気がかわって装飾を変更するときも簡単になります。

おしゃれな感じにレイアウトが完成しました！

依頼主のマーサにも好評でよかったです！。

続いて

「値段表を作ろう」

お！急に入力する部分が増えてきました！

↑上の案内でタグを下のスペースに入力していきます。

わからなければヒントを見ることもできるので

自分に合った進め方ができるのがイイですねー♪

メニュー完成です！

終わらなかった。。。まだ続きそうです（笑）

次回は「アクセスマップをつくろう」です。

https://mozer.io/

Webデザイン学習「MOZER」を使ってみました⑤　次へ→

2017/04/16

Webデザイン学習「MOZER」を使ってみました③

学習目次

・Webデザイン学習「MOZER」を使ってみました③

今日は、「お店の紹介をつくろう」です。

途中経過↓まだ文字入れただけのシンプルなページです。

デイジーが次に入力するタグとpx（ピクセル）を教えてくれるので

そのとおりに入力するのは良いことですが

せっかくですから、試しに数値を変えてみるのもいいかも！（笑）

上記のいう通りに指定するとborder-left-width:10px;です。

この線をもっと太くしたらどうなるのか？

border-left-width:50px;にしてみました！

オレンジ色の部分が太くなってます。

違う数値でも反映されるようになっている事が

嬉しいですね～♪

という風に

数字を変えてどのくらいの値ならデザインが良くみえる

のか試してみるのも楽しいと思いますよ。

完成したお店紹介がこちら↓（線の太さを10pxに戻しました。）

次回は「パンの紹介をしよう」です。

https://mozer.io/

Webデザイン学習「MOZER」を使ってみました④　次へ→

2017/04/09

Webデザイン学習　「MOZER」を使ってみました②

学習目次

・Webデザイン学習「MOZER」を使ってみました②

今日は、ホームページの一番上にある看板の役目を果たすヘッダー部分を作ります。

学習しているとヒントもあるので、コードを覚えなくてもいい？

ような感覚になりますが

時々、Quizが出ますので頭に入っているか？復習もできるようになってます。

今回、とてもいいなーと思った所がありました。

看板を作る過程にですが、デザインは1回で作られるものではない

ということを実際に教えてくれています。

1回目に文字の形を下のようにしたのですが、

やっぱり、違うのに変更しましょう！と入力したコードを書き換えます。

え！！

じゃー最初から2回目の文字にすればよかったのでは？

と思うかもしれませんが、ホームページを作る前に

大まかなラフはできていても

もっと良くするために何度も何度も修正して作っていくものだからです。

※またホームページは完成しても、その時代にあった新しいサイト（流行）に

変えていくのは通常よくあることです。

最初は、せっかく作ったのに。。。。とショックに思ってしまうかもしれません。

私も、何度も修正していくことで何を目指しているのか？

わからなくなることもありました。

でも、何回も繰り返しすることで、同じコードを書く機会が

増えいつのまにかコードを覚えていたりするんですよね～(*TｰT)b

それが嬉しくなって、また新しいこと（流行）をしてみたくなったり

やっぱり前の方が使いやすかった、見やすかったと振り返ることで

イイ部分を見直す機会にもなります。

と、いろいろコードを修正したり追加したりで看板が完成しました！

ばっちり！作れた看板ですが、ホームページの依頼者であるマーサさんに

感想を聞いていますね。

喜んでくれたのでしょうか？?o(ﾟ～ﾟo)

次回は、「お店紹介をつくろう」です。

https://mozer.io/

Webデザイン学習「MOZER」を使ってみました③　次へ→

2017/04/04

Webデザイン学習　「MOZER」を使ってみました①

学習目次

・Webデザイン学習「MOZER」を使ってみました①

2回目のログインです。

前回の続きからしたいので

ログインしたら、画像上の「＜＜」マークをクリックし

チャプターリストをクリックする。

もしくは、左上の「チャプターリスト」をクリックします。

前回の「はじめてのWeb」の途中からだったはずですが、

保存されてませんでした（はじめからするしかありません。。。）。

ご注意

保存はチャプターごとに行われるみたいなので

学習を中断するのであれば、1つのチャプターを終わらせたほうがいいようです＾＾。

また、同じコードはコピペをしたい所ですが、できませんでした。

※あくまで学習なので、自ら打ちましょう（笑）

では、コードを打ち間違えているのに、気付かなかった場合ですが

ちゃんと教えてくれます。

これはちょっと嬉しいですね。

次回は、「カンバンをつくろう」です。

https://mozer.io/

「Webデザイン学習　「MOZER」を使ってみました②」　次へ→

2017/03/19

今の時代調べるとなんでもわかるインターネット！

でも、自分でサイトを作るとなると気おくれします。

大人になってから覚えるより子供のころから身近にしていた方が

将来の職業につながるかも？しれませんよね。

私は、社会人になって少しだけＨＴＭＬを勉強したことはありますが、

その後は自分で学習してきました（まだまだ未熟ものです）。

わからないことをＰＣで調べると、また分からない言葉（専門用語）が

でて、また言葉の意味を調べて。。。を続けていく地道な作業になります。

で、σ(ﾟ･ﾟ*)私、何調べてた？という事もしばしば（笑）

でも、これを繰り返しながら進むしかありません。

しかし、初めて自分で本を買って勉強するのはとても大変。。。。

そこで基礎を教えてくれる「ＭＯＺＥＲ」WEBデザイン学習（体験版）をのぞいてみました。

【2020/8/11追記：現在は学生や企業向けで、一般向けは準備中となっています】

http://mozer.io

新規プレイをクリックして無料登録（以下の2点）します。

・メールアドレス
・パスワード（8文字以上）

登録したメールアドレスにメールが届いたらクリックして承認します。

オープニングトークやマーサさんと少し話して（笑)

いよいよスタート！です。

学習目次

・Webデザイン学習（体験版）MOZERって？