§05-04…descriptionの記述
(01) 作成したページはどんな内容なのかをまとめた文章を<head>内に「description」として書いておくことができます。文章は120文字以内に抑えたほうが良いでしょう。以下は例です。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC ...
§05-03…keywordsの登録
作成したページが、どんなキーワードに関して記述してあるのかを<head>内に「keywords」として書いておくことができます。キーワードは、 「<meta name="keywords" content="○○,○○,○○" />」のように記述します。ただしキーワードは5個以内に抑えたほうが良いでしょう。以下は例です。 <...
§05-02…タイトルを設定する
<title>要素は必ず設定しなければいけません。タイトルは重要なキーワードとして認識されます。こちらはあまり長すぎないように設定してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 St...
§05-01…SEO(検索エンジン最適化)・概要
GoogleやYahoo・MSNなどを使ってユーザーがキーワード検索をする場合、一般的なキーワードを使用すると沢山のページが結果として表示されてしまいます。沢山の結果が表示されてしまった場合、ユーザーはそのうちの上位数件しかクリックしてくれません。ですからあなたが商用サイトを作成して、そのサイトを沢山のユーザーに訪れてもらうためには、検索結果の上位に表示され...
§04-11…疑似クラス・ホバリング＜a:hover＞
(01) リンクにマウスを当てている状態を「ホバリング」といいます。 (02) リンクをホバリングしている場合のみCSSを適用させることができます。「a」要素のあとに「:hover」と指定するのです。以下のようにCSSを追加してチェックしましょう。 div.secsubmenu li a:hover{ font-weight:bold; ...
§04-10…リンクバーの作成(サイド)とリンク部の拡張
(01) 以下のような新しいページ「equip.htm」を作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="" xml...
§04-09…ボックスの高さの設定と{overflow}プロパティ
(01) 表「09月08日」～「過去のお知らせ一覧へ」を<div>で囲み、高さを指定してみます。それから領域をスクロール可能にする予定です。まずは「secnote」というclass属性を付けた領域ボックスとしましょう。 <body> ～略～ <h2>お知らせ</h2> <div class="se...
§04-08…ブロックレベル要素をインラインレベル要素へ{display}
(01) <div class="sechead">には<h1>と<p>があります。これらは段落としての意味を持つ「ブロックレベル要素(block)」であり、要素後に改行されます。また上下に{margin]があります。このブロックレベル要素を<span>のような見栄えの「インラインレベル要素(inline)」と...
§04-07…{float}の解除・{clear}とフッターの作成
(01) <div class="secall">の高さを全域に戻す予定です。そのようなケースではfloatを解除するための領域を作成します。著作権情報や作成者情報を記述するのが一般的です。以下のようにHTMLを追加してください。 <body> ～略～ <li>スケジュール</li> </ul&...