E-MAIL 野浪研究室 情報機器の操作テキスト ←戻る counter

情報機器の操作テキスト 12
Cascade Style Sheets を使って、見やすいページを作る

おはようフェルプス君。今回の任務はCascade Style Sheet を使って、見やすいページを作ることにある。 例によって、君もしくはメンバーが捕らえられ、あるいは殺されても 当局はいっさい関知しないからそのつもりで。 尚、このテープは自動的に消滅しない。クルクル回り続ける。 成功を祈る

準備 1

  1. CSS カスケード・スタイル・シート の利用法を開いて、CSS カスケード・スタイル・シートの概要を理解する。
  2. css.lzhを取ってきて、my documentに解凍する。
    解凍するとmy documentcssフォルダ内に
    • brownball.png
    • pinkball.png
    • sample.css
    • blackball.png
    • grayball.png
    • red.png
    • sample.html
    • blueball.png
    • green.png
    • rightblueball2.png
    • yellow.png
    が出現する。

準備 2 画面に配置する

  1. my documentcsssample.htmlをCXeditorで開く。
  2. 同じく、sample.cssをCXeditorで開く。
  3. ブラウザでsample.htmlを表示する。
  4. このwindowと合わせて3つのwindowがデスクトップにあるので、画面最下段のメニューバーの何もないところを右クリックして「左右に並べて表示」したあと、位置やウィンドウサイズを調整して、次のように配置する。
    desktop画面配置
  5. このwindowは、ブラウザの「表示→文字のサイズ」で中を小(か最小)にしておくと表示される情報量が増えて便利かもしれない。

体験 例題で学ぶ Cascade Style Sheets

  1. 課題
    CXeditorで開いている2つのファイルのうち、sample.cssを、編集画面直上のタブをクリックして、読む。
    (何をどんなふうに指定しているか、だいたい分かればよい)
  2. 課題 文字色1
    body{}の2行目の
    color: black;を
    color: blue;に書き換えて、
    CTRL+Sを押して上書き保存し、
    css確認用サンプルHTMLを表示しているブラウザをアクティブにして(ブラウザ画面上のどこかをクリックする)、
    キーボード最上端にあるF5(更新キー)を押す。あるいは、ブラウザの「表示」→「最新の情報に更新」をクリックする。
    以下CTRL+SF5の手順を「更新する」とだけいう。
  3. 課題 文字色2
    body{}の2行目の
    color: black;を
    color: #ff0000;に書き換えて、更新する。
  4. 課題 文字色3
    body{}の2行目の
    color: #ff0000;を
    color: #9AB;に書き換えて、更新する。
  5. 課題 背景色
    body{}の3行目の
    background-color: #dda;を
    background-color: #FFF;に書き換えて、更新する。
  6. 色指定まとめ
    色指定には
    • 色名 (blackなど)
    • 16進数6桁 (#FF0000など)
    • 16進数3桁 (#ABCなど ブラウザは#AABBCCと解釈する)
    があることを、理解しましたか?
  7. 課題 背景色・文字色
    背景色と文字色を自分の好きな色にする。
  8. 課題 左右余白
    body{}の4・5行目の
    2em;を変えて
    自分の好きな左右余白にする。
  9. 課題 文字サイズ
    H1{}の1行目
    font-size: 1.5em;を
    font-size: 3em;に書き換えて、更新する。
    自分の好きな文字サイズにする。
  10. 課題 太文字
    H1{}の1行目
    font-weight:800;を
    font-weight:400;に書き換えて、更新する。
    font-weight:100;に書き換えて、更新する。
    font-weight:bold;に書き換えて、更新する。
  11. 課題 文字間隔
    H1{}の5行目
    letter-spacing: 2px;を
    自分の好きな文字間隔にする。
  12. 課題 文字列位置
    H1{}の6行目
    text-align: center;を
    text-align:left; に書き換えて、更新する。
    text-align:right;に書き換えて、更新する。
  13. 課題 上下余白
    H1{}の7・8行目
    margin-top: 2em;
    margin-bottom: 2em;
    を書き換えて、自分の好きな上下余白にする。
  14. 課題 見出し背景色
    H2{}の5行目
    background-color: white;
    を書き換えて、自分の好きな背景色にする。
  15. 課題 見出し枠線
    H2{}の9行目
    border: 2px solid black;を
    border: 5px outset blue;に書き換えて、更新する。
  16. 課題 見出し下枠線
    H4{}の9行目
    border-bottom:1px solid black;
    を書き換えて、自分の好きな下枠線にする。
  17. 課題 見出し左枠線
    H4{}の10行目
    border-left:16px solid black;
    を書き換えて、自分の好きな左枠線にする。
  18. 課題 引用表示
    BLOCKQUOTE {} 内を書き換えて
    自分の好きな引用表示にする。
  19. 課題 リストマーク・classの働き
    CXeditorの編集画面をsample.htmlに変えて、
    リストマーク
    <li class="red">赤
    <li class="pink">ピンク

    <li class="brown">茶
    <li class="gray">灰
    <li class="blue">青
    <li class="yellow">黄
    <li class="green">緑
    <li class="black">黒
    のうち、すきなリストマークに変える。
  20. 課題 表・classの働き

    の <table border=1>

    <table class="tl">
    に書き換えて更新する。      どや!

授業終了五分前

情報機器の操作 受講者 レポート提出用 掲示板 の「題名欄」に「css」、「内容欄」に、どこまで体験できたか、どこが分かりにくかったか、を書く。

次回

次回は、webページを作る 4 自分のページを作る です。
E-MAIL 野浪研究室 情報機器の操作テキスト △ ページTop ←戻る