なぜ <div> に onClick がダメなのか？
■ はじめに <div>要素にonClickを渡すべきではない、ということ聞いたことはないでしょうか？ ただ、なぜ渡すべきでないのか？ 理解してなかったので今回調べてみました。 サンプルコード 今回動作確認に利用したサンプルリポジトリのコードはReactで書いています。 ■ 結論：<div>にonClickを定義するのがなぜダメなのか？ ユーザーにとって操作性の低いボタンになってしまうから、です！ 要するに UX が悪くなってしまうから！ その理由を解説していきます！ ■ 操作性の低いボタンになってしまう理由 大きく３つあると考えています。 div要素は focus を持たないから returnキー, spaceキーをonClickに変換しないから スクリーンリーダーが認識しない要素だから ◎ focus を持たないから <div>要素はfocusを持ちません。 なので、tabキーで要素に
script タグの type="text/javascript" の有無による違い
下記コードでscript type="text/javascript"とやるのとscriptとでやるのでは結果が同じになりますが、両者はどのように使い分けるのでしょうか。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>あいうえお商店</title> <link href="css/bootstrap.min.css" rel="stylesheet"> <link type="text/css" rel="stylesheet" href="css/bootstrap-timepicker.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <scrip
最近の実装に合わせたHTMLテンプレート、基本のコードとすべての要素の役割も解説
最近の実装に合わせた、Webページ用のHTMLテンプレートを紹介します。 レスポンシブ用のHTML、ソーシャルメディア用のHTMLをはじめ、高速表示に欠かせないrel="preload"なども含まれています。IEなどの古いブラウザはプログレッシブエンハンスメントで対応しています。 HTMLテンプレートはすべての要素の役割を各行ごとに解説しているので、自分に不必要なものを削除したり加えたりすることもできます。 My current HTML boilerplate by Manuel Matuzović 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに HTMLのテンプレート（最終形） HTMLのテンプレートを1行ずつ解説 ページのタイトルと説明文、外部ファイル ソーシャルメディア用のHTML アイコンとアドレスバー もう
ブラウザからIME状態を制御する方法 - Qiita
概要 WebアプリのUIとしてフォームを作成する場合は、HTMLの<input>タグを利用する。 この入力フォームに対して入力を始める前に入力できる文字種に応じた入力モードになるようにIMEを制御したいという要件が（特に業務アプリでは）ありうる。 ここではその方法を解説する。 方法 一般的な実装 これでIMEがオンの状態になる。ime-modeは以下の値を取りうる。 active: IMEをオンにする。ただし、ユーザはオフにする操作ができる。 inactive: IMEをオフにする。ただし、ユーザはオンにする操作ができる。 disabled: IMEを無効にする。ユーザが状態を変えることはできない。ただし、これは使用してはならない。理由は後述する議論-UXについてを参照。 議論 対応ブラウザについて このime-modeというスタイルはCSS3の標準ではない。 そのため、必ずしも全てのブラ
<button> vs. <input type="button"> -- which to use?
When looking at most sites (including SO), most of them use: <input type="button" /> instead of: <button></button> What are the main differences between the two, if any? Are there valid reasons to use one instead of the other? Are there valid reasons to use combine them? Does using <button> come with compatibility issues, seeing it is not very widely used?
GitHub & BitBucketをプレビュー表示するWebサービス
GitHub & BitBucketをプレビュー表示するWebサービス GitHubでJSライブラリなどが置いてあると、ちょっと動作を確認したいときでも一度ダウンロードしなくてはいけないのでめんどいですが、オンライン上でプレビューできるWebサービスがあるようなのでご紹介します。 投稿日2014年04月09日 更新日2014年04月09日 下記にアクセスすると、URL入力窓がありますので、GitHubのデモURLを入力するだけです。 基本的にhtmlで動くものだけですね。 GitHub & BitBucket HTML Preview こんな感じでURLの引数にそのまま入力するだけでも見れますね。 http://htmlpreview.github.io/?https://github.com/k-ishiwata/jQuery.Pager/blob/master/samples/inde
meta要素で適切な文字コードを指定する－ウェブ制作チュートリアル
アクセスアップのために、HTMLファイル制作時にできる対策をしておきましょう。 まずは、文字化けを避けるために、meta要素で適切な文字コードを指定します。 サンプルサイトでは、HTMLファイルを作成する際に、文字コードをUTF-8にして保存しました。そして、HTMLソース中では、以下のようにmeta要素で文字コードを指定しました。 HTMLソース中に上記の指定が無い場合、ウェブページが文字化けしてしまって、検索エンジンに適切に収集されないことがあるので、そのような事態を避けるためにもHTMLソース中では、文字コードの指定を忘れないようにしましょう。 文字コードは、そのウェブページで利用しているものを適切に指定します。 上記のmeta要素の記述例は、文字コードをUTF-8にしてウェブページを作成した場合のものなので「UTF-8」を指定しています。 もし、文字コードをシフト JISにしてファ
ブラウザで UNC パスのリンクをオープンする方法 | プログラマーズ雑記帳
Redmine Advent Calendar の 23 日目の記事として、 Firefox などのブラウザから UNC パスのリンクをオープンする方法について書いてみようと思います。 直接的には Redmine と関係はないですが、 私は Redmine を使っていると 共有 PC などへのリンクを張りたくなることが結構あるので、 知っていると便利かなと思います。 file URI と UNC パス PC 内にあるローカルファイルをブラウザなどで表示すると file://D:/home/foo.html といったアドレスになります。 このアドレスは file URI といって、 URI の表記の一つです。 これは RFC で定義されていて、ブラウザでちゃんと扱える表記法なのですが、 http:// のページに張られているローカルファイル(file://)へのリンクは、 メジャーなブラウザ
IO Domains in Alexa Top 1 Million | techslides.com
It has broad relevance with the ever-increasing and changing nature of the internet. This study involves characteristic trends in given domains, which feature in the Alexa Top 1 Million-a dataset of the most visited websites on the internet. Recently, domains that end with .io have gained prominence. What started out as a project of assigning the top-level domain to the British Indian Ocean Territ
IEだけに適用されるHTML「条件付きコメント」の使い方
こんにちは、さち です。 ウェブサイト制作の経験がある人には有名な話なんですが 古いバージョンの Internet Explorer（以下：IE） は ウェブサイトの表示で 特殊な挙動，未実装の問題 があり サイトを作る時に、別途 IE 対策が必要です。 そこで今回は IE だけに適用される HTML を記述できる 「条件付きコメント」の使い方についてまとめていきます。 「条件付きコメント」とは？ 「条件付きコメント」は IE だけが解釈できる HTML コードです。 構造は下記のようになっています。 <!--[if IE 7]> 適用するHTMLコード <![endif]--> 最初に、<!--[if IE 7]> で適用する IE のバージョンを指定。 例では、[if IE 7] なので 閲覧者のブラウザが IE7 の場合に適用します。 次に、適用内容を HTML 形式で記述。 最後に
FAFA188 สล็อตเว็บตรง มาแรง ฝากถอน ออโต้ API Slot เว็บแท้ 100%
FAFA188 สล็อตเว็บตรง มาแรง ฝากถอน ออโต้ API Slot เว็บแท้ 100% โอ้โห พูดเลยว่าใครไม่รู้จัก สล็อตเว็บตรง FAFA188 คือพลาดมาก เพราะตอนนี้กำลั’มาแรงแบบสุดๆ ถ้าคุณอยากเล่นสล็อตที่มันส์จนหยุดไม่อยู่ แล้วไม่ต้องกลัวโดนหลอก ก็ต้องที่นี่แหละ สล็อตเว็บตรง100% ไม่มีคำว่าโกง ฝากถอนง่ายเวอร์ด้วยระบบ ฝากถอน ออโต้ API Slot มันส์แบบไม่ต้องรอนาน แถมยังมี สล็อตรับวอเลท ให้ชำระเงินง่ายๆ ไม่ต้องวุ่นวายอะไร ถ้าพูดถึ
HTML5のvideoタグを使って動画を貼り付ける時の注意点と問題点
Image by:theQ camera HTML5ではvideoタグを使って動画を貼り付けることができます。 これまでWebサイトで動画を貼り付ける場合には、FlashやQuickTimeなどを使うのが一般的でした。 「theQ camera」は、videoタグを使っています。 videoタグを使えれば、よりリッチなWebサイト作りが出来て、面白そうだなぁ～っと思って、いろいろ調べてみました。 なかなか苦戦したので、概要をメモしておきます。 メイン動画の容量は重要！ 最初にメインとなる動画を準備します。 当たり前のことですが、これがないと始まりませんね。 動画の容量調整は難しいところです。 容量が大きいと、表示が重たくなって表示される前に離脱されてしまう可能性が高くなりますし、かといって、容量を小さくし過ぎると画質が粗くなって、見栄えが悪くなったりしてしまいます。 そうならないためにも、
Atomテキストエディタでhtmlをプレビュー画面で確認できるパッケージatom-html-previewのインストール方法・使い方
Atomテキストエディタでブラウザーに切り替えないで、編集中のhtmlをプレビュー画面で確認できたらすごく便利なのに……と思いませんか？ ホームページ作成においてchromeなどのブラウザーに切り替える作業は負荷がかかるので、できれば避けたいところですよね。実はAtomには、ブラウザーに切り替えないでプレビュー画面確認ができてしまうatom-html-previewという便利なパッケージがあります。ということで今日はそのインストール方法・使い方を説明しますね。 そうそう、日本語環境で使用するためのパッケージ「japanese-menu」をインストールしていない人は、先にインストールしておいてくださいね。→Atomテキストエディタを日本語環境で使用するためのパッケージをインストールする方法 それでは、atom-html-previewのインストール方法からはじめますね。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML: Valid id attribute values?
https://codeday.me/jp/qa/20181202/23965.html
HTML を Markdown へ変換
HTML （HTML Living Standard） タグリファレンス
Display raw HTML in Haml and Sinatra
HtmlからHamlを作り、またHTMLにする - Qiita
HTML5 video tag width and height