今日がインターンシップの初日でした！
今回の全体的な最終成果物が
「お問い合わせフォームをつくる」です。
そこを目指してこれから毎回頑張っていきます。

そして初めて学んだ単語がありました。
まずは「画面遷移図」

これは、画面の構造を表す図のひとつで、全体をざっくりと書きます。
どのようにページが移動するのか、
画面同士がどのような関連性をもっているのか
ということを示した図のことです。
基本的にはデザインは書きません。

 

次に「紙芝居」
タイトルにありますが、今回つくった紙芝居は
小さい頃に読んでもらったような紙芝居ではないんですよ！！

ここでの紙芝居というのは、
画面デザインと遷移のみを
実際に動くかたちでつくったものをいいます。
これらのことを知り、今日の作業がスタートです。

 

今日は、お問い合わせフォームの紙芝居を作成しました！
具体的な目標は、
１、画面のHTML
２、ページを行き来できる
３、画像をいれる
４、CSSで見た目を整える
です。
HTMLもCSSもすこーしだけやったことがあったので
比較的にサクサクと進むことができました！

 

これで今日の作業は終了です！
明日に続く！

今日は、「初日につくった紙芝居をデザインする」
ということをやりました。
なのでBootstrapを始めに学びました。

BootstrapはCSSのフレームワークです！
あらかじめCSSが用意されているので、
そこから使いたいものを引っ張ってくるだけです。便利！
・デザインできない人が簡単にデザインすることが出来る
・早くデザインが作れる
・１つのソースコードでいろいろなデバイスの対応ができる
などという利点があります。

これならデザインセンスが０の妹でも
姉みたいにきれいなデザインを作り、
使いこなすことができるのではないかと
わくわくして挑みましたが、これが撃沈。
終始質問攻めをしていたのにも関わらず口ぽかんでした。
そんな妹を横目に、
すらすらソースコードを書いていく姉。流石すぎます。

まず、妹が撃沈した理由のひとつとしてあげられるのが
用語を知らないということです。
このタグはHTMLで使われているのか、
CSSで使われているのか、
はたまた Bootstrapで使われているのか
さっぱりでした。
どのコードがどこに効いているのかがわからなかったのです。

わからないことを質問攻めして
なんとなく理解したことと、新しくわかったことがありました。

• <div>
  何かをかこみたいときに使う。特徴はなにもない。
• <p>
  <p>で囲むと上下に１行空きができる
• <br>
  文章を改行したいときに使う
  →レイアウトに隙間をあけたいと思ったときは、
  　marginなどを使う
• <id>
  id名は何種類でもいい
  ただ、同じid名は１ページに１回しか使えない
• <class>
  class名も何種類でもいい
  さらに、同じclass名は１ページに何回も使っていい
  classは複数指定できる（例：<class=“btn1 btn”>
• 中央寄せ
  要素自体を中央寄せするのか、
  テキストを中央寄せするのかが違う
• Grid System
  Bootstrap上では１行を12列に分割している
• レスポンシブ
  画面サイズによってデザインをかえること

ざっとこんな感じです。

Bootstrapの中の用語はたくさんあって
今は全部把握しきれていない状態です。
全部調べていこうとしたときに神の声が聞こえました。

「とりあえず、
　ネットに転がってるソースコードをコピペしていじっていいから、
　そこから少しずつ動かしていって、理解していくことが大切だよ」

なるほど！

妹「コピペしていいんだって！（安心）」
姉「それからちゃんとアレンジしなきゃダメだよ！笑」

早速、デフォルトのソースコードをいただき、動かすことにしました！
上に書いたような用語を理解するのに時間がかかりましたが、
ここからは案外なんとかなりそう！いじるだけだし！

妹「できた、、、やった、、、」
達成感と疲労感とでいっぱいです笑
姉はBootstrapを使わず、自力でCSSを書き続けてました；；

今日は、姉がすらすら出来すぎていて
妹との差が激しすぎました。

妹「明日は差がないように努力します。頑張ります。」
姉「楽しかった。ずっとやっていたい」