この授業のゴール
フォルダを作り、拡張子を表示し、zipファイルを作って展開できるようになる。
1. ファイルとフォルダ ― 書類と引き出し
パソコンの中の入れものの仕組みは、机にたとえると分かりやすいです。
- ファイル = 1枚の書類。文章、写真、Webページなど、中身の入ったもの。
- フォルダ = 書類をしまう引き出し。中にファイルや、さらに別のフォルダを入れられます。
そして、ファイルやフォルダを見たり動かしたりする道具がエクスプローラーです。タスクバー(画面の下の帯)にある、黄色いフォルダのアイコンがそれです。キーボードの Windows + E を同時に押しても開けます。
2. 練習用フォルダを作る
これから学習で使う「自分の作業場所」を作ります。この先の授業でずっと使うので、ていねいにやりましょう。
- エクスプローラーを開くWindows + E を押します。
- 「ドキュメント」を開く左側の一覧から「ドキュメント」をクリックします。
- 何もないところで右クリック白い部分の上で、マウスの右ボタンを1回押します。メニューが出ます。
- 「新規作成」→「フォルダー」を選ぶ新しいフォルダが、名前が選ばれた状態で生まれます。
- 名前を
web-renshuにして Enter名前はあとで使うので、この通りに半角英数字でつけてください。日本語の名前は、プログラミングでは思わぬトラブルのもとになるので、作品フォルダは半角英数字にする習慣をつけます。
名前を打ち間違えたら: フォルダの上で右クリック →「名前の変更」でいつでも直せます。あわてなくて大丈夫です。
3. コピー&ペースト ― 一番使う技
「コピーして貼り付ける」は、Web制作で1日に何十回も使う基本の技です。マウスでもできますが、キーボードのほうが速くて確実です。
- コピーしたいものを選ぶ文字ならドラッグして青くする。ファイルなら1回クリックする。
- Ctrl + C でコピー見た目は何も起きませんが、パソコンが覚えてくれています。
- 貼り付けたい場所をクリックして 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 は、最初の設定では拡張子をかくしています。これでは作業になりません。必ず最初に表示する設定に変えます。
- エクスプローラーを開くWindows + E を押します。
- 上のメニューの「表示」をクリックウィンドウ上部に並んでいる「新規作成」「並べ替え」などの中にあります。
- 一番下の「表示」にマウスを合わせるさらに右側にメニューが開きます。(メニューの中にもう1つ「表示」がある、二段構えです)
- 「ファイル名拡張子」をクリックしてチェックを入れるこれで完了です。ファイル名の最後に
.txtのような名札が見えるようになったか、確かめてください。
注意: 拡張子は名札なので、うっかり書き換えるとファイルが開けなくなることがあります。名前の変更をするときは、「.」より前の部分だけを変えるようにしてください。もし変えてしまっても、正しい拡張子に戻せば直ります。
5. zipファイル ― フォルダを1つにまとめて渡す
作品ができたら、スタッフに「フォルダごと」渡す場面が出てきます。そのとき使うのが zip(ジップ)ファイルです。フォルダをぎゅっと1つのファイルに固めたもので、宅配便の「箱詰め」のようなものです。メールやチャットでは、フォルダのままでは送れないので、zipにして送るのが世の中の定番です。
zipを作る(箱詰めする)
- 固めたいフォルダの上で右クリックさっき作った
web-renshuで練習しましょう。 - 「ZIP ファイルに圧縮する」をクリックメニューの中ほどにあります。(見つからないときは「その他のオプションを確認」の中にあります)
- 名前を確認して Enter同じ場所に
web-renshu.zipという、ファスナーつきのアイコンのファイルができます。これが完成品です。元のフォルダはそのまま残るので安心してください。
zipを開く(箱から出す)
- zipファイルの上で右クリックもらったzipファイルでも、いま作ったものでも同じです。
- 「すべて展開」をクリック「展開(てんかい)」は「箱から全部出す」という意味です。
- 「展開」ボタンを押す場所はそのままで大丈夫です。中身の入った普通のフォルダが現れます。
よくあるつまずき: zipはダブルクリックでも「中をのぞく」ことができますが、それは展開ではありません。のぞいただけの状態で中のファイルを編集しようとすると、うまく動かないことがあります。使う前に必ず「すべて展開」。これを合言葉にしてください。
6. やってみよう ― 今日の総まとめ
やってみよう
- ドキュメントに
web-renshuフォルダを作る。(作成ずみならOK) - その中に右クリック →「新規作成」→「テキスト ドキュメント」で、メモファイルを1つ作り、名前を
memo.txtにする。 - 拡張子
.txtが画面に見えていることを確認する。(見えなければ、4章の設定をもう一度) memo.txtを開いて、今日の日付と「パソコン基本操作の練習」と書き、Ctrl + S で保存して閉じる。web-renshuフォルダを zip に固める。できたweb-renshu.zipを Ctrl + C でコピーして、デスクトップで Ctrl + V(3章の技の実戦です)。- デスクトップに貼り付けた zip を「すべて展開」して、中の
memo.txtが無事に開けたら合格です。スタッフに見せましょう。
発展チャレンジ(慣れている方・A型の方向け)
発展チャレンジ
- Windows + V を押してクリップボード履歴をオンにすると、「コピーした過去のもの」を選んで貼り付けられるようになります。実務で重宝する技です。
- Alt + Tab でウィンドウを素早く切り替える練習をしましょう。エディタとブラウザを行き来するWeb制作では、毎日使います。
- Windows + Shift + S で画面の一部を撮影(スクリーンショット)できます。「エラー画面を撮ってスタッフに見せる」という報告の練習をしてみましょう。これも実務の大事なスキルです。