初心者でもホームページをカスタマイズしたい!0から学ぶHTML講座

レンタルオフィス「METSオフィス」運営責任者のオバタです。

いまやサイト制作に関する知識(HTML,cssなど)が無くても手軽にホームページを制作できる「wix」などのサービスが充実しています。ビジネスのスタートアップ時に自前でホームページを用意できるのは起業家にとってとても嬉しいことですよね。

この手のWebサービスでは用意されたテンプレートからデザインを選び画像やテキストを好きなように配置すれば立派なホームページが完成するわけですが、慣れてくるといろいろと細かい部分を修正したくなってくるものです。

だけど知識がないからどうしたらいいかわからない……そんな悩みを抱えている起業家のために、今回は、Web制作の専門家に「初心者でもホームページをカスタマイズするためにはどうしたら良いのか?」という疑問をぶつけてきました。

ホームページをWebサービスを使ってつくったけどカスタマイズのやり方がわからなくて困っているという方はぜひ目を通してみてくださいね。

ホームページ(Webサイト)は何でできているのか

webサイトの見栄えを変えるためには、そもそも何でできていて、どこを変えればいいのかを知る必要がありますよね。

私たちが普段何気なくインターネット上で閲覧しているホームページ(以下Webサイト)は、HTML(HyperText Markup Language)というwebサイトを構成する言語でつくられたデータファイルで出来ています。

HTMLは画像や動画・外部リンクなどを埋め込むことが可能で、web上に置かれたこのHTMLとCSS(webサイトのスタイルを指定するための言語ファイル)などをあなたのPCやスマートフォンが読み込むことで、私たちはwebサイトとして見ることができるようになっています。

HTMLとweb、閲覧の関係性

webサイトを構成するための言語は他にもありますが、基本的には「HTML」と「css」の理解を深めれば、初心者レベルでのカスタマイズはかなり幅広くできるようになります。

HTMLはどうすればカスタマイズできるの?

HTMLをカスタマイズするには、基本的な構成のWebサイトであれば「index.html」など拡張子が「.html」と表示されているファイルを開き、編集して上書きする必要があります。(全てのwebサイトが必ず「.html」で構成されているわけではありませんが、初心者向けではないため割愛します)

自分のwebサイトの「.html」ファイルがどこにあるのかさっぱりわからないという方は、自分が使っているwebサイト制作サービスやレンタルサーバーのサポートに確認する等の作業が必要です。お持ちのPCの中にファイルがあってそれをいじれば変わるというわけではありませんのでご注意ください

ファイルを開くために必要なものはメモ帳(WindowsやMacに標準搭載されているもの)、もしくはテキストエディタと呼ばれるソフトです。

例えばこのページのHTMLがどうなっているのかを見てみると……

20160630b

……と、このようになっています。

馴染みのない方にはわけがわからない暗号のように見えるかもしれませんが、これらの言語が今実際にこのページを構成するために書かれた言語なのです。

こんな難しいのをいじらないとカスタマイズできないのか……と絶望した方がいらっしゃるかもしれませんが、安心してください。サイトの見栄えを少し変えたりする程度なら抑えておくべきポイントは少ないです。

HTMLで抑えておくべきタグ①

まず最初に必ず書かなくてはいけないHTMLタグについて説明していきます。
なお、これだけ記述してもブラウザ上には何も表示されません。枠組みだと捉えてください。

<!DOCTYPE html>
<html>
 <head>
  <meta charset=”UTF-8″>
  <title> webサイトのタイトル</title>
 </head>
 <body>
 </body>
</html>

!DOCTYPE html

突っ込んだ説明は省きますが、これは絶対に省かないようにしてください。

html

囲った内部がHTMLで記述されていることを示すタグ。必須です。

head

ブラウザ上には表示されない「ヘッダ情報」と呼ばれる場所。
サイトタイトル、概要、CSSなどのパス情報などはここに記述します。

body

ブラウザ上に表示されるメインコンテンツを記述する場所。

meta charset=

HTML文書内の文字エンコーディングを指定する場所。
最新のwebサイトはUTF-8を指定しておけばOKです。

title

サイトタイトルを指定する場所。
検索時のwebサイト名になるので重要です。

HTMLで抑えておくべきタグ②

次に、HTMLでよく使われるタグについて簡潔に説明していきます。
先述した枠組みよりも、こちらはカスタマイズに直接関わってくる要素になります。

link

主に外部リソースの読み込みに使うタグ。
CSS(サイト装飾用のファイル)の読み込みでは必ず使うため、抑えておきましょう。

例: <link rel=”stylesheet” type=”text/css” href=”style.css” >

img

imgは画像を表示するタグ。
画像のリンクを指定し、タイトル、横と縦のサイズを記述する。

例: <img src=”○○○.jpg” alt=”画像のタイトル” width=”横サイズ” height=”縦サイズ” />

h1、h2、h3…

h○(半角数字)は見出しに使うタグ。
1が最も重要で、数字が大きくなるほど重要度が下がる。

<h1> 0から学ぶhtml講座</h1>
<h2> HTMLで抑えておくべきタグ</h2>
<h3> !DOCTYPE html</h3>

a

ハイパーリンクのタグ。
外部リンク、サイト内ページへのリンクなどに使います。

例: <a href=”//mets-office.com/”> METS OFFICE</a>

p

文章の段落ごとに使うタグ。

例: <p> 文章の段落ごとに使うタグ。</p>

br

改行タグ。上記タグ例と違い、閉じずに単体で使うことが可能。

例: <br>

div

ひとかたまりの範囲として定義されるブロック要素。

ブロック要素とは「見出し、段落、リスト、フォーム」などひとつのまとまった単位として表される要素。
一般的なブラウザでは前後に改行が入って表示される。

span

ひとかたまりの範囲として定義されるインライン要素。
インライン要素とは主に文章の一部として利用される要素。前後は改行されない。

その他のHTMLタグ

HTMLには様々な種類のタグがあります。
わからないタグについては下記のリンクから調べると良いです。

HTML5リファレンス

まとめ:結局のところ、カスタマイズするには

変えたい部分のタグがどこなのかを把握していなければ、見た目のデザインどころかページ内のテキストすら変更することはできないのがHTMLです。

見た目のデザインをいろいろと変えるのであれば、HTMLのタグをある程度把握し、どの要素がどこの部分を表示しているのか理解しておきましょう。

そこさえつかめば見た目を大きく変えることだってできるようになります。

まずはテキストを一箇所変えられるようになることが重要です。要素に対する理解が深まれば、その要素に対してCSSファイルでどのような装飾が指定されているのかがわかるようにもなり、デザインの細かい部分まで変えられるようにもなります。

基本的なHTML+CSSのサイトであれば、構成する全てのファイルをバックアップしておけばいくらいじっても復元できます。よくわからない部分は直接いじって確かめてみるとより理解が深まるので試してみてくださいね。

あわせて 読まれている 記事

ブログ記事全カテゴリー

都心一等地の 希少な自社ビル直営 レンタルオフィス

METSオフィスの拠点は「東京都新宿区新宿」に2つ、「東京都中央区日本橋」に1つ、「東京都港区西新橋」に1つのあわせて4箇所。

70年以上不動産業を営んできた弊社が所有する一棟ビル内で運営しております。

1~2人用の個室や少人数向けの個室レンタルオフィスだけでなく、事業拡大に伴うフロア貸切等のご相談にも柔軟に対応可能です。また、事業縮小でバーチャルオフィスに移転したいなどお客様の利用目的に合わせたプランをご利用いただけますので、個人様・法人様問わず起業時のスタートアップや東京支店オフィスとしてぜひご活用くださいませ。

METSオフィスでは、デスク・オフィスチェア完備、水道光熱費とネット利用料等込みのセキュリティ万全なオフィスサービスをご利用いただけます。

会議室や複合機は使った分だけ、その他、電話サービスなどオプションサービスは必要な場合に追加してご利用いただける無駄のない料金プランとなっております。また、お客様が什器を持ち込んで個室をアレンジしてご利用いただくことも可能です。

METSレンタルオフィス会議室A(日本橋兜町)|METSオフィス
上部へスクロール