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>