なぜ <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?
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://)へのリンクは、 メジャーなブラウザ
Sample WebM, Ogg, and MP4 Video Files for HTML5 | TechSlides
If you are playing around with the HTML5 Video tag you might need some sample video files and these video files have to be in different web formats. The problem is that different browsers support different types of video files, so to provide proper cross-browser support, you need to convert your video into many different formats. I plan on writing more about HTML5 Video and some cool things that i
IEだけに適用されるHTML「条件付きコメント」の使い方
こんにちは、さち です。 ウェブサイト制作の経験がある人には有名な話なんですが 古いバージョンの Internet Explorer（以下：IE） は ウェブサイトの表示で 特殊な挙動，未実装の問題 があり サイトを作る時に、別途 IE 対策が必要です。 そこで今回は IE だけに適用される HTML を記述できる 「条件付きコメント」の使い方についてまとめていきます。 「条件付きコメント」とは？「条件付きコメント」は IE だけが解釈できる HTML コードです。 構造は下記のようになっています。 <!--[if IE 7]> 適用するHTMLコード <![endif]-->最初に、<!--[if IE 7]> で適用する IE のバージョンを指定。 例では、[if IE 7] なので 閲覧者のブラウザが IE7 の場合に適用します。 次に、適用内容を HTML 形式で記述。 最後に、<
SS|Videoタグでのhtml5時代の動画配信とIE対応
html5を使用してWebページを制作することは特に難しいことではなくなってきていますよね。IEでもちゃんと表示されるし。 なので僕は案件でも自分のサイトでも基本的にhtml5で記述しています。 ただ、VideoとかAudioとかのマルチメディアタグは一時期「コーデックで色々問題が」とか「IEで…」とかの話が前面に出てた気がしてて僕はほとんど使ったことがありませんでした。 そんな中、Videoを使う必要があって調べてみたら意外といけることが分かったのでメモしておきますね。 Videoタグを記述 基本的な記述はこれだけです <video src="movie.mp4"></video> 何となくご理解頂けるかと思いますが、 src 属性に動画ファイルを記述します。 サーバの設定が必要なケース もし動画が見れない場合は、サーバの設定が出来てないケースがあるかも知れませんので、見れない場合は以下
HTML （HTML Living Standard） タグリファレンス
HTML（HTML Living Standard） の各要素について、要素の意味、分類、利用できる属性と値、サンプルソースなどを掲載しています。用途から逆引きも可能です。 この HTML リファレンスは、WHATWG が公開している HTML 仕様書 （HTML Living Standard） を基にして日本語で解説したものです。HTML Standard 仕様書のすべてを翻訳したものではありませんので、一部説明が省略されているものや、著者の私見っぽいものも多少混ざっておりますのでご了承ください。 内容の間違いや、各要素、属性の解説に対して参考になるウェブサイトやブログ記事があれば、yoshiki.kato@gmail.com までメール頂くか、Twitter でリプライなど頂ければ、確認後ページに反映されるかもしれません。 なお、このサイトは Internet Explorer 11
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?
GitHub & BitBucketをプレビュー表示するWebサービス
codeday.me
HTML を Markdown へ変換
Display raw HTML in Haml and Sinatra
HtmlからHamlを作り、またHTMLにする - Qiita
HTML5 video tag width and height