このページの短縮URL(リンク用) 第06章:レイアウトの考え方 – オンライン無料パソコン講座 | PCセミナー

第06章:レイアウトの考え方

第06章:レイアウトの考え方」の学習内容です。

§06-01…レイアウトの考え方・準備

(01) 「レイアウトの練習」というフォルダーを作成してください。以下のようなソースを持つWebページ「index.htm」をフォルダー内に作成してください。なお今回は例外的に「Strict」ではなく「Transitio...

§06-02…横並びのグローバルナビゲーションの作成

(01) <ul class=”glvnavi”>以下のリストを横並びのリンクバーにする予定です(上部に置く大カテゴリー用のリンクバーは「グローバルナビゲーション」などと呼ばれる)。今...

§06-03…隣接セレクタを利用した列の書式設定

(01) 「開園時間」と「駐車場開門時間」の<td>内のフォント色を赤にします。その際すべてのセルにclass属性を付けてもよいのですが面倒です。そこで「隣接セレクタ」という機能を使います。CSSにおいて「要...

§06-04…3段組みの設定

(01) ここからは3段組みのレイアウトを設定する方法を学習します。空のCSSファイル「lay01.css」を作成してください。また「index.htm」にリンクしてください。全体の幅「880px」、中央部「540px」...

§06-05…ウィンドウ幅によりCSSを変更する

(01) 3段組み設定が記述されている「lay01.css」は、ウィンドウ幅が「891px」以上の場合のみ適用されるようにします。その場合HTML側のCSSリンク情報に、属性「media=’screen an...

§06-06…id属性とリンク

(01) ウィンドウ幅を狭くしてページ下部をチェックします。ここで「最上部へ」にリンクを設定します。ただしここでは別のページではなく、同じページの<h2>「園長よりごあいさつ」をリンク先とします。クリックする...

§06-07…インラインフレーム<iframe>

(01) 以下のようなHTMLファイル「notejimu.htm」を作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html...

§06-08…サイドメニューのみ固定の可変レイアウト(現在の流行)

(01) 641px以上の場合に2段組みになるようなCSSファイル「lay04.css」を作成します(基準を「lay02.css」としている)。なお、全体の幅の最大値は1200pxとしますが、それ以下の場合は95%にしま...

§06-09…ボックスのサイズ【参考学習】

1000pxの<div>~</div>内に<p></p>などのブロックレベル要素を入れて、そこにwidth(p・boxの幅)、padding、border、marginを設...