2017/04/23

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


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

ulの意味知らなかった！

アンオーダードリスト！


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


かと思ったら

まだ続きが！







  • Webサイトを仕上げよう

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

気付いてませんでした。

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


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

使いづらくないか？

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

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



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

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



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



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


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

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



この人が教授です。
デイジーが授業受けていない言い訳をしていたら

テストしよう！

ってことになりました。





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

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

なんとかできるわー

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


あれ？


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



そうです。
sctionの「e」が抜けてます！！

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

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




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

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

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







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

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




そして

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



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

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


Episode2は

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



ラベル: , , ,

2017/04/22

恋するシロクマのかわいすぎるキャラ


シロクマがあざらしに恋をする♡「恋するシロクマ」


考えていることがお互いに微妙にすれちがうトーク

すっかりはまってます。



アニメ化すると聞いていて絶対見たい！

と思ってました。


しかしアニメ化は劇場で？という限定枠ー（斬新すぎる）

ずーと見守っていたくなるシロクマさんとあざらし君



1分の動画ですが、とてもイイ！

2人のおもしろさが凝縮されてます。



シロクマさん：梅原裕一郎さん

あざらし君：花江夏樹さん


全国の映画館約50館で予告篇上映前に順次上映らしいです。



完全アニメ化も期待してます。



ラベル: ,

2017/04/18

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



  • 「パン屋を紹介しよう」

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

かっこいい紹介が完成！


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

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


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



続いて
  • 「パンを目立たせよう」

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

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


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

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

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



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

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



続いて
  • 「値段表を作ろう」


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


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



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

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


メニュー完成です！



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


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

https://mozer.io/



ラベル: , , ,

2017/04/16

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


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


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


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

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

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



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

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



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

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

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

嬉しいですね～♪




という風に

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

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



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



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

https://mozer.io/


ラベル: , , ,

2017/04/10

windowsの更新プログラムが進まない



PCの不具合なのか？ダウンロードが進まないので

セキュリティプログラムなのにもかかわらず、そのまま放置することもありました。

が、やはりプログラムの更新・修正ができずにもっと不具合（脆弱性により）がある

のも困るので、また更新を頑張ってしています。


更新がうまく進んでいる時の画面


①ダウンロード中の％が進んでいるのが確認できます。


②復元ポイント作成されインストールの準備に入っています。


③インストール中


④完了


上記の更新プログラムは「KB4012215」約6分ほどで完了しました。


となるはずなのですが、

よくある症状としてダウンロードが一向に進まない画面になることです。


更新がうまく進んでいない時の画面


下の画面のようにずーと0％でまったくすすみません。

これで2～3時間放置しても何もかわらず何かの不具合かと思い「ダウンロード停止」をしてしまいます（いや、5～6時間放置のときもあったかも）。


がしかし、今回はこの状態のまま約5時間後に完了していました。

えー！そんなことあるのか？



もちろん途中も画面の様子をみていましたが、全く％は進んでいませんでした。




何が原因なのか不明で、毎回更新に手がかかるので困ってます。



対処方法でMicrosoftの配布ツールやセーフモード起動など

方法はいくつかあるみたいですが、PC詳しくない私にとってはどれも

難しく感じてしまいました。




今、私に出来ることは

  • プログラムの更新は1プログラムずつ行う。
    まとめて数個のプログラムを更新すると失敗することが多いからです。
  • 「windows Updateで問題を解決する」を試す。
    コントロールパネル→アクションセンター→コンピューターの一般的な問題のトラブルシューティング→システムとセキュリティのwindows Updateで問題を解決するをクリックする。

次へをクリックするとオンラインで更新プログラムの確認をしてくれます。


約4時間程かかりましたが（おそらくかかりすぎかと思います）完了しました。


しばらく様子みたいと思います。



---------------2017/4/16追記-----------------

3月の更新がやっと終わったと思ったら4月の更新がやってきました！

ドキドキしながら1つ1つ選択して更新しました。
どのプログラム更新もスムーズに終わり、

 上記の2017年4月マンスリー品質ロールアップ（97.6MB）
も更新が4分程で完了しました。

 前回行った「windows Updateで問題を解決する」が良かったのではと感じてます。

 これからは、PCが重く感じたらチェックしてみたいと思いました。



ラベル: ,

2017/04/09

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


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





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

ような感覚になりますが

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



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



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

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


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


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


え！！

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




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

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

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


※またホームページは完成しても、その時代にあった新しいサイト（流行）に
変えていくのは通常よくあることです。



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



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

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


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

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



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

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

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



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


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

感想を聞いていますね。


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



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

https://mozer.io/


ラベル: , , ,

2017/04/04

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



2回目のログインです。












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

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

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





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










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

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









 ご注意

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

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




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

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











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

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















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




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











https://mozer.io/


ラベル: , , ,
登録: 投稿 (Atom)