タグ

usabilityとcssに関するkirara_397のブックマーク (4)

  • HTML の label タグに必ずつけたい CSS

    CSS に1行加えるだけで ラベルまわりがとってもわかりやすくなる。 「そんなん当たり前」という人もいるかもしれないけど Gmail やら Twitter やらのログイン画面を見たら 実装されてなかったので一応。 label というのはフォームの部品とセットで使うやつで、 ある部品とその項目名を結びつけるやつね。 ↓このようなチェックボックスがあるとき 次回から自動的にログイン ↓こんなふうにラベルを指定しておくと <input type="checkbox" id="rememberme"> <label for="rememberme">次回から自動的にログイン</label> テキスト部分とチェックボックスが関連づけられるので テキストをクリックした時も チェックボックスにチェックが入るようになりますね。 ここをクリックでチェック入れられるよ 小さいチェックボックスにマウスカーソルを

    HTML の label タグに必ずつけたい CSS
  • 第3回 Webページで行間はどのくらいにしましょうか?

    小林 信次 マークアップ・エンジニア。茨城県出身。1980年生まれ。専修大学経営学部卒業後,1年弱のニート生活を経て,販売代理店の営業職を経験後,有限会社アイエイトワンに入社。主に,Webディレクション,マークアップを務めるかたわら,講師活動・執筆活動を行う。allWebクリエイター塾ではCSS講習の講師。著書に「XHTML&CSSデザイン |基原則,これだけ。」(共著,MdN発行)がある。 いろいろな方と話しているときに,line-height(1行の高さ。行間として認識できる余白を制御する値)ってどのくらいに指定していますか?という話題が出ることがあります。そこで改めて,他の人がサイトでどんな指定をしているのかを調べてみました。 ※ 今回は,Webのフロントエンド制作を仕事にしている人の間でよく知られており,アクセシビリティ,ユーザビリティ,文字の読みやすさなどにも気を使っていると思

    第3回 Webページで行間はどのくらいにしましょうか?
  • TRANS - alt=""を越えて。

    集中的にアクセシビリティやユーザビリティを最近になってやっと学び始めました。JIS X 8341やWCAG1.0を読み進める中で、もっと自分自身勉強したいと思うようになってきました。そこで、JISやWCAGを学ぶ中で、自分がシニアや障害を持つ人との現場で、またそういった現場で働いている人たちの意見を踏まえた上で、疑問に思うことを列挙しておこうと思います。いずれは、こういうことをちゃんと実装レベルで解決できるようになりたいなと思いを込めて。 alt=""は空文字なのか、半角スペースなのか、それとも全角スペースなのか? 少し前に「ブロガーのためのアクセシビリティガイドライン」を書きました。この際に、はじめはalt=""と空文字を打つと書いていたのですが、よくよく調べてみると、空文字だと音声ブラウザによっては「画像」と読み上げてしまうことがあるようです。また、全角スペースの場合は、日語環境以外

    TRANS - alt=""を越えて。
  • 第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点:ITpro

    今回は,先日筆者の勤務するはてなのサービスの一つである「はてなダイアリー」で起こった,使いやすさに関する問題を取り上げてみたいと思います。使いやすさの向上のためにデザインを変更したところ問題が発生し,それをプログラミング言語であるところのJavaScriptを使って解決した,というお話です。 その問題とは,「文字の大きさ」に関するものです。 ブラウザには,文字のサイズを変更する機能が用意されています(図1)。例えばInternet Explorer(IE)なら「表示」メニューの「文字サイズ」から「最大」「大」「中」「小」「最小」の五つの段階を選ぶことができます。Firefoxも「表示」メニューの「文字サイズ」から選ぶことができますが,「大きく」「小さく」というメニューになっており,より自由に表示サイズを変更することができます。 図1:ブラウザでは文字サイズを変更できる ちなみにOperaは

    第10回 文字のサイズとブラウザの違い 〜「はてなダイアリー」で起こった問題点:ITpro
  • 1