6月６日　授業内容(データベース,Flexbox(フロートを使わないレスポンシブウェブデザイン))

データベースを使ったプログラム
web-design-exercise.hatenablog.jp
★
f:id:paris1204:20160606175603p:plain

f:id:paris1204:20160606175943p:plain

d.hatena.ne.jp

★

★データベースを作成する
web-design-exercise.hatenablog.jp
※順序は講師のブログ通りです

・A_Iは(オートインクリメント)を表し、自動的に1ずつid番号を振り分ける。

SQL文で操作
web-design-exercise.hatenablog.jp

・通常のSQL文
f:id:paris1204:20160606181518p:plain

SQL文を手打ちするときはSQL→ f:id:paris1204:20160606182347p:plain の中で使用する項目をクリックし実行する。

こう入力すると
f:id:paris1204:20160606182550p:plain
↓
表示でこう表示される
f:id:paris1204:20160606182710p:plain

※[ f:id:paris1204:20160606184420p:plain ]を実行してしまうとフィールド内のデータが全て消えてしまうので注意

d.hatena.ne.jp

★Flexbox(フロートを使わないレスポンシブウェブデザイン)
web-design-lesson.hatenablog.jp

flex-grow適用前
f:id:paris1204:20160606202709p:plain

flex-grow適用後
f:id:paris1204:20160606202911p:plain

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Flexboxを使ったレスポンシブWebデザイン</title>
<style>
#container {
  width: 80%;
  height: auto;
  margin: 0 auto;
}
.box {
  text-align: center;
  line-height: 100px;
}
.box1, .box5 {
  width: 100%;
  height: 100px;
  background: #FBE4EE;
  border: 4px solid #EA6094;
  box-sizing: border-box; 
}
.wrapA {
  display: flex; 
  height: 300px;
  box-sizing: border-box;
}
.wrapA > .box2 {
  order: 2;
  flex-grow: 3;/*.wrapAにあるboxが.wrapAより小さい場合にboxの横幅を伸ばす比率*/
  background: #FFFBCB;
  border: 4px solid #FFE500;
}
.wrapA > .box3 {
  order: 1;
  flex-grow: 1;
  background: #EDF7FD;
  border: 4px solid #4188C9;
}
.wrapA > .box4 {
  order: 3;
  flex-grow: 1;
  background: #F3F7E0;
  border: 4px solid #B5D22F;
}

@media screen and (max-width:797px){
  .wrapA {
    display: block;
    height: auto;
  }
  .wrapA>.box {
    /*  文書順に戻す  */
    order: 0; 
    width: auto;
    height: 100px;
  }
}
</style>
</head>
<body>
<div id="container">
<div class="box box1">BOX1</div>
<div class="wrapA">
<div class="box box2">BOX2</div>
<div class="box box3">BOX3</div>
<div class="box box4">BOX4</div>
</div><!-- /.wrapA -->
<div class="box box5">BOX5</div>
</div><!-- /#container -->
</body>
</html>