このページの短縮URL(リンク用) 第04章:範囲の設定とレイアウト – オンライン無料パソコン講座 | PCセミナー

第04章:範囲の設定とレイアウト

第04章:範囲の設定とレイアウト<div>」の学習内容です。

§04-01…範囲の設定とレイアウト<div>・準備

(01) 「範囲とCSS」というフォルダーを作成してください。また以下のようなソースを持つWebページ「index.htm」をフォルダー内に作成してください。 <?xml version="1.0" encodin...

§04-02…範囲をグループ化する<div>

(01) 先頭行「YYT Sports」~2段落目「海の見えるトレーニングセンター」を1つにまとめ、そこへCSSを適用させます。複数のブロックレベル要素をまとめることができるのが<div>要素です。ここではc...

§04-03…全域を<div>で囲み制御する

(01) ページコンテンツ全域に対してCSSが適用できるよう<div>で囲みましょう。class名は「secall」とします。 <body> <div class="secall"> ...

§04-04…コンテンツエリアと左右の余白 {margin:auto}

(01) コンテンツ全域の横幅を指定しましょう。横幅の指定方法はウィンドウ幅に対する割合で指定する方法(%)と、固定のピクセル数(px)で指定する方法があります。ここでは「500px」にしてみます。CSSを変更してくださ...

§04-05…最小幅・最大幅

(01) 現在領域の幅を「90%」にしてあります。ここで幅の最小値と最大値を指定します。ウィンドウ幅を狭くしても400px以下にはならないようにします。またウィンドウ幅を広げても650px以上にはならないようにしましょう...

§04-06…2段組み・領域ボックス(div)をfloatさせる

(01) 「センターガイド~過去のお知らせ一覧へ」までを<div class=”seccontent”>の領域としましょう。また「YTTメニュー~スケジュール」までを <div ...

§04-07…{float}の解除・{clear}とフッターの作成

(01) <div class=”secall”>の高さを全域に戻す予定です。そのようなケースではfloatを解除するための領域を作成します。著作権情報や作成者情報を記述するのが一般的...

§04-08…ブロックレベル要素をインラインレベル要素へ{display}

(01) <div class=”sechead”>には<h1>と<p>があります。これらは段落としての意味を持つ「ブロックレベル要素(block)」であり、要...

§04-09…ボックスの高さの設定と{overflow}プロパティ

(01) 表「09月08日」~「過去のお知らせ一覧へ」を<div>で囲み、高さを指定してみます。それから領域をスクロール可能にする予定です。まずは「secnote」というclass属性を付けた領域ボックスとし...

§04-10…リンクバーの作成(サイド)とリンク部の拡張

(01) 以下のような新しいページ「equip.htm」を作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBL...

§04-11…疑似クラス・ホバリング<a:hover>

(01) リンクにマウスを当てている状態を「ホバリング」といいます。 (02) リンクをホバリングしている場合のみCSSを適用させることができます。「a」要素のあとに「:hover」と指定するのです。以下のようにCSSを...