Web制作を勉強してみる

新潟出身。ビールより日本酒が飲みたい。

2.Web制作の基礎

今日は大体座学で、パソコンの使い方から仕事の考え方や物事の考え方を聞きました。

結構話がいろんなところに飛んでなかなかおもしろい先生でした。

 

パソコンの使い方・どれくらい使えるのか

私自身普通程度に使えるのかと思っていましたが、あくまで一般人の「普通」なので・・・実際はほとんど使えていないことが分かりました。

この訓練を通じて技術者として使える人になれるようがんばります。

まずMacとWindowsのざっくりした違いを問われましたがOSくらいしか思い浮かびませんでした。

Mac:ファインダーというソフトから、ほかのソフトをいじる。OSを直に触らないから故障が少ない。

Win:OSを直に触ることができるため自由度が高いが、その分故障しやすい。

ということでした。

びっくり。OSを触るとかそういう発想は一切ありませんでした。

Web系の仕事をするうえで、という話なのかもしれません。

これがわかっていない時点で、きっと使えているとは言えないのだと思います。これ以外にも、Wordの使い方なども少し話が出ました。

Wordの文書の入力に関しては、日本人はほとんど直接入力するらしいですが海外ではスタイルシートというものを使用するそうです・・・初めて聞いたよ・・・

検索方法

Webのことでわからないことがあったら人に聞くよりまずネットで調べてみたほうが速い!とのことです。確かにその通りです。

検索方法は「〇〇 〇〇」という感じでキーワードを何個か並べて絞り込んでいくやり方をメインにしていました。

ですが「〇〇 -〇〇」こんな風にマイナスを入れることでキーワードを除外することができる・・・!!これで検索の精度を上げることができますね。

検索するときのポイントは、自分が知らないことを見つけるようにすること!自分が知っていることを調べて知識の確認をするだけではもったいない。

知らないことを知ること!

 

1.パソコン・インターネットの基礎

初回の授業です。まずはパソコンの基本的な操作やブラウザの使い方など教えてもらいました。

※ブログなのであまり堅苦しく書くと自分でも書きづらく・読みづらくなってしまうのでゆるっと書いていきます。

 

・共有のパソコンを使うときはブラウザをシークレットウインドウを使用する

今まで特に気にしていませんでした・・・というより共有のパソコンを使用するということがなかったですね。

chromeの場合はCtrl+Shift+N

シークレットウインドウを使うことで、閲覧履歴などが残らなくなります。

毎回削除する必要がなくなるのでらくちんですね。ただし、全てが保存されないということではないようなので機密性の高い情報を扱う際は注意したほうが良さそうです。

 ・HTMLを記述した時は”検証”でレイアウトの確認ができる

chromeの場合はCtrl+Shift+I

今まで何のために存在するか知りませんでした・・・。とても重要な機能です。

最近のWebサイトは(ほぼ)すべて「レスポンシブサイト(可変サイト)」と呼ばれるPC・スマホタブレットで勝手にレイアウトが変わるものになっています。そしてこの「検証」では記述したHTMLを、ブラウザ上で各デバイスに合わせて表示してくれるという優れものなのです。すごい。

これから制作するサイトについてはレスポンシブでないとダメ、企業側もこれが作れる人を求めるようです。

考えてみれば、スマホタブレットがあればパソコンいらない!っていう人もいますからね。必然なのでしょう・・・。

・UX=ユーザーエクスペリエンス

マウスポインタを動かしたときにサイト上でいろいろ動くことありますよね。キラキラしたものがくっついてきたり、目が追ってきたり。

ユーザーがある製品やシステムを使用したときに得られる経験や満足度のことを指す用語だそうです。⇒ユーザーエクスペリエンスデザイン - Wikipedia

・気に入ったサイトは即ブクマ!

Webサイトとの出会いは一期一会だと思ったほうがいい。もし次同じサイトを覗きたくなっても大体探し出せない。

だから、気に入ったら即ブクマ!です。ブックマークバーに専用のフォルダ作って集めてみたり、ブログ形式で自分でまとめてみてもいいと思います。

私はブックマークバー派です。

GooglechromeFirefoxは両方使う

どちらもWeb制作において欠かせないツールです。制作とかでなければ好きなブラウザを使えばいいのですが、仕様を確認するときなんかは両方あったほうが便利です。

なおIEは今現在ほぼ使わないそうです。

・記述の速さは日々の積み重ね

HTMLにしろCSSにしろ、記述はすべてキーボードを使用します。キーボードと仲良くなっておいて損はないということです。プログラミング言語のタイピング練習をしながら英語タイピングに慣れていくことが大事・・・1日10分がんばります。

TeraPadの使い方

1)新規ファイル作成→名前を付けて保存

 ※一つ目のファイルは「index.html」にする。「.html」をつけることで、Web上に公開される。

2)表示→オプション→文字コードで、文字コードUTF-8にする。日本語を表示するためのコードなので必ず設定すること。違うものを設定しておくと文字化けの原因になる。

3)作業中はこまめに保存する。TeraPadは、保存していない場合、ファイル名の右上に「*」が付くので保存したか覚えていないときは確認する。パソコンを閉じるときは必ず保存してから!!

・タグについて

タグは必ず半角入力すること。返しと終了タグの間に文字入力。

返しタグ<aaa> 終了タグ</aaa>

<h1></h1>大見出し。1回しか使えない。

<p></p>パラグラフ(paragraph)。文章を書く際に必ず使用。何度でも使える。

<a href="aaa"></a>アンカータグ、aタグ。aaaの部分にURLを入れる。

<br>改行。終了タグなし。

 

以上です。また明日もがんばろ~!