ブログ

  1. トップ
  2. ブログ
  3. HTML・CSSでホームページができるの?

HTML

HTML・CSSでホームページができるの?

「ホームページを作るには何をすればいいの?」このような疑問を持っている人も多いと思います。
ホームページを制作するために最低限必要なプログラミング言語は、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だけでもホームページを制作することが可能です。

ホームページを掲載して、知名度アップ・売上アップを目指しましょう。