HTML/CSS/JavaScriptで挑むWebコンペ事前勉強会！

# 概要

2017/6/18 に開催した勉強会にて利用したスライドの一般公開用の記事です。

※作成者は @kyunnnn とは別人物です。
次のページからが内容です。

---

## はじめに
当ハンズオンは以下に該当する方を対象にHTML画面の作成コンペについて説明＆スキルアップを目的としております。

* HTML/CSSを知らないが書いてみたい方
* JavaScriptを使ったアプリケーションを制作してみたい方
プログラミングの知識はあるが実践の機会がなく、実践の機会を必要としている方

---

## コンペで制作するもの

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117615/8933fb9e-a604-cda0-f8dc-41af6ada7f07.png)



ペペロンチーノ採点アプリ
紳さんがFacebookに日々投稿しているペペロンチーノの採点結果をグラフ化するアプリ

---

## アジェンダ

1. HTML/CSS/JavaScriptについて
2. codepenの使い方
3. コンペで制作するHTML解説
4. 制作内容についてのアイデア出し
5. HTML制作作業
6. 今日時点での成果物発表

---

## HTML/CSS/JavaScriptについて

---

## HTMLとは

* Webページを作るための言語
* 文章だけでなく、画像や動画の掲載も可能
* ページのレイアウトのカスタマイズも可能

---

## サンプルページ
※一般公開用に差し替えてます

https://codepen.io/ksyunnnn/pen/rwyWPE

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117615/2c0089d3-bd92-4fda-29c7-47b69a9b2953.png)

---

## サンプルページ
※一般公開用に差し替えてます

https://codepen.io/ksyunnnn/pen/rwyWPE

![キャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/117615/bd2e0d80-a0eb-6f53-1c86-52d86ba07eb9.png)

---

## CSSとは

* Webページの見栄え・スタイルを設定する
* 字の色、画像サイズ、表示位置など
* PC、スマホ別に設定することも可能

---

## サンプルページ
※一般公開用に差し替えてます

https://codepen.io/ksyunnnn/pen/rwyWPE

![image.png](https://qiita-image-store.s3.amazonaws.com/0/117615/2c0089d3-bd92-4fda-29c7-47b69a9b2953.png)

---

## Javascriptとは

* HTMLやCSSでは表現できないユーザーの動きに応じたものを作ることが可能
* スライドメニュー、ページトップにスクロールするボタンなど
* 四則演算などの計算も出来る

---

## プチワーク

※この記事では割愛

---

## CodePenの使い方

---

※すいません。これも割愛します。
この記事をみて導入後、次へ進んでください！

https://techplay.jp/column/103


---

## コンペで制作するHTML解説

---
## コンペで制作するHTML解説

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>
	-> グラフを作成するためのJavaScriptライブラリ
</head>
<body>
<div align="center"> <h1>ペペロン紳さんスコア</h1></div>
	-> 見出し(h1タグ)
<div align="center"><canvas id="lineChart" height="450" style="width: 100%; height: 450px"></canvas></div>
	-> グラフ表示領域(canvasタグ)
</body>
```

---

## コンペで制作するHTML解説

```html
var pprn = {
  '3/13': 27,
  '3/14': 5,
  '6/2': 214};
	-> グラフの横軸(日付)と縦軸(点数)の情報

おまけ：
  var data = {
      labels: ['3/1','4/1','5/1'],
      datasets: [
          {
              data: [10,20,30]
          }
      ]
  };
	-> グラフの横軸と縦軸はこんな書き方でもセットできます
```


---
## コンペで制作するHTML解説

```html
var data = {
      labels: [],
      datasets: [
          {
              label: "hoge",
              fillColor: "rgba(255,0,0,0.5)",
              strokeColor: "rgba(0,255,0,0.5)",
              pointColor: "rgba(0,0,255,0.5)",
              pointStrokeColor: "#ff0",
              pointHighlightFill: "#0ff",
              pointHighlightStroke: "rgba(220,220,0,0.1)",
              data: []
          }
      ]
  };
-> グラフの色設定。rgbaの記述は、色設定(RGB)に透明度(0.0〜1.0)の設定も可能。
　カラーコードについて：http://www.netyasun.com/home/color.html

```

---
## コンペで制作するHTML解説

```html
  var options = {
//縦軸の目盛りの上書き許可。これ設定しないとscale関連の設定が有効にならないので注意。
    scaleOverride : true,
//縦軸の区切りの数
    scaleSteps : 16,
//縦軸の目盛り区切りの間隔
    scaleStepWidth : 10,
//縦軸の目盛りの最小値
    scaleStartValue : 0,
//Y軸の表記（単位など）
    scaleLabel: "<%=value%> 点"
  };
	-> オプション設定
```

---

## 制作内容についてのアイデア出し

---

## 制作内容についてのアイデア出し

* 実装したい機能を挙げていきましょう
* 画面UIを描いてみましょう(紙でもOK！)
* 画面UIの実装についてレビュー＆フォロー

--- 

## HTML制作作業

## 今日時点での成果物発表

---

## 本日は長い時間お疲れ様でした！