workshop/website/main

HTMLとは

HTMLとはHyper Text Markup Languageの略で、ウェブサイトのほとんどすべてで利用されているマークアップ(タグ)ベースの言語になります。詳しい説明は既存ウェブサイトのリンクを幾つか挙げておきますので、そちらを参照してください。このページでは、まず最初にどのようなものなのかを簡単にまとめるだけにします。

タグ

html使う上で最も基本的な用語がタグです。これは 「<」、「>」、「文字列」から構成されるもので、<hogehoge>と記述することで、以下の情報がhogehogeに関するものであることを示すものです。下記に非常にシンプルなhtmlを載せます。単純にブラウザで閲覧した際にhello world!とだけ表示されます。

超シンプルなhtml

<html>
<body>
Hello World!
</body>
</html>

上記htmlファイルをダウンロード(右クリックでデスクトップ等にダウンロードしてください)し、ダブルクリック等でブラウザから開いてみてください。タグは基本的には<名前>と</名前>がセットになっています。それらでくくられた中にそのタグが示す情報が入ります。

HTML入門系情報

下記に入門系の情報をまとめておきます。特に30分間HTML入門を参考に、HTMLの基本を抑えてください。

  1. 30分間HTML入門
  2. 超絶初心者のためのフロント入門(HTML、CSS、JavaScript)

CSS

htmlのタグを利用して、ある程度のテキスト整形や画像挿入等ができますが、細かなレイアウトやフォント等の細かなスタイルを設定するために、CSS(Cascading Style Sheets)というものが用意されています。一般的にはhtmlとcssの両方を併用することで、ある程度のウェブサイトを作成することが可能になっています。具体的には下記リンクを参照して、実際に学んでみます.
スタイルシート(CSS)の基本的な書き方【初心者向け】

少し面倒でしたが、このようにスタイルシートを利用することで、タグの情報はそのままに、様々な外観デザインを適応することができます。すこしつまらない事例ばかりでしたので、ここで、かなり具体的な事例に触れてみましょう。

html5up.net

html5up.netではhtml, css, Javascript(あとで触れます)を用いたかなり実践的なテンプレートがフリー(著作権表記は必要です)で公開されています。実際にこれらのテンプレートを利用してみましょう。

一方で、素晴らしいテンプレートを直接編集するとなると、高度な知識が必要となってきます。すでにhtmlに関する専門知識をもっているひとであれば特に問題ないですが、そうでないユーザ向けに、GUI操作をベースとしたウェブサービスが幾つか存在しています。

  1. wix.com
  2. Jimdo
  3. ぺらいち

フォントの設定方法

一昔前までは,ブラウザ上でのフォント表示は基本的にシステム側のフォントファイルに依存していました.近年になり,モリサワやgoogle等がウェブフォントサービスを提供するようになり,ブラウザ上でも統一したフォント表示が可能になっています.フォントの導入方法はそれぞれのウェブサービスを参照してください.

公開方法

では最後に公開の方法です.基本的にはインターネットに接続しているコンピュータがあれば,あとはapacheなどのサーバー・ソフトウェアを動かすだけでアクセスできるようになります.ただしドメインの設定をしていなと,アクセスするにはIPアドレスを直接打ち込まなければならないため,一般的にはドメインを利用し,任意のサイトアドレスとIPアドレスの紐付けを行うことで,ウェブサイトを公開する,といった一連の手続きを実現しています.例えば先の wixというサービスでは,最初にサーバ上の領域を無料で使うことができ,準備が整ったら公開をすることで,自動でそれらの設定が終了します.

いずれにしろ,任意のhogehoge.com のようなドメインでウェブサイトを公開したい場合は必ず使用料金が発生します.無料でそのような仕組みをオープンにしているサービスはありません.

  • 有料:任意の hogehoge.com といったドメインで公開可能
  • 無料:利用サービスのサブドメインとして,hogehoge.freeserver.com といった形で公開可能
となることを覚えておきましょう.

今回は自分で作成したhtml, js, cssのファイルを公開したいため,例としてXdomainというサービスを紹介します.XdomainとはXserverという有名なウェブサイトサービスの無料版に位置づけられます.サーバ領域自体は制約がありますが,無料で使用できるため,基本的にはドメイン使用料金(年額1,000-3,000円程度)で独自ドメインのウェブサイトを公開できます.

まずはXdomainへアクセスし,「無料レンタルサーバーお申込み」のリンクから申し込み手続きを行ってください.登録したメールアドレスに通知が行き,アカウントの作成ができます.作成したアカウントでログイン後,左メニューの無料レンタルサーバーのリンクをクリックします.すると,HTMLサーバーという項目の「利用を開始する」というボタンがありますので,ここから利用開始を行います.


Copyright (c) 2015 Tetsuaki BABA all rights reserved.