ホームページ作成に必要な4つの基礎知識(2ページ目)

HTML・CSS（スタイルシート）

HTMLは、ウェブページそのものを記述する言語です(※1)。CSSは、そのウェブページにレイアウトやデザインなどの装飾を加える言語です(※2)。HTMLとCSSは、ホームページを構成する最も基本的な技術だと言って良いでしょう。HTMLにもCSSにもバージョンがあり「HTML5」や「CSS3」のようにバージョン番号を付けて表記されることもあります。バージョンによって使える記述が異なりますから、できるだけ新しい解説を読むのが望ましいでしょう。
 
※1：XMLの文法を使った「XHTML」という規格もありました。XHTMLでホームページを作ることもできますが、もはやそうする必要性はないので、HTML5を使っておきましょう。
※2：CSSは、Cascading Style Sheets（カスケーディング・スタイル・シーツ）の略ですが、単に「スタイルシート」とも呼ばれます。

■HTMLやCSSの書き方を知るには
HTMLもCSSもとても基本的な技術ですから、書き方を知る方法は多数あります。当ガイドサイト（All About ホームページ作成）内でも、HTMLやCSSの書き方を解説した記事は多数あります。PCで記事をご覧になっている場合は、ページの右端にカテゴリ一覧がありますから知りたい情報を探してみて下さい。また、記事の人気順ページもあります。

■作成ソフトが生成したHTMLソースやCSSソースを編集する
初めてホームページ作成に挑戦する場合なら特に、HTMLやCSSを白紙の状態から書くのは大変です。その場合は、ホームページ作成ソフトを活用して「ホームページ作成ソフトが出力したソースを見て編集する」という方法がおすすめです。各種作成ソフトについては、記事「ホームページ作成ソフトの選び方」もご参照下さい。

JavaScript

JavaScript（ジャバスクリプト）は、ホームページに様々な機能を加えられるスクリプト言語です。記事「JavaScriptで画像のスライドショーを作成する方法」で解説したように画像を次々に表示する機能を加えたり、ユーザの動作に応じて装飾を変化させたり、時間をカウントしたり、入力漏れを指摘したり、サブウインドウを表示させたり……といった様々な機能を実現できます。

■JavaScriptの書き方を知るには
当ガイドサイト内にもJavaScriptの書き方を解説した多数の記事があります。また、All About内には専門の「All About JavaScript」ガイドサイトもありますので併せて覗いてみて下さい。

CGI（PerlやRubyなど）・PHP

ページを動的に生成する際にも使われるプログラミング言語です。掲示板やメール送信フォームのように、アクセス者が入力した内容をサーバに蓄積したり送信したりする用途にもよく使われます。

CGIは「ウェブ上でプログラムを動作させる入れ物」のようなもので、中身はPerlやRubyなどのプログラミング言語で記述されています（バイナリの場合もあります）。PHPは、HTMLソースの中にプログラムを埋め込むような感じの文法で記述できるプログラミング言語です。

■CGI（PerlやRuby）・PHPの書き方を知るには
All About内には専門の「All About Perl」や「All About Ruby」・「All About PHP」もありますので覗いてみて下さい。なお、1から記述するのは簡単ではありませんが、フリーCGIなどの形で配布されているツールを自サイトに設置するだけなら、さほど高度な知識は必要ありません。

SSI

SSI（Server Side Includes）は、HTMLファイルに対してサーバ側で他のファイルや情報を合成できる機能です。たいていは拡張子を「.shtml」にすると使えます。HTMLのコメントの記述方法で指示を埋め込むだけで利用でき、HTML内に別のファイルの中身を合成したり、任意のファイルの更新時刻を表示したりできます。

例えば、ウェブサイトの各ページで共通のヘッダやフッタを独立したファイルに分離しておき、それをSSIで各ページに合成する方法を採用すれば、ヘッダやフッタを更新したい場合でも1ファイルを編集するだけで全ページの更新が済むので管理が容易です。

■SSIの活用方法を知るには
そのほか、SSIの活用方法は記事「任意のページの更新日時をまとめて自動表示」でも解説していますのでご参照下さい。

.htaccess

.htaccessファイルは、IDとパスワードによる認証機能を用意して秘密のページを作ったり、閲覧環境に応じてアクセス制限を施したり、アクセス条件によって自動転送したり、「404 Not Found」などのエラーページの表示内容を独自にカスタマイズしたりする際に使えるサーバ設定ファイルです。

■.htaccessファイルの書き方を知るには
当ガイドサイト内にも多数の記事があります。記事「.htaccessファイルの書き方と設定・設置方法」にまとめてありますのでご参照下さい。

データベース

ウェブ上でもよく使われるデータベースには、例えば「MySQL」や「PostgreSQL」があり、CMSツールでもデータの保存先として利用されています。CMSを自力でセットアップしたい場合、直接データベースを使う知識は不要ですが、お使いのレンタルサーバなどで準備する方法は知っておく必要があります。

■データベースの使い方を知るには
All About内には専門の「All About データベース」や「All About SQL」もありますので覗いてみて下さい。

フレームワーク

フレームワークは、整ったデザインが簡単に使えるパーツ群を提供してくれる仕組みです。見栄えの良いボタンを表示したり、分かりやすいアイコンを表示したり、グリッドを使って簡単にレイアウトを作成したりするのに役立ちます。

Twitter社が公開したBootstrapが有名で、記事「見やすいUIを作れるフレームワークBootstrap4の使い方」でも解説しています。そのほか、Yahoo!製の軽量フレームワーク「Pure」や、Google製の「Web Starter Kit」など様々なフレームワークがあります。

ライブラリ

ライブラリは、自力で記述するソース量を削減するのに役立つスクリプトのセットなどです。

例えば、JavaScriptを便利に強化するライブラリ「jQuery」があります。実現できる様々な効果を紹介した記事「JavaScriptを便利にするライブラリ jQueryを使う準備」も公開していますので、ぜひご参照下さい。

CMS

CMS（Content Management System）は、ホームページをウェブ上で作成できるようにした統合ツールです。PHPで作られていて全ページを動的に生成する「WordPress」や、Perlで作られていて全ページを静的に出力する「Movable Type」などのCMSツールが有名ですが、他にも多数の種類があります。

CMSを使うメリット・デメリットについては、記事「ホームページの作り方：初心者向けカンタン作成方法4選」でも紹介しています。

画像素材

ホームページの背面に掲載する壁紙画像や、メニュー項目などに付加するアイコン、ナビゲーション用のボタンなど、様々な画像を1から作成するのは大変です。Web素材として画像を提供してくれる配布サイトを活用すると便利です。

■画像素材を探すには
All About内には専門の「All About Web素材」もありますので覗いてみて下さい。

画像加工

画像素材を加工したり、自分で撮った写真をウェブ用に加工したり、画像を編集するテクニックを知っておくと表現の幅が増えます。GIMPなどの画像加工ソフトウェアの使い方や、それらを使うテクニックを知っておくと役に立つでしょう。

■画像加工テクニックを知るには
All About内には「All About CG・画像加工」や「All About フォトショップ(Photoshop)の使い方」・「All About イラストレーター(Illustrator)の使い方」などもありますので覗いてみて下さい。

■画像を加工せずに様々な表示効果を出す方法
画像をウェブ上に掲載する際の様々なテクニックは当ガイドサイト内でも解説しています。例えば、画像を直接加工することなく様々な表示効果を出す方法として、「画像を直接は加工せず、ウェブ上で見た目を変化させる10の方法」などのまとめ記事も用意していますので、ぜひご参照下さい。

動画（アニメーション）作成

ちょっとしたアイコンを動かすアニメーションGIF画像から、長時間の映像配信にも使えるMPEGデータまで、様々な動画の作成・公開方法があります。長い動画の場合はストリーミング配信できる公開方法を知っておくと便利でしょう。

■動画（アニメーション）の作成方法を知るには
All About内には「All About 動画撮影・動画編集」や「All About YouTube動画投稿」もありますので覗いてみて下さい。

Webフォント（アイコンフォント）

Webフォントは、フォントファイルそのものをウェブ上からダウンロードさせることによって、望みのフォントで表示できるようにする仕組みのことです。文字を画像化することなく、望みのフォントで表示する目的に活用できます。

■Webフォントの使い方を知るには
Webフォント機能に関しての概要は、記事「Webフォントの使い方:Google Fontsで日本語フォントも」をご参照下さい。

■アイコンの表示にも使われるWebフォント
Webフォントは、アイコンを表示する仕組みとしても活用されています。画像でアイコンを作成する場合とは異なり、拡大・縮小が綺麗にでき、色をCSSで指定できるメリットがあります。詳しくは「色もサイズも自由自在！アイコンを綺麗に表示するWebフォント集」ページにまとめてあります。

SNS連携

TwitterやFacebookなどのSNSへ手軽に投稿できるボタンを設置したり、TwitterやFacebookのタイムラインを自身のウェブ上に掲載できるガジェットを設置できると便利でしょう。また、自サイト内の任意のページにSNSを使ったコメント機能を追加できる仕組みなど、SNSと自サイトとを連携させるサービスもあります。

■SNS連携方法などの方法を知るには
当ガイドサイト内では「初心者でも簡単！Facebookページの作り方」などの記事を公開しています。そのほか、All About内には専門の「All About ツイッター(Twitter)の使い方」や「All About フェイスブック(Facebook)の使い方」もありますので覗いてみて下さい。

アクセシビリティ（使いやすさ）、ユーザビリティ（分かりやすさ）

多数の人々に広く使ってもらえるホームページを作る上で特に気をつけたい点は、アクセシビリティとユーザビリティです。

■アクセシビリティ (Accessibility)
アクセシビリティの確保とは、「様々な環境・境遇の人々からでも問題なく閲覧が可能なように気をつけて作成する」ということです。単に「様々な大きさの画面や端末でも閲覧できるよう気をつける」というだけではありません。例えば、
 

• 色の識別が困難な人でも容易に閲覧できるようにする
• 文字を拡大しないと読めない人でも閲覧できるようにする
• 音声読み上げソフトを用いている人でも問題なく閲覧できるようにする
• キー入力が困難な人や環境からでも容易に利用できるようにする

……といった幅広い「利用しやすさ」を確保することを指しています。このような方法を解説したガイドラインとして、W3Cが勧告した「Web Content Accessibility Guidelines」(※リンク先はウェブアクセシビリティ基盤委員会による和訳ページ)がありますので、参考にすると良いでしょう。

■ユーザビリティ (Usability)
ユーザビリティの確保とは、「誰が見ても分かりやすく・効率や実用性が高く・操作ミスを起こしにくいように気をつけてデザインする」ということです。リンクではない文字に下線を引かない、リンクではない画像は押せそうにデザインしない、など様々な気をつけたい点があります。

ユーザビリティに関する読み物としては、ユーザビリティ研究の第一人者ヤコブ・ニールセン博士のコラム「Alertbox」(和訳サイト)なども参考にすると良いでしょう。

■アクセシビリティとユーザビリティの2点を常に気にして作成したい
例えば、当ガイドサイトで公開した記事「押しやすいチェックボックスやラジオボタンを作るCSS」では、選択肢を分かりやすくグループ分けするデザインが「ユーザビリティ」で、選択肢を押しやすくするデザインが「アクセシビリティ」です。

人々は、分かりにくいサイトや使いづらいサイトを再度訪れようとは思いません。できるだけ分かりやすさ・使いやすさに気を遣って作ることが、アクセス数の向上に繋がるでしょう。

モバイル対応

スマホやタブレットのような小型端末でも、PC用のホームページを閲覧することはできます。しかし、小さな画面でも見やすいように「モバイル版デザイン」を用意しておくなどの対策があれば、より使いやすいホームページになるでしょう。

■モバイル対応方法を知るには
当ガイドサイト内でも記事「スマホ対応サイトの作り方と6つの注意点」などでモバイル対応の概要を解説しています。なお、自サイトがモバイル端末での表示に対応できているかどうかは、Googleが提供しているモバイルフレンドリーテストなどで調べられます。

レスポンシブ・ウェブデザイン

ホームページの閲覧に使われる端末は、単純に「PC」と「モバイル」の2種類だけがあるわけではありません。PCでも画面の広さは様々ですし、モバイル端末でも製品によってサイズが大きく異なります。したがって、ホームページをPC用とモバイル用の2つに分けるだけでは「様々な環境への対応」としては不十分な可能性があります。

レスポンシブ・ウェブデザイン（Responsive Web Design）は、CSSのメディアクエリという仕組みを使って、単一のHTMLに対してCSSだけで様々な環境に対応できるようデザインを切り替えるテクニックです。ホームページそのものを複数個に分割する必要がないため、管理や更新作業が煩雑にならないメリットがあります。

■レスポンシブ・ウェブデザインの作り方を知るには
当ガイドサイトで公開しているレスポンシブ・ウェブデザイン関連の記事をまとめた「ブラウザの幅に合わせて表示を自動変更するレスポンシブ技12選」をご参照下さい。

SEO（検索エンジン最適化）

SEOは、検索エンジン最適化（Search Engine Optimization）の略で、検索サイトからのアクセス数を向上させるテクニックのことです。

多くのアクセス者は検索サイトから訪れるでしょう。自サイトの情報を検索エンジンに拾われやすくし、望みの検索語で検索された際に検索結果ページの上位に掲載されるようにしておくことで、たくさんの人々に訪れてもらえるようになります。

■SEOの方法を知るには
All Abuot内には専門の「All About SEO・SEMを学ぶ」や、「All About 企業のIT活用」内の検索エンジン／SEOカテゴリなどの情報があります。また、当ガイドサイト内でもSEO・アクセス数アップカテゴリで多少の記事を公開しています。

RSSフィード

RSSとは、自サイト内の新着情報を効率よく把握してもらうための仕組みです。RSS1.0、RSS2.0、Atomなどの規格がありますが、すべてXMLで記述されているテキストファイルです。単に「フィード（Feed）」と呼ばれることもあります。

このRSSには、ホームページの更新情報が含まれています。RSSリーダーやRSSに対応したブラウザに登録できるようにしておけば、更新したページの情報を手軽に伝えられます。

※RSSは、「Rich Site Summary」や「Really Simple Syndication」などの略です。同じRSSでもバージョンによって名称や書き方が異なりますが、役割は同じです。
※当ガイドサイトの新着情報を配信しているRSSフィードは、http://rss.allabout.co.jp/aa/latest/gt/1053/にあります。RSSリーダーなどに登録すると、新着記事をチェックできます。

■RSSフィードを作成するには
WordPressやMovable TypeのようなCMSでホームページを作成していれば、何もしなくてもRSSフィードが生成されている場合もあります。CMSツールを使っていなくても、ローカルにあるHTMLファイルを読み取ってRSSフィードを作成できるフリーソフトもあります。記事「RSS作成ソフトを使ってRSSを自動生成しよう」をご参照下さい。

独自ドメイン

ドメインは、ホームページなどの場所を指し示すインターネット内の住所のようなものです。「allabout.co.jp」のような独自ドメインを取得しておけば、分かりやすいURLでホームページを紹介・運営できます。

ドメイン名は「allabout.co.jp」のようにドット記号で区切って複数の文字列が並ぶ形式になっています。このうち、右端の「.jp」や「.com」などの部分のことをTLD（トップレベルドメイン）と呼びます。

ドメイン名の取得は早い者勝ちが原則なので、「.com」や「.jp」などの有名TLDでは望みの名称が取得できないかも知れません。しかし、TLDは新しい種類がどんどん増えていますから、従来のドメインでは望みの名称が取得できなかった場合でもチャンスはあります。TLDの新設に関する情報もチェックしておくと良いでしょう。

ドメインの取得方法などについては、記事「ホームページの公開方法：ドメインとサーバの用意手順」でも解説していますので、ぜひご参照下さい。

ウェブサーバ（ホームページスペース）

ウェブサイトを一般に公開するためには、何らかの公開スペース（＝インターネットに接続されたウェブサーバ）が必要です。

この公開スペースの確保方法としては、無料スペース提供サービスを使う、プロバイダ提供サービスを使う、有料レンタルサーバを使う、ダイナミックDNSサービスを使って自宅サーバで公開する、などの選択肢があります。

お使いの環境や、予算、実現したいことなどに合わせて適した方法を選ぶためには、それぞれのメリット・デメリットを知っておく必要があるでしょう。詳しくは記事「ホームページの公開方法：ドメインとサーバの用意手順」で解説しています。

SSL証明書

通信を暗号化して安全に通信できるようにするには、SSL（TLS）という技術を使います。そのSSLを使って通信するために必要なのがSSL証明書です。レンタルサーバなら、コントロールパネルから簡単にSSL証明書を取得できる機能が用意されている場合もあります。詳しくは、記事「SSL証明書を取得してHTTPS化する設定方法」での解説をご覧下さい。

アクセス解析

ホームページへのアクセス数を向上させるためには、どの部分にアクセスが多くあり、どの部分にはアクセスが少ないのか、どんな検索語を使って検索サイトからアクセスされているのか……などの情報を把握しておくことも重要です。

どんな人々がどのページをどれくらい閲覧してくれているのかを知る方法が「アクセス解析」です。「Google Analytics」などの無料のアクセス解析ツール（サービス）も多々あります。これらの解析ツールの使い方も知っておくと、ホームページの改善に役立ちます。

セキュリティ

昨今、ウェブサイトからの情報漏洩や、ホームページの不正改ざんなどのニュースをよく目にします。ウェブサイト自体のセキュリティにも気を遣う必要があるでしょう。特にCGIやPHPのような動的にページを生成する手段を利用する際などには、脆弱性を放置しないように気をつける必要があります。

IPA(情報処理推進機構)が公開しているPDF「安全なウェブサイトの作り方」なども参考にすると良いでしょう。

ホームページ作成に役立つ4種類26の知識

今回は、ホームページの作成や運営で役に立つ4種類（計26個）の知識について、概要をざっとご紹介いたしました。興味を持ったものから1つずつ試してみて下さい。

当サイト内では、本記事でご紹介した技術・知識のうち、HTMLやCSS・JavaScriptなどの記述方法を中心に、ホームページを楽しく作るための具体的なテクニックを紹介しています。新着記事一覧ページや人気順一覧ページなどもご参照の上、ぜひいろいろな方法を試してみて下さい。