webマーケティング初心者でもホームページをカスタマイズしたい!0から学ぶHTML講座レンタルオフィス「METSオフィス」運営責任者のオバタです。いまやサイト制作に関する知識(HTML,cssなど)が無くても手軽にホームページを制作できる「wix」などのサービスが充実しています。ビジネスのスタートアップ時に自前でホームページを用意できるのは起業家にとってとても嬉しいことですよね。この手のWebサービスでは用意されたテンプレートからデザインを選び画像やテキストを好きなように配置すれば立派なホームページが完成するわけですが、慣れてくるといろいろと細かい部分を修正したくなってくるものです。知識がないからどうしたらいいかわからない......そんな悩みを抱えている起業家のために、今回は、Web制作の専門家に「初心者でもホームページをカスタマイズするためにはどうしたら良いのか?」という疑問をぶつけてきました。ホームページをWebサービスを使ってつくったけどカスタマイズのやり方がわからなくて困っているという方はぜひ目を通してみてくださいね。東京都心一等地のレンタルオフィス月35,000円からご利用可能ホームページ(Webサイト)は何でできているのかwebサイトの見栄えを変えるためには、そもそも何でできていて、どこを変えればいいのかを知る必要がありますよね。Language)というwebサイトを構成する言語でつくられたデータファイルで出来ています。HTMLは画像や動画・外部リンクなどを埋め込むことが可能で、web上に置かれたこのHTMLとCSS(webサイトのスタイルを指定するための言語ファイル)などをあなたのPCやスマートフォンが読み込むことで、私たちはwebサイトとして見ることができるようになっています。webサイトを構成するための言語は他にもありますが、基本的には「HTML」と「css」の理解を深めれば、初心者レベルでのカスタマイズはかなり幅広くできるようになります。HTMLはどうすればカスタマイズできるの?HTMLをカスタマイズするには、基本的な構成のWebサイトであれば「index.html」など拡張子が「.html」と表示されているファイルを開き、編集して上書きする必要があります。(全てのwebサイトが必ず「.html」で構成されているわけではありませんが、初心者向けではないため割愛します)自分のwebサイトの「.html」ファイルがどこにあるのかさっぱりわからないという方は、自分が使っているwebサイト制作サービスやレンタルサーバーのサポートに確認する等の作業が必要です。お持ちのPCの中にファイルがあってそれをいじれば変わるというわけではありませんのでご注意くださいファイルを開くために必要なものはメモ帳(WindowsやMacに標準搭載されているもの)、もしくはテキストエディタと呼ばれるソフトです。このページのHTMLがどうなっているのかを見てみると............と、このようになっています。馴染みのない方にはわけがわからない暗号のように見えるかもしれませんが、これらの言語が今実際にこのページを構成するために書かれた言語なのです。こんな難しいのをいじらないとカスタマイズできないのか......と絶望した方がいらっしゃるかもしれませんが、安心してください。サイトの見栄えを少し変えたりする程度なら抑えておくべきポイントは少ないです。HTMLで抑えておくべきタグ1まず最初に必ず書かなくてはいけないHTMLタグについて説明していきます。これだけ記述してもブラウザ上には何も表示されません。枠組みだと捉えてください。html突っ込んだ説明は省きますが、これは絶対に省かないようにしてください。html囲った内部がHTMLで記述されていることを示すタグ。headブラウザ上には表示されない「ヘッダ情報」と呼ばれる場所。サイトタイトル、概要、CSSなどのパス情報などはここに記述します。bodyブラウザ上に表示されるメインコンテンツを記述する場所。charset=HTML文書内の文字エンコーディングを指定する場所。最新のwebサイトはUTF-8を指定しておけばOKです。titleサイトタイトルを指定する場所。検索時のwebサイト名になるので重要です。HTMLで抑えておくべきタグ2次に、HTMLでよく使われるタグについて簡潔に説明していきます。先述した枠組みよりも、こちらはカスタマイズに直接関わってくる要素になります。link主に外部リソースの読み込みに使うタグ。CSS(サイト装飾用のファイル)の読み込みでは必ず使うため、抑えておきましょう。>imgimgは画像を表示するタグ。画像のリンクを指定し、タイトル、横と縦のサイズを記述する。/>h1、h2、h3...h○(半角数字)は見出しに使うタグ。1が最も重要で、数字が大きくなるほど重要度が下がる。html</h3>aハイパーリンクのタグ。外部リンク、サイト内ページへのリンクなどに使います。OFFICE</a>p文章の段落ごとに使うタグ。文章の段落ごとに使うタグ。</p>br改行タグ。上記タグ例と違い、閉じずに単体で使うことが可能。<br>divひとかたまりの範囲として定義されるブロック要素。ブロック要素とは「見出し、段落、リスト、フォーム」などひとつのまとまった単位として表される要素。一般的なブラウザでは前後に改行が入って表示される。spanひとかたまりの範囲として定義されるインライン要素。インライン要素とは主に文章の一部として利用される要素。その他のHTMLタグHTMLには様々な種類のタグがあります。わからないタグについては下記のリンクから調べると良いです。HTML5リファレンスまとめ:結局のところ、カスタマイズするには変えたい部分のタグがどこなのかを把握していなければ、見た目のデザインどころかページ内のテキストすら変更することはできないのがHTMLです。見た目のデザインをいろいろと変えるのであれば、HTMLのタグをある程度把握し、どの要素がどこの部分を表示しているのか理解しておきましょう。そこさえつかめば見た目を大きく変えることだってできるようになります。テキストを一箇所変えられるようになることが重要です。要素に対する理解が深まれば、その要素に対してCSSファイルでどのような装飾が指定されているのかがわかるようにもなり、デザインの細かい部分まで変えられるようにもなります。基本的なHTML+CSSのサイトであれば、構成する全てのファイルをバックアップしておけばいくらいじっても復元できます。わからない部分は直接いじって確かめてみるとより理解が深まるので試してみてくださいね。