読者です 読者をやめる 読者になる 読者になる

KIMBLO

web関係の仕事についている漫画好きのキムラさんが役に立つ情報を発信します。

webページの作り方と学習サイト3選

スポンサーリンク

webページの作り方と学習サイト3選

f:id:kimura511:20160214202715j:plain

webページとはどういうものなのか本ブログでは記載します。

ターゲットとして以下のような人を想定しています。

  • webページの作り方についてさっくりと知りたい
  • webページについて上司にざっくりと説明する必要がある
  • webページを作ってみたいので何か最適なサイトを知りたい
  • webページを作ってみたいのだけれど、どう勉強していいのかわからない

こんな方々に向けて、webページとはなんなのか? 職業をこのブログ記事向けに言い換えるならば現役webページ作成職人の私が記載しようと思います。

webページって何??

まずは、webページの定義から参考リンクによると以下のように定義されます。

WWWシステムを使ってインターネット上で公開されている文書。Webブラウザに一度に表示されるデータのまとまりで、テキストデータやHTMLによるレイアウト情報、文書中に埋め込まれた画像や音声、動画などから構成される。 Webページとは|web page|WP - 意味/定義 : IT用語辞典

インターネット上にある情報提供サービスで一般的にホームページといわれているもの。 ウェブページ(うぇぶぺーじ)とは - コトバンク

なんというか、定義し直すとこれややこしくなるパターンの概念です。たとえば、「1」とか「左」とかそれを定義し直しだしたら逆に多弁で複雑で面倒になるものもあるでしょう?

webページについても同様です、こちらで使われている単語群をいちいち掘り下げて考えてみると初心者にはややこしいことになります。それはよろしくないことです。

なので、いちいち定義し直さなくても「1つ」と数えられるように、「左」が区別がつくように「今現在、ブラウザ上で見ている情報がwebページ」と思っていただければそれで十分です。

次にwebページってどうやってつくるのか? を簡単に説明しましょう。

webページの作り方

日本語における超基礎が、ひらがなであるようにwebページを作る超基本は「html」と呼ばれるものです。

htmlは「ハイパーテキストメディアランゲージ」というものです。分かりにくいですね。

こう言った長いカタカナの場合、一つずつ区切って日本語にして組み直せば意味はすっかり理解できてしまいます。そんなわけで一つずつ分けていきましょう。

ハイパー→「上位の*1

テキスト→「文章」

メディア→「媒体」

ランゲージ→「言語」

まとめると「上位の文章媒体言語」ってことになっちゃいます。「ハイパーテキストメディアランゲージ」よりはわかりやすくなりましたが、まだ分かりにくいですね、具体例をあげましょう。

例えば、ハイパーでない普通の文章は「これは犬です」です。

これがハイパーになると「これはです」になります。

つまり、文章だけでは伝えきれない「ここ太文字ね*2」とか言った上位の情報をwebページというメディアで使えることができる言語のことなんです、htmlというのは。

なので断言します。htmlを駆使すればwebページは作れます......

htmlを駆使すればwebページは作れます、ただし...

htmlを駆使すればwebページは作れます。ただしとんでもなく味気ないものになってしまいます。例えるならば、鉛筆で単調に描いた絵です。そんな味気ないものを作ったところであなたのモチベーションはきっと上がらないでしょう。だらだらとテキストを書き連ねたところで、作る方もつまらない、みてる方も面白くないと誰も楽しめないwebページが出来上がってしまいます。なので、htmlの次に必要な知識を紹介したいと思います。その知識はcssと言います。

cssというwebページを作るのに必要な知識

cssについてここでは簡単に説明したいと思います。 cssはざっくり言うと絵の具みたいなものです。htmlを鉛筆で描いた枠組みに対して、cssで色を付けたり、線を太くしたり細くできたりします。

webページの作り方の学習サイト3選

本来ならば、webページ作成について手取り足とりお伝えしたいのですが、それをやると書籍を一冊書かなくてはいけない情報量になってしまいます。そして、私の拙い文章よりもよりわかりやすいサイトがあります。

そちらを今回は紹介しましょう。

webページ作成が学べるサイト1(ドットインストール)

dotinstall.com

htmlに限らず、3分の動画を複数回みることで、web周りの知識をつけることができるのがドットインストールです。

webページ作成が学べるサイト2(プロゲート)

prog-8.com

プロゲートではまずはテキストベースの講義を見た後で、実際にhtmlを打ち込みながら、学習することができます。

webページ作成が学べるサイト3(codeprep)

codeprep.jp

codeprepでは平行でテキストを見てページ内で打ち込みながら、htmlを学べるサイトです。

webページの作り方をより学習したいなら

ただし、もっと効率のwebページの作り方の学習方法として、スクールに通うという方法もあります。例えば質問事項があった場合、独学ならばさまざまに調べないといけません。そうすると時間がかかり、また、場合によっては情報が古く間違っていることもあるでしょう。そう言った不幸を防ぎたいならば、スクールに通うのも一つの手かもしれません。こちらのスクールなどはカリキュラムが充実しており、すぐに身になりそうです。

webページの作り方のまとめ

今回はwebページについての概要、それから学習サイトについて紹介させていただきました。webページを作りたいと思うモチベーションはとても素晴らしいと思います。あとはそれを学習しながら形にしていくだけです。学習方法はさまざまです。学習サイトで学ぶのも1つでしょう? あるいは、スクールに通うというのも一つの選択肢としてはありです。この記事があなたがwebページについて理解し、作成することに少しでも役立てば幸いです。

なお、webページを作りたいならば、書籍では以下がオススメです。

*1:ハイパー - Wikipedia

*2:bタグってやつです