「これから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基本形：

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の基本形：

$.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処理の基本形：

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部分

    <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>