§06-09…ボックスのサイズ【参考学習】
1000pxの<div>～</div>内に<p></p>などのブロックレベル要素を入れて、そこにwidth(p・boxの幅)、padding、border、marginを設定した場合のサイズイメージは以下の通りです。親要素<div>のwidthが1000pxならばぴったりになります(px指定でも%指...
§06-08…サイドメニューのみ固定の可変レイアウト(現在の流行)
(01) 641px以上の場合に2段組みになるようなCSSファイル「lay04.css」を作成します(基準を「lay02.css」としている)。なお、全体の幅の最大値は1200pxとしますが、それ以下の場合は95%にします。内部においてはサイドメニューを「160px」とし、それ以外のエリアをコンテンツとする予定です(<div class="seccon...
§06-07…インラインフレーム＜iframe＞
(01) 以下のようなHTMLファイル「notejimu.htm」を作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ""> <html xmlns="...
§06-06…id属性とリンク
(01) ウィンドウ幅を狭くしてページ下部をチェックします。ここで「最上部へ」にリンクを設定します。ただしここでは別のページではなく、同じページの<h2>「園長よりごあいさつ」をリンク先とします。クリックするとスクロールするようにしたいのです。ページの最上部以外をリンク先としたい場合にはそこへ「id属性」を設定します。これは「class属性」と同...
§06-05…ウィンドウ幅によりCSSを変更する
(01) 3段組み設定が記述されている「lay01.css」は、ウィンドウ幅が「891px」以上の場合のみ適用されるようにします。その場合HTML側のCSSリンク情報に、属性「media='screen and (min-width: 適用させる最小px)' 」を追加します。以下のように設定しましょう。属性の前後には半角スペースが必要です。 <lin...
§06-04…3段組みの設定
(01) ここからは3段組みのレイアウトを設定する方法を学習します。空のCSSファイル「lay01.css」を作成してください。また「index.htm」にリンクしてください。全体の幅「880px」、中央部「540px」、左右のメニュー(公園メニュー+お知らせ)を「160px」にする予定です。 <link rel="stylesheet" type=...
§06-03…隣接セレクタを利用した列の書式設定
(01) 「開園時間」と「駐車場開門時間」の<td>内のフォント色を赤にします。その際すべてのセルにclass属性を付けてもよいのですが面倒です。そこで「隣接セレクタ」という機能を使います。CSSにおいて「要素A+要素B」とセレクタを指定すると、「要素Aの次に隣接している要素B」に対するCSSだと認識されます。以下のように「str.css」に追加...
§06-02…横並びのグローバルナビゲーションの作成
(01) <ul class="glvnavi">以下のリストを横並びのリンクバーにする予定です(上部に置く大カテゴリー用のリンクバーは「グローバルナビゲーション」などと呼ばれる)。今回はリスト項目部をfloatさせて作成します。ただしこの設定ではリストの次も回り込まれてしまいます。以下のCSSを「str.css」に追加してください。 ul.g...
§06-01…レイアウトの考え方・準備
(01) 「レイアウトの練習」というフォルダーを作成してください。以下のようなソースを持つWebページ「index.htm」をフォルダー内に作成してください。なお今回は例外的に「Strict」ではなく「Transitional」という文書型宣言を利用しています。また、リンク先ページは作成しないので形式的に「xx.htm」を設定しています。CSSファイルはとり...