タグ

CSSとユーザビリティに関するmatuixのブックマーク (2)

  • [CSS]ユーザーがクリックしやすいリンクのリストを作成するチュートリアル

    Keep Margins Out of Link Lists 下記は各ポイントを意訳したものです。 HTML:スタイルシート無しの状態 CSS:リンクをブロックレベルに CSS:さらによい実装方法 [ad#ad-2] HTML:スタイルシート無しの状態 HTMLは非常にシンプルです。 文字数の異なるテキストリンクをリスト要素で実装します。 HTML <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul> デモページ(当方作成) リストのアイテムはブロックレベル、リンクはインラインレベルになり、リンクのクリックできる領域はテキストの長さに依存するため、小さく窮屈なものになっています。 CSS:リンクをブロックレベルに a要素をブロ

  • img(画像)には文字色を指定しよう(そう、文字の色を) | 初代編集長ブログ―安田英久

    今日は、Webページの作り方に関して、ちょっとした細かい話を。ページに画像を入れるときに、imgタグの「文字の色」をCSSで指定しておきましょう。画像に文字色? と思ったあなた、ちゃんと理由があるのです。 なぜ画像なのに「文字の色」を指定しなければいけないのでしょうか。それは、画像が表示されない状態では画像のaltテキストが表示されるため、その状態での表示をおかしくない状態にするためです。 念のために説明しておくと、altテキストとは、imgタグで画像の簡単な説明をテキスト記述するものです。HTMLの用語では「alt属性」と呼ばれ、img要素には必ず記述することとされています。altテキストはふつうにブラウザでページを見ているときには関係ありませんが、画像を解釈できない検索エンジンや視覚障害者が使うテキスト読み上げブラウザにとっては、そこに何が示されているのかを理解するのに重要です。 しか

    img(画像)には文字色を指定しよう(そう、文字の色を) | 初代編集長ブログ―安田英久
    matuix
    matuix 2010/02/23
    1.検索エンジンやモバイルを考慮してaltテキストを設定 2.img要素の文字スタイルをCSSで指定する 3.ページ表示のパフォーマンスとaltテキスト表示のレイアウトを考慮して画像にはwidthとheightを指定する
  • 1