webサイト制作の勉強|2024年5月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

道具の使い方を覚えよう

PCの使い方

物を作るうえで、その物を作る為の道具の使い方を覚える、という事が非常に大事になってきます。web制作者にとってパーソナルコンピューター(PC)は料理人にとっての包丁や美容師にとってのハサミと同様に、非常に大事な道具です。
今までのようにユーザーとしての使い方では無く、制作者としての使い方を覚えていきましょう。


まず最初にパソコンで覚える事はファイルとフォルダーの作成、及び使い方です。

  1. PCを使って働くのであれば、この記事の内容はぜひ理解したい事です。とにかく読んで、意味の解らない箇所や語句を書き出してみましょう。
  2. 次に解らない箇所・語句をインターネットを使って調べてみましょう。「解らない事をインターネットを使って調べる」も身に付けるべきスキルです。
  3. もちろんインターネットを使っても解らない事はあります。その場合は講師や副講師にどんどん聞いてみましょう。


ファイル

ファイルとは画像や顧客の住所録といったデータの事で、そのソフト上でファイルを「保存」すると作成される。すでにあるファイルを開いて作業をして「保存」をすると、元あったファイルに上書き保存されるので、元のファイルも作ったファイルも両方保存したい場合は、「ファイル名」を変えて「保存」(別名保存)しなければならない。

ファイルの拡張子

ファイル名の最後のドット「.」から後ろの部分を拡張子と呼びます。例えば index.htm の拡張子は htm、cat.jpg の拡張子は jpg です。拡張子の種類によってそのファイルの種類が決まります。
PCによっては初期設定で拡張子を表示させないという設定になっているので、自宅のPCを確認してみましょう。

https://support.microsoft.com/ja-jp/help/978449



フォルダー

フォルダーとは、作成したデータをまとめておく箱です。ファイルが増えると目的のファイルを見つけるのに苦労する為、日付別や用途別にフォルダーに分けて管理します。データの管理はパソコンを使う上で最も基本であり、最も大切な事なのでしっかりと覚えましょう。


ファイルとフォルダのちがいって?

パソコンの中には、デジタルカメラで撮(と)った写真、暑中見舞い(みまい)のハガキや住所録など、いろいろなデータが入っているよね。これらのデータのまとまりひとつひとつのことを「ファイル」っていうよ。ファイルには、それぞれ名前を付けられるし、写真や書類などの種類もわかるから、必要なときに探(さが)して表示(ひょうじ)したり、印刷したりできるよ。

けれど、作ったファイルをどんどんパソコンの中に保存(ほぞん)して、数がふえてくると、使いたいファイルがどこにあるのか見つけにくくなるよね。そこで、ファイルを分類して保存(ほぞん)するための“入れ物”、「フォルダ」を使うんだ。

たとえば、部屋の床(ゆか)いっぱいにオモチャや教科書が散らかっていると、探し物(さがしもの)がすぐには見つからないことがあるよね。けれど、教科書をしまうのは机(つくえ)の引き出し、オモチャをしまうのはオモチャ箱、のように“入れ物”を決めておけば、あとからすぐに見つけられるね。

同じように、パソコンでファイルを作ったら、写真のフォルダ、書類のフォルダなどに分類して保存(ほぞん)しておくといいよ。こうすれば、必要なファイルをすぐに見つけて、開くことができるんだ。

azby.fmworld.net




ファイルの作成から移動、コピーまで、Windowsパソコンの超基本操作 - 価格.comマガジン



ブラウザの使い方

ブラウザとは?

ウェブブラウザ(インターネットブラウザ、web browser)とは、 World Wide Web (WWW) の利用に供するブラウザであり、ユーザエージェント (UA) である。具体的には、ウェブページを画面や印刷機に出力したり、ハイパーリンクをたどったりするなどの機能がある。単にブラウザ(ブラウザー)と呼んだ場合、多くはウェブブラウザのことを指す。

授業ではGoogle Chromeを主に使用していきます。

Google Chrome

Googleが開発しているブラウザーGoogleアカウントと同期する事で様々な拡張が可能。
世界的に見るとシェアNo1ブラウザー
www.google.com


Mozilla Firefox

非営利団体である「Mozilla Foundation」が開発したブラウザー
Web開発に適したアドオンと呼ばれる追加機能が豊富。最新のHTML5とCSS3による表示が可能。

www.mozilla.org



Microsoft Edge

日本では長年MicrosoftInternet Explorerというブラウザがダントツのシェアを占めていたが、以前から不具合が多くweb制作者にとって悩みのタネでした。
2022年にInternet Explorerは正式に開発を停止し、IEの後継としてMicrosoftはEdgeというブラウザをリリースしています。最近はAIと連動した検索などで話題になっています
www.microsoft.com



「2009年1月から2018年8月まで」デスクトップでのブラウザーのシェア推移



2023年現在の日本国内のブラウザーシェア


色々なシェアを調べるツール「statcounter」

gs.statcounter.com



検索の仕方を覚える

検索の仕方を覚える、というのもサイト制作の習得の為に必要なスキルです。

「AND」検索

例(池袋 カフェ)
一番使われている方法で2つ以上のキーワードを入力して検索精度を上げることができます。
キーワード間に一文字分のスペース (半角、全角どちらでも可) を入れる。

「OR」検索

例(マイケル・ジャクソン OR Michael Jackson
たとえばマイケル・ジャクソンを調べるときに日本語で「マイケル・ジャクソン」と表記したサイトと英語で「Michael Jackson」と表記した2種類があり場合に、そのどちらも検索結果に出したい場合などに使うのが「OR」検索です。
キーワードを半角大文字「OR」、もしくはパイプ「|」で区切り、その前後には半角スペースを入れます。

「マイナス」検索

「キーワード1」で検索したいが「キーワード2」の情報は除きたい場合、「-」の後ろに書いたキーワードを除外して検索することができます。
例:英会話 -教室



関連サイト検索

そのWebサイトと似たようなサイト(類似性の高いサイト)を見つけたい場合、related:を使ってみましょう。
同業種の競合サイトを見つけたい、類似サイトを探して参考にしたい時などに役立ちます。

例:related:http://toyota.jp/(※トヨタ自動車の公式HPです)
結果:日産、ホンダ、マツダ、スズキ等の公式HPがヒット

タイトル検索

タイトル名をキーワードで検索したい場合は「intitle:」「allintitle:」がおすすめです。 「intitle:」は単一のキーワードを、「allintitle:」は複数のキーワードを検索する時に使用します。

例:intitle:Web制作
結果:ページタイトルに「Web制作」を含むページがヒット

例:allintitle:Web制作 おすすめ
結果:ページタイトルに「Web制作」「おすすめ」を含むページがヒット


画像検索
  • 写真の場所はどこでしょう

  • 写真の人物は誰でしょう



Chromeデベロッパーツールを使う

Google Chromeデベロッパーツールは、サイト制作において欠かせないツールです。
他のブラウザにも同様のツールはありますが、Chromeのものが最も使いやすいと感じる人が多いのではないでしょうか。


saruwakakun.com



Gメールアカウントを作る

Googleアカウントはweb制作者にとって、もはや必須の物といえます。
また授業内でのデータのやり取りなどでもGメールを使う事が多いので、必ず取得しておきましょう。

www.google.co.jp

www.google.com



タイピングスキルを身に付ける

必ずしもブラインドタッチを習得しなければいけない訳では無いですが、早くタイピング出来ると沢山のメリットがあります。授業でも入力作業はもちろんあります。入力作業にストレスを感じてしまうと授業全体にストレスを感じてしまうので、まずは入力作業にストレスを感じなくなる程度に慣れましょう。


www.code-drill.com




Chromeデベロッパーツールを使う

Google Chromeデベロッパーツールは、サイト制作において欠かせないツールです。
他のブラウザにも同様のツールはありますが、Chromeのものが最も使いやすいと感じる人が多いのではないでしょうか。


saruwakakun.com



Gメールアカウントを作る

Googleアカウントはweb制作者にとって、もはや必須の物といえます。
また授業内でのデータのやり取りなどでもGメールを使う事が多いので、必ず取得しておきましょう。

www.google.co.jp

www.google.com