Firefox Portable Editionのセットアップ

 mozilla, PcTips, software, web-tips  Firefox Portable Editionのセットアップ はコメントを受け付けていません。
2月 142019
 
  1. Mozilla Firefox, Portable Edition にアクセスFF portable DLtop
  2. 下にスクロールして、Localizationsまで辿ります。localization言語選択
  3. Japaneseの欄の右側にあるDownloadをクリック。
    すると画面が入れ替わります。
  4. 保存をクリック保存
  5. デスクトップに保存しましょう。
  6. ダウンロードが完了しました、と表示されたら、全て閉じます。
  7. デスクトップに、FirefoxPortable_xxx_Japanese.paf.exeが保存されているはずです。
    xxxにはバージョンを表す数字が入ります。
    2019.2.13時点では、バージョン65.0となっています。
    インストーラーICON
  8. ウィザードの画面が開きます。
    次へをクリック。
    インストールウィザード
  9. インストール先を聞いてくるので、参照をクリック。インストール先
  10. 今回は自動的にフォルダが作成され、必要なファイルが格納されますが、
    バラバラになって展開されると後でまとめるのが大変なので、
    念の為、デスクトップにFFPという名前でフォルダを作成しました。新規フォルダの作成
  11. OKを押して、一つ前の画面(項目9)に戻ります。
  12. インストールをクリック。
  13. インストール中の画面に変わります。インストール中
  14. 完了をクリック。インストール終了
  15. デスクトップのFFPの中にFirefoxPortableというフォルダが作成されました。
    Firefox Portableのフォルダーアイコン
  16. FirefoxPortableをダブルクリックして開きます。フォルダー
  17. FirefoxPortable.exeをダブルクリック。
  18. メールアドレスを聞いてきます。
    Syncはスマホなどでブックマークを共有したいときに利用します。
    任意です。必要でしたらメアドを入力して続けてください。
    普通は、後でもできるので、「この手順をスキップ」をクリック。FFportableDLtop
  19. 更新の案内が出るときもありますが、後でをクリック。FFportableDLtop
  20. 最初の画面と「Firefoxのプライバシに関する・・・」と2つが開きます。
  21. 「Firefoxのプライバシに関する・・・」の方を、xをクリックして、閉じます。
    (こちらについては、時間のあるとき1回は見ておきましょう。
    メニューのヘルプからFirefoxヘルプをクリックするとリンクが表示されます。)FFportableDLtop
  22. これで完成です。ブラウザが使用できるようになりました。

USBメモリーにフォルダーごとコピーすれば、持ち運びも可能です。
その際は、フォルダーサイズが420MBほどになっていますので、
それ以上入るものを用意しましょう。

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級で作成したように画像と表の作成から成り立っています。
    本文の作成 を参考に問題をみながら作成しましょう。

見出し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へ

8月 302015
 

表の作成が済んだら、見出し1を設定していきます。

  1. 表の1行目に、染色工房あかねと入力。
    h1
  2. 見出し1をクリック。
  3. CSSをクリック。
    CSS editor
  4. style.css をクリック。
    style.css
  5. 新しい規則をクリック。
    new rule
  6. h1(見出し1)をクリック。
    h1
  7. スタイル規則の作成をクリック。
    make
  8. テキストをクリック。
  9. フォントサイズの▼をクリック。
  10. 1px をクリック。
  11. 72px に設定します。
    pixel
  12. 行揃えの▼をクリック。
  13. 中央をクリック。
    center
  14. 前景色の横 をクリック。
  15. Rの欄に問題にあるように153と入力。
    Red 153
  16. OKをクリック。
  17. 3か所の設定を確認します。
    center
  18. OKをクリックします。

画像の挿入-KompoZer に移ります。

背景の設定 – KompoZer

 ensyu-a, lecture, PcTips, software, web-tips  背景の設定 – KompoZer はコメントを受け付けていません。
7月 102015
 

KompoZerを使ったスタイルシート(CSS)による背景の設定の仕方です。

  1. まず、KompoZerのアイコンをダブルクリック(起動)します。
  2. 保存をクリックします。
    00
  3. タイトルを聞いてくるので、入力します。(ここでは染織工房あかねと入力します)
    01
  4. 保存先に気を付けて保存しましょう。
    02
  5. サイトを編集をクリック。
    03
  6. これからHPを作っていくにあたって、画像などのファイルを保存するフォルダを選びます。(まだ作成されていない場合は、新しいフォルダーの作成をクリックし、作成してから選びます。)
    04
  7. サイト名の欄にわかりやすい名前を入力します。
  8. OKをクリック。
    05
  9. CSSエディタをクリック。
    06
  10. 新しいlink要素をクリック。
    07
  11. URLの欄に、これから作るCSSファイルの名前(style.css)を入力。
    08
  12. style.cssをクリック。
    09
  13. 新しい規則をクリック。
    10
  14. 指定された種類の~が選択されているのを確認します。
  15. 下の空欄の横の三角をクリック。
  16. bodyを選択。
    11
  17. スタイル規則の作成をクリック。
    11b
  18. bodyをクリック。
    12
  19. 背景をクリック。
  20. 選択をクリック。
    13
  21. back.gifをクリック。
  22. 開くをクリック。
    14
  23. 水平方向に並べるをクリック。
  24. Okをクリック。
    15
  25. 背景画像の設定が完了。
    16

表の作成-KompoZer に進む。