Edited at

「これから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; を組み合わせることで、左右2列に並べることができる。


  • <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擬似クラスではなく「元の要素に対して」指定することで、上記の透明を1秒かけてアニメーションすることができる。


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