「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」まとめ

# HTML、CSS、JavaScriptのお勉強まとめ

学習書籍「これからWebをはじめる人のHTML&CSS、JavaScriptのきほんのきほん」
ソース：https://github.com/tseno/Basic_HTML_CSS_JavaScript

## 第2章 申し込みフォームの作成

- cssファイルの先頭に`@import url(sanitize.css)`を置くとcssがリセットされる。または、`@import url(https://cdnjs.cloudflare.com/ajax/libs/10up-sanitize.css/4.1.0/sanitize.min.css);`
- `margin: 10px auto;` のように、左右指定をautoにすると中央寄せされる。
- `margin` ：要素の外の余白、`padding`：要素の中の余白。
- `box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);` でボタン下部に影、ぼかしの演出。
- `<label>` はinlineであるため、marginが効かない。`display: block;`を指定する必要がある。
- sanitize.cssは、version 4.1.0と5以降で、レイアウトが変わることがわかった。この本は4.1.0でやったほうが良さそう。

## 第3章 スマートフォン対応

- `<header>` や `<section>`で、セクションを分けることができる。（その他に main, footer nav などもある）
- `float` で要素を回り込ませることができる。`float: left;` で、右に回り込ませる。(右に並べる）
- `clear` で回り込みを解除する。`clear: left;` のように解除したいプロパティを指定する。
-   `width: 50%;` `float: left;` を組み合わせることで、左右２列に並べることができる。
- `<ol>` 番号付き `<ul>` 番号なし `<li>` リスト。
- `.clearfix:after {  content: " ";  display: table;  clear: both; }` クラスを使うことで、擬似的に最後に空白を配置して、後ろの要素を広げることができる。(floatの取り扱いが難しいところ)
- Webフォントを使うには、`@import url('https://fonts.googleapis.com/css?family=Sriracha');` の様にcssの先頭に追記して、 `font-family: 'Sriracha', cursive;` と指定する。
- `@media only screen and (max-width:600px) {}`で、囲むことにより、スマートフォン対応のcssを書くことができる。
- レスポンシブ対応にするには `width` ではなく、`max-width`を指定すると、幅が可変になる。（リキッドレイアウト）
- `.description img:hover { opacity: .5; }` のように、`:hover`擬似クラスを使うと、ホバー時に半透明にすることができる。
- `transition: opacity 1s ease 0s;` をhover擬似クラスではなく「元の要素に対して」指定することで、上記の透明を１秒かけてアニメーションすることができる。

## 第4章 BootStrap

- `<div class="row"><div class="col-sm-6"></div><div class="col-sm-6"></div></div>` がBootstrapの基本形。
- 上記の`sm`は、ブレイクポイントを示す単語で、xs sm md lgの順に大きくなる。
- formコントロールのclassは、`form-control` を付け、 `form-group` のclassを付けたdivタグで囲む。
- チェックボックス： `<div class="checkbox"><label><input type="checkbox" name="q1" value="html">HTML</label></div>` divとlabelで囲む。nameは揃える。
- ラジオボタン： `<label class="radio-inline"><input type="radio" name="q2" id="q2_1" value="1">理解できなかった</label>` labelで囲む。nameは揃える。
- ラジオボタンをレスポンシブルにするには、`display: block; margin: 0 !important;` を入れる。
- テキストエリアの横幅は、`col`だと幅が固定してしまうので、`width:100%;`などで指定する。
- 必須項目は、`required` 属性を追加する。`<span class="label label-danger">必須</span>`のラベルも追加する。

## 第5章 JavaScript

- Javascriptで単に画面に文字列を表示するには、`document.write('text')` を使う。
- 任意Dateオブジェクトの取得：`var today = new Date(2017, 1, 1);`
- 日付文字列の取得：`var today = new Date(); var todayHtml = today.getFullYear() + '/' + (today.getMonth()+1) + '/' + today.getDate();`

## 第6章 イベントドリブン

- 画面の項目を変更するときは、 `document.getElementById('timer').innerHTML = '00:01:00';` のように行う。
- クリックされたときに処理をするには、`document.getElementById('start_stop').addEventListener('click', function() { /* 処理 */ });`  に処理を書く。
- 上記と同様に、メソッドを動かすには、`document.getElementById('start_stop').addEventListener('click',メソッド名);`  と書く。
- `タイマーID = setInterval(goTimer, 10);`で、10msごとにgoTimerが呼ばれる。
- 上記で、メソッドにパラメータを渡すときは、ダブルクォーテーションで囲む。
- タイマーを止めるときは、`clearInterval( タイマーID );`
- 要素のテキストの判定は、`if (this.innerHTML === 'START') { /* 処理 */ }` 
- 要素のテキストの書き換えは、`this.innerHTML = 'STOP';`
- 要素のclassの書き換えは、`this.classList.remove('btn-default'); this.classList.add('btn-danger');`

## 第7章 Ajax

- ヘッダの上部固定css：`header {position: fixed;top: 0;z-index: 100;}`
- img要素を作成し、images配列のJSONの先頭のPathを取得し、id=img_unitに貼り付ける：`img = document.createElement('img');img.setAttribute('src', images[0].path);document.getElementById('img_unit').appendChild(img);`
- JavaScriptのAjax基本形： 

```js
var ajax = new XMLHttpRequest();
ajax.open('GET', 'https://h2o-space.com/htmlbook/images.php');
ajax.responseType ='json';
ajax.send(null);
ajax.onreadystatechange = function() {
  if (ajax.readyState === XMLHttpRequest.DONE && ajax.status === 200) {
    for (var i = 0; i < images.length; i++) {
      var data = this.response[i];
      img = document.createElement('img');
      img.setAttribute('src', data.path);
      caption = document.createElement('div');
      caption.className = 'inner';
      caption.innerHTML = '<p>' + data.caption + '<span>' + data.name + '</span></p><';
      div = document.createElement('div');
      div.className = 'photo';
      div.appendChild(img);
      div.appendChild(caption);
      document.getElementById('img_unit').appendChild(div);
    }
  }
};
```

- JQueryの要素の設定：`$('#img_unit').html('ここに画像リストが表示されます').css('margin-top', '100px');` 
- JQueryの要素の取得：`$('#img_unit').html();`
- JQueryのAjaxの基本形：

```js
$.getJSON('https://h2o-space.com/htmlbook/images.php', function(data) {
  data.forEach(photo => {
   $('<div class="photo"></div>')
   .append('<img src="' + photo.path + '">')
   .append('<div class="inner"><p>' + photo.caption + '<span>' + photo.name + '</span></p></div>')
   .appendTo('#img_unit');
  });
});
```

- Vue.jsはAjaxの機能が無いため、JavaScriptかJQueryのAjaxの機能を使う、他にもaxiosなどのライブラリもある。
- Vue.js + JQueryのAjax処理の基本形：

```js:JavaScript部分
    var app = new Vue({
      el: '#img_unit',
      data: {
        Photos: []
      },
      created: function () {
        var self = this;
        $.getJSON('https://h2o-space.com/htmlbook/images.php', function (data) {
          self.Photos = data;
        });
      }
    });
```

```html:HTML部分
    <div id="img_unit">
　　　 <!-- for文 Photosから順にPhotoを取り出す  -->
      <div class="photo" v-for="Photo in Photos">
        <!-- 属性には、:srcのようにコロンをつける -->
        <img :src="Photo.path">
        <div class="inner">
        <!-- 出力項目には、{{ }} で囲む -->
          <p>{{Photo.caption}}<span>{{Photo.name}}</span></p>
        </div>
      </div>
    </div>
```