Chromeに戻ります。したら上記の赤い□で囲まれたところをクリックしてください。これでhome.htmlのページを再読み込みします。Loading」です。「ページ5」をクリックすると「ページ1」が表示されます。「ページ1」ページが表示されることを確認しましょう。(ページ1であっているので安心してくださいね)ここまで大丈夫ですか??上手くいっていない場合は下記の項目を確認してみてください。「ページ1」が表示されることを確認しましたか?出来たら次に行きます!!スピード重視で!!【1分】パンくずリストのページ名を変更する「ページ5」を開くと下記の□で囲まれたところが「ページ1」になっています。この部分をパンくずリストというのですが、また後で解説するので今は何も考えないでください。-->のように書き換えます。書き換えたらファイルをセーブしましょう。Chromeに戻ってもらって、また画面を再読み込みして「ページ5」を開きます。すると下記のように「ページ1」から「ページ5」に記載がかわりました。ここまででうまくいかない場合は下記の原因が考えられるので確認してみてください。Chromeの画面を再読み込みしていない出来ましたでしょうか???次に行きます!!【1分】見出しを変えてみよう次に「ページ5」を開くと下記の□が「ページ1」になっているので修正します。-->のように書き換えましょう。Chromeを再読み込みしてください。すると下記のように表示されるようになります。ここまででうまくいかない場合はCrazy–Engineer下記の原因が考えられるので確認してみてください。Chromeの画面を再読み込みしていない出来ましたでしょうか???次に行きます!!【1分】ページタイトルを変えてみよう次に「ページ5」のページタイトルを修正します。今のところ「ページ1」になっていますよね。-->のように書き換えましょう。Chromeを再読み込みしてください。すると下記のように表示されるようになります。ここまででうまくいかない場合は下記の原因が考えられるので確認してみてください。Chromeの画面を再読み込みしていない出来ましたでしょうか??以上で今回の10分講座ですべてのページから「ページ5」というページが表示される状態になりました。これで10分で完成出来たら上出来です!!これで作成講座は終わりなので、それぞれ解説していきます。「ページ5というページを追加する」というものです。すごく地味なのですが、これがプログラミングの世界ではめちゃくちゃたくさんやることで、プログラマーは当たり前のようにやっています。この作業をしたということは、あなたはプログラマーの仲間入りしたということになり、HTMLという言語の超基礎を押さえたということになります。これでプログラムを書くということがどんな感じか?ということを知ってもらえたらいいのかなと思っています何も考えずにやってもらいましたが、それだけじゃ納得できないところもあると思うので、それぞれ解説していきますね。『ページを追加してみよう』の解説ここではpage1.htmlというテンプレートファイルを複製してpage5.htmlというページを作ってもらいました。実質やってもらっているのは、page1.htmlと全く同じページをファイル名を変えて作成してもらった。同じページをコピペしてちょっとずつ変更を書けるための準備です。自社プログラムで無限に複製できるようにしていたりするのを手動でやってもらったということです。プログラマーとやっていること同じだという感覚をつかめたらいいのかなと思います。『グローバルナビのリンク先を変える』の解説ここではリンク(アンカーリンク)リンク先を変更するということを体験してもらいました。ネットサーフィンをしていると下記のようなリンクは死ぬほど見かけますよね。href="http://crazy-engineer.com/">Crazy-Engineer</a>これはインターネット上のファイルの見る先が書かれていて、そのリンクを押すとHTMLページがブラウザ上にダウンロードされるという仕組みです。name</a>はaタグ(えーたぐ)と言ったり、アンカーと言ったりします。href="page5.html">ページ5</a>というように書き換えました。ここでhttp://xxxx.xxx/はつけないのか?という疑問が浮かぶと思うのですが今回はつけなくて大丈夫です。http://xxxx.xxx/はインターネット上のプログラムやファイルに対してアクセスるための「おまじない」でなので今回の場合は必要ありません。自分のPC上のファイルにアクセスするので相対パスでファイルを指定したということになります。詳しく解説されているページの紹介で終わらせていただければと思います。当サイトのやYahoo!のこの部分が該当します。自分のサイトで使っていただければと思います!『パンくずリストのページ名を変更する』の解説ここではHTML上の段落文字を修正するということを体験してもらいました。今書いている文字がそれに該当します。ソースコードはこんな感じ、<p>今書いている文字がそれに該当します。</p>1<p>今書いている文字がそれに該当します。</p>これをpタグ(ぴーたぐ)と言ったりします。pはparagraphの略で日本語で「段落」という意味です。修正してもらいました。ページ5</p>pタグで囲まれた箇所を変更するとどのようになるのか?というのを知れたらOKです。今のページがウェブサイトのどの位置にあるのかというのをわかりやすくするために使います。ブログとかは結構使われていることが多くて、この記事も下記のようなパンくずリストが使われています。プログラミングというカテゴリの配下に、この記事が存在しているという意味ですね。自分がウェブサイトのどの位置にいるかが一目瞭然になるので、ご自身でウェブサイトを作る場合は取り入れたほうがユーザーに親切なので取り入れていきましょう。今回はpage5.htmlで「ページ1」となっている個所を修正してもらいました。class="pageTitle">ページ1</h2>ここで使われているのは、h2タグ(えいちにたぐ)といい、ウェブページ上で目立たせたい見出しに使います。hはheaderの略ですね。使い分けたいときによく使われるので覚えておきましょう。h6まで存在していて見出しの大きさを変えることができます。<h6>見出し6</h6>123456<h1>見出し1</h1><h2>見出し2</h2><h3>見出し3</h3><h4>見出し4</h4><h5>見出し5</h5><h6>見出し6</h6>デザインによってhタグは使い分けるので、そういうのがあるんだーというのだけ知っておけばとりあえずOKです。『ページタイトルを変えてみよう』の解説ページタイトルはブラウザのタブに表示される文字のことです。ここで使われているのが、titleタグなのですが、そのままですね。修正してもらいました。-->headタグというのは、HTMLの中でも大きな役割をしていて、headタグというのはページのリソース情報を書き出すものです。見出しというのはbodyタグ内(<body></body>の間)に書き出すもので、ウェブページを表示するための記述であり、headタグ内に書くものとは全く異なります。画面に表示する内容とは直接関係のない情報を書く場所です。下記のようになるのですがtitleタグのほかにもいろいろ書かれていますよね。作成したページの文字のフォントや色だったり、ページのデザインをどのようにするのかを書いていたりします。今回は省略させてもらいました。ここではheadタグの中には、ウェブページのリソース情報を書く場所というのをなんとなく知ってもらえれば十分です。(ほかにもheadタグに書けることはあるのですが便宜上省略です)プログラミングは難しいものではないです10分でHTMLを作成してもらったのですが、プログラミングは自分にもできるということを体験していただけたら幸いです。自分でオリジナルのウェブページを作成してみてください。プログラミングの面白さを知るいいきっかけになるかなと。書籍を購入したりプロに習ったりすれば、もっと上達してプログラミングスキルだけでご飯が食べられるようになります。僕はシステムエンジニアとして年間6000万円以上売り上げています。昔から超がつくほど要領が悪いです。心から尊敬する先輩や上司から影響を受けて、エンジニアとして成長することができました。普通の人よりもたくさん失敗してきて、それをガソリンにして結果にフォーカスしてきました。成長して理想の自分を手に入れられると信じています。今は同じ道を志す仲間を1人でも多く増やして、エキサイティングでより生産性的な社会を作っていこうと夢見ています。結果を出すにはどうしたら良いかを体系的にまとめた電子書籍を作りました。僕のストーリーも交えて作っていて、20分程度でサクッと読める内容なので、もし興味があれば読んでみてください。→電子書籍『エンジニアという生き方で人生をデザインする。』メールアドレスを入力すれば、受け取れます。最後まで読んでいただきありがとうございました。この記事が役に立った!と思われたらSNS等でシェアしていただけるとすごく喜びます。PMサクラエディタを使うのは初めてでしたが、約10分でできました。コメントをキャンセルメールアドレスが公開されることはありません。新しい投稿をメールで受け取るあらゆるものはコンピュータで動いている!!コンピュータの仕組みを宇宙一分かりやすく解説してみるプログラミング初心者の『結局何から始めればいいの?』を現役SEが徹底的に解説します。RECOMMENDこちらの記事も人気です。2018.12.30現役SEが初心者が挫折しないプログラミング勉強法を語ってみる。2018.11.23プログラミング初心者の『結局何から始めればいいの?』を現役SEが徹底的に...最近の投稿とりあえず3年やってみる思考は成長速度を1/3にしていると思う理由とは?2019.01.21努力至上主義者だった僕が日々の業務計画で努力せず同じ結果を出せるようになった手帳術2019.01.19コピペプログラマーは悪か?爆速で成長するプログラムコピペ方法の秘密2019.01.19現役SEが初心者が挫折しないプログラミング勉強法を語ってみる。2018.12.30意識が低い人ほどプログラマーは向いている!?意識の低さと生産性の話2018.12.10最近のコメント現役SEが初心者が挫折しないプログラミング勉強法を語ってみる。現役SEが10分であなたにウェブページを作らせてみせます。