Webページをキーボード操作で閲覧しやすくする施策になります。
●Tabキーで選択できるようにする
tabindex="0"
をつけることでTabキーで選択できるようになります。
（例）
<div> ... </div>
↓
<div tabindex="0"> ... </div>
●Tabキーで選択できないようにする
逆にTabキーで選択できないようにしたい場合は
tabindex="-1"
をつけます。
HTMLの最近のブログ記事
もうずっと便利に使っていますが、度々書き方を忘れて調べに行くことがあるので備忘録です。
画面サイズによってPC向け、スマホ向け等画像を切替えたい場合に、HTML5.1 で追加された＜picture＞タグが便利です。
<picture>
<source media="(max-width: 767px)" srcset="img_sp.jpg"/>
<img src="img_pc.jpg" alt="画像です">
</picture>
上記のように記述することで、
・画面サイズ767px以下では img_sp.jpg を表示
・それ以上では img_pc.jpg を表示
となります。
(max-width: 767px) の部分は min-width: ○○px とすることで、○○px以上でこの画像を表示、とすることもできます。
html は少しごちゃつくものの、以下のような利点があるのでとても便利です。
・htmlのみで実装できる
・条件に当てはまった画像のみ読み込まれる
ちなみにIE11以下が非対応なのですが、icturefill.js を読み込むことでJSで対応させることができます。
弊社でも何度か問題になったことのあるIEの互換表示。
IE10あたりからは簡単に設定できなくなったため「誤クリックで設定してしまった」という状況は少なくなっていますが、それでも一度問題になったことがあったのでこのタグを入れておくと良さそうです。
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<head>内の外部ファイル読み込みよりも前に入れます。
それぞれのIEの標準モードで表示されます。
大枠（contents）にピッタリになるようにfloatを使って要素を並べたとき、
その内部の最後の要素が落ちてしまうバグの対処法です。
※テキストだと複製され、その分が落ちるようです。
今回は画像だったためか落ちただけでした。
■余白を作る
上記の場合、contentsの横幅を少し大きく作ると（内部要素1つにつき1px？）
解消されるようです。
■コメントを入れる
余白が作れない場合、最後の要素（3つ目のblock）の後に適当な
コメントを入れると解消されます。
コメントなのでバグで複製されてしまっても見えません。
めったに使うようなものではないと思いますが、
実装の方法が少し思いがけないものだったのでメモ。
ページでの右クリックを禁止にしたい場合は次のように記述します。
<body>
↓
<body oncontextmenu='return false'>
これだけ。
CSSに記述するか、JSを使うかと思っていたので意外でした。
- 【通常】
- Shift_JIS / CR+LF
- 【多言語】
- UTF-8 / CR+LF
titleタグなどの日本語を書く前に明示しないと、文字化けする場合がある。
■Shift_JIS
別名、SJIS。マイクロソフトが制定した文字コードで、Windows95やMacの文字コードとして採用されていた。
MTなどCMSツールも採用しているコード。
■EUC-JP
日本語版UNIXで採用されている文字コード。
MySQLなど、データベースがからむシステムでよく使われている。
■UTF-8
ユニコード・コンソーシアムが制定した文字コードで、全世界の文字を一つのキャラクターセットで表示できる仕様。
１ページ内に日本語と韓国語、中国語など混在させることが可能だが、文字データの量は他のコードに比べて多くなる。
WebサービスAPIを利用する祭によく使われる。
画像タイトル等の文言は、文字数制限なしで使用されている文章をそのまま記述する。
文言のない画像等は、どんな画像か分かるように短い説明や単語を入れる。
何も入れなくていい場合は、空(alt="")で挿入。
文言のない画像等は、どんな画像か分かるように短い説明や単語を入れる。
何も入れなくていい場合は、空(alt="")で挿入。
- ■meta content
- <meta http-equiv="content-type" content="text/html; charset=shift_jis" />
- <meta http-equiv="content-style-type" content="text/css; charset=shift_jis" />
- <meta http-equiv="content-script-type" content="text/javascript" />
<meta name="description" content="○○○○○○○○○○" />
ページについての説明を書く。各ページにそれぞれ説明を入れる。
あまり長くなりすぎないようにする。
検索結果に表示されるホームページ内容の要約として表示されることがある。
検索結果を見た人に内容が伝わるように書きく。
■meta keyword
<meta name="keywords" content="○○,○○,○○" />
カンマ区切りでキーワードとなる単語をいれる。
各ページにそれぞれのキーワードを入れる。キーワードの数は10個以内くらい。
多過ぎたりまったく関係ないキーワードを羅列っするとスパムと判断されてしまう。
ページ名 | 会社名(サイト名)
基本的には上記の用にする。
指定がある場合はそれに従う。
基本的には上記の用にする。
指定がある場合はそれに従う。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
宣言文では、HTMLまたはXHTMLのバージョンと文書型を宣言する必要がある。
■HTML／XHTMLのバージョン
最新のバージョンはXHTML1.1だが、このバージョンは、ファイルのメディアタイプ指定を「application/xhtml＋xml」にしないとXML文書として認識されない。しかしこの指定は、IEで対応していないためXHTML1.０を使用する。
■文書型
下記２種類がある。
Strict ..... そのバージョンのHTML文書に厳密。
Transitional ..... 一部非推奨の要素も使っている。
どちらを使ってもブラウザ上では何の問題も起きない。
宣言文では、HTMLまたはXHTMLのバージョンと文書型を宣言する必要がある。
■HTML／XHTMLのバージョン
最新のバージョンはXHTML1.1だが、このバージョンは、ファイルのメディアタイプ指定を「application/xhtml＋xml」にしないとXML文書として認識されない。しかしこの指定は、IEで対応していないためXHTML1.０を使用する。
■文書型
下記２種類がある。
Strict ..... そのバージョンのHTML文書に厳密。
Transitional ..... 一部非推奨の要素も使っている。
どちらを使ってもブラウザ上では何の問題も起きない。
