「ホームページを作るには何をすればいいの？」このような疑問を持っている人も多いと思います。
ホームページを制作するために最低限必要なプログラミング言語は、HTMLとCSSです。
また、プログラミング言語の他にもサーバーが必要になります。
今回は、ホームページの制作方法を紹介します。
「ホームページをアレンジしたい・レイアウトを変更したい」という人も参考にしてください。
全くの初心者の人もホームページの制作方法がわかるように基礎の部分から解説します。
そもそもHTMLとCSSって何？
まず、HTMLとCSSの概念から理解しましょう。
プログラミング言語のそれぞれの役割を説明します。
HTML
HTMLとは、Hyper Text Markup Language（ハイパーテキスト・マークアップ・ランゲージ）の略です。
WEBサイトを制作するために開発された言語になり、ほとんどのWEBサイトはHTMLで制作されています。
弊社のホームページ「くまのWEB」もHTMLを基に制作しています。
実は、インターネット上に公開されているWEBサイトのHTMLを見ることが可能です。
HTMLの構成を確認するのは簡単です。
まずは、HTMLの構成を確認したいWEBサイトを表示します。
次に、そのWEBサイトのどこでもいいのでカーソルを移動させて右クリックします。
すると、選択メニューが表示されます。
この選択メニューの中にある「ページソースを表示」を選択します。
すると、新しいタブが開かれて以下のような画面が表示されます。
このような画面を見ると「難しいそう、、、」と感じるかもしれません。
HTMLは、他の言語と比べると簡単で初心者でも習得することが可能です。
HTMLの役割は、枠組みになります。
家で例えるとHTMLは、家を支える柱やコンクリートです。
つまり、HTMLがなければホームページを制作することはできません。
CSS
ホームページを制作する上で、欠かせないのがCSSです。
CSSはホームページをおしゃれに仕上げるために必要な言語になります。
後に説明しますが、HTMLだけだと文字が羅列しているだけのとても味気ないホームページになってしまいます。
そのような状態では、ホームページを公開してもアクセスアップやホームページ経由での問い合わせの増加は見込めません。
CSSを使ってレイアウトを綺麗に揃えて、最適なデザインにすることでホームページの効果が最大限に発揮されます。
HTMLと同じように、インターネットに公開されているWEBサイトのCSSを見ることが可能です。
CSSを確認するためには、Google Chromeというブラウザが必要です。
Google Chromeは下記のURLからダウンロードすることができます。
Google ChromeダウンロードURL:https://www.google.co.jp/chrome/index.html
ダウンロードが完了したら、Google Chromeのアイコンをクリックしてブラウザを起動します。
起動が完了したらCSSを確認したいWEBサイトを表示させましょう。
ここでは例として、弊社ホームページの「くまWEB」のCSSを確認します。
先ほどと同じように確認したいWEBサイトにカーソルを合わせて右クリック。
すると、選択メニューが表示されます。
この選択メニューの中にある「検証」を選択。
「検証」を選択すると、画面下部にデベロッパーツールの画面が表示されます。
次にCSSを確認したい要素にカーソルを合わせて、CSSを確認しましょう。
ここでは、画面右上にある「累計コーディング数：10134ページ」のCSSを検証します。
この要素のCSSは、以下のようになっています。
header .box p {
display: block;
width: 360px;
height: 40px;
color: #ffffff;
background: #cc0000;
font-size: 1.6rem;
font-weight: bold;
text-align: center;
text-decoration: none;
padding: 0;
float: right;
line-height: 1.6;
}
CSSを確認することで、幅が360px・高さが40px・文字色が白色・背景色が赤色であることがわかります。
このようにWEBサイトのCSSを確認することができるので、おしゃれなWEBサイトがあればCSSを確認して、参考にしましょう。
その他の言語
HTML・CSS以外にもプログラミング言語はたくさんあります。
例を挙げると、JavaScript・jQuery・PHP・Ruby・Java・Cなどです。
ホームページをより美しく装飾するためには、JavaScript・jQueryなどの言語が必要になります。
また、ログイン機能、お気に入り機能を実装するにはPHP・Ruby・Javaなどの言語が必要です。
より高度な機能を搭載したいなら、このような言語を使用することになります。
しかし、ホームページを公開するだけならHTML・CSSだけで十分です。
使用用途・目的に合わせてプログラミング言語を使い分けましょう。
WordPressは必要？
ホームページのコンテンツ管理としてよく採用されているのがWordPressです。
WordPressは、レイアウト変更・コンテンツ管理などができます。
ホームページの長期的な運用を考えている場合は、WordPressを導入するのがおすすめです。
しかし、ホームページを公開するのに必ずWordPressが必要という訳ではありません。
HTML・CSSだけでもホームページを公開することも加納です。
WordPressの導入も使用用途・目的に合わせて決めましょう。
実際にHTMLを書いてみよう
ここからは、ホームページを制作するために実際にHTMLのコードを記述しましょう。
まず、HTMLコードの記述する`1番最初のコードは以下のようになります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/style.css"> <title>サンプル</title> </head>
記述しているコードを上から順番に説明します。
!DOCTYPE html
このコードは、これからHTMLコードを記述するとコンピューターに認識させるためのコードです。
HTMLコード記述する際は、一番最初にこのコードを記述する必要があります。
html lang=”ja”
このコードは、記述する言語をコンピューターに認識させるためのコードです。
「ja」は日本語を表しています。
記述する言語に合わせてlangの部分を変更しましょう。
head
コードの間に重要な情報・設定を記述します。
また、このコードの間に記述された文字やコードはブラウザに常時されません。
meta charset=”UTF-8″
このコードは、文字コードを設定するコードです。
文字コードは、UTF-8以外にもShift_JISがあります。
最近では、どのようなOSでも問題なく表示されるUTF-8が推奨されています。
なので、文字コードを設定するときはUTF-8を使いましょう。
title
このコードは、WEBサイトのタイトルを記述する箇所になります。
ここでは、サンプルと入力していますが、実際にはそのWEBサイトにふさわしいタイトルをつけましょう。
以下のコードはheader部分のコードです。
<div id="header"> <div class="top"> <div class="container"> <h1 class="title"><img src="ロゴ画像" alt="サイトのタイトル" width="229" height="27"></h1> </div> </div> <div class="opening"> <div class="container"> <h2><img src="メイン画像" alt="メイン画像の説明" width="880" height="260"></h2> </div> </div> <div class="nl"> <div class="container"> <ul class="g-navi"> <li class="first g-navi"><a href="#">ホーム</a></li> <li><a href="#">サービス内容</a></li> <li><a href="#">会社概要</a></li> <li><a href="#">マップ</a></li> <li><a href="#">よくある質問</a></li> <li class="last"><a href="#">お問い合わせ</a></li> </ul> </div> </div> </div>
CSSで装飾していない状態で見るとこのようになります。
このヘッダー部分をCSSで装飾しましょう。
以下のCSSコードを記述します。
body {
min-width: 880px;
margin: 0;
padding: 0;
background-color: #ffffff;
color: #404040;
font-size: 80%;
}
a:link {
color: #0000ff;
}
a:visited {
color: #000090;
}
a:hover {
color: #c07100;
}
a:active {
color: #c07100;
}
#header div.container,
#content div.container,
#footer div.container {
width: 880px;
margin: 0 auto;
}
#header{
margin-top: -1%;
}
#header div.top {
padding: 15px 0 10px;
background-color: #778899;
border-top: 1px #778899 solid;
border-bottom: 1px #778899 solid;
}
#header div.top div.container {
position: relative;
}
#header h1.title,
#header p.title {
margin: 0 0 7px;
font-size: 200%;
}
#header ul.guide {
position: absolute;
top: 10px;
right: 10px;
margin: 0;
padding: 0;
list-style-type: none;
}
#header ul.guide li {
display: inline;
padding: 0 4px 0 8px;
}
#header ul.guide li.first {
background: none;
}
#header div.opening h2 {
margin: 0;
}
#header div.nl {
background: #4682b4;
border-top: 1px #4682b4 solid;
border-bottom: 2px #4682b4 solid;
}
#header div.nl ul {
width: 878px;
margin: 0;
padding: 0;
border-left: 1px #ffffff solid;
border-right: 1px #ffffff solid;
list-style-type: none;
text-align: center;
}
#header div.nl li {
width: 146px;
float: left;
line-height: 100%;
}
#header div.nl li.first,
#header div.nl li.last {
width: 147px;
}
#header div.nl li a {
display: block;
padding: 10px 2px 7px;
border-left: 1px #ffffff solid;
border-right: 1px #ffffff solid;
text-decoration: none;
font-weight: bold;
color: #ffffff;
}
#header div.nl li a:hover,
#header div.nl li.active a {
color: #4646ff;
}
#header div.topicPath {
margin: 0;
padding: 7px 2px;
background-color: #eee2d0;
}
#header div.topicPath ol {
margin: 0;
padding: 0;
list-style-type: none;
}
#header div.topicPath li {
display: inline;
}
#header div.topicPath li a {
padding-right: 12px;
}
#header hr.none {
display: none;
}
このようにCSSで装飾するとブラウザではこのように表示されます。
画像を挿入していないので表示されていませんが、ロゴやトップ画像を挿入することで綺麗なレイアウトになります。
ここからメインコンテンツのHTMLのコードを記述します。
<div id="content"> <div class="container"> <div id="main"> <div class="section normal news"> <div class="heading"> <h2>新着情報</h2> </div> <dl class="g-navi"> <dt>(日付)</dt> <dd>ここに新着ニュース、トッピクなどを記入します。</dd> <dt>(日付)</dt> <dd>ここに新着ニュース、トッピクなどを記入します。</dd> <dt>(日付)</dt> <dd>ここに新着ニュース、トッピクなどを記入します。</dd> <dt>(日付)</dt> <dd>ここに新着ニュース、トッピクなどを記入します。</dd> <dt>(日付)</dt> <dd>ここに新着ニュース、トッピクなどを記入します。</dd> </dl> </div> <div class="section normal"> <div class="heading"> <h2>サンプルタイトル</h2> </div> サンプルテキスト </div> <div class="section normal"> <div class="heading"> <h2>サンプルタイトル</h2> </div> サンプルテキスト </div> </div> <div id="side-navi"> <div class="section normal contact"> <h2>お問い合わせ</h2> お問い合わせください。 TEL 000-0000-0000 営業時間 平日 00:00～00:00 （定休日 土日祝） <a href="#">お問い合わせコチラ</a> </div> <div class="section normal"> <h2>お知らせ</h2> ◯◯新聞に弊社のサービスが取り上げられました。 </div> </div> <hr class="clear"> </div> </div> <div id="footer"> <div class="container"> <address> <strong>サイト名</strong> 住所 TEL 000-0000-0000 </address> </div> </div> </body> </html>
メインコンテンツのCSS
#content {
padding: 42px 0 10px; /* コンテンツのパディング（上、左右、下） */
}
#main {
float: right;
width: 660px;
}
#main h1.pageTitle {
margin: 0 0 15px 20px;
padding: 6px 10px;
background-color: #463f34;
font-size: 170%;
color: #ffffff;
}
#main div.section {
margin: 0 0 2em 20px;
}
#main div.normal div.heading {
margin: 0 0 1em;
padding: 6px;
background-color: #b0c4de;
}
#main div.normal h2 {
color: #ffffff;
margin: 0;
padding: 1px 0 0 5px;
font-size: 120%;
line-height: 100%;
}
#main div.normal p {
margin: 0 10px 1em;
line-height: 160%;
}
#main div.news dl {
width: 620px;
margin: 0 auto;
}
#main div.news dt {
width: 6.7em;
float: left;
padding: 7px 0 6px 3px;
line-height: 120%;
}
#main div.news dd {
margin: 0;
padding: 7px 3px 6px 6.6em;
border-bottom: 1px #c0c0c0 dotted;
line-height: 120%;
}
#side-navi div.contact {
padding-bottom: 0.3em;
}
#side-navi div.contact p {
margin-bottom: 0.4em;
}
#side-navi div.contact p.tel {
margin-bottom: 0.1em;
font-size: 150%;
font-weight: bold;
color: #2b2b2b;
}
#side-navi div.contact p.form {
margin-top: 0.7em;
padding: 3px;
background-color: #ffffff;
border: 1px solid;
border-color: #e0e0e0 #cccccc #cccccc #e0e0e0;
text-align: center;
line-height: 100%;
}
#side-navi div.contact p.form a {
display: block;
position: relative;
padding: 12px 2px;
background: #dc3a01 url(../image/form_back2_off.gif) repeat-x top;
font-size: 110%;
font-weight: bold;
color: #ffffff;
text-decoration: none;
}
#side-navi div.contact p.form a:hover {
background: #e14a03 url(../image/form_back2_on.gif) repeat-x top;
}
#side-navi {
float: right;
width: 220px;
}
#side-navi div.section {
margin-bottom: 10px;
}
#side-navi div.section h2 {
color: #ffffff;
margin: 0 0 0.7em;
padding: 4px 6px;
font-size: 120%;
}
#side-navi div.section p {
margin: 0 4px 0.6em;
line-height: 130%;
}
#side-navi div.normal {
padding: 2px;
border: 1px #e0e0e0 solid;
}
#side-navi div.normal h2 {
color: #ffffff;
background-color: #b0c4de;
}
#content hr.clear {
clear: right;
width: 100%;
margin: 0;
visibility: hidden;
}
#footer {
padding: 20px 0;
background-color: #b0c4de;
}
#footer ul.nl {
margin: 0 0 10px;
padding: 0;
list-style-type: none;
text-align: center;
}
#footer ul.nl li {
padding: 0 4px 0 8px;
background: url(../image/menu_line_gray.gif) no-repeat left;
display: inline;
}
#footer ul.nl li.first {
background-image: none;
}
#footer ul.guide {
margin: 0 0 20px;
}
#footer address {
font-style: normal;
text-align: center;
line-height: 140%;
}
.g-navi:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.g-navi {
min-height: 1px;
}
装飾したコンテンツをWEBサイトを確認するとこのようになります。
ホームページをインターネット上に公開する
ホームページのHTML・CSSが完成したら、インターネット上に公開しましょう。
インターネット上にホームページを公開するためには、サーバーが必要です。
しかし、自分でサーバーを用意するのは値段も高く、管理も大変なのでおすすめしません。
レンタルサーバーを利用して、インターネット上にホームページを公開するのがおすすめです。
おすすめは、さくらサーバー・ロリポップ・エックスサーバーなどが使いやすく料金もリーズナブルなので、おすすめです。
・さくらサーバーURL：https://www.sakura.ad.jp/
・ロリポップサーバーURL:https://lolipop.jp/
・エックスサーバーURL:https://www.xserver.ne.jp/
各社様々な料金プランが設定されていますが、最適な料金プランはアクセス数によって変わります。
1日に50PV〜100PVぐらいのサイトの場合、最安値のプランもしくはその2番目に安いプランで十分です。
まとめ
いかがでしたか？
HTML・CSSだけでもホームページを制作することが可能です。
ホームページを掲載して、知名度アップ・売上アップを目指しましょう。