Author Archives: 管理者

dl dt dd

こちらより引用させていただきました

<dl>タグは、定義・説明リストを表す際に使用します。
<dl>~</dl>の中に、
<dt>タグで定義・説明される言葉を、
<dd>タグでそれに対応する説明を配置してリストを作成します。
例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用します。

■HTML4.01からHTML5へのバージョンアップによる変更点

<dl>タグのdlの由来ですが、HTML4.01ではdefinition list(定義リスト)の意味であることが示されていました。
HTML5でははっきりとは示されていませんが、description list(説明リスト)という程度の意味のようです。
また、
<dt>タグはdefinition term(定義される言葉)からdescription term(説明される言葉)へ、
<dd>タグはdefinition description(定義の説明)からdescription, definition(説明や定義)へと、微妙にニュアンスが変更されているようです。

これは、おそらく、dl要素は用語の定義に対してだけではなく、箇条書きに並べて何かを説明する際などにも使用できるという意図があるのではないかと思われます。
定義語リストを作成する場合には、<dt>~</dt>の中に配置する言葉を
<dfn>~<dfn>で囲むことで、その言葉が定義語であることが明確になります。

HTML5では、<dl>~</dl>の中の<dt>と<dd>は、必ずしも一対一である必要はありません。
以下の使用例では、
一つの定義(dt)に対して複数の説明(dd)をしたり、
複数の定義(dt)に対して一つの説明(dd)をしています。

■使用例

HTMLソース

<dl>
<dt>作者</dt>
<dd>ジョン</dd>
<dd>ポール</dd>
<dd>ジョージ</dd>
<dd>リンゴ</dt>
</dl>

<dl>
<dt lang="ja"><dfn>色</dfn></dt>
<dt lang="en-US"><dfn>color</dfn></dt>
<dt lang="en-GB"><dfn>colour</dfn></dt>
<dd>可視光線の波長の長短によって人が視覚で感じ分けられる色覚・色刺激のこと。</dd>
</dl>

↓↓↓

ブラウザ上の表示

作者
ジョン
ポール
ジョージ
リンゴ
color
colour
可視光線の波長の長短によって人が視覚で感じ分けられる色覚・色刺激のこと。

<dl>~</dl>の中に複数のリストがある場合、
リストの配置順序が問われない場合もありますが、その順序が意味を持つ場合もあります。

HTMLソース

<p>ゲームの得点は以下の順序で計算されます。</p>
<dl>
<dt>金貨を獲得している場合</dt>
<dd>金貨一枚につき10ポイント加算されます。</dd>
<dt>銀貨を獲得している場合</dt>
<dd>銀貨一枚につき1ポイント加算されます。</dd>
<dt>枚数に関わらず、金貨と銀貨の両方を獲得してる場合</dt>
<dd>ボーナスポイントとして20ポイント加算されます。 </dd>
<dt>それ例外の場合</dt>
<dd>ポイントは加算されません。</dd>
</dl>

↓↓↓

ブラウザ上の表示

ゲームの得点は以下の順序で計算されます。

金貨を獲得している場合
金貨一枚につき10ポイント加算されます。
銀貨を獲得している場合
銀貨一枚につき1ポイント加算されます。
枚数に関わらず、金貨と銀貨の両方を獲得してる場合
ボーナスポイントとして20ポイント加算されます。
それ例外の場合
ポイントは加算されません。

ウィルス?!

サイト作成をある程度手がけていると、やはり何らかのウィルスに狙われるサイトも出てて来るようです。

定期点検で、何か不具合が無いか、ブラウザーの表示の崩れが無いかなどをザッと見て回るのですが、
なんと「バックドア(裏口)を開ける」というモノを見つけました。

「exploit_protector_fifam」 というモノが出てきました。
検索してみてもロシア語のサイトが200ほど出てくるだけで正体が良くわからないというのが今のところなのですが、こんなものはサイトに入れた覚えが無い。
ちなみに「exploit」とは、wikiへ

どこから侵入したのか不明ですが、お客様が自分でサイトの管理をしたいとう要望があり、WordPressで作成し記事投稿のやり方を教えていた会社のサイトでした。
サイバー攻撃の拠点として利用されていた可能性はあります。
早速、連絡してログインパスワードの変更など対策をお話しました。

CSS3.0 をモノにせよ。こりゃ便利!プロパティージェネレータ

CSS3.0 の必殺技(グラデーション、BOXシャドウ、テキストシャドウ、角丸)、クロスブラウザー対策なんかも出てくるので 覚えるの大変と思ってたら、便利なものを作ってくれている人がいるんですね~
スゴイです。
http://css-eblog.com/eblog_sample/0912/css3-generator/
JavaScript とあわせてクロスブラウザー対策するのがいいですね。

他にも
http://css3.mikeplate.com/

そういえば、IEは、9でもグラデーションに対応しておらず、Filterを使ったグラデーションだと、角丸を組み合わせると両立しないようです。
IE9より低いバージョンはJavaScript で対応可能なのですが、IE9対策用のJavaScriptがあるかもしれませんが探しきれていません。

「角の丸いブロックでグラデーションのモノはIE9では作れない」ということです。

要注意です。

“box-shadowプロパティは、ボックスに1つまたは複数の影をつける際に使用します。 box-shadowプロパティでは、例えば以下のように影を指定します。

box-shadow: 10px 10px;
box-shadow: 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4);
box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.4) inset;

影は2~4つの長さの値で定義されますが、任意で色、insetキーワードを指定することもできます。 insetキーワードを付けると、影がボックスの外側ではなく内側につくようになります。 長さの指定を省略すると0となり、色の指定を省略するとユーザーエージェントが選んだ色になります。 複数の影を指定する場合には、カンマ( , )区切りで影のリストを複数指定します。

影を定義する指定内容は、以下のように解釈されます。
•1番目の長さの値は、水平方向の影のオフセット距離です。正の値を指定すると右へ、負の値を指定すると左へ影が移動します。
•2番目の長さの値は、垂直方向の影のオフセット距離です。正の値を指定すると下へ、負の値を指定すると上へ影が移動します。
•3番目の長さの値は、ぼかし距離です。負の値を指定することはできません。 値が大きいほど影の端のぼかしが強くなり、値が0の場合には端がくっきりとした影となります。
•4番目の長さの値は、広がり距離です。正の値を指定すると影の形状を全方向に拡大、負の値を指定すると縮小します。
•色の値を指定すると、影がその色になります。
•insetキーワードを指定すると、ボックスの外側の影から内側の影に変更されます。

尚、box-shadowプロパティは、::first-letter擬似要素に適用されますが、::first-line擬似要素には適用されません。 また、border-collapse:collapse;が指定されたtable内要素には、外側の影はつきません。

テキストに影をつける場合には、text-shadowプロパティを使用します。

■値

none要素に影をつけない(初期値)水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetスペース区切りで、水平方向の距離 垂直方向の距離 ぼかし距離 広がり距離 影の色 insetキーワードを指定する。 ぼかし距離 広がり距離 影の色 insetキーワードは省略可”

参考:
http://blog.ethertank.jp/2010/03/27-11:46:49