【初めてのホームページ制作】#10マネして作ってみよう!(手順解説付き)

はじめてのホームページ制作アイキャッチ10

前回の【初めてのホームページ制作】#09 マネして作ってみよう!(手順解説付き)では、トップページへ戻るリンクボタンを飛ばしてきましたので、今回はそこを完了したらこの講座を終了とします。最後までよろしくお願いね♡

動的なホームページを作る

これまでは、HTMLとCSSという言語(※一応HTMLとCSSもプログラミング言語なんです)を駆使してホームページを作ってきました。ですがそれは、全く動きのない静的なホームページです。

巷のホームページでよく見るトップページへ戻るボタンというのは、ボタンを押すだけで、ページの一番上に戻りますね。あの動きがあるホームページを動的なホームページと言えます。

ここのブログにも右下に上向きの矢印アイコンがありますね。この動きを与えるために、新たなプログラミング言語を使わないといけません。(※実は最近のCSSでもトップページへ戻るリンクボタンは作成可能)なんですが、あえてここは、新しい言語を使ってみたいと思います。一気にレベルは上がりますが、コードの説明は無しでいきたいと思います。結構ややこしい言語なので・・・。

動きのあるホームページにするには?

動きのあるホームページにするためのプログラミング言語は、『Java Script』

JavaScriptとは、プログラミング言語のひとつである。Javaと名前が似ているが、異なるプログラミング言語である(後述の#歴史を参照)。
一般的に、プロトタイプベースのオブジェクト指向スクリプト言語であると言われている。しかし、コンストラクタなどのクラスベースに見られる機能も取り込んでいる。
実行環境が主にウェブブラウザに実装され、動的なウェブサイト構築や、リッチインターネットアプリケーションなど高度なユーザインタフェースの開発に用いられる。
2010年以降は、軽量かつ高速なサーバサイドJavaScript実行環境やライブラリの充実により、MEANに代表されるように、Web開発の全ての領域で活用されるようになってきている。

『Java Script』とはなんなのか知りたい方はTECH ACADEMYさんの記事が理解しやすいですので参考にどうぞ!

headの開始タグの後に2,3行のコードを追加してください。
■HTML

<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<meta charset="UTF-8">
<title>Document</title>

このコードは、sampleフォルダ内のjsフォルダの中にある『jquery.js』『common.js』を外部ファイルとして『index.html』ファイル内に読み込んでいます。試しにこのファイルを開いてみて下さい、意味が分からないでしょう?(笑)これが『Java Script』です。

今は、ただ単に『Java Script』で記述されたファイルを今まで編集してきたindex.htmlファイル内に読み込んだとだけ覚えといてくださいね(笑)読み込んだ結果、トップページへ戻るリンクボタンがスムーズにページの一番上にスライドしているかと思います。

ちなみに『jquery.js』ファイルは、ネット上から拾ってきたファイルです。無料配布されているので、もし使いたいと思ったら『Jクエリ』などで検索するといいでしょう。

CSSファイルを外部ファイル化する

『Java Script』ファイルを外部から読み込んだように、これまでindex.html内にCSSを記述してきましたが、1つのファイルにHTMLコードとCSSコードが混ざっているというのは、あまりよくありません。HTMLならHTMLのコードのみ、CSSならCSSのコードのみと切り分ける必要があります。

CSSファイルを外部ファイル化してindex.htmlファイルをすっきりさせて終わりにしましょう!

まずは、sampleフォルダ内で右クリックし、新規作成を選択し、テキストドキュメントでファイルを作成。

手順001

手順001

ファイル名は『common.css』にしましょう。(※わかりやすいファイル名で構いません)『common.css』ファイルを開いておきましょう。

次に『<style>』と『</style>』の間のCSSをすべて選択し、Ctrl+Cでコピーしたものを先ほどのファイルにCtrl+vで張り付けましょう

張り付けたらCtrl+sでファイルを保存してください。

後は、それを『index.html』内に読み込むだけです。6行目を追加してください。

■HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<link rel="stylesheet" href="./common.css" type="text/css" />
<meta charset="UTF-8">

今回ファイル名は、『common.css』ですが、適当に好きな名前をつけて、コード内のファイルパスの部分を変えてもらっても構いませんので。後は、ファイルを更新して確認してください。何も変化がなければOKです。ホームページのレイアウトが壊れた場合は、読み込むファイル名などを確認してみてください。

これで『index.html』ファイルが大分すっきりしました。次からcssをいじるなら、『common.css』をいじるって具合です。

ホームページを公開するには?

おそらくご存じだとは思うんですが、このホームページはあくまで自分のパソコンの中だけにあるホームページです。googleで検索してももちろん出てきません。このホームページを公開するには、サーバーをレンタルしないといけません。サーバー上にこれまで作成してきたファイルをアップロードして初めて、検索で出てくるようになります。後は、ドメインの取得とかもあるんですが・・・。
そして、僕ももちろんサーバーをレンタルしており、毎月サーバー代金も支払ってます。値段は容量にもよりますが、一番安ければ月100円とかもありますがやはりその分制限はあるんですけどね(笑)僕的に初心者にもおすすめなのは、僕も使用しているlolipop(ロリポップ)ですよ!
lolipop(ロリポップ)のサーバーのレンタ料金は月500円のサーバーです!容量でいうと120GB!!多分近い内に足りなくなる(笑)一応ドメインも取得したんですが、あまり人気がないドメインなので・・・。とりあえずホームページを公開するにはサーバーが必要!

最後に

お疲れ様です!どうでしたか?自分が手を動かしながらホームページができていく喜びは味わえましたか?あまり難しく考えずにコピペでいけませんでしたか(笑)?

僕も最初は、意味が分からずとりあえずコピペしまくってましたので安心して下さいね(笑)

もし自分のホームページが作りたいとなったときここでやってきたことが少しでも役に立てることが僕の一番の喜びです(笑)。

最後までありがとうございました~(*’ω’*)♡

はじめてのホームページ制作アイキャッチ10

自作WEBアプリ集


管理人があまりに暇人なため、しょうもないwebアプリを作ったりしてます。見てやってください。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA