ホームページは初心者でもできる?

ホームページ
Web業界に入り、早くも20年以上が経ってしまいました。私がWeb制作に携わり始めた1990年代前半ではまだcss(Cascading Style Sheets)というものも無く、tableタグやスペーサーgifなるものを使用して、できるだけデザイン画に近いものを製作していました。
と、こんな話をこれからホームページを自前で作ろうと考えている方には、どうでも良い話ですね。すみません。
ホームページを作るのに未経験でも作れますか?とよく尋ねられるのですが、答えはできます!
ホームページは基本的にhtml(HyperText Markup Languageの略)というマークアップ言語を使用して制作するのですが、これを深く理解しなくてもアメブロ、はてなブログなどの無料ブログサービスを使用して、ホームページっぽい事は可能です。
ブログを使用すると日記っぽくなるから嫌だ、または独自のドメイン(~.comや~.jpなど)を取得して運用したいという方であればWordpressなどのCMS(Contents Management Systemの略)を使用すれば、htmlを理解しなくても“ある程度”のホームページは初心者でも制作できます。

ブログでホームページを作る

基本的にコンテンツは文字中心になりますが、ブログを使用して企業、団体のホームページにだってできます。TOPページはもとより、会社概要や地図(MAP)のページもできます。
凝ったデザインよりも伝えたい事が優先、またはお金をあまりかけたくない方は無料ブログで立ち上げてみませんか?
※無料ブログでは広告バナーが表示されますが、有料サービスを使用れば広告バナーは表示されません。
お勧めブログサービスは
はてなブログ
アメブロ
です。
もしブログでも面倒だ、やり方がわからないというのであれば“ともたか39”にお問い合わせください。初回無料でご相談にのります。
ご連絡はこちらのフォームから→お問い合わせフォーム

ドメイン取得方法とレンタルサーバについて

ドメインを独自に取得し、サイトを立ち上げたい方のであれば、以下の手順をおこなってください。

ドメイン取得方法

ドメイン(~.comや~.jpなど)は、ドメイン業者というものがあり、そのドメイン業者に会員登録(会員登録費用はほとんどが無料)して、ドメイン取得という事になります。
未使用のドメインしか取得できませんが、.comや.netや.jpなどで価格が異なってきます。比較的安価なのは.comや.netだと思います。
有名どころでは、
お名前.com
ムームードメイン
バリュードメイン
などがあります。
もしこれも面倒だ、やり方がわからないというのであれば“ともたか39”にお問い合わせください。初回無料でご相談にのり、対応します。
ご連絡はこちらのフォームから→お問い合わせフォーム

レンタルサーバについて

ドメインを取得したら、次はそのドメインを運用するサーバを立てなければなりません。
ドメインはあくまでも名前が書かれている名刺のようなもので、その名刺の記載がある会社の事務所のようなものがサーバになります。
このサーバに見せたい情報(コンテンツ)をhtmlファイルやcssなどで制作しクライアント側へ見せるようにする訳です。
自前でサーバを立てる事も可能ですが、サーバを立てるためのハードウエア、回線などが必要になり、もっと言えばサーバを管理、運用する専門の技術者が必要になり、手間やコスト面、そしてセキュリティ対策などで結構大変です。そこで多くの方はサーバをレンタルして運用しているわけです。
レンタルサーバにも色々ありまして、大きく分けると『共有サーバ』と『専用サーバ』の2つになります。

『共有サーバ』は、1つのサーバ(1台のコンピュータ)で複数の企業・団体などのホームページ(ドメイン)が運用されているため、同じサーバ内にある他のホームページにアクセスが多く集まると、サーバのトラフィックが上がってしまうため、表示が遅くなったりするデメリットはありますが、レンタル費用が安価でおさえられます。
※現在の共有サーバサービスを提供しているレンタルサーバ会社は、昔よりもトラフィックに対してそれなりの対策をしているので、あまり気にすることは少なくなったと私個人では思っています。
『専用サーバ』は、レンタルした方専用のサーバ(1台のコンピュータ)が割り当てられるので、通信速度などで心配する事は比較的少なく、サーバ技術者がいれば好みのサーバ状態に設定変更なども可能になります。ただそのため費用が高くなるケースが多いです。 費用から考えて、そしてそんなに複雑な技術、設定を必要としなければ『共有サーバ』で充分だと20年以上Web業界にいる私からもお勧めします。

お勧めレンタルサーバとしては、
ロリポップ
ヘテムル
さくらサーバ
などです。
私自身が実際にレンタルした中で、サーバトラブルも少なく、低コストで安定した運用経験があるから紹介しました。
レンタルサーバに関してもご不明な点があれば、気軽に“ともたか39”へお問い合わせください。無料でアドバイスいたします。
ご連絡はこちらのフォームから→お問い合わせフォーム

htmlとcssとは何?

ここからは何のこっちゃ?という話になってきてしまいそうですが、ホームページはhtmlというハイパーテキストというマークアップ言語で表現されます。簡単なプログラミング言語のようなものです。
そこに文字表現を好みのものにしたり、細かなレイアウトまでを設定、表現させるのがcssというものです。
以下に簡単にhtmlとcssを説明していきます。

htmlの基本構造と基本タグの説明

htmlは大きく分けて以下のタグを使う事で構造を成り立てさせます。
  • htmlタグ
    htmlの最初と最後で使用し、htmlファイルである事を宣言します
    <html>〜</html>
  • headタグ
    <html>タグと<body>の間で使用し、サイトタイトル(title)、文字コード、サイト説明(description)、サイトの主となるキーワード(keywords)などを宣言するためのエリアです。
    <head>
    <title>〜</title>
    <meta name="description" content="〜">
    </head>
  • bodyタグ
    ブラウザの画面で表現させたいエリアになります。基本は</head>の直後から</html>の直前までの宣言になります。
    このbodyタグの中にユーザーに読んでもらいたい文章、見てもらいたい画像、動画などを配置・設定します。
    <body>
    あいうえお
    <img src="tomotaka.gif">←画像を表示させるためのimgタグ
    </body>
  • hタグ
    bodyタグの中でコンテンツの表題や文節の見出しタイトルとして使用するタグです。
    hタグはh1〜h6までが使用可能で、数字が小さいものを上から順番に使用します。
    例えば、コンテンツ全体のタイトルとしてh1タグを使用し、中見出しでh2タグを、そして小見出しでh3タグを使用するといった感じで使用します。
    ※基本としてh1タグは、htmlファイル内に1つのみの使用が好ましいです。
    <h1>大見出し</h1>
    <h2>中見出し</h2>
    <h3>小見出し</h3>

  • cssの役割

    この章の初めにも記しましたが、htmlで作ったファイルをスタイルシートというファイル(.css)で細かなレイアウトを指定し、ブラウザ上での表現を豊かにさせるものです。
    例えばある部分だけ文字を大きくしたい場合は、その部分をあるタグで囲み、classを指定します。
    例1:
    htmlファイル
    <span class="moji01">あいうえお</span>かきくけこ

    cssファイル
    .moji {
     font-size: 120%; ← 文字の大きさを1.2倍にする
     font-weight: bold; ← 文字を太文字にする
     color: #f00; ← 文字の色を赤にする

    結果あいうえおかきくけこ
    この他にも画像の位置を好みの場所に指定したり、表や囲みを作成したりなどここでは書ききれない表現ができます。 htmlやcssを覚えて表現を広げたい、そしてたのしみたいという方は可能な限り無料でアドバイスいたしますので気軽に“ともたか39”へお問い合わせください。
    ご連絡はこちらのフォームから→お問い合わせフォーム

    まとめ

    ここまで読んでいただきありがとうございます。
    html+cssに興味を持ってやる方であれば、楽しくホームページ作りもできると思いますが、ここまで読んでいただいて興味がわかない、面倒くさい、やりたくない、でもホームページを立ち上げたいと思っている方は、まずは無料ブログでもよいと思うので、立ち上げるだけ立ち上げて、文章を書きながら必要な事を学べば良いんだと思います。
    それでも自分では…と思う方は“ともたか39”へお問い合わせください。
    ご連絡はこちらのフォームから→お問い合わせフォーム

    逆にhtml+cssだけでは物足りず、動的な表現もしたいという方もいらしゃるんだと思います。そんな方はJavaScriptを学んでみることもお勧めです。
    現在発表されている技術では、html+css+javascriptでスマホアプリができてしまう時代です。
    ※参考:Monaca

    ホームページを作るなら楽しんでやらなくちゃっ!です!!