​​4.1 HTMLの課題と、次に向けて

​​本日の復習・HTMLの理解を深める

​​
​​サイトの模写をするとHTMLの理解が深まります。
​​下記のサイトのHTMLのみを
​​すでにあるHTMLを見ずに、文書構造を考えて、HTMLのみを模写してみましょう。
​​
  • ​​アウトライン・文書構造を考える
  • ​​CSSやclass、divのことを考えずに文書構を考えてHTMLを組む
  • ​​実際のすでに組んであるHTMLはうまく作られているとはかぎりません
  • ​​あまり参考にせずにマークアップしてみましょう。
  • ​​HTMLが組み終わったら、classをつけてみましょう。
​​
​​XeoryExtension
​​https://xeory.jp/extension/
​​
​​FLOWER
​​
 
FLOWER｜かわいいが届くお花便
あなた好みのお花がポストに届く定期便アプリ
flowr.is
FLOWER｜かわいいが届くお花便 • flowr.is
​​
​​
​​実際に組んでみた解説
​​
 
サイト模写「flower」について - clover.blue
学校で生徒たちに模写をしてもらいました。
clover.blue
サイト模写「flower」について - clover.blue • clover.blue
​​
​​Progate
​​
 
Progate(プロゲート) | Learn to code, learn to be creative.
Progateはオンラインでプログラミングを学べるサービスです。プログラミングを学んでWEBアプリケーションを作ろう。
prog-8.com
Progate(プロゲート) | Learn to code, learn to be creative. • prog-8.com
​​
​​
​​
​​

​​オリジナルWebサイトのプランニング・構成を考える

​​ 
​​オリジナルのWebサイト制作に挑戦しましょう。
​​
​​「プランニングシート.xlsx」を埋め、
​​手書きでワイヤーフレームを書いてみましょう。
​​
​​
 
Google Drive icon
https://docs.google.com/spreadsheets/d/11EKI3gnmyo544crBhwEQu0-vNJwCjWGa/edit#gid=1657608536
Shared on Google Drive
docs.google.com
​​
​​https://docs.google.com/spreadsheets/d/11EKI3gnmyo544crBhwEQu0-vNJwCjWGa/edit
​​ 
​​提出方法：提出は特になし
​​※Facebook上へご投稿いただいたの相談、
​​レッスン時にお持ちいただいてのご相談はもちろん可能です！
​​
​​

​​CSSの予習をする

​​​+5. CSSの考え方を覚えよう​ 
​​
​​