Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
105
Help us understand the problem. What is going on with this article?
@tseno

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

More than 1 year has passed since last update.

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>
105
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
tseno
Java、Kotlinのフリーランスエンジニア

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
105
Help us understand the problem. What is going on with this article?