2018年6月22日のブックマーク (2件)

  • HTML5のお勉強 articleとsectionとか - Qiita

    前回に引き続きHTML5の勉強。 めっちゃわかりやすい記事があったのでこれ見よう。 構造化タグ HTML5の特徴の1つとして構造化タグと呼ばれるものがある。 今までのHTMLでは、 <html> <body> <div id="header">...</div> <div id="nav">...</div> <div id="container">...</div> <div id="footer">...</div> </body> </html> 上記のようにユーザー側が構造を決め、(おそらく多くは)<div>にidやclassで構造名をつけ、 「ここからはヘッダ、ここからはフッタ…」といったように分類していたが、 HTML5では構造化タグと呼ばれる新しい要素(タグ)が追加され、 「ヘッダは<header>で囲み、フッタは<footer>で囲む」など、構造が明確になったといえる。 つ

    HTML5のお勉強 articleとsectionとか - Qiita
  • 上層レイヤーのDOMを通過させて、下層レイヤーにクリックイベントを発火させるには - Qiita

    マークアップの構造として、最上位層にフィルターもしくはマスクのようなDOMを画面全体の大きさで配置したとします。 こうした場合、そのDOMが全てのクリックイベントを遮ってしまうため、 下層にあるDOMに対してクリックイベントやホバーイベントが発火することがなくなってしまいます。 たまにこういうケースに演出上やむを得ず突き当たる場合があると思います。 これを解決することのできるCSS3のプロパティとして、 があります。 pointer-events: none; を、クリックイベントを発火させたくないDOM、つまり前述したケースだと 最上位層のDOMに対して設定することで、そのDOMに対して発生したイベントは無視され、 下層のイベントに対してイベントが発火してくれるようになります。 つまり、クリックイベントがDOMを通過してくれるようなイメージです。 しかし、この pointer-event

    上層レイヤーのDOMを通過させて、下層レイヤーにクリックイベントを発火させるには - Qiita