|     | 00  01  02  03  04  05  06  07  |

CSSレイアウト作成の練習(その4)

スタイルエクスプレスのアイコン基本的CSSレイアウトの作成

ステップバイステップで基本的レイアウトをCSSで作成してみます。

N.文字の入力

仮の文字が入力されている現ページに、実際に見出しや本文を入力します。

完成例:

[ヘッダ] の文字入力と見出し1 [h1] タグの設定 Ⓐ

① [ヘッダ] と書かれた文字をダブルクリックします。

② そのまま ”サンプルサイト” と入力します。

③ 文字列を選択し反転させ、メニューの「挿入」 → 「段落」 → [見出し1] を選択します。

[コンテンツ] の文字入力と見出し2 [h2] / 見出し3 [h3]タグの設定 Ⓑ Ⓒ

④ [コンテンツ] と書かれた文字をダブルクリックします。

⑤ 以下の文字列を入力します。コピーしテキストで貼り付けてください。

⑥ 文字列 ”メインタイトルが入ります” を選択・反転させ、メニューの「挿入」 → 「段落」 → [見出し2] を選択します。

⑦ 文字列 ”サブタイトルが入ります” を選択・反転させ、メニューの「挿入」 → 「段落」 → [見出し3] を選択します。

[コラム] の文字列入力と見出し4 [h4] タグの設定 Ⓓ Ⓔ

⑧ [コンテンツ] と書かれた文字をダブルクリックします。

⑨ 以下の文字列を入力します。コピーしテキストで貼り付けてください。

⑩ 文字列 ”サブメニュー” を選択・反転させ、メニューの「挿入」 → 「段落」 → [見出し4] を選択します。

フッタに著作権情報を入力します。 Ⓕ

⑪ [フッタ] と書かれた文字をダブルクリックします。

⑫ 以下の文字列を入力します。

ここまでの完成例:

O.レイアウトの仕上げ

ページ全体のスタイルを設定する

① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。

② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグの候補] で [body] を選択します。

③ 以下のように属性値を設定したら [OK] をクリックします。

設定結果:

  • CSSソース(追加分のみ):
    • body {
    •   font-size : small;
    •   line-height : 18px;
    •   text-align : center;
    • }

ヘッダの見出し1スタイルを設定する

① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。

② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグ名] に ”#header h1” と入力します。

③ 以下のように属性値を設定したら [OK] をクリックします。

設定結果:

  • CSSソース(追加分のみ):
    • #header h1 {
    •   font-size : x-large;
    •   color : white;
    •   text-align : left;
    •   padding-top : 15px;
    •   padding-left : 10px;
    • }

コンテンツの見出し2スタイルを設定する

① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。

② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグ名] に ”#contents h2” と入力します。

③ 以下のように属性値を設定したら [OK] をクリックします。

設定結果:

  • CSSソース(追加分のみ):
    • #contents h2 {
    •   font-size : 16px;
    •   padding-top : 5px;
    •   padding-left : 10px;
    •   padding-bottom : 5px;
    •   margin-bottom : 15px;
    •   border-width : 1px 1px 1px 10px;
    •   border-style : solid;
    •   border-color : orange;
    • }

コンテンツの見出し3スタイルを設定する

① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。

② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグ名] に ”#contents h3” と入力します。

③ 以下のように属性値を設定したら [OK] をクリックします。

設定結果:

  • CSSソース(追加分のみ):
    • #contents h3 {
    •   font-size : 12px;
    •   color : white;
    •   background-color : orange;
    •   padding-top : 2px;
    •   padding-left : 5px;
    •   padding-bottom : 2px;
    •   margin-top : 10px;
    •   margin-bottom : 10px;
    • }

コラムの見出し4スタイルを設定する

① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。

② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグ名] に ”#column h4” と入力します。

③ 以下のように属性値を設定したら [OK] をクリックします。

設定結果:

  • CSSソース(追加分のみ):
    • #column h4 {
    •   color : white;
    •   background-color : orange;
    •   padding-top : 3px;
    • }

コラムの段落スタイルを設定する

① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。

② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグ名] に ”#column p” と入力します。

③ 以下のように属性値を設定したら [OK] をクリックします。

④ コラムの本文にあたる部分の文字列 ”サブメニュー1~5” をまとめて選択・反転させ、メニューの[挿入] → [段落] → [標準] を選択します。

⑤ [ページ編集] 画面に戻りコラムの段落にスタイルが適用されるのを確認します。

設定結果:

  • CSSソース(追加分のみ):
    • #column p {
    •   text-align : left;
    •   padding : 3px 10px;
    •   margin : 0px;
    •   border : 1px solid orange;
    • }

回り込み画像のスタイルを設定する

コンテンツブロックに挿入する画像に回り込みを設定します。

① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。

② [スタイルの設定] ダイアログで [HTML タグのスタイルを設定] を選択し、[HTML タグ名] に ”#contents img” と入力します。

③ 以下のように属性値を設定したら [OK] をクリックします。

④ コンテンツブロックに画像、この場合は社会福祉協議会のマークを挿入します。

設定結果:

  • CSSソース(追加分のみ):
    • #contents img {
        float : right;
      }

回り込みを解除するスタイルを設定する

段落に回り込みを解除するスタイルを設定します。

① [スタイルエクスプレスビュー] → [スタイルの構成] パネル → [埋め込まれたスタイルシート] → 中央の領域で右クリック → [追加] を選択します。

② [スタイルの設定] ダイアログで [クラスのスタイルを設定] を選択し、[クラス名] に任意の名前、例えば ”.imageclear” と入力します。

③ 以下のように属性値を設定したら [OK] をクリックします。

④ 回り込みを解除する範囲を選択して、メニューから [挿入] → [段落] → [標準] を選択します。

⑤ 挿入した段落にカーソルを置いてから、[スタイルエクスプレスビュー] の [カーソル位置] パネルを表示します。[カーソル位置] パネルの p を右クリック → [クラス設定] → [imageclear] を選択します。段落以降の回り込みが解除されたのを確認します。

設定結果:

  • XHTMLソース(更新分のみ): 
    • <p class="imageclear">社会福祉協議会は、それぞれの都道府県、市区町村で、地域に暮らす皆様のほか、民生委員・児童委員、社会福祉施設・社会福祉法人等の社会福祉関係者、保健・医療・教育など関係機関の参加・協力のもと、地域の人びとが住み慣れたまちで安心して生活することのできる「福祉のまちづくり」の実現をめざしたさまざまな活動をおこなっています。</p>
  • CSSソース(追加分のみ):
    • .imageclear {
    •   clear : both;
    • }

ページトップへ戻る

|     | 00  01  02  03  04  05  06  07  |