CSSの作成例

 css, ensyu-a  CSSの作成例 はコメントを受け付けていません。
12月 102015
 

大道芸フェスタのHP作成例です。ここでは、スタイルシートも自分で設定していきます。

  1. 検定試験問題(2級) をクリック。
  2. 問題の処理条件を見て作成します。
  3. データ2級 をデスクトップに保存します。
  4. ダブルクリック(右クリック)し、(すべて)展開します。
  5. フォルダの名前を変更します。
  6. kompozer-0.8b3.ja.win32.zip をデスクトップに保存・展開して起動します。
  7. サイトを編集をクリック。
  8. 名前を変えたフォルダを選びます。
  9. サイト名をわかりやすい名前に変えます。
  10. OKをクリック。
  11. 保存をクリック。
  12. ページタイトルを入力します。
  13. 保存先を聞いてくるので、展開したフォルダを開きます。
  14. index と入力。
  15. 保存をクリックします。
  16. サイトマネージャのサイト名(図ではHP2_大道芸フェスタ)の左側(+)をクリックすると、フォルダの中のファイルが一覧で見れます。
    入力したindex.htmlの名前も確認できます。
  17. 準備が終わり、ここからはページの中身を作成していきます。
    まず、最初にスタイルシート(style.css)を作成していきます。
  18. CSSエディタをクリック。
  19. 新しいlink要素をクリック。
  20. URLの欄に style.css と入力し、スタイルシートの作成をクリックします。
  21. 左側に style.css と表示されます。
  22. 次に、bodyに背景画像を設定していきます。
  23. style.css をクリック。
  24. 新しい規則をクリック。
  25. 右側の v をクリック。
  26. body(body直下) をクリック。
  27. スタイル規則の作成をクリック。
  28. 背景をクリック。
  29. 選択をクリック。
  30. back.gif を開きます。
  31. タイリングの欄から 水平方向に並べる を選びます。
  32. OKをクリック。
  33. サイトマネージャリロードをクリック。
  34. style.cssをダブルクリック。
    すると、右側に表示されます。
    bodyのかっこの中に、画像repeat-x が設定されていることがわかります。
  35. 確認したら、閉じましょう
  36. つぎに、ワードを使う感覚で、ページを作成していきますが、スタイルシートの設定が違うところです。
  37. まず、問題のレイアウトのように表を作成していきます。
  38. ENTERを押して、3行ほど空けてから、テーブルをクリック。
    マウスを動かし、3×3になったところで、クリック
  39. 1行目の3つのセルをドラッグ(選択)します。
  40. 3つのセルのどれかのセルの真ん中あたりを右クリックします。
  41. 選択されたセルを結合 をクリック。すると、1行目が1つのセルになります。
  42. 大道芸フェスタと入力。
  43. ドラッグします。
  44. 見出し1 を選びます。
  45. スタイルシート見出し(H1)の設定をしていきます。
  46. CSSエディタをクリック。
  47. style.cssをクリック。
  48. 新しい規則 をクリック。
  49. h1(見出し1)をクリック。
  50. スタイル規則の作成 をクリック。
  51. テキストをクリック。
  52. フォントサイズ に 0% を選びます。
  53. 上の▲を押していき、400% に設定します。
  54. 行揃え の欄から中央を選びます。
  55. 前景色の空欄の横をクリック。
  56. 51緑と青102を入力します。(空欄に、直接#336666 と入力してもできます。)
  57. OKを2回押して、設定完了です。
  58. 注意)時々、戻ってきたとき、反映されず、さらに、左側の見出し1の欄グレーになったまま、動かなくなる時があります。
    その場合は、
    1.一度保存し、Kompozerを閉じます
    2.Kompozerを起動します。
    3.左側のindex.html をダブルクリックします。

    4.見出し1の欄がもとに戻っているのを確認します。
    5.大道芸フェスタをドラッグし、見出し1にしましょう。
  59. 次に、2行目に画像を挿入し、リンクを張っていきます。
  60. まず、2行目の左側(2行1列)をクリック。
  61. 画像をクリックします。
  62. 右のフォルダアイコン(ファイルを選択)をクリック。
  63. icon1.gif を開きます。
  64. 代替テキストの欄に、日時ページと入力します。
  65. リンク対象をクリック。
  66. 右側のフォルダアイコンをクリック。
  67. page1.html を開きます。
  68. 相対URLを使用する にチェックが入っているのを確認します。
  69. OKをクリックします。
    これで、1つ目のメニューが完成です。
  70. 2つ目のメニューの作成に移ります。
  71. 2行2列目のセルをクリックし、画像をクリック。
  72. icon2.gif を開きます。
  73. 代替テキストの欄に、催し物ページ と入力します。
  74. リンク対象をクリックし、page2.htmlを開きます。
  75. 相対URLのチェックを確認。
  76. OKをクリック。
  77. 3つ目のメニューの作成に移ります。
  78. 2行3列目のセルをクリックし、画像をクリック。
  79. icon3.gif を開きます。
  80. 代替テキストの欄に、フリーマーケットページ と入力します。
  81. リンク対象をクリックし、page3.htmlを開きます。
  82. 相対URLのチェックを確認。
  83. OKをクリック。これでメニューの作成が終わります。
  84. 次に3行目をクリック。
  85. 画像をクリック。
  86. pic.jpg を開きます。
  87. 代替テキストの欄に、大道芸フェスタの写真と入力します。
  88. OKをクリック。
  89. 画像の右側をクリック。
  90. カーソルが表示されるのを確認して、ENTERを押します。
  91. すると、次の行に移動します。
  92. 問題を見ながら文字を入力します。
  93. 6行目の動体視力~を打ち終わったら、Enterを押して改行します。
  94. 挿入から水平線を選びます。
  95. 残りの文字を入力します。
  96. お知らせドラッグ。
  97. 見出し2を選びます。
  98. CSSをクリック。
  99. 新しい規則をクリック。
  100. h2を選択します。
  101. スタイル規則の作成をクリック。
  102. テキストをクリック。
  103. フォントサイズを250%、前景色を#336666、フォントウェイトを通常に設定します。
  104. OKをクリックします。
  105. メールでのお問い合わせをドラッグします。
  106. リンクをクリックします。
  107. festa@goukaku.ne.jp と入力します。
  108. 電子メールアドレスとして扱うにチェック。
  109. OKをクリックします。
  110. CSSエディタをクリック。
  111. 新しい規則をクリック。
  112. aと入力。
  113. スタイル規則の作成をクリック。
  114. テキストをクリック。
  115. フォントサイズを150%に設定する。
  116. 背景をクリック。
  117. 背景色の欄に、直接#ffff99 と入力。
  118. OKをクリック。
  119. ソースをクリック。
  120. 赤い線を引いたところを削除(変更)します。
  121. 完成です。
  122. スタイルシートは css と照らし合わせて、確認します。余計な設定がされていれば、削除します。
  123. 完成です。

CSSの作成 – Kompozer

 css, ensyu-a, lecture, nyumon, PcTips, software, web-tips  CSSの作成 – Kompozer はコメントを受け付けていません。
11月 132015
 

まず、これからHPを作っていくにあたって、画像などのファイルを保存するフォルダを選びます。

  • サイトを編集をクリック。
    03
  • デスクトップに保存し、名前を変更したフォルダを選びます。
    04
    注)2つ目のサイトを作成するときなど、すでに公開サイトに登録されているときは、新規サイトをクリックしてから、フォルダを選択します。
    06b
  • サイト名の欄にわかりやすい名前を入力します。
  • OKをクリック。
    07

ここからスタイルシートの作成と設定に入ります。

  • CSSエディタをクリック。
    08
  • 新しいlink要素をクリック。
    09
  • URLの欄に、これから作るCSSファイルの名前(style.css)を入力。
  • スタイルシートの作成をクリック。
    08
  • style.cssをクリック。
    09
  • 新しい規則をクリック。
    10
  • 指定された種類の~が選択されているのを確認します。
  • 下の空欄の∇をクリック。
  • bodyをクリック。
  • スタイル規則の作成をクリック。
    11
  • bodyをクリック。
    12
  • 背景をクリック。
  • 選択をクリック。
    13
  • back.gifをクリック。
  • 開くをクリック。
  • 14
  • 水平方向に並べるをクリック。
  • Okをクリック。
    15
  • 背景画像の設定が完了。
    16
  • 表の作成-KompoZer に進む。

ファイルの作成-KompoZerの場合

 css, css, ensyu-a, lecture, PcTips, software, web-tips  ファイルの作成-KompoZerの場合 はコメントを受け付けていません。
11月 052015
 

<ファイルの作成>

  1. 問題 ← クリック。
  2. データ2級をデスクトップに保存。
  3. ダブルクリック(右クリック)し、(すべて)展開。
    展開
  4. フォルダの名前を変更します。
    名前
  5. KompoZerを起動。
  6. 「今日の一言」が表示されたら閉じます。
    hint
  7. 保存をクリックします。
    save
  8. タイトルを聞いてくるので、入力します。(ここでは染色工房あかねと入力します)
    title
  9. 次に、保存先を聞いてきます。
  10. デスクトップに展開したフォルダを選びます(開く)。
  11. indexと入力。
    index
  12. 保存をクリック。

つづいて、スタイルシートの作成にすすみます。

参照: CSSの作成-KompoZer

HP作成(2級)の手順-KompoZerの場合

 css, css, ensyu-a, lecture, PcTips, software, web-tips  HP作成(2級)の手順-KompoZerの場合 はコメントを受け付けていません。
11月 052015
 

KompoZerを用いて、HP作成検定試験の2級の問題を解いていく手順です。

まず、 KompoZerのインストール を見て、KompoZerの準備を済ませます。

全部で7stepあります。順番に作成・設定していくとページが完成します。

  1. ファイルの作成
  2. CSSの作成
  3. 背景の設定
  4. 表の作成
  5. 見出し1の設定
  6. 画像の挿入
  7. 見出し2の設定

KompoZerのインストール

 css, css, ensyu-a, lecture, PcTips, software, web-tips  KompoZerのインストール はコメントを受け付けていません。
11月 022015
 
  1. まず、KompoZerをダウンロードしますので、以下のサイトにアクセスします。
    http://kompozer.net/download.php
  2. 下にスクロールし、Japanese 日本語の行を探します。
    01
  3. zip archive の列のdownload をクリックします。
  4. デスクトップに保存します。
    02
  5. 展開します。
    a.Win7の場合、ダブルクリックすると自動的に展開します。
    b.Win8, 10の場合、Zipファイルを右クリックし、すべて展開をクリックします。
    03
  6. 展開先(フォルダ)を聞いてきますので、そのまま展開をクリックします。
    (もし、別のフォルダに展開したければ、参照をクリックし、展開先を指定します。)
    04
  7. 展開作業が進行します。
    05
  8. しばらく待つと、フォルダ(kompozer-0.8b3.ja.win32 )が作成されます。
  9. そのフォルダの中を開き、さらに KompoZer という名前のフォルダを開きます。
  10. kompozer.exe を探し、起動(ダブルクリック)しましょう。
    06
  11. セキュリティの警告が表示されるかもしれませんが、そのまま実行をクリックします。
    07
  12. 今日の一言が表示されたら、閉じるをクリックします。
    08

本文の作成‐3級-KompoZer

 css, css, ensyu-a, lecture, PcTips, software, web-tips  本文の作成‐3級-KompoZer はコメントを受け付けていません。
10月 212015
 

コンテンツ(メニュー)の作成(3級)‐KompoZer につづいて、ここからは本文の作成です。

  1. 1行目をクリックします。
  2. 画像をクリックします。
    画像
  3. ファイルを選択をクリックします。
    pic.jpgを選択
  4. pic.jpg をクリックし、開きます。
    pic.jpgを選択
  5. 代替テキストの欄に、大道芸フェスタの写真 と入力します。
    代替テキストの入力
  6. OKをクリックします。
  7. 写真が表示されます。
  8. 写真の右横をクリック。
    写真の右端をクリック
  9. Enterキーを押すと、そのまま2行目に移ります。
    ENTERを押して、次の行に移る
  10. 次の文章を入力します。
    お知らせ
    けん玉教室参加者募集
    けん玉を知っていますか?けん玉達人が上達のコツを指導!
    動体視力の訓練に効果的というけん玉をみんなで楽しみましょう♪
    開催日時
    テキストの入力
  11. お知らせをドラッグします。
  12. 見出し2に変更します。
    見出し2
  13. 開催日時も上と同様にドラッグし、見出し2に変更します。
    見出し完成
  14. 保存します。
  15. 【つぎに表の中に表を作ります。ただ、表の中に表が作れない場合があります。その際には、表の外に表を作っておいてから、表の中に移動します。】
  16. まず、表の中にそのまま表を作ってみましょう。作れない場合は、以下の図のように表の外をクリックし、外に作成します。
  17. テーブルをクリックします。
    テーブル
  18. 3行2列になるようにドラッグし、クリック(もしくは、OK)します。
    3x2
  19. それぞれのセルの中に次の文章を入力します。
    「開催日」 「11 月 9 日」
    「開催時間」 「午前 10 時から午後 4 時まで」
    「開催場所」 「来夢広場・駅前広場・なるみ小学校」
    テキストの入力
  20. ソースをクリック。
  21. 表の<td の中の styleから始まる文章をドラッグします。
  22. 右クリックコピーをクリック。
    コピー
  23. 編集から検索・置換をクリック。
    置換
  24. 検索文字列に貼り付け。
  25. すべて置換をクリック。
    すべて置換
    下のように、tdのタグがシンプルになります。
    td & table
  26. 前を検索をクリック。
  27. すべて置換をクリック。
    すべて置換(前方)
  28. 1つ目の表のtdもシンプルになります。
  29. <table の中は下図のようにドラッグし、青く選択した個所を削除します。
    表が2つありますが、2つとも削除します。
    td & table2
  30. ここから34までは、表の外に作った場合の手順です。
    2つ目の表をドラッグします。
    copy
  31. 右クリックし、コピーをクリック。
  32. 1つ目の表の<h2>開催日時</h2>の後の行貼り付けます。
    paste
  33. 1つ目の表の中に、2つ目の表が入りました。コピー終了
  34. 貼り付けが終わりましたので、コピー元のほうを削除します。
    削除
  35. 下図は表の中に表が入ったところです。
    表の移動終了
  36. デザインをクリック。
    design
  37. 表の下に1行あけます
  38. 次の文章を入力します。
    すばる市観光協会イベント課
    電話:052-904-3327
    メールでのお問い合わせ
  39. メールでのお問い合わせ をドラッグします。
  40. リンクをクリックします。
    design
  41. リンク対象の空欄にfesta@goukaku.ne.jp と入力します。
    電子メールアドレスとして扱うをクリック。
    プロパティ
  42. OKをクリック。
  43. 完成です。

コンテンツ(メニュー)の作成(3級)‐KompoZer

 css, ensyu-a, lecture, PcTips, software, web-tips  コンテンツ(メニュー)の作成(3級)‐KompoZer はコメントを受け付けていません。
10月 212015
 

CSSをページに反映する-Kompozer に続いて、中身の部分を作成していきます。

  1. テーブルをクリックします。
    01
  2. 2行2列になるようにドラッグし、クリックします。
    01
  3. 1行目の2つのセルをドラッグ(選択)します。
  4. 右クリックします。
  5. 選択されたセルを結合をクリックします。
    セルの結合
  6. 1行目大道芸フェスタと入力します。
  7. 大道芸フェスタを選択(ドラッグ)します。
    見出し1
  8. 見出し1に変更します。
  9. すぐ下の行(2行1列目)に目次を作成します。
    次の3行を入力します。
    日時
    催し物
    のみの市
  10. 入力した3行を選択します。
  11. 順序なしリストの作成 をクリックします。
    順序なしリスト
    参考: list-style-type -HTMLクイックリファレンス
  12. 日時をドラッグ(選択)します。
  13. リンクをクリックします。
    ハイパーリンク
  14. ファイルを選択をクリックします。
    ファイルの選択
  15. デスクトップの自分の名前をつけたフォルダ(例:HP3_14Z000_成徳太郎)から page1.html を開きます。
    page1にリンク
  16. リンク先を をクリックし、新しいウィンドウに開くを選びます。
    new window
  17. 同様にして、催し物を選択し、page2.html を設定します。
    page2にリンク
  18. 最後に、のみの市を選択し、page3.html を設定します。
    page3にリンク
  19. つづいて右側のセル(2行2列目)に移ります。
    この部分は、4級で作成したように画像と表の作成から成り立っています。
    本文の作成 を参考に問題をみながら作成しましょう。

CSSをページに反映する-Kompozer

 css, ensyu-a  CSSをページに反映する-Kompozer はコメントを受け付けていません。
10月 162015
 

KompoZerの使ってサイトのページを作成する際、
スタイルシート(CSS)がすでにあるという前提で、それをページに反映させる方法です。

  1. データ(style.css等のファイル)を右クリックし、デスクトップに保存します。 - データ
  2. 右クリックし、すべて展開 をクリックします。
    a
  3. 展開をクリックします。
    b
  4. フォルダが開きます。
    c
  5. フォルダ名のnameのところを自分の名前に変えましょう。
  6. KompoZerのアイコンをダブルクリック(起動)します。
    「今日の一言」が表示されたら閉じます。
    01
  7. 保存をクリックします。
    02
  8. タイトルを聞いてくるので、入力します。(ここでは大道芸フェスタトップと入力します)
    03
  9. 保存先に気を付けて保存しましょう。
    04
  10. サイトを編集をクリック。
    05
  11. これからHPを作っていくにあたって、画像などのファイルを保存するフォルダを選びます。
    06a
    注)2つ目のサイトを作成するときなど、すでに公開サイトに登録されているときは、新規サイトをクリックしてから、フォルダを選択します。
    06b
  12. サイト名の欄にわかりやすい名前を入力します。
  13. OKをクリック。
    07
  14. CSSエディタをクリック。
    08
  15. 新しいlink要素をクリック。
    09
  16. 選択をクリック。
    10
  17. style.cssをクリック。
    11
  18. スタイルシートの作成をクリック。
    12
  19. OKをクリック。
    13
  20. 保存をクリック。
    14

見出し2の設定-KompoZer

 css, css, ensyu-a, lecture, web-tips  見出し2の設定-KompoZer はコメントを受け付けていません。
8月 302015
 

画像の挿入-kompozer が終わったら、つづけて本文を作成していきます。

  1. 「染め物体験」を見出し2に設定していきます。
    inputstr
  2. 染め物体験 を ドラッグ。
  3. 見出し2をクリック。
    h2
  4. css をクリック。
  5. style.css をクリック。
    style.css
  6. 新しい規則をクリック。
    new rule
  7. h2(見出し2)を選ぶ。
    h2
  8. スタイル規則の作成 をクリック。
    make rule
  9. テキスト をクリック。
  10. フォントサイズの から 0px を選ぶ。
    0px
  11. 36pxに設定。
  12. フォントスタイルをイタリックに設定。
  13. 前景色の横をクリック。
    italic
  14. Rを153に変更。。
    R=153
  15. 3か所を確認して、OKをクリック。
    ok
  16. メールで予約 をドラッグ(選択)。
  17. リンク をクリック。
    link
  18. リンク対象の空欄に akane@goukaku.ne.jp と入力。
  19. 電子メールアドレスとして扱う をチェック。
    address
  20. OKをクリック。
  21. css をクリック。
    css
  22. style.css をクリック。
    style.css
  23. 新しい規則 をクリック。
    new rule
  24. 空欄に a と入力。
  25. スタイル規則の作成をクリック。
    make rule of a
  26. テキストをクリック。
  27. 0pxを選ぶ。
    0px
  28. 24pxに設定。
    24px
  29. Kompozerサイトマネージャの2-1-染色工房の左横をクリック。
  30. style.css をダブルクリック。
    double click
  31. 以下のスタイルシートとあっているか確認します。
    check css
  32. 最後にソースをクリックして、余計な設定がされていないか確認します。
    chk source
  33. 下記の赤線で示した箇所のように余計な設定項目が記述されていた場合、削除します。delete

HP作成(2級)の手順-KompoZer : Menuへ

画像の挿入-KompoZer

 ensyu-a, lecture  画像の挿入-KompoZer はコメントを受け付けていません。
8月 302015
 

<画像の挿入とリンクの作成>

見出し1の設定が終わったら、つづけて画像の挿入とリンクの作成を行っていきます。

  1. 2行1列目のセルをクリック。
  2. 画像をクリック。
    画像
  3. ファイルを選択をクリック。
    select-file
  4. icon1.gif を開く。
    icon.gif
  5. 代替テキストに、工房について と入力。
    text
  6. リンク対象 をクリック。
  7. ファイルを選択 をクリック。
    link
  8. page1.html を開く。
    page1.png
  9. OK をクリック。
    ok
  10. 次の作品集も同様にして進めます。
    2行2列目のセルをクリック。
  11. 画像をクリック。
    img
  12. icon2.gifを選び、開くをクリック。
    icon2.png
  13. 代替テキストの欄 に 作品集 と入力。
  14. リンク対象 をクリック。
    text
  15. page2.htmlを選択。
  16. 開く をクリック。
    page2.html
  17. OKをクリック。
    link
  18. 上と同様にして、2行3列目のセルをクリックします。
  19. 画像をクリック。
    img
  20. icon3.gif を 開きます。
  21. 代替テキストにアクセスマップと入力。
  22. リンク対象をクリック。
    link
  23. page3.htmlを選択。
    page3.html
  24. OKをクリック。
  25. 問題を見て、以下の図のように文字を入力します。
  26. 打ち終わったらEnterキーを押して改行しておきます。
  27. 画像 をクリック。
    input
  28. pic.jpg を開く。
    pic.jpg
  29. 代替文字列に紅葉の写真と入力。
    text
  30. OKをクリック。
  31. カーソルが画像の右にあれば、Enter を押して改行します。
    enter
  32. 以下の画像にあるように、文章を入力します。
    input
  33. 間にある水平線は以下のようにして挿入します。
  34. 挿入をクリック。
  35. 水平線をクリック。
    horizontal

つづいて、見出し2の設定にすすみます。

参照: 見出し2の設定-KompoZer