リンク/ボタン/フォームをより良くするHTML・CSS 17選 - ICS MEDIA
ウェブサイト制作において見た目がきちんと実装されているのは大事なことですが、コードのちょっとした違いでユーザーの不便につながることもあります。本記事では見た目だけでなくユーザーの使い勝手にも気をつけたコーディングテクニックについて解説してます。今回はユーザーが特に使い心地を感じやすいインタラクション部分で、シンプルなHTML・CSSだけでより良くできる17個に絞って紹介します。 下記サンプルでNG例とよい例の両方を紹介しています。実際に違いに触れながら本記事を読むと分かりやすいです。 サンプルを別ウインドウで開く コードを確認する 1. divタグをボタンにするのは避けよう 見た目はボタンのようでも、<div>要素で実装したボタンはアクセシビリティの観点からもよくありません。ボタンとしての機能を持つなら<button>要素を用いるのが多くの場面でも有効です。もし、諸事情で<div>要素を用
シェルスクリプトでスクレイピングするために`pup`を使う | ゲンゾウ用ポストイット
ゲンゾウ用ポストイット シェル / Bash / Linux / Kubernetes / Docker / Git / クラウドのtipsを発信。 はじめに以前、シェルスクリプトからhtmlのスクレイピングをしたときの方法を共有します。 Go言語で作られたpupというツールを使いました。 検証環境$ uname -moi x86_64 x86_64 GNU/Linux $ bash -version GNU bash, version 4.2.46(2)-release (x86_64-redhat-linux-gnu)pup とはコマンドラインの HTML 解析ツールです。 標準入力から情報を読み込み、標準出力に結果を出力します。 それだけだと cat と同じなのですが、 HTML の要素をフィルタリングすることができます。フィルタリングのための HTML 要素指定方法として、一般的に
W3C発行のHTMLがすべて廃止された日 | フロントエンドBlog | ミツエーリンクス
あくまで有効日数はW3C仕様の名目上のステータスであり、参考情報にしか過ぎないわけですが、HTML5とそれよりも前に策定された(X)HTML仕様は、2018年3月に一斉に廃止され、HTML Review Draftと入れ替わるタイミングでHTML 5.1とHTML 5.2が同時に廃止されました。Second Editionを含んでいますが、HTML5シリーズがいずれも勧告から3年で廃止されているのは何とも興味深いところではあります。 また、古い話ですが、当時HTML5のEditorを務めていたHixieことIan Hickson氏が2008年に「HTML5の完成は2022年ごろになる」と発言していたことがありました（HTML5の完成は2022年！？ | Web標準Blog | ミツエーリンクス）。2012年にW3CとWHATWGのHTMLが分裂[1]し、結局今年になってWHATWG HTM
リンクを作る時の target="_blank" の危険性 - 隙あらば寝る
html で リンクを新しいタブ(やウィンドウ)で開かせたい場合、target="_blank" を指定するが、 この使い方には落とし穴があるらしい。 www.jitbit.com リンクを開いた先の javascript から、開いた元のページを操作できてしまうとのこと。 気になったので確認してみた。 悪用のパターン insecure.html が最初に開くページで、ここに target="_blank" なリンクがある。 このリンクを押すと new_window.html を新しいタブで開く。 この new_window.html に javascript が仕込まれており、元ページを操作されるという話。 具体的には window.opener.location="./evil.html" と実行すると、元タブは evil.html に遷移する。 実際試してみたのが ここ。 リンクを開
お願いだからWebフォームではを正しく使ってユーザビリティを上げてくれ | 初代編集長ブログ―安田英久
今日は、Webフォームが「うわ、使いづらい」となってしまわないようにする、意外と対応されていないことが多いHTMLタグ「<label>」について。 HTMLを自分で書かないWeb担当者さんでも、デザイナーさんが作ったフォームに関して最低限これだけはチェックしておくといいですよ、というお話しです。 コンバージョンの要である「Webフォーム」。アクセス解析での改善やEFO（入力フォーム最適化）をしていると思いますが、意外と忘れられていることが多い「<label>」をご存じでしょうか。 フォームの入力項目それぞれの「ラベル（項目名）」を書くためのHTMLの作法なのですが、これをちゃんと使っているかどうかで、フォームの使いやすさがガラッと変わるのです。 一番わかりやすいのは、ラジオボタンやチェックボックス。<label>をちゃんと使っていると、ボタン部分ではなく文字の部分をクリックするだけで項目を
JavaScriptでフォーカスが当たっている要素を取得する方法 - 地平線に行く
Firefox & GoogleChrome 用の greasemonkey「Add Tab Index for Google」をバージョンアップしました。 Add Tab Index for Googleとは？ Googleの検索結果ページを3倍ぐらい使いやすくするためのgreasemonkeyです。 [1]検索結果の最初にフォーカスが当たる (Enterキーを叩くだけで検索結果の一番目が開ける！) [2]検索結果のタイトルにタブインデックスを追加する (Tabキーを押して検索結果を移動できる！) Ver1.3の変化点 画面下部のテキストボックスにフォーカスが当たらない不具合を修正 (Firefoxのみ)マウスでどこかをクリックしたときに、その近辺から自然な順序でタブの移動ができるようにした ダウンロードは こちら(Add Tab Index for Google) からどうぞ！ 今回か
aタグ以外にもフォーカスは当てられる - 地平線に行く
以前、Add Tab Index for Googleを作っていたときに、こんなバグがありました。 なんでこんなところにフォーカスが・・・。 不思議に思って調べてみたところ、フォーカスを当てられるのはaタグに限らないそうです。 もっと言うと、どのタグにもフォーカスは当てられるということを知りました。 タグにtabIndex属性を指定すればいいそうです。 参考サイト：キー操作可能なカスタム DHTML ウィジェット | MDN サンプル：ARIA Checkbox (http://www.mozilla.org/access/dhtml/checkbox) <span tabIndex="0" onclick="alert('フォーカスできる!');">このSPANをクリック</span> <div tabIndex="0" onclick="alert('DIVもOK!');">このDIV
contenteditable 属性 - グローバル属性 - HTML5 タグリファレンス - HTML5.JP
7.6 編集 7.6.1 ドキュメントの領域を編集可能にする：contenteditable コンテント属性 contenteditable 属性は、そのキーワードが空文字列、true、false となる列挙属性です。空文字列と true キーワードは、true 状態に対応付けられます。false キーワードは、false 状態に対応付けられます。さらに 3 つ目の状態があります。それは inherit 状態といい、指定がなかったときのデフォルト（そして、不正な値が指定されたときのデフォルト）になります。 true 状態は、該当の要素が編集可能であることを意味します。inherit 状態は、親要素が編集可能なら、該当の要素が編集可能であることを意味します。false 状態は、該当の要素は編集可能でないことを意味します。 element . contentEditable [ = value
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
contenteditable=contenteditable - コンテンツの編集許可 - とほほのWWW入門