htmlやjsのreset()は、ある意味リセットではない!

この前、酔って携帯を無くし、必死こいて探しましたが見つかりませんでした。
そしたらなんと、自宅の冷凍庫に冷凍保存してました。

どうも、こんなPONKOTSUです。(反省します)

 

今回は久しぶりにフロントエンドについてかきます。

htmlのinput[type=“reset”]は
初期値があれば、その初期値にリセットされる。

※jquery,jsのreset()も同様。

フォームなんかで、
選択済みのチェックボックスや入力済みの入力値を
\ 一括でリセットできるボタンがほしい /
って時があると思います。

そんなとき、こんなコード書くと思います。
(input[type=”reset”]というのがあるのをこの時知りました。)
htmlだったら…

  <input type="reset" value="リセットボタン">

jsだったら…

<button id="js_reset">jsのreset()</button>
<script>
 var js_rese_btn = document.getElementById('js_reset');

 js_rese_btn.addEventListener("click", function(){
   document.form.reset()
 }, false); 
</script>

 

これで、リセットはできるんです。
ただ、私の想定と違う時がありました。

それは、、、
リセット対象のformにvalueやselected,checkedなどの
初期値を設定している時です。
→値が「空」になるわけではなく、設定した初期値になる

 

デモはこちら。
https://jsfiddle.net/ocq0auwn/12/

 

ソースは感じ

<form action="#" name="form1">
  <!-- 「キン肉太郎」と入力して、リセットボタンを押すと、「山田孝之」になる。--> 名前:
  <input class="input_text_name" type="text" value="山田孝之" >
  飲んだお酒:
  <select class="select_sake">
    <option value="">選択してください</option>
    <option value="1">ビール</option>
    <option value="2">ハイボール</option>
    <option selected="selected" value="3">飫肥杉</option>
    <option value="4">もえしゃん</option>
    <option value="5">カプモーニ</option>
  </select>
  <input class="check_sake" checked="checked" type="checkbox" >お酒はほどほどにします。
  <input type="reset" value="htmlのリセット">

  <button class="jquery_reset">jQueryのreset()</button>
  <button id="js_reset">jsのreset()</button>
  <button class="jquery_reset_perfect">完全リセットしたい時に押すボタン(jQuery)</button>

jsはこんな感じ

/* JS */
var js_rese_btn = document.getElementById('js_reset');
js_rese_btn.addEventListener("click", function(){
  document.form1.reset()
}, false);

/* jQuery */
$('.jquery_reset').on('click', function(){
  $('form').get(0).reset();
  //document.form1.reset(); //jsだとこれ
}); 

//完全リセット
$('.jquery_reset_perfect').on('click', function(){
  $('.select_sake').find('option:selected').prop('selected', false);
  $('.input_text_name').val('');
  $('.check_sake').prop('checked', false);
}); 

セクショニングって?

 

HTML5からsectionタグが追加されましたね!

それに伴い、セクショニング  という言葉をよく見かけます。

セクショニング  について書きまーす。

 

参考:ここここここ

 

 

セクショニング

文書構造を明確にする考え方のこと。

<要素>

セクショニング・コンテンツ、ヘッディング・コンテンツ

これらの要素を用いてセクショニングすることで、文書は正しいアウトラインを得ることができる。

 

 

セクショニングの歴史

HTML5以前

・divタグとhタグを使って、セクショニングしていた。

・どんな内容でもdivで1つのセクションとしており、

内容を見ないと違いがわからない。

・ロゴなどのサイト全体に関連する情報のセクションを示す方法がない。

・暗黙的にセクショニングした時、どこからどこまでが1つのセクションなのか明確にわからない場合があった。

・文書全体で、hタグのレベルをルール付けする必要があった。

 

これらの問題から、、、

HTML5

・divタグは基本的に使わず、sectionなどのセクショニング・コンテンツ要素を用いる

・section, article, aside, navタグの誕生

・nav, header, footerタグの誕生

・正確なセクション指定と見出しの指定ができるようになり、

文章構造のアウトラインを明確に示すことができる。

・文書全体だけでなく、セクションでのhタグのレベルをルール付けする必要がある。

(同じ階級のhタグをページ内に複数指定することができるようになった。)

 

 

 

 

まとめ

HTML5の目的は、

一つのセクション内に複数の見出しを入れるのではなく、

見出しごとにセクションを明示的に包含させていくことで

文章構造を明確にするためなんだなと理解。

viewportについて

 

viewport

ってスマホ対応の時使うレスポンシブル対応のやつだな、

っということしかわからなかっための勉強します!

 

 

参考:http://ichimaruni-design.com/2015/01/viewport/

 

 

結論

・スマホサイトがある場合

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

 

width=device-width : 幅をデバイスごとにサイズを切り替えてくれる!

 

initial-scale:初期のズーム倍率

 

※device-width  ⇄ 初期のズーム倍率が 1 になる。(initial-scale=1.0)

 

minimum-scale=1.0とすることで最小倍率を指定しているが、初期ズーム倍率と等しいため、縮小できない状態。

なぜ、縮小できなくするのか謎・・・。

Yahoo!の天気サイトもしてた・・。これ↓

<meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no”>

user-scalable=noってしてるのに、拡大できるやん?なんで?

 

と、思ったらいろんなサイト比較してるとこ発見!

 

 

しかし、よくわからない。

maximum-scale=1.0,minimum-scale=1.0,user-scalable=no

ってどうなれば正しい挙動なの?

 

・PCサイトしかなく、SPで最適化したい場合

<meta name="viewport" content="width=960(コンテンツの大きさ)">

これすれば、横の余白がなくなる。

 

HTML5ではaタグ内にdivといったブロック要素と呼ばれていたものをネストできるようになった

 

タイトル通りです!

ネストのルールって難しいです。

 

 

ulにネストしていいのはliだけなのに、liの中はなんでもネストしていいとか・・・。

HTML5以前では、ブロック要素やインライン要素を使ってのルールがありました。

が、

HTML5からブロック要素インライン要素といった分類がなくなりました。

 

そのかわり(?)としてコンテンツモデル

という概念ができました。

 

コンテンツモデル:各要素が内包できるコンテンツ

 

HTML要素は、0個以上の以下カテゴリーに属しています。

  • フローコンテンツ
  • メタデータコンテンツ
  • セクショニングコンテンツ
  • ヘッディングコンテンツ
  • フレージングコンテンツ
  • エンベッディッドコンテンツ
  • インタラクティブコンテンツ

 

これにより

今まで「インライン要素」と呼んでいた要素が

フレージングコンテンツとなったようです。

 

 

本題に戻ると・・・

a(アンカー)要素の仕様を見ると、

コンテンツモデル…..transparent(透過)

↑親要素のコンテンツモデルがそのまま継承されるという意味

 

 

 

例えば、

<p>

  <a href=”#”>リンク</a>

</p>

・a要素の親はp要素である。

・p要素のコンテンツモデルはフレージングコンテンツである。

→a要素にネストできる要素は

<span>,<a>,<img>といった、フレージングコンテンツとなる。

 

 

また、

<div>

  <a href=”#”>リンク</a>

</div>

・a要素の親はdiv要素である。

・div要素のコンテンツモデルはフローコンテンツである。

→a要素にネストできる要素は

メタデータコンテンツの一部を除いたほぼすべての要素となる。