ホームページ作成ソフトシリウス|ホームページ作成の基礎知識

HP作成の前に…知っておきたい基礎知識HTML編

シリウスでホームページを作る前に、今後ホームページの運営をしていこうと思うのであれば絶対に知っておいてほしい,というより知っておく必要がある基礎知識をいくつか説明したいと思います。

ホームページの構成

ホームページはどのようにして作られているのでしょうか?
実際に見てもらった方が早いと思うので以下の操作をしてみて下さい。

  1. マウスポインタをページ上に置き、右クリック。
  2. 「ソースの表示」をクリック。

意味不明な記号が羅列されていますよね。

例えば↑の番号入りリスト。wordなんかでよく見かけますが、これをHTMLソースでみると。

<ol>
<li>マウスポインタをページ上に置き、右クリック。</li>
<li>「ソースの表示」をクリック。</li>
</ol>

これがHTMLとよばれる文書構造で、ホームページはこのHTMLとCSS(スタイルシート)から成り立っています。

HTMLとはいわばホームページの設計図で、CSSとはそのホームページやHTMLに装飾を施す為の指示書と考えて下さい。

HTMLやCSSには書き方のルールや文法が存在する上、HTMLとCSSでは書き方や文法が全く異なります。

ホームページを一から作るとなるとHTML、CSSを一から書き上げてサイトを設計しなければいけないわけです。

考えただけで頭が痛くなってきますね。。。

しかしそんな設計をする必要がなく、HTMLの構成とCSS、デザインが既に決定されたテンプレートにサイトの内容を当てはめていくだけでホームページを作る事が出来るツール、それがホームページ作成ソフトシリウスです。
勿論大幅なカスタマイズや細やかな変更をするためにはHTMLやCSSをいじる必要があります。しかしシリウスのテンプレートはその必要が殆どない程に完成されたデザインだとたけぞーは思います。

HTMLを覚える必要はない?

HTMLやCSSが分からなくてもサイトを作ることが出来るのはシリウスのみならず多くのホームページ作成ソフトやブログの利点です。
文字装飾やリンク、画像などもボタンを押すだけでHTMLを出力してくれますし、CSSに至っては全く触る必要性がありません。

確かに、HTMLなんて覚えなくてもホームページ作成ソフトを使えばサイトは作れます。

でもそれじゃダメですよ?

HTMLやCSSを何も知らないのと知っているのとでは、サイト構成の幅が違ってきます。
やっているうちに少しづつ覚えてしまいますが、わからないことは自分で調べる!ツールの便利頼り切らないほうが上達は早いと思います。

HTMLタグ

先程の例を使って説明します。

  1. マウスポインタをページ上に置き、右クリック。
  2. 「ソースの表示」をクリック。

この赤枠で囲まれたボックスごとHTMLにすると

<div class="ylwbox">
<ol>
<li>マウスポインタをページ上に置き、右クリック。</li>
<li>「ソースの表示」をクリック。</li>
</ol>
</div>

となります。
<div class="ylwbox">や<li>等のことを総称してHTMLタグといいます。
ちなみにこのタグはCSSで設定(デザイン)してあるボックスを呼び出すタグになります。

開始タグと終了タグ

<li>マウスポインタをページ上に置き、右クリック。</li>

<li>を開始タグ。</li>の様にスラッシュが入っているタグは終了タグと呼ばれ、

開始タグ<li>「ソースの表示」をクリック。</li>終了タグ

このように開始タグと終了タグで文章を挟み込むことで様々な効果を持たせます。

その他に画像タグや<br />タグなど、単独で終了するタグも存在します。

HTMLタグの効果

HTMLタグを使ってこんな効果が出せます。

文字を大きくしたり
<span style="font-size:26px;">文字を大きくしたり</span>
色を変えたり
<span style="color:#CD0AFF">色を変えたり</span>
蛍光ペン風にしたり
<span class="ylw">蛍光ペン風にしたり</span>

警告してみたり

<div class="alert">
警告してみたり
</div>

ヒントを出してみたりできます。

<div class="thint">
ヒントを出してみたりできます。
</div>
リンクも飛ばせますよ
<a href="../">リンクも飛ばせますよ。</a>

あまりしつこいと嫌われてしまいますのでこのあたりにしておこうと思いますが、このようにHTMLを使うことで様々な効果を持たせることが出来ます。

以上の事はシリウスを含むホームページ作成ソフトやブログなどではワンタッチで文字装飾のHTMLタグを出力してくれます。

シリウスでフォローされていない使えるHTMLタグも多くありますので、後程たけぞーがよく使うHTMLタグを中心に紹介していきます。

画像もHTMLタグ

画像もHTMLで表示されます。

桜の花画像
これをHTMLソースでみると

<img src="./img/sakura.jpg" alt="桜の花画像" width="600" height="338" />

となります。画像タグは開始タグと終了タグがなく、単独で意味を持つタグとなります。
画像の場合はサーバーの画像ファイルに収めてある画像を上記のHTMLで指定して画面上に呼び出し、表示させます。

あまり深くは考えないでくださいね、画像の挿入もワンタッチでできますから。

以上HTMLについて本当に基礎の基礎をさわり程度に説明いたしました。
たけぞー自身上級者ではない上に説明が下手くそなものですからご理解いただけたか不安なんですけれども・・・
なんとな~くだけでもご理解いただければ幸いです。
かくいうたけぞーも最初はHTMLなんて言われても全く理解できませんでしたから、ホームページを作成しているうちに覚えていくので心配はいりません。
さて、複雑な話がやっと終わったと一息ついているところ誠に申し訳ないのですが、小難しく、拙いたけぞーの説明はもう少し続きます。

次はSEOについてです。

次のSEO対策についての説明は一般論と共にたけぞー自身の経験則に基づく見解も多く含んでいます。
SEO対策には明確な答えや、終わりはありません。また、日々進化していくものでもあります。
たけぞーがこのホームページを作った時点で有効と思われる施策も、皆様が読まれた時点で最新のものである、また、皆様のサイトにとって有効な施策となる保証はどこにもありません。
以上の事をご理解いただいた上でお読みいただきますようお願い申し上げます。

2014/04/22Takezoes Web運営者たけぞー

次ページへ「ホームページ作成の基礎知識②SEO編」

ホームページ作成の基礎知識記事一覧

トップページでも少し触れましたが…SEOとは「Search Engine Optimization」の略語であり、日本語訳にすると「検索エンジン最適化」となり、SEO対策とは「検索エンジンで自分のホームページが上位表示されるように対策を打つ(サイトを最適化する)」ことをいいます。現在色々な種類の検索エンジンが存在しています。この中でたけぞーたちが最も意識しなければならないのがグーグルとヤフーです。...