Step 2 共通基礎 » 授業1

STEP 2 | 授業 1/7

パソコンの基本操作

Web制作は「ファイルを作って、編集して、確認して、渡す」の繰り返しです。その全部の土台になるパソコン操作を、ここでゆっくり固めます。すでにできる方は、チェックだけ確認して次へ進んで大丈夫です。

この授業のゴール フォルダを作り、拡張子を表示し、zipファイルを作って展開できるようになる。

1. ファイルとフォルダ ― 書類と引き出し

パソコンの中の入れものの仕組みは、机にたとえると分かりやすいです。

  • ファイル = 1枚の書類。文章、写真、Webページなど、中身の入ったもの。
  • フォルダ = 書類をしまう引き出し。中にファイルや、さらに別のフォルダを入れられます。

そして、ファイルやフォルダを見たり動かしたりする道具がエクスプローラーです。タスクバー(画面の下の帯)にある、黄色いフォルダのアイコンがそれです。キーボードの Windows + E を同時に押しても開けます。

2. 練習用フォルダを作る

これから学習で使う「自分の作業場所」を作ります。この先の授業でずっと使うので、ていねいにやりましょう。

  1. エクスプローラーを開くWindows + E を押します。
  2. 「ドキュメント」を開く左側の一覧から「ドキュメント」をクリックします。
  3. 何もないところで右クリック白い部分の上で、マウスの右ボタンを1回押します。メニューが出ます。
  4. 「新規作成」→「フォルダー」を選ぶ新しいフォルダが、名前が選ばれた状態で生まれます。
  5. 名前を web-renshu にして Enter名前はあとで使うので、この通りに半角英数字でつけてください。日本語の名前は、プログラミングでは思わぬトラブルのもとになるので、作品フォルダは半角英数字にする習慣をつけます。
名前を打ち間違えたら: フォルダの上で右クリック →「名前の変更」でいつでも直せます。あわてなくて大丈夫です。

3. コピー&ペースト ― 一番使う技

「コピーして貼り付ける」は、Web制作で1日に何十回も使う基本の技です。マウスでもできますが、キーボードのほうが速くて確実です。

  1. コピーしたいものを選ぶ文字ならドラッグして青くする。ファイルなら1回クリックする。
  2. Ctrl + C でコピー見た目は何も起きませんが、パソコンが覚えてくれています。
  3. 貼り付けたい場所をクリックして Ctrl + Vコピーしたものが現れます。何回でも貼り付けられます。

あわせて覚えたい仲間がこちらです。

キーはたらき覚え方
Ctrl + CコピーCopy の C
Ctrl + V貼り付けC のとなりの V
Ctrl + X切り取り(移動したいとき)ハサミの形の X
Ctrl + Z元にもどす(間違えたとき)「あっ」と思ったら Z
Ctrl + S保存Save の S。この先ずっと使います
ヒント: Ctrl + Z は「間違いを取り消すボタン」です。これがあるので、操作を怖がる必要はありません。どんどん試して、失敗したら Z でもどしましょう。

4. 拡張子を表示する ― Web制作の必須設定

拡張子(かくちょうし)とは、ファイル名の最後についている「.html」「.png」「.txt」のような部分のことです。「このファイルは何の種類か」を表す名札で、Web制作では .html(ページ本体)、.css(見た目)、.js(動き)、.png.jpg(画像)をいつも見分けながら作業します。

ところが Windows は、最初の設定では拡張子をかくしています。これでは作業になりません。必ず最初に表示する設定に変えます。

  1. エクスプローラーを開くWindows + E を押します。
  2. 上のメニューの「表示」をクリックウィンドウ上部に並んでいる「新規作成」「並べ替え」などの中にあります。
  3. 一番下の「表示」にマウスを合わせるさらに右側にメニューが開きます。(メニューの中にもう1つ「表示」がある、二段構えです)
  4. 「ファイル名拡張子」をクリックしてチェックを入れるこれで完了です。ファイル名の最後に .txt のような名札が見えるようになったか、確かめてください。
注意: 拡張子は名札なので、うっかり書き換えるとファイルが開けなくなることがあります。名前の変更をするときは、「.」より前の部分だけを変えるようにしてください。もし変えてしまっても、正しい拡張子に戻せば直ります。

5. zipファイル ― フォルダを1つにまとめて渡す

作品ができたら、スタッフに「フォルダごと」渡す場面が出てきます。そのとき使うのが zip(ジップ)ファイルです。フォルダをぎゅっと1つのファイルに固めたもので、宅配便の「箱詰め」のようなものです。メールやチャットでは、フォルダのままでは送れないので、zipにして送るのが世の中の定番です。

zipを作る(箱詰めする)

  1. 固めたいフォルダの上で右クリックさっき作った web-renshu で練習しましょう。
  2. 「ZIP ファイルに圧縮する」をクリックメニューの中ほどにあります。(見つからないときは「その他のオプションを確認」の中にあります)
  3. 名前を確認して Enter同じ場所に web-renshu.zip という、ファスナーつきのアイコンのファイルができます。これが完成品です。元のフォルダはそのまま残るので安心してください。

zipを開く(箱から出す)

  1. zipファイルの上で右クリックもらったzipファイルでも、いま作ったものでも同じです。
  2. 「すべて展開」をクリック「展開(てんかい)」は「箱から全部出す」という意味です。
  3. 「展開」ボタンを押す場所はそのままで大丈夫です。中身の入った普通のフォルダが現れます。
よくあるつまずき: zipはダブルクリックでも「中をのぞく」ことができますが、それは展開ではありません。のぞいただけの状態で中のファイルを編集しようとすると、うまく動かないことがあります。使う前に必ず「すべて展開」。これを合言葉にしてください。

6. やってみよう ― 今日の総まとめ

やってみよう
  1. ドキュメントに web-renshu フォルダを作る。(作成ずみならOK)
  2. その中に右クリック →「新規作成」→「テキスト ドキュメント」で、メモファイルを1つ作り、名前を memo.txt にする。
  3. 拡張子 .txt が画面に見えていることを確認する。(見えなければ、4章の設定をもう一度)
  4. memo.txt を開いて、今日の日付と「パソコン基本操作の練習」と書き、Ctrl + S で保存して閉じる。
  5. web-renshu フォルダを zip に固める。できた web-renshu.zipCtrl + C でコピーして、デスクトップで Ctrl + V(3章の技の実戦です)。
  6. デスクトップに貼り付けた zip を「すべて展開」して、中の memo.txt が無事に開けたら合格です。スタッフに見せましょう。

発展チャレンジ(慣れている方・A型の方向け)

発展チャレンジ
  • Windows + V を押してクリップボード履歴をオンにすると、「コピーした過去のもの」を選んで貼り付けられるようになります。実務で重宝する技です。
  • Alt + Tab でウィンドウを素早く切り替える練習をしましょう。エディタとブラウザを行き来するWeb制作では、毎日使います。
  • Windows + Shift + S で画面の一部を撮影(スクリーンショット)できます。「エラー画面を撮ってスタッフに見せる」という報告の練習をしてみましょう。これも実務の大事なスキルです。

できたチェック