aria-current

パンくずなどで現在位置を表示するためのWAI-ARIA

<nav>
<ul>
<li><a href="top.html" aria-current="page">top</a></li>
<li><a href="about.html">about</a></li>
<li><a href="next.hmll">next</a></li>
</ul>
</nav>

パンくずで利用できる「page」やプロセスで利用できる「step」なｄ利用できる幅は広そう続きを読む

IE7でページに何も表示されなくなる件

日本語版の更新バージョン0でもたまにページに何も表示されないバグが残っている。

おそらくキャッシュの問題なので

<meta http-equiv="Pragma" content="no-cache">

を追加すれば解決

あんまり知らないけど便利なタグ達。

XHTMLの構造化を考えると文章に意味を持たせる為のHTMLタグは必要不可欠です。

覚えても普段使わないとすぐ忘れます。

忘れた時はこのページを見に来てください。

del
視覚的には取り消し線が表示されます。
意味的にはその内容を削除された物として扱います。
こんなかんじ

ins
視覚的には下線が表示されます。
意味的にはその内容を追加された物として扱います。
こんなかんじ

em
視覚的には斜体で表示されます。
意味的にはその内容を強調されたものとして扱います。
(よく使われるstrongはより強い強調として扱われます)
こんなかんじ

blockquote
視覚的には上下左右に余白が挿入されます。
意味的には引用文として扱われます。

こんなかんじ

q
視覚的には左右にダブルクウォーテーションが挿入されます。
意味的には引用文の一部として扱われます。
こんなかんじ

addr
視覚的にはマウスオーバー時にtitle属性に設定している文字列をツールチップ(小見出し)として表示します。
意味的には略語(XHTMLやCSSなどスペルごとに区切って発音される物)として扱われます。
こんなかんじ

acronym
視覚的には下線として点線が表示され、マウスオーバー時にtitle属性に設定している文字列をツールチップ(小見出し)として表示します。
意味的には略語(LANやNATOなど頭字語として発音される物)として扱われます。
※実際問題頭字語で発音される例文を探すのに困難するくらいレアな使い方です。
こんなかんじ

pre
視覚的には(X)HTMLソース中のスペースや改行をそのまま表示します。
意味的には整形済みテキスト(?)らしいです。よくわかります。後述するcodeタグと合わして本当の利用価値を発揮します。

こんな
         かんじ

code
スクリプトなどをブラウザ上に表示する時に使用します。
意味的にはずばりコード(スクリプト)です。

fieldset
フォームの入力項目をグループ化する際に使用します。

legend
fieldsetでグループ化されたものに対してタイトルを付けます

使用例(html)

<fieldset>
<legend>タイトル</legend>
こんなかんじのなかみ
</fieldset>

使用例（ブラウザ）

タイトル
こんなかんじのなかみ

随時追加していくってことで

del・・・・取り消し線のタグ

dreamweaverで記述できないタグとかってあんまり知らないですよね
横棒の表現するタグdel

<del>取り消し線</del>

って記述すると

取り消し線

って表示されます。かなり便利

テキストフィールドを入力不可にする

readonly属性でテキストフィールドを入力できないようにします

【ソース】

<INPUT TYPE="text" readonly="readonly">

【ブラウザ】

あんまり使い所ないかな

月額125円からのレンタルサーバ

人気のWEBクリエイターblogはここ

<div>【１】

最近のcssブームで大人気の<div>君は色々な所で活躍してくれます。
まずは簡単で応用のきく所から
この WEBサイト+phpリファレンスでも使っている背景色の変更です。
ブログの記事なんかに埋め込むことによりより多種多様な表現ができます。
【ソース】

<div width="100%" style="background: #dddddd;">
背景を変更
</div>

【ブラウザ】

背景を変更

まぁこれくらいならテーブル使ってもできるか。。。
でも<div>のがはるかに文字数が少なくて可能なんですよ
(それになんか今風でしょ)

★0円から使用可能なレンタルサーバー★

人気のWEBクリエイターblogはここ

<label>の使い方

<labl>は以外と便利なタグなんですが以外と知られてません。
ラジオボタンやチェックボックスと文字を関連付けて文字をクリックする事によるチェックできるようになる優れものです。

【ソース】

<input type='radio' name='radio1' id='radio1'><label for='radio1'>チェックする</label>
<input type='radio' name='radio1' id='radio2'><label for='radio2'>チェックする２</label>

【ブラウザ】

チェックする
チェックする２

チェックするをクリックするとちゃんとチェックされるでしょ

サーバまるごとセキュリティ強化キャンペーンがスタートしました

人気のWEBクリエイターblogはここ

<pre>

<pre>
おそらく普通のデザイナーさんならこのタグは使用しないでしょう。
このタグで囲まれている場合入力した通りに表示されます。
プログラマーさんはprint_rなどの関数を見やすく表示する際に使用します
【ソース】

1
2
3
<pre>
4
5
6
</pre>

【ブラウザ】

1234
5
6

以外と便利ですよこいつは

月額125円からのレンタルサーバ

人気のWEBクリエイターblogはここ