僕に10分ください。現役SEが10分であなたにウェブページを作らせてみせます。

どうもです!

わだっしーです!

 

今回はめちゃくちゃタイトル詐欺っぽいのですが、
初心者がマジで10分で
ウェブページを作れるように講座を考えました。

今回はそれを簡単に楽しくできるように、
講座をつくっていますので、
サクッとつくってみてください。

 

とりあえず今回約束してほしいのは何も考えずに、
書かれている通りのことをやってください。

大事なのでもう一度言います。
何も考えないでください。
難しいことはあとで話します。

手順を一つずつ丁寧に読んで、
その通りにプログラムを書き進めてください。

 

今回の講座を体験することで、
最終的にオリジナルのウェブページを制作するための
超基本的なところがつかめるようになるでしょう。

現場でも使われている
ウェブアプリケーション開発の基礎なので、
ちょっとだけ応用するだけで、
オリジナルサイトを作ることもできますし、
これだけでも報酬がもらえるようになる。

 

やってみたらわかるのですが、
難しいことはしていないし、
自分にもできるという感覚をつかんでもらえたら
今回の講座は成功だと思っています。

 

ではでは!
時間ももったいないのでサクッと行きましょう!!

準備をしよう!

【3分】必要なものの準備

今回の講座で必要なものは下記の3つです。

  • PC
  • Google Chrome
  • テキストエディタ

 

まずPCですが、
WindowsでもMacでも大丈夫です。

ちゃんと正常に動くPCであれば大丈夫です笑

 

次にGoogle Chromeです。

ウェブアプリケーション開発をするなら
Google Chromeは無くてならないウェブブラウザで、

ダウンロードはこちら

なんで?というのはともかく、
とりあえずダウンロードしてください。

何も考えないでください笑

 

次にテキストエディタです。
Windowsの人は「サクラエディタ」をダウンロードしましょう。

現場の人で使っている人が多いです。それ以上の説明はしません笑
V2(Unicode版)っていうやつをダウンロードしましょう。
ダウンロードはこちら

Macの人は「mi」という
テキストエディタをダウンロードしましょう。

理由は僕が使っているというだけです。
慣れたらほかの使ってください。
ダウンロードはこちら

 

それぞれインストールまで終わらせてくださいね。
終わりましたか???
何も考えちゃだめですよ??

スピード重視でいきましょう!!!
ここまでで3分です!

【1分】HTMLのテンプレートをダウンロード

下記からHTMLのテンプレートをダウンロードしてください。
ダウンロードはこちら

ダウンロードしたらzipで圧縮されているので、
Macはダブルクリックでファイルを開いてください。

フォルダが展開されます。

 

Windowsは解凍ソフトが入っていないのであれば、
これダウンロードしてください。
Lhaplus

インストールまでお願いします。
何も考えずにOK押しまくってインストール完了でOKです。

解凍ソフトのインストールが終わったら
ファイルをダブルクリックで開いてください。

 

はい、ここまでで4分経過です。
パソコンをある程度触ったことのある人ならもっと早く終わってる??

 

ウェブページを作ろう

【1分】ページを追加してみよう

テンプレートをダウンロードしたらまずは、
Google Chromeに表示してみましょう。

Google Chromeを開いていただいて、
home.htmlをドラッグアンドドロップ!

そうすると上記のようなページが表示されませんか?
これでまずはOKです。

 

次に実際にウェブページを作成していきましょう。

page1.htmlをコピーして、
page5.htmlというファイルを作成してください。

  • Windowsはpage1.htmlを選択した状態で Ctrl+c でコピーして Ctrl+v でペースト。
  • Macはpage1.htmlを選択した状態で Command+c でコピーして Command+v でペースト。

新しくできたファイルを右クリックして
「名前を変更」という項目をクリックし、
ファイル名を
「page5.html」
に変更します。

.htmlがファイル名として表示されない場合は
page5に変えるだけでOKです。

パソコンの設定が.htmlを表示しないようになっているだけなので、
実際は.htmlがついたものが正式なファイル名になります。

 

できたらこんな感じになるのですができましたか???
(赤い□で囲っているところは.htmlであることを指しているので問題ありません)

次行きます!!

 

【2分】グローバルナビのリンク先を変える

今の状態だと「ページ5」をクリックしても、
ページが変わることはありません。

なので、ここでは「ページ5」のリンクを作成します。

 

まずは、
テキストエディタに下記のファイルをドラッグアンドドロップしてください。

そうするとこんな感じ。

  • home.html
  • page1.html
  • page2.html
  • page3.html
  • page4.html
  • page5.html

サクラエディタ

mi

 

次に、
テキストエディタで
下記のファイルを編集していきます。

  • home.html
  • page1.html
  • page2.html
  • page3.html
  • page4.html
  • page5.html

下記の

という部分を

という風に書き換えます。
“”を”page5.html”に変えただけです。
(home.html、page1.html~page5.htmlの19行目)

 

セーブの仕方は、

  • Windowsは各htmlのウィンドウ、もしくはタブを選択した状態で Ctrl+s でセーブ。
  • Macは各htmlのウィンドウ、もしくはタブを選択した状態で Ctrl+s でセーブ。

セーブしたらhome.htmlを開いたGoogle Chromeに戻ります。

そしたら上記の赤い□で囲まれたところをクリックしてください。
これでhome.htmlのページを再読み込みします。
ゲームで言ったら「Now Loading」です。

 

リロードしたら、
「ページ5」をクリックすると
「ページ1」が表示されます。

「ページ1~ページ5」「ホーム」で
それぞれ「ページ5」のリンクを押すと、
「ページ1」ページが表示されることを確認しましょう。
(ページ1であっているので安心してくださいね)

 

ここまで大丈夫ですか??

上手くいっていない場合は下記の項目を確認してみてください。
必ずそれらのどれかです。

  • page5.htmlというファイルが存在しない
  • ソースコードの書き間違え
  • ファイルをセーブしていない
  • Google Chromeの画面を再読み込みしていない

各画面で「ページ5」のリンクをクリックすると、
「ページ1」が表示されることを確認しましたか?

 

出来たら次に行きます!!
スピード重視で!!

 

【1分】パンくずリストのページ名を変更する

「ページ5」を開くと下記の□で囲まれたところが
「ページ1」になっています。

この部分をパンくずリストというのですが、
また後で解説するので今は何も考えないでください。

 

この部分を修正するには

  • page5.html

の下記の24行目の

「ページ1」の部分を「ページ5」に変更して、

のように書き換えます。

書き換えたらファイルをセーブしましょう。

 

そしたらGoogle Chromeに戻ってもらって、
また画面を再読み込みして「ページ5」を開きます。

すると下記のように「ページ1」から
「ページ5」に記載がかわりました。

ここまででうまくいかない場合は
下記の原因が考えられるので確認してみてください。

  • ソースコードの書き間違え
  • ファイルをセーブしていない
  • Google Chromeの画面を再読み込みしていない

 

出来ましたでしょうか???

次に行きます!!

 

【1分】見出しを変えてみよう

次に「ページ5」を開くと
下記の□が「ページ1」になっているので修正します。

修正するには、

  • page5.html

をテキストエディタで開いてもらって、
28行目の

「ページ1」の部分を「ページ5」に変更して、

のように書き換えましょう。

 

書き換えたらセーブして、
Google Chromeを再読み込みしてください。

すると下記のように表示されるようになります。

ここまででうまくいかない場合は
CrazyEngineer下記の原因が考えられるので確認してみてください。

  • ソースコードの書き間違え
  • ファイルをセーブしていない
  • Google Chromeの画面を再読み込みしていない

 

出来ましたでしょうか???

次に行きます!!

 

【1分】ページタイトルを変えてみよう

次に「ページ5」のページタイトルを修正します。

ページタイトルは下記の□を指すのですが、
今のところ「ページ1」になっていますよね。

修正するには、

  • page5.html

をテキストエディタで開いてもらって、
5行目の

「ページ1」の部分を「ページ5」に変更して、

のように書き換えましょう。

書き換えたらファイルをセーブして、
Google Chromeを再読み込みしてください。

すると下記のように表示されるようになります。

ここまででうまくいかない場合は
下記の原因が考えられるので確認してみてください。

  • ソースコードの書き間違え
  • ファイルをセーブしていない
  • Google Chromeの画面を再読み込みしていない

 

出来ましたでしょうか??

以上で今回の10分講座で
すべてのページから
「ページ5」というページが
表示される状態になりました。

 

これで10分で完成出来たら上出来です!!

これで作成講座は終わりなので、
それぞれ解説していきます。

ひとまずお疲れ様でした!

 

これまでやったことを解説してみる

今回実際にやってみてもらったのは、
「ページ5というページを追加する」
というものです。

 

すごく地味なのですが、
これがプログラミングの世界では
めちゃくちゃたくさんやることで、
プログラマーは当たり前のようにやっています。

 

だから、この作業をしたということは、
あなたはプログラマーの仲間入りしたということになり、
HTMLという言語の超基礎を押さえたということになります。

なので、まずはこれで
プログラムを書くということがどんな感じか?
ということを知ってもらえたらいいのかなと思っています

 

何も考えずにやってもらいましたが、
それだけじゃ納得できないところもあると思うので、
それぞれ解説していきますね。

 

『ページを追加してみよう』の解説

ここではpage1.htmlというテンプレートファイルを複製して
page5.htmlというページを作ってもらいました。

 

実質やってもらっているのは、
page1.htmlと全く同じページを
ファイル名を変えて作成してもらった。

ということになります。

 

page5.htmlを1から作るとなるとハードルが高いので、
同じページをコピペしてちょっとずつ変更を書けるための準備です。

これはウェブページ制作会社とかでは
専用のソフトを使って複製したり、
自社プログラムで無限に複製できるようにしていたりするのを
手動でやってもらったということです。

 

プログラマーとやっていること同じだ
という感覚をつかめたらいいのかなと思います。

 

『グローバルナビのリンク先を変える』の解説

ここではリンク(アンカーリンク)リンク先を
変更するということを体験してもらいました。

 

ネットサーフィンをしていると
下記のようなリンクは死ぬほど見かけますよね。
Crazy-Engineer

ソースコードはこんな感じ

これはインターネット上のファイルの見る先が書かれていて、

そのリンクを押すと
HTMLページがブラウザ上に
ダウンロードされるという仕組みです。

 

ここで出てきた


aタグ(えーたぐ)と言ったり、
アンカーと言ったりします。

 

今回の講座ではアンカーの見る先を、
page5.htmlにしたかったので、

というように書き換えました。

 

ここでhttp://xxxx.xxx/はつけないのか?
という疑問が浮かぶと思うのですが

今回はつけなくて大丈夫です。

 

http://xxxx.xxx/はインターネット上の
プログラムやファイルに対してアクセスるための
「おまじない」
でなので今回の場合は必要ありません。

 

今回はインターネット上のファイルに
アクセスするのではなく、
自分のPC上のファイルにアクセスするので
相対パスでファイルを指定したということになります。

相対パスっていうのを解説すると長くなっちゃうので、
詳しく解説されているページの
紹介で終わらせていただければと思います。
相対パスと絶対パスとは?

 

グローバルナビとは??

グローバルナビゲーションは
ウェブサイトでよく使われるのですが、
当サイトの

やYahoo!のこの部分が該当します。

ありとあらゆるサイトで使われているので、
今回のサンプルソースをもとに流用して、
自分のサイトで使っていただければと思います!

 

『パンくずリストのページ名を変更する』の解説

ここではHTML上の段落文字を修正する
ということを体験してもらいました。

 

いま、この記事にも使われていて、
今書いている文字がそれに該当します。

ソースコードはこんな感じ、

 

これをpタグ(ぴーたぐ)と言ったりします。
pはparagraphの略で日本語で「段落」という意味です。

HTML上で文章を書いたりするときは、
このpタグを使うことが非常に多いので知ってもらいたく、
修正してもらいました。

 

今回修正したのは下記のような

pタグで囲まれた箇所を変更するとどのようになるのか?
というのを知れたらOKです。

 

パンくずリストとは??

パンくずリストとは下記のようなデザインのことを指し、
今のページがウェブサイトのどの位置にあるのかというのを
わかりやすくするために使います。

 

ブログとかは結構使われていることが多くて、
この記事も下記のようなパンくずリストが使われています。

プログラミングというカテゴリの配下に、
この記事が存在しているという意味ですね。

 

これがあるとカテゴライズもわかりますし、
自分がウェブサイトのどの位置にいるかが一目瞭然になるので、
ご自身でウェブサイトを作る場合は取り入れたほうが
ユーザーに親切なので取り入れていきましょう。

 

『見出しを変えてみよう』の解説

今回はpage5.htmlで
「ページ1」となっている
個所を修正してもらいました。

 

ここで使われているのは、
h2タグ(えいちにたぐ)といい、
ウェブページ上で目立たせたい見出しに使います。

hはheaderの略ですね。

これはpタグと少し似ているのですが、
ウェブページのデザインとして、
使い分けたいときによく使われるので覚えておきましょう。

ちなみにh2タグは兄弟がいて、
h1, h2, h3, h4, h5, h6
まで存在していて見出しの大きさを変えることができます。

 

実際にやってみるとこんな感じ

ソースコードは下記

デザインによってhタグは使い分けるので、
そういうのがあるんだーというのだけ
知っておけばとりあえずOKです。

 

『ページタイトルを変えてみよう』の解説

ページタイトルはブラウザのタブに表示される文字のことです。

ここで使われているのが、
titleタグなのですが、
そのままですね。

 

で、ここではtitleタグを編集するというよりかは、
headタグの存在を知ってほしかったので、
修正してもらいました。

headタグというのは、
HTMLの中でも大きな役割をしていて、
headタグというのは
ページのリソース情報を書き出すものです。
(よくわからんかもですがそうなんだ―ぐらいで読んでください)

 

HTMLというのは下記のような構造になっていて

これまで修正してきた

  • リンク
  • 段落文字
  • 見出し

というのはbodyタグ内
(<body></body>の間)
に書き出すもので、
ウェブページを表示するための記述であり、
headタグ内に書くものとは全く異なります。

 

headタグで画面を装飾するためのプログラムの情報だったり、
計算をブラウザ上でするためのプログラムの情報だったり、
画面に表示する内容とは
直接関係のない情報を書く場所です。

 

今回使用したpage1.htmlの中身を見ると、
下記のようになるのですが
titleタグのほかにもいろいろ書かれていますよね。

 

今回は触れませんでしたが、
今回作成してもらったページには
CSSという言語も使われていて、
style.cssというファイルを参照することで、

作成したページの文字のフォントや色だったり、
ページのデザインを
どのようにするのかを書いていたりします。

 

CSSも勉強すると結構楽しいのですが、
今回はとにかくプログラムを書くこと
を体験してほしかったので、
今回は省略させてもらいました。

とりあえずここではheadタグの中には、
ウェブページのリソース情報を書く場所というのを
なんとなく知ってもらえれば十分です。
(ほかにもheadタグに書けることはあるのですが便宜上省略です)

 

プログラミングは難しいものではないです

10分でHTMLを作成してもらったのですが、
プログラミングは自分にもできるということを
体験していただけたら幸いです。

 

今回のサンプルをもとに、
自分でプログラムの意味を調べてアレンジしてみたり、
自分でオリジナルのウェブページを作成してみてください。

プログラミングの面白さを知る
いいきっかけになるかなと。

 

また、もっと勉強したいのであれば、
書籍を購入したりプロに習ったりすれば、
もっと上達してプログラミングスキルだけで
ご飯が食べられるようになります。

一緒に同じ道を志す人が増えたら嬉しいです!!

 

ここまで読んでいただきありがとうございます!

以上、わだっしーでした!

稼ぐエンジニアの考え方を凝縮した電子書籍をプレゼント中

僕はシステムエンジニアとして
年間6000万円以上売り上げています。


才能があったわけではないし、
昔から超がつくほど要領が悪いです。


そんな僕がプログラミングを習得したり、
心から尊敬する先輩や上司から影響を受けて、
エンジニアとして成長することができました。


酸いもあまいも経験してきましたが、
普通の人よりもたくさん失敗してきて、
それをガソリンにして結果にフォーカスしてきました。


その経験から
「ポンコツでもエンジニアになれる」
と思っているし、
成長して理想の自分を手に入れられると信じています。


そして、今は同じ道を志す仲間を
1人でも多く増やして、
エキサイティングでより生産性的な社会を
作っていこうと夢見ています。


そういった理念をもとに、
僕の知識や経験をふんだんに絞り出して、
エンジニアとして成長し、
結果を出すにはどうしたら良いかを
体系的にまとめた電子書籍を作りました。


僕のストーリーも交えて作っていて、
20分程度でサクッと読める内容なので、
もし興味があれば読んでみてください。


→電子書籍『エンジニアという生き方で人生をデザインする。』


メールアドレスを入力すれば、受け取れます。


最後まで読んでいただきありがとうございました。


もしこの記事が役に立った!と思われたら
SNS等でシェアしていただけるとすごく喜びます。
(すぐ下のボタンからシェアできます)