スタイルを決めるCSSの編集
これまでの画面で想定どおりにならなかった所について、スタイルシートを使ってきめ細かなデザインを行っていきます
リストメニュー
下図は記号付きリストのみ配置したものです。
これを下図のように変更します。
以下のコードをCSSファイルに追加します。
[説明]
ｕｌ…この指定によりｕｌ要素の大きさ、背景色が決まります。
width:auto…’ｌｉ’の数て自動的に決まってきます。（最大955ｐｘ)
margin …隣接の要素までのスペースです。
ｌｉ…リストマークの非表示と要素を横並びにします。また、文字を中央に配置します。
text-alignとpadding-topにより中央に配置します。
ｌｉ a…通常時 リンク下の線を非表示にし文字色を黒色にします。
ｌｉ a：hover…マウスが文字上に乗った場合、文字に青色とアンダーラインをつけます。
余白とパッデング
視覚補助をオンににすると、すべての要素周辺の余白とパディングが表示されます。余白は赤色、パディングは青色で表示されます。
視覚補助をオンにする。
メニュー[表示]－[視覚補助]－[表示]をクリック
[デザイン] ビューで使用できる多数の視覚補助があります。視覚補助を使用すると、空の要素または非表示の要素、および枠線を表示することにより簡単に識別できます。
デザイン画面で作成した見出しｈ1（”お知らせ”）を完成させます。
以下のコードをｃｓｓファイルに追加します。
見出しのアイコンは”
”をコピーしてください
Htmlファイルの修正
ＣＳＳファイルとＨｔｍｌファイルに記述されたスタイルシートには優先順位があります。プラウザの処理は①外部ＣＳＳファイル②Ｈｔｍｌファイルの<head></head>内③各ステートメントの順序で行われます。
チュートリアルでは③では②の処理を行うようになっています、重複しているのは文字の色のみです。ここではＣＳＳファイルで文字色を付けます。
②の処理…１０行ー２行削除します。
③の処理…<span>タグを削除します。
iframeの完成
ifreameと云っても特別な事では有りません、フレーム内に表示するアイテムを作成します。ここではテーブルを作成し”お知らせ”の内容（表題）を記入します。
操作
- index.htmのテーブルヘッダーを記入します（開示月日、種別、表示内容）
- inf.htmlにテーブルを作成します。（iframe作成と同じもの、但し罫線は非表示、全てｔｄとします）
- テーブルに以下のように記述します。
- index.htmlのiframe記述を以下のように変更します。
注意：width="100%"と有ります。inf.htmlのwidthをifreameのサイズに合わす事が必要です
フッター文字を中央に配置
文字を中央に配置するためにＣＳＳファイルを以下のように変更します。
