イベントの追加 addEventListener() - JavaScript

クリックしたときに何か処理をしたいときとかに使う
イベントに対しての処理を追加するにはaddEventListener()で追加する

element.addEventListener(イベント名, 呼び出す関数);

イベント名はclickやkeyupなどたくさんある

例）ボタンをクリックしたときにアラートを表示

const alertTest = (event) => {
  alert("click！");
};

document.getElementById("button").addEventListener("click", alertTest);

See the Pen ZxPmZv by tamago (@tamago324) on CodePen.

参考文献

• EventTarget.addEventListener() - Web API インターフェイス | MDN
• 三章第二回　イベントリスナ — JavaScript初級者から中級者になろう — uhyohyo.net

イベントのキャンセル event.preventDefault() - JavaScript

例えば、inputやtextarea内でtabキーを入力したとする。するとフォーカスが外れる
もし、無効化したい場合、event.preventDefault()を使用すればいい

const disableTab = (event) => {
  if (event.key === "Tab") {
    event.preventDefault();
  }
};

/* キー押下時のイベントに追加 */
document.querySelector(".editor").addEventListener("keydown", disableTab);

event.preventDefault()はイベントが無効にできる場合、無効にするメソッドらしい
tabキーにはデフォルトで「次のフォーム部品にフォーカスを移動する」というイベントがあるということなのかな？

例）tabキーを押した時のフォーカス移動を無効化

See the Pen textareaでtabキー入力時のフォーカス移動無効化 by tamago (@tamago324) on CodePen.

参考文献

• event.preventDefault - Web API インターフェイス | MDN
• [JS] Tabキーによる移動を禁止してTabを入力する。 - Qiita
• document.querySelector() - Web API インターフェイス | MDN

親要素の横幅いっぱいに表示 - CSS

親要素の横幅いっぱいに表示しようと思ったときに、つまづいたのでメモ

• box-sizing: border-box;を使う
  paddingをborderもwidthに含める
• marginではなく、paddingで調整する
  marginはwidthに含まれていないため

<div class="main">
  <textarea class="editer"></textarea>
</div>

* {
  /* すごい重要！！ */
  box-sizing: border-box;
}

.editer {
  width: 100%;
  background-color: red;
}

.main {
  /* paddingで調整 */
  padding: 10px;
}

See the Pen 親要素の横幅いっぱいに表示 by tamago (@tamago324) on CodePen.

横幅いっぱいに表示できた！！！

親要素(.main、bodyタグ、htmlタグ)をwidth: 100%;にしなくてもいいのかな？というかなんでした方がいいと思ったのだろうか...

参考文献

• 横幅を100%にした際、親ボックスからはみ出すのを防ぐ [ホームページ作成] All About

比率を変えずに画像をいっぱいに表示 - CSS

background-sizeを使うことで表示するときの大きさ設定ができる
Emmentのショートカットはbgsz
設定できる値は以下の通り

値	説明
contain	縦横の比率を変えず、切り取りせずに、できるだけ大きく表示(もし、余白がある場合、繰り返して表示される)
cover	縦横の比率を変えず、必要であれば切り取りして、できるだけ大きく表示(余白を作らない)

参考文献

• Progate
• background-size - CSS: カスケーディングスタイルシート | MDN

role属性 - HTML

そのタグの役割が何なのかを明示することができる

• application: アプリケーション
• form: 検索以外のフォームを含む領域
• search: 検索項目を含む領域

<div role="search">
    <form action="" class="search-form">
        <input id="" type="text" name="">
        <button type"submit">検索</button>
    </form>
</div>

参考文献

• レイアウトで使うランドマークのrole属性【アクセシビリティ】【WAI-ARIA】 - E-riverstyle Vanguard
• HTMLに「role属性」を付与してWebアクセシビリティの向上を目指す | 8bit モノづくりブログ｜Web制作、Webサービスに関するコラム｜東京都渋谷区のWeb制作会社 株式会社8bit

autocapitalize属性 - HTML

IOS端末でautocapitalize属性はユーザーが入力した文字列の先頭の文字を大文字にするかどうかの設定
offにしておけば、大文字にならない(初期値ではoff)

<input type="text" autocapitalize="off">

IOS端末だとなるのかな？

See the Pen QmJzXL by tamago (@tamago324) on CodePen.

追記：iPhoneから打ってみたけど、自動でならなかったよ！？なにこれ...

値の種類

値	説明
off	機能無効
none	機能無効
on	先頭を大文字に変換
sentences	文章の先頭を大文字に変換
words	単語の先頭を大文字に変換
characters	文字の先頭を大文字に変換

参考文献

• autocapitalize=mode - 自動大文字入力制御
• autocapitalize - HTML | MDN

レスポンシブデザインで気にすること - HTML

Progateに書いてあったことを自分なりにまとめてみる

• 画面サイズによって横並びにするコンテンツ数を変更する
• paddingとborderもwidthに含める
• width: 100%;にする
• floatの解除
• フォントサイズもレスポンシブ化
• 最大の横幅を指定する

画面サイズによって横並びにするコンテンツ数を変更する

例）通常時は4つ、1000px以下のときは2つ

通常時：25%
1000px時：50%

1000pxのときも25%にしてしまうと、小さくなってしまうため

/* 通常時 */
.item {
  width: 25%;
}

/* 〜1000px時 */
@media(max-width: 1000px) {
  .item {
    width: 50%;
  }
}

See the Pen 画面サイズによってコンテンツの横幅を変える by tamago (@tamago324) on CodePen.

paddingとborderもwidthに含める

コンテンツを横並びに敷きつめるときに、paddingとborderを設定する場合、コンテンツの合計の横幅が100%を超えてしまう
対処法として、box-sizingプロパティにborder-boxを指定する。こうすることで、要素のwidthにpaddingとborderが含まれるようになる

width = width + padding + border

※ marginは含まれないことに注意する

また、box-sizingをborder-boxにする場合、すべての要素に対してスタイルを適用すること
表示がおかしくなることがあるらしい

* {
  box-sizing: border-box;
}

box-sizingを指定しない場合

See the Pen レイアウト崩れ by tamago (@tamago324) on CodePen.

box-sizing: border-box;にした場合

おさまってる！！！

See the Pen レイアウト崩れの対処法(box-sizing: border-box) by tamago (@tamago324) on CodePen.

widht: 100%;にする

一番上の要素の横幅を100%にしておけば、画面サイズによって横幅が決まるようになる

.container {
  width: 100%;
}

floatの解除

すべての子要素にfloatが設定されていると、親要素の高さは0pxになってしまう。そのため、子要素の高さに合わせて親要素も設定してくれるようにfloatを解除しないといけない

float解除についてはここにかいた

親要素にdisplay: flow-root;をつけるのが簡単でいいかも

.contaienr {
  display: flow-root;
}

フォントもレスポンシブ化

フォントサイズもレスポンシブ化する必要がある

画面が小さくなったら、文字も小さくする

最大の横幅を指定

パソコンで2000pxとかの画面サイズで表示した場合、コンテンツを%で指定していると、横長になってしまう
横幅の最大値を設定しておけば、横長になりすぎることがなくなる！！

max-widthプロパティで指定できる

.container {
  max-width: 1200px;
}

参考文献

• Progate
• 【CSS】box-sizing:border-boxの使い方｜効かない時は？