日付選択機能が拡張しやすそうというで理由でblueprintというUI Toolkitを使っているのだが、実際に使ってみて見た目を変えたいなと思った所、結構癖があったのでメモしていく。

blueprintのDatePickerはReact-Day-Pickerのラッパー的なもの

blueprintのDatePickerはReact-Day-Pickerをベースにしていて、プロパティ経由で簡単にReact-Day-Pickerのプロパティを指定することができる。

ので、見た目を変えるときはReact-Day-Pickerの機能を使う必要が出てくる。

React-Day-Picker Styling

export function Test() {
  const customProps = { ... } //React-Day-Pickerの設定
  return <DatePicker dayPickerProps={customProps} />
}

スタイルを変えるときに取ることが出来る方法は以下のものがある。

ここで注意するのが、日にちに対するスタイルの指定とUI全体のスタイルの指定の二種類ある
(classNameも用意されている)

カレンダーの日にちのスタイルを変更する

• modifiers
• modifiersStyles

DayPicker全体のスタイルを変更する

• classNames

日にちのスタイルを変更する

React-Day-Pickerではある日にちをいじりたいときはmodifiersプロパティを使って指定する形をとっている。

その際グループ化したい日にちのパターンとその名前という形で設定していく。

設定したグループの日にちにはDayPicker-Day--<グループ名>という名前のCSSクラスの名前が与えられるので
それに対してスタイルを設定すると好きな見た目に変更することが出来る。

もちろん自動生成されたCSSクラス名をCSSファイルに書かないといけない訳ではなく、modifiersStylesにグループ名をキーをとしたinline-Styleを設定すればいい。

Matching days with modifiersにあるサンプルコードをちょっと変えたもの。

import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

const birthdayStyle = `.DayPicker-Day--highlighted {
  background-color: orange;
  color: white;
}`;

const modifiers = {
  highlighted: new Date(2018, 8, 19),
};
const modifiersStyles = {
  highlighted: {
    color: '#FF0000'
  }
}
export default function MyBirthday() {
  return (
    <div>
      <style>{birthdayStyle}</style>
      <DayPicker
        modifiers={modifiers}
        modifiersStyles={modifiersStyles}
        month={new Date(2018, 8)} />
    </div>
  );
}

日にちの指定の仕方

グループを作る際の日にちの指定には以下の種類があるので適当に使い分ける。

グループは複数指定でき、ある日にちが二つ以上のグループにあるときはその全てが適応される。

• from/toキー この二つに与えたDateオブジェクトの範囲内の日にちをグループ化する
• beforeキー 与えた日にちより前のものをグループ化する
• afterキー 与えた日にちより後のものをグループ化する
• daysOfWeek 指定した曜日でグループ化する。曜日は0から6の範囲を取り、それぞれ日曜から土曜に対応している。配列で渡すと複数の曜日を指定できる。
• function(day: Date):boolean グループ化する日にちのときはtrueを返すDateオブジェクトを受け取る関数

const from_to = [
  from: new Date(2018, 8, 19),
  to: new Date(2018, 9, 19),
]
const before_after = {
  after: new Date(2018, 9, 1),
  before: new Date(2018, 10, 1)
}
const daysOfWeek = {
  daysOfWeek: [0] // 日曜日
}
const func = (day) => { return day.getDate() % 2 === 0}

export default function Grouping() {
  return (
    <div>
      <style>{birthdayStyle}</style>
      <DayPicker
        modifiers={[from_to, before_after, daysOfWeek]} />
    </div>
  );
}

用意されているグループ

ちなみにtodayとoutsideが予め用意されており、それぞれ今日の日にちと現在の月以外の日にちが対象になる。

イベントとの組み合わせ

グループはDayPickerのイベントが起きたときに日にちを識別する目的にも使うことが出来る。

グループ情報を参照することが出来るイベントにはmodifiersがオブジェクトとして引数に渡されていて、
そのオブジェクトには所属しているグループの名前をboolean型として持っている。

//ドキュメントから拝借
import 'react-day-picker/lib/style.css';

export default class EventHandlers extends React.Component {
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
    this.handleDayMouseEnter = this.handleDayMouseEnter.bind(this);
  }

  handleDayMouseEnter(day, { firstOfMonth }) {
    if (firstOfMonth) {
      // Do something when the first day of month has been mouse-entered
    }
  }

  handleDayClick(day, { sunday, disabled }) {
    if (sunday) {
      window.alert('Sunday has been clicked');
    }
    if (disabled) {
      window.alert('This day is disabled');
    }
  }

  render() {
    return (
      <DayPicker
        disabledDays={new Date()}
        modifiers={{
          sunday: day => day.getDay() === 0,
          firstOfMonth: day => day.getDate() === 1,
        }}
        onDayClick={this.handleDayClick}
        onDayMouseEnter={this.handleDayMouseEnter}
      />
    );
  }
}

と、かなり汎用性があるものになっている。

DayPicker全体のスタイルを変更するときはclassNames用のテンプレートを使おう

日にちについてはかなり柔軟なカスタマイズが出来るようになっているが、
それ以外の例えばヘッダー部分とかの背景色を変更したいときはclassNamesプロパティを使う。

classNamesにはDayPickerで使われる要素全てにCSSを指定する形になっている。

各要素には使用するCSSクラスを指定するのだが、要素の数は結構あるので公式から用意されているテンプレートを書き換えるのがいいと思う。

テンプレートはこちら react-day-picker/src/classNames.js

テンプレートのインターフェイスはimport {ClassNames} from 'react-day-picker'からインポート出来る。

function makeClassNames(config) {
  const DEFAULT = {
    container: 'DayPicker',
    wrapper: 'DayPicker-wrapper',
    interactionDisabled: 'DayPicker--interactionDisabled',
    months: 'DayPicker-Months',
    month: 'DayPicker-Month',

    navBar: 'DayPicker-NavBar',
    navButtonPrev: 'DayPicker-NavButton DayPicker-NavButton--prev',
    navButtonNext: 'DayPicker-NavButton DayPicker-NavButton--next',
    navButtonInteractionDisabled: 'DayPicker-NavButton--interactionDisabled',

    caption: 'DayPicker-Caption',
    weekdays: 'DayPicker-Weekdays',
    weekdaysRow: 'DayPicker-WeekdaysRow',
    weekday: 'DayPicker-Weekday',
    body: 'DayPicker-Body',
    week: 'DayPicker-Week',
    weekNumber: 'DayPicker-WeekNumber',
    day: 'DayPicker-Day',
    footer: 'DayPicker-Footer',
    todayButton: 'DayPicker-TodayButton',

    // default modifiers
    today: 'today',
    selected: 'selected',
    disabled: 'disabled',
    outside: 'outside',
  };
  return Object.assign({}, DEFAULT, config)
}

export default function CustomClassNames() {
  //
  const classNames = makeClassNames({
    container: 'changeBackground'
  })
  return (
    <DayPicker 
      classNames={ styles } 
      modifiers={{
        [styles.birthday]: new Date(2018, 8, 19)
      }}
    />
  );
}

ちなみにデフォルトで設定されているクラスを完全に上書きしてしまうとレイアウトが崩れたので、次のように追記する形にしたほうがいいと思う。

指定したクラス名はそのまま設定されるようなので、classnamesパッケージとか利用したら便利。

const custom = {
  caption: classnames('DayPicker-Caption', 'appendStyles')
}

もちろんCSSModuleも使える

ので、好きな方法でスタイルをカスタマイズすることが出来る。

かなり拡張性が高いパッケージになっていて、日時選択にはこれが一番融通がきくのではないかなと。

おすすめのパッケージです。

HTMLタグ−１

<!DOCTYPE html> ：ファイルがHTMLで書かれた文書であることを示す。

<html> </html> ：HTML文書の始まりと終わりを示す。

<head>　</head>　：ページのタイトルや文字コードを記載。
　　　　　　　　　　　 ・ブラウザのウインドウ内には表示されない。

<meta charset="utf-8">　：メタタグ　utf-8文字コード

<title>　</title> ：ウィンドウの一番上のタイトルバーあるいはタブの部分に表示される
　　　　　　　　　　　　
<body> </body> :ブラウザ画面に表示される文字や画像など本体

<h1> </h1> : 見出し　h１〜h６まで

<p> </p> : パラグラフ

<hr> :　横線（区切り）

<!-- コメント　-->

記述例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
　　<h1>見出し１</h1>
　　<p>本文</p>　
　　<hr>
       <!-- コメント　-->
   <h2>見出し２</h2>
   <p>本文</p>
</body>
</html>

<!DOCTYPE html> ：ファイルがHTMLで書かれた文書であることを示す。

<html> </html> ：HTML文書の始まりと終わりを示す。

<head>　</head>　：ページのタイトルや文字コードを記載。
　　　　　　　　　　　 ・ブラウザのウインドウ内には表示されない。

<meta charset="utf-8">　：メタタグ　utf-8文字コード
　　　　　　　　　　　　

HTMLタグ−１

<!DOCTYPE html> ：ファイルがHTMLで書かれた文書であることを示す。

<html> </html> ：HTML文書の始まりと終わりを示す。

<head>　</head>　：ページのタイトルや文字コードを記載。
　　　　　　　　　　　 ・ブラウザのウインドウ内には表示されない。

<meta charset="utf-8">　：メタタグ　utf-8文字コード

<title>　</title> ：ウィンドウの一番上のタイトルバーあるいはタブの部分に表示される
　　　　　　　　　　　　
<body> </body> :ブラウザ画面に表示される文字や画像など本体

<h1> </h1> : 見出し　h１〜h６まで

<p> </p> : パラグラフ

<!-- コメント　-->

記述例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>タイトル</title>
</head>
<body>
　　<h1>見出し１</h1>
　　<p>本文</p>
       <!-- コメント　-->
   <h2>見出し２</h2>
   <p>本文</p>
</body>
</html>

JS 1週目　Ⅲまで修了
HTML&CSS　２週目　初級終わり

2019/04/17 14:00~17:00(3h)

CSS でシンプルなトグルボタンを実装

ON のとき

OFF のとき

haml

.form-toggle.half-cell
  = f.check_box :name
  = f.label :name, '.', class: 'clickable'

scss

$form-checked-color: #fe6970;
$form-unchecked-color: #f3f3f3;

//*** Toggle button ***//

.form-toggle {
  > input[type="checkbox"] {
    display: none;
  }
  > label {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 26px;
    color: transparent;
    background-color: $form-unchecked-color;
    border-radius: 15px;
    &:before {
      display: block;
      content: '';
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      background-color: #fff;
      border-radius: 10px;
      transition: 0.4s;
    }
  }
  > input[type="checkbox"]:checked + label {
    background-color: $form-checked-color;
    &:before {
      left: 27px;
    }
  }
}
.clickable {
  cursor: pointer;
}

　はじめに

前回作成した記事の続きです。
長押しボタンを作ってみた【円プログレス対応】

今回やりたいこと

前回、 conic-gradient を使って長押しの進捗を表現したのですが、この関数がChrome以外のブラウザだと、利用できないため、それをなんとかします。

調べる

conic-gradient をググると以下の記事がでてきます。
CSS4のconic-gradientを先取りする方法

こちらの記事を読んでみるとpolyfillが存在するらしいので、まずはそれを使ってみます。
CSS conic-gradient() polyfill

polyfillの導入

導入方法は、 polyfill用のjsを読み込ませるだけです。

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="conic-gradient.js"></script>

conic-gradient.jsは、こちらに落ちているので、落として、読み込ませれば大丈夫です。

Edgeで動かない

ブラウザのコンソールに、以下エラーがでます。

SCRIPT1014: SCRIPT1014: Invalid character

conic-gradient.js内で使われているπとかτとかが、Edgeだとダメみたいです。
なので、πをpai、τをtau、εをepsilonに書き換えました。

これで動きました。

で、css部分を確認してみると、
background-imageとしてjs内で動的に作成したsvgを設定しているみたいです。

svgデータの準備

polyfillの処理でcssに設定されているconic-gradientをbackground-imageに変換しているぽいのですが、
これを連続でリアルタイムに変換する方法がわからないので、あらかじめ、svgのデータを準備して、それをレンダリングする方法を考えました。

また、そのために必要なsvgデータを準備しました。

svg.js

20個のsvgデータ保持しているjsです。色は黒のみ。window.SMART_UIというグローバル変数に格納してあります。

レンダリング処理

index.js

・・・
if (ua.indexOf('firefox') > 0 || ua.indexOf('edge') > 0 || ua.indexOf('trident') > 0) {
  var svg = 'url("' + SMART_UI.black[0] + '")';
  outerCircle.style.backgroundImage = svg;
} else {
  outerCircle.style.background = 'conic-gradient(black 0deg,white 0deg 360deg)';
}
・・・
progress = progress + (360 / (LIMIT / 100));
var outerCircle = document.getElementById('outer-circle');
if (ua.indexOf('firefox') > 0 || ua.indexOf('edge') > 0 || ua.indexOf('trident') > 0) {
  var svg = 'url("' + SMART_UI.black[progress/18] + '")';
  outerCircle.style.backgroundImage = svg;
} else {
  outerCircle.style.background = 'conic-gradient(red ' + progress + 'deg, white 0deg 360deg)';
} 
・・・

こんな感じでbackground-imageに動的にsvgを設定するようにしました。

完成

https://www.youtube.com/watch?v=gqiTLU8EBUE&t=2538

若干チラチラしますが、一応動きました。

ソースコードは、以下にあります。
https://github.com/takuhou/smart-ui/blob/feature/apply-multi-browser/index.html

今後の対応として、ライブラリ化します。

今回の記事で書いたプログラミングの様子をYoutube上にアップロードしておりますので、是非ご覧ください。
【実況】長押しボタンをプログラミング【ブラウザ対応その１】
【実況】長押しボタンをプログラミング【ブラウザ対応その２】
えんじにぁ〜TV

英語ができないエンジニアのメモです、
もし翻訳に間違いなどありましたら、編集リクエストを投げてもらえると助かります。。。

そもそも「Front-end Developer Handbook」とは

概要

原文はこちら。

何が書いてあるの？

フロントエンドエンジニアに関わる技術やトレンドを幅広く記載している。各技術について深くは解説していないが、全体が1冊の本にまとまっている。
PDFでダウンロードしたり、Webブラウザ版をオンラインで読むことも可能。

誰が書いたの？

「開眼! JavaScript ―言語仕様から学ぶJavaScriptの本質」（O'Reilly）や「jQuery Cookbook」（O'Reilly）、「JavaScript Enlightenment」（O'Reilly）などを執筆したCody Lindley氏。
参考：https://github.com/codylindley

0.1 — Recap of Front-end Development in 2018

1. React had several notable releases this past year that included, lifecycle methods, context API, suspense, and React hooks.

Reactは、昨年、lifecycle methods, context API, suspense, React hooksなど注目すべきリリースをいくつか発表した。

2. Microsoft buys Github. Yeah, that happened.

MicrosoftがGithubを買収。

3. Fonts created by CSS became a thing.

CSSによって作成されたフォントが人気になる。

4. What I used to call front-end driven apps, gets labeled "serverless". Unfortunately, this term is overloaded. However, the term JAMstack does seem to be resonating with developers.

私がフロントエンド駆動のアプリと呼んでいたものは、「サーバーレス」というラベルが付けられている。残念ながら、この用語は過負荷である。しかし、JAMstackという用語は開発者に共鳴している。

5. Google offered some neat tools this year to help make webpages load faster, i.e. squoosh and quicklink.

Googleは今年、ウェブページの読み込みを速くするための便利なツール(squooshやquicklink)を提案した。

6. Vue gets more Github stars than React this year. But React remains dominate in terms of use.

Vueは今年、Reactより多くのGithubスターを獲得した。しかし、Reactは依然として利用の面で支配している。

7. A solution similar to React, without a virtual DOM or JSX, is introduced RE:DOM.

仮想DOMやJSXを使用せずにReactに似たソリューションが、RE：DOMとして導入された。

8. Alternatives to NW.js and Electron show up, DeskGap and Neutralino.js.

NW.jsとElectronに代わる、DeskGapとNeutralino.jsが登場。

9. In 2017 the great divide between a front-end HTML & CSS developer v.s. front-end application developer is realized/verbalized. In 2018 that divide has grown wider and deeper and more people start to feel the divide.

2017年、front-end HTML & CSS developer と front-end application developer の間にある大きな格差がはっきり/言語化された。 2018年、その格差はより広く、より深くなり、より多くの人々がその格差を感じ始めた。

.10 This year, like most recent years, was stock full of app/framework solutions trying to contend with the mainstream JavaScript app tools (i.e. React, Angular, and Vue etc...) Let me list them for you. Radi.js, DisplayJS, Stimulus, Omi, Quasar.

ここ数年のように、今年も、主流のJavaScriptアプリツール（React、Angular、Vueなど）と対抗しようとするアプリ/フレームワークソリューションが溢れていた。リストアップしよう。 Radi.js, DisplayJS, Stimulus, Omi, Quasar。

11. JavaScript frameworks start offering their own languages that compile to JavaScript (e.g. Mint).

JavaScriptフレームワークは、JavaScriptにコンパイルされる独自の言語（例えばＭｉｎｔ）の提供を開始する。

12. CodeSandbox evolves to become the dominant solution for online code sharing.

CodeSandboxは、オンラインコード共有のための主要なソリューションになるまで進化している。

13. CSS Grid and CSS Flexbox are fully supported in modern browsers and get taken for some serious rides. But many are left wondering when to use which one and how.

CSS GridとCSS Flexboxは最近のブラウザで完全にサポートされており、いくつかの深刻な問題に対応している。しかし、それらをどのように使用するのか、多くの人が疑問に思ったままである。

14. Many realize the long terms costs of bolted on type systems (e.g. TypeScript and Flow). Some concluded bolted on systems are not unlike bolted on module systems (i.e. AMD/Require.js) and come with more issues than solutions. Minimally, many developers realize that if types are needed in large code bases, that bolted on systems are not ideal in comparison to languages that have them baked in (e.g. Reason, Purescript, Elm).

多くの人が、型（TypeScriptやFlowなど）を導入することによる長期的なコストを認識している。
一部では、システムに固定されるのと、モジュールに固定される(AMD/Require.js)では違わず、解決よりも多くの問題があると結論づけた。
多くの開発者は、大規模なコードベースで型が必要な場合、システムで固定されていることが、それらを焼き付けた言語（Reason、Purescript、Elmなど）と比べて理想的ではないことを認識している。

15. CSS Variables gain browser support among modern web browsers

CSS Variablesは最近のウェブブラウザの間でブラウザサポートを得る

16. The flavors of CSS in JS exploded and some question the practice.

CSS in JSの人気は爆発的であり、そのプラクティスに疑問を抱く人もいる

17. ES modules are now usable in modern browsers and dynamic imports are close behind. We are even seeing a shift in tooling around this fact.

ESモジュールは現在、最新のブラウザで使用でき、動的インポートはすぐ後ろにある。

18. Many realize that end to end testing is the starting point of doing tests correctly in large part due to Cypress (i.e. Cypress first, then Jest).

多くの人が、E2EテストがCypressによるテストの大部分を正しく行うための出発点であることを認識している（Cypressが最初、次にJest）。

19. While Webpack was heavily used again this year, many developers found Parcel to be easier to get up and running.

Webpackは今年も頻繁に使われるようになったが、多くの開発者はParcelの方が起動しやすく実行しやすいと感じた。

20. One of the most important questions asked this year was, what is the cost of JavaScript.

今年の最も重要な論点の1つは、JavaScriptのコストである。

21. Babel 7 was released this year. That's a big deal because the last major release was almost three years ago.

Babel7は今年リリースされた。最後のメジャーリリースはほぼ3年前だったので、それは大事件である。

21. The reality of too much JavaScript change too fast is realized and people start talking about what you need to know before you can even learn something like React. The fight is real.

JavaScriptの変更が早すぎるという真実が現実のものとなり、Reactのようなことを学ぶ前に、知っておくべきことについて人々が話し始めている。戦いは本物だ。

22. Most developers found GraphQL, via Apollo, and see it as the next evolution for data API's.

ほとんどの開発者はApolloを介してGraphQLを見つけ、データAPIの次の進化と見なしている。

23. Gulp and friends definitely took a back seat to NPM/Yarn run. But this did not stop Microsoft from getting in the game with Just.

Gulpと友達は間違いなくNPM / Yarn runに後部座席を取った。しかし、これはMicrosoftがJustに参戦するのを妨げるものではなかった。

24. This year, one can not only lint/hint HTML, CSS, and JavaScript they can lint/hint the web itself.

今年は、HTML、CSS、およびJavaScriptだけでなく、Web自体をlint/hintにすることができる

25. The 2018 Front-End Tooling survey is worth reading if only to realize just how much jQuery is still used.

2018年のFront-End Tooling調査は、どれだけのjQueryがまだ使用されているかを理解するためだけに読む価値がある。

26. It can't be denied TypeScript gained a lot of users this year.

TypeScriptが今年多くのユーザーを獲得したことは否定できない。

27. VScode, dominates as the code editor of choice.

VScodeは、選択のコードエディタとして優位。

0.2 — In 2019, Expect...

1. Hopefully, more of this to come. "Stepping away from Sass".

うまくいけば、もっとくるだろう。 「Sassから離れる」

2. Still a good idea to keep an eye on and learn about the up coming additions (and potential additions) to CSS via https://cssdb.org

https://cssdb.org を通じて、CSSに今後追加される機能（および将来追加される可能性のある機能）について注意を払い、学習することをお勧めする。

The WebP image format from Google could reach support from all modern browsers this year.

3. GoogleからのWebP画像フォーマットは、今年、すべてのモダンブラウザからの支持を得ることができた。

4. Prepack will continue to cook.

Prepackは調理を続けるでしょう。

5. GraphQL will continue to gain massive adoption.

GraphQLは大規模的に採用され続けるだろう。

4. The, "State of JavaScript" survey authors will add a "State of CSS" survey in 2019.

"State of JavaScript"調査の著者は、2019年に "State of CSS"調査を追加する予定だろう。

5. Keep an eye on Web Animations API.

Web Animations APIに注目。

6. Someone you know will try and convince you to use TypeScript.

あなたの知っている誰かが、TypeScriptを試して、あなたに使うように説得するだろう。

7. Babel will get some competition from swc-project.

Babelはswc-projectとの競争をある程度受けるでしょう。

8. The case for, JAMStack's will continue.

JAMStackのは続くだろう。

9. Chasing the one code base to many platforms will continue.

1つのコードベースを多くのプラットフォームに追いかけるのは続くだろう。

10. More developers will turn to languages like ReasonML over JavaScript/TypeScript for large code bases.

より多くの開発者は、大きなコードベースのためにJavaScript/TypeScriptよりもReasonMLのような言語に目を向けるだろう。

11. More, largely used projects will start to shed jQuery in favor of native DOM solutions.

さらに、主に使用されているプロジェクトはネイティブDOMソリューションを支持してjQueryを脱ぎ捨て始めるだろう。

12. Web Components! At this point, I have no idea how Web Components will play out. Reality is they are not going away, and they have not gained a lot of momentum/usage once the hype ended.

Webコンポーネント！現時点では、Webコンポーネントがどのように機能するかはわからない。実際に、それらは消え去っていないし、誇大宣伝が終わっても多くの勢い/用法を得ていない。

リンクを親要素全体に拡げる場合

リンクを親要素に拡げる場合は、aタグをblock要素に変更します。

<div class="box_all">
  <a href="#">全体リンク</a>
</div>

a {
  display: block;
  width: 100%;
  height: 100%;
}

複数要素があるとリンクが全体にならない

同一の要素内に複数の要素がある場合、親要素全体がリンクになりません。
下の例はa要素以外にspan要素を入れています。

<!-- HTML -->
<div class="box_all">
  <span>子要素</span>
  <span>子要素</span>
  <a href="#">全体をリンクさせたい</a>
</div>

/* CSS */
.box_all{
  height: 100px;
  width: 200px;
  border: 1px solid #000000;
  padding: 5px;
  text-align: center;
}

a {
  display: block;
  width: 100%;
  height: 100%;
}

親要素全体にリンクさせる

子要素が複数あるときも、親要素全体をリンクさせます。

HTMLは内容が同じです。

/* CSS */
.box_all{
  height: 100px;
  width: 200px;
  border: 1px solid #000000;
  padding: 5px;
  text-align: center;
  /* 以下を追加 */
  position: relative;
  z-index: 1;
}

a {
  display: block;
  width: 100%;
  height: 100%;
  /* 以下を追加 */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

このようにすると、親要素全体にリンクがいくようになりました。

jQuery(mouseover, mouseout, focus, blur, change)を使ってみた

昨日、動きを制御したナポレオン周りを少しいじってみた。いじってみて思ったが、この感じでどんどん動きを増やしていくと、idがかぶりそうで、お友達から聞いたVue.jsとかを使った方がいいのかなと感じた。早々にjQueryのお勉強は終了し、Vue.jsに移りたい。

本日の作業

• ボタンにマウスオーバー、ボタンからマウスアウトした時のボタンの背景色の変化をつけた。
• テキストボックスをフォーカスした時に背景色が変わるようにし、テキストボックスから出たら元に戻るようにした。
• セレクトボックスの選択肢を変えたらアラートが出るようにした。
• 追加箇所のレスポンシブ対応

indexhtml

<main>
    <section id="top">
        <div class="container">
            <h2 class="topTit">X Characters</h2>
            <div class="img"><img id="napo" src="./img/napoleon-bonaparte-67784_640.jpg" alt="ナポレオン" width="273" height="320" class="imgR"></div>
            <div class="btn">click here !</div>
            <form action="" method="POST">
                <div class="box">
                    <input type="text" id="name" autocomplete="off">
                    <select name="members" id="members">
                        <option>napoleon</option>
                        <option>perry</option>
                        <option>織田信長</option>
                    </select>
                    <div class="submit">
                        <input type="submit" value="コメントを送信">
                    </div>
                </div>
            </form>
        </div>
    </section>
</main>

scriptタグ内

    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script>
        $(function(){
            var cancelFlag = 0;
            $('.btn').click(function(){
                if( cancelFlag == 0 ){
                    cancelFlag = 1;
                    $('#napo').toggle(1500);
                    $('#napo').toggle(1500);
                    setTimeout(function(){
                        cancelFlag = 0;
                    },3000);
                }
            });

            $('.btn')
                .mouseover(function(){
                    $(this).css('background', '#FF00FF');
            })
                .mouseout(function(){
                    $(this).css('background', '#696969');
            });

            $('#name')
                .focus(function(){
                $(this).css('background', '#E0FFFF');
            })
                .blur(function(){
                $(this).css('background', '#FFF');
            });

            $('#members').change(function(){
                alert('ちゃんと我輩を選んだだろうな？');
            });
        });
    </script>

修正後のWebサイト

こちら

参考

ドットインストール jQuery入門 (全20回) #13 イベントを使ってみよう
ドットインストール jQuery入門 (全20回) #14 focus､blur､changeを使おう

関連バックナンバー

jQueryでボタン連打の制御をやってみた