HP作成の仕方を学習しようと思い始めてみたら、早速何をどうすればいいのかわからず、手がつけられないということがあります。初めてHP作成に取り掛かるときってどうすればいいの？このような疑問が出てきました。
今回は、このような疑問を解決するための、お手伝いをします。
✔本記事の内容
✔この記事を読むメリット
・HPの作成の仕方がわかる
・HPの公開の仕方がわかる
HPの作成方法、HPの公開方法がわからない、やってみたけどうまくいかないということでつまづいてしまう方は多くいます。インターネットで調べるとなにやら高度なプログラムを使っているような記事も出てくるので、こんなこと自分にはできないと思って諦めてしまうのです。しかし、HP作成の基礎は非常に簡単で4時間くらいでできてしまいます。
結論
HP作成は初心者でも簡単にできる。
上記のとおりです。
過去の僕と同じ悩みを抱える方へ、心を込めて深堀りします。
初心者向けHP作成の仕方
HP作成の初心者でもHPを作れるようになりましょう。ここではHPとして「こんにちは」が表示されるところまでを解説します。
✔本テーマの内容
✔このテーマを読むことのメリットはこのような内容です。
・HP作成で利用するアプリがわかる
・HP作成の基礎的なことを習得できる
HP作成で使うアプリ
こちらのテーマでは、初心者向けHP作成の仕方ついて解説します。
HP（ホームページ）作成は確かに進化してきており、技術の進歩により以前よりもアクセスしやすくなっています。HTML5の登場により、よりセマンティックなマークアップが可能になり、デザインや機能の実装が容易になりました。また、CSS3やJavaScriptのライブラリなども進化し、これにより見た目や動的な要素の作成が簡単になっています。さらに、CMS（コンテンツ管理システム）のようなツールが普及し、コードを書かなくても直感的にホームページを作成できるようになっています。これらの進歩により、HP作成は個人でも企業でも、簡単かつ効果的に行えるようになっています。アプリについても解説します
HP作成で使うアプリ
こちらのテーマでは、HP作成で利用するアプリについて解説します。
HPの作成では、便利にHP作成するためにいろんなアプリが開発されています。しかしこれらのアプリを初心者の頃から使う必要はありません。専用アプリを使っていた方が見栄えは格好いいのですが、そのアプリの操作で苦しくなって諦めてしまう方がいるのでおすすめはしません。では、どのアプリを使ってHPを作成するのか？ということですが、答えはメモ帳です。
Windowsにはメモ帳アプリが標準で付いています。MacならApp Storeでメモ帳アプリのCotEditorを入手しましょう。HP作成は基本的には文字を書くことが中心になります。
どんな文字を書くのかというとHTMLという、こちらが表示して欲しい言葉をインターネットブラウザに伝える言葉を使います。
パソコンでインターネットを見るとき、EdgeやSafari、Google Chromeなんかを使うと思います。このEdgeやSafari、Google Chromeのブラウザと呼ばれるアプリにはHTMLを分析し表示する能力が備わっています。
ですのでメモ帳にHTMLを書いておくと、それだけでブラウザが内容を分析して表示してくれるのです。まず初心者のうちはHP作成にはメモ帳のみを使うだけで良いことを覚えておいて下さい。
メモ帳でHTMLを書くことができれば、後はEdgeでもsafariでもGoogle Chromeでも構いません、それがあれば書いたHTMLを表示することができます。
HP作成の基礎
こちらのパートではHP作成の基礎について解説します。HPはメモ帳アプリでも作ることができる。少し理解するまで他のソフトは利用しない。初心者のころは何もかもが難しく感じますが、手順を覚えると簡単になります。
まずは「こんにちは」を表示するのが今回の目標になります。
その場合は
<h1>こんにちは</h1>
とメモ帳に1行書いておきましょう。そしてこれを保存して下さい。保存場所はどこでもかまいません。迷ってしまう場合はデスクトップに保存するといいでしょう。
ファイル名はindexにしておくといいでしょう。indexというファイル目でなくても構いませんが、英単語にして下さい。そして.txtに当たる部分を.htmlに変更します。こうすることでこれは「webブラウザで扱うものですよ」ということをパソコンは認識するようになります。
これで保存したファイルをダブルクリックするとwebブラウザで「こんにちは」と表示されると思います。
<h1>は見出しです。見出しはh6まであってh1が一番大きい大見出しになります。
またタグは全てではありませんが</h1>など/をつけて括り、終わりを示すことがルールとなっています。
今回はHTMLを使った基礎中の基礎になりますが、実際には、WordPressを使った方法や、HPを作る専用のソフトを使ったりする方法も存在します。
HTML.CSSについてはこちら
初心者向けHPの公開方法
✔本テーマの内容
✔このテーマを読むことのメリットはこのような内容です
・初心者でもHPの仕組みの基礎がわかる
・魅力のあるHPにするための技術がわかる
ここで一度HP作成の流れを解説しておきましょう。
まずはHPに書きたい内容を考えます。
そして、次にレイアウトをします。これはCSSというHTMLと同じ仲間を使います。言葉を右に寄せたり、真ん中に持ってきたり、大きさを決めたり魅力的に見せるために使われます。
HPの公開方法
はじめは説明通りにしていきながら、なぜそうしなければならないのかの解説が欲しくなりますが、一旦は説明の通りに進めてみて下さい。簡単なことが分かったら、自分で一つ一つの説明を考えるのもいいでしょう。
インターネットに公開するためにレンタルサーバーを借ります。サーバーは自宅のパソコンでもできますが設定が難しかったりしますし、ずっとパソコンをつけっぱなしにしておかなくてはならなくなりますので、一般的にはレンタルサーバーを借りてHPを公開します。
そして、ドメインというインターネット上の住所をつけます。そしてレンタルサーバーの中に作ったファイルを置くと完成になります。
リスト
・HPの内容を考える
・レイアウトを考える
・レンタルサーバーを用意する
・ドメインを用意する
・ファイルを公開する
では、もう少し詳しく解説していきます。
すでにHTMLでこんにちはを表示するファイルは作りました。次はサーバーを借りましょう。
レンタルサーバーは色々ありますが初めから無料のレンタルサーバーを使うのはやめておいた方がいいです。無料なのでサポートがないために右も左も分からない方には苦しいでしょう。
ロリポップサーバーあたりで一番安いプランを1ヶ月だけ契約すると良いでしょう。
次にドメインを手に入れましょう。ドメインは一番安く手に入るものをxserverで購入するのがお得です。安ければ1円で手に入れることができますから、お試しするのにぴったりです。
サーバーとドメインが揃ったらドメインをサーバーにセットします。xserverのネームサーバー設定で、その他のサービスで利用するという項目のネームサーバー1に「UNS01.LOLIPOP.JP」を入力します。
次にネームサーバー2に「UNS02.LOLIPOP.JP」を入力して確認画面に進んでください。
これで、ドメインとサーバーの設定が終わりました。
最後にこんにちはを表示するためのHTMLファイルを少し改造して、公開設定をします。
今HTMLの中身は
<h1>こんにちは</h1>
だけになっていますが、少し付け足します。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<title></title>
</head>
<body>
<h1>こんにちは</h1>
</body>
</html>
何やらたくさんの英数字が出てきましたが、まずは気にせず、コピーして使って下さい。先ほど保存した「こんにちは」が書かれたファイルを右クリックしてメモ帳で開きます。メモ帳アプリにドラッグしてもいいでしょう。
ファイルが開いたら、上記の英数字を貼り付けてまた保存して下さい。
そして今度はロリポップで作業をします。
ロリポップにログインしたらサーバーの管理・設定の独自ドメイン設定から、xserverで契約したドメインを設定します。
独自ドメイン設定ボタンから次へ進んで下さい。
設定する独自ドメインのhttp://の後ろにドメインを入力しましょう。
次に公開（アップロード）フォルダに適当なフォルダ名をつけます。testなんかでも結構です。
そして独自ドメインをチェックします。ドメインの間違い等がなければこれでドメインの登録が進みます。
ドメインの登録が終わったら、ロリポップFTPで最後の設定をします。
ロリポップFTPに行くと、先ほど指定した公開フォルダ名が出ていると思います。
上方メニューからアップロードボタンを選択して、デスクトップに保存したファイルを選択してアップロードします。
これでドメイン名をブラウザのURLに入力すると「こんにちは」が表示されるはずです。
これがHP作成の仕方の基礎的な一連の流れになります。HTMLの中身に付け足した英単語たちですが、<>で表したものをWeb制作の専門用語でタグと呼びます。
タグをが一体何を表しているのかを必要な部分だけ簡単に説明します。
<title>はタイトルです。HPの名前だったりページの名前だったりを入力するといいでしょう。
<h1>は見出しです。見出しはh6まであってh1が一番大きい大見出しになります。
またタグは全てではありませんが</h1>など/をつけて括り、終わりを示すことがルールとなっています。
ここまでがHP公開の基礎になります。
HP作成ができるようになると案件をすぐに取りましょう詳しくはこちら
魅力的なHPにする
こちらのパートでは魅力のあるHPを作るための方法を解説します。
ここまでできたら魅力のあるHPの作成を考えると思います。魅力のあるHPを作ろうとするとまずはCSSというHTMLと同じ仲間の言葉を使う必要が出てきます。
CSSはどのWeb制作者でも使っていますし、必ず初心者でもマスターできます。
CSSは文字の大きさや色、配置、画像の配置などレイアウトやデザインをWebブラウザに伝える言葉です。これを学習すると良いでしょう。またHPをより使いやすくしたり面白くしたりするのであればJavaSprictも学習すると良いでしょう。
CSSの書き方を少し示しておきますと、以下のように書くと、HTMLのh1タグ（見出し）の文字色を赤に変更できます。
h1 {
color: red;
}
このような書き方で色や大きさ、配置を指定することができます。
こういったことをどんどんマスターしていくとWebの制作者として仕事を受注することもできるようになります。
こちらもテーマでは魅力あるHPを作成するための方法を解説しました。
もっとHPの制作のことを知りたいと思った方はこちらのプログラミングスクール紹介記事を読んでみてください。
まとめ
この記事では「実は難しくなんかない！簡単なHP作成の仕方、公開方法を解説します」というタイトルを下記のテーマにまとめて解説しました
・初心者向けHP作成の仕方
・初心者向けHPの公開方法
他の入門の記事についてはこちら
という内容でお届けしました。
最後まで読んでいただいてありがとうございました！
コメント
コメント一覧 （2件）
[…] HPは簡単に作成できる４時間で […]
[…] HPは簡単に作成できる４時間で […]