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. 完成です。

ファイルの作成-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. 完成です。

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へ

CSS作成時の注意-BlueGriffon

 css, css, ensyu-a, lecture, web-tips  CSS作成時の注意-BlueGriffon はコメントを受け付けていません。
7月 112013
 

いくつかのキャプチャー画像がこれから出てきますが、保存先、見出し、記号付リスト(箇条書き)等、注意したいところですので、確認してください。

注)全体の流れは、HP作成(2級)の手順 を参照してください。

<index.htmlの作成>

  1. まず、保存する際に表題(タイトル)を聞いてきますので、タイトル(ここでは、ひつじ堂薬局)を入力します。
  2. OKをクリック。
    01
  3. デスクトップのフォルダに保存。
    01

<見出し1の作成>

  1. ひつじ堂薬局と入力し、見出し1に設定。
  2. 右下の<h1>をクリック。
  3. CSSスタイルを設定 をクリック
  4. 要素名で指定するをクリック。
  5. 大きさを300%にセット。
  6. 行高を170pxにセット。
  7. 揃えを中央にセット。
    01
  8. 一般の左側の▼をクリックして閉じる。
  9.  色をクリック。
  10. 前景色をクリック。
    35
  11. Rの欄に問題にあるように153と入力。
  12. Gの欄にも同様に51と入力。
  13. 背景画像の+をクリックし、追加します。
  14. back2.gifを選択。
  15. URLを文書に対して相対にするをクリック。
  16. OKをクリック。

<メニューの作成>

  1. メニューになる4行を入力。
  2. 4行をドラッグ(選択)。
  3. 記号付きリストをクリック。
    01
  4. <ul>をクリック。
    01
  5. CSSスタイルを設定 をクリック
  6. 要素名で指定するを選択。
  7. 大きさを150%にセット。
  8. 行高を2emにセット。(2文字分の高さ)
  9. 揃えを右寄せにセット。
    01
  10. 箇条書きをクリック。
  11. 種類からnoneを選択。
  12. xをクリックして閉じます。
    01
  13. メニューが完成。
    01
6月 202013
 

alphaEDIT のメニューを使って、スタイルシートのファイルを作成する場合は以下のようにします。

  1. alphaEDIT を起動します。
    alphaEDITのicon
  2. 名前を付けて保存をクリックします。
    save as
  3. デスクトップのフォルダに、index.htmlという名前で保存します。
    index
  4. 白い画面を右クリック。li>
  5. ページのプロパティをクリック。
    index
  6. スタイル設定をクリック。
  7. ボディをクリック。
  8. 編集をクリック。
    body
  9. 背景をクリック。
  10. 参照をクリック。
  11. 背景画像(ここでは、back.gif)を開く。
  12. 横方向に繰り返すを選ぶ。
    background
  13. OKをクリック。
  14. リンク全般をクリック。
  15. 編集をクリック。
    linkall
  16. 数値で指定をクリック。
  17. 150、%に設定。
    fontsize150
  18. 背景をクリック。
  19. 背景色の欄に #ffff99 と入力。
    bgcolor
  20. OKをクリック。
  21. ページのプロパティに戻るので、OKをクリック。

これでページ全体にかかるスタイルシートが設定できました。
次に、各要素にもスタイルシートを設定していきます。

alphaEDITのメニューからcssを作る2

6月 062013
 

スタイルシート(ここでは、style.cssという名前で作成)と、それを読み込むhtmlのファイル(ここでは、index.htmlという名前で作成)の2つを作っていきます。
注)2つのファイルは同じフォルダの中に保存します。

  1. メモ帳(MKEditor)を起動する。
  2. style.cssという名前で保存する。
  3. まずページの設定をする。
    ・背景画像をback.gifに、
    ・属性を、繰り返す(水平方向)に設定。
    BODY{
    background-image : url(back.gif);
    background-repeat: repeat-x;
    }
  4. 見出し1を設定する。
    ・文字サイズを400%、
    ・水平方向の配置を中央揃え、
    ・文字色を#336666
    に設定する。
    H1{
    font-size : 400%;
    text-align: center;
    color : #336666;
    }
  5. 見出し2を設定する。
    ・文字の属性:太さをふつう、
    ・文字サイズを250%、
    ・文字色を#336666
    に設定する。
    H2{
    font-weight : normal;
    font-size : 250%;
    color : #336666;
    }
  6. リンクを設定する。
    ・文字サイズを150%、
    ・背景色を#ffff99
    に設定する。
    A{
    font-size : 150%;
    background-color : #ffff99;
    }
  7. 上書き保存する。
  8. alphaEDITを起動する。
  9. index.htmlという名前で保存する。
  10. タイトル挿入
  11. 次の文章をタイトルの後に入力する。(半角スペースの区切りに注意)
    <link rel=stylesheet href=style.css type=text/css>
    自動的に”(ダブルクォーツ)が挿入される。
  12. 上書き保存
  13. 本文を入力していく。