POINT
■Webページは、HTMLで適切な文書構造を作り、次にCSSで見た目を整えるという作業の流れが一般的です。
■ガイドラインに基づく作業、テンプレートやCSSの利用など、Webサイトの品質や運用性を高める方法を理解し、柔軟に対応することが求められます。
■HTML5、CSS3、スマートフォン対応など、新しい技術やデバイスに関する知識が必要です。必要性、予算、運用体制などの観点から、技術の組み合わせや対応デバイスを決定します。

【HTMLとCSS】
HTMLとCSSは、Webサイト制作における基本言語です。HTMLは文書構造を、CSSは視覚表現を定義する言語です。HTMLでは、見出し（ｈ1～ｈ6要素）、パラグラフ（ｐ要素）、リスト（ul・ol・dl要素）、テーブル（table要素）、フォーム（form要素）などでページ内容を定義することで、人間はもちろん、Webブラウザや検索クローラーなどのマシーンにも理解し易い構造にできます。このような作業を一般的に「マークアップ（マーク付け）」と呼びます。一方、CSSでは、それぞれの要素のサイズ、文字色や背景、余白の大きさなどのスタイルを設定します。まずHTMLで適切な文書構造を作り、次にCSSで見た目を整えるのが作業の基本的な流れです。このようなHTMLとCSSの作業担当者を「コーダー」と呼ぶことが一般的です。

———-
●見出し（ｈ1～ｈ6要素）
<h1>～<h6>のHとはHeadingの略で、見出しの意味です。 <h1> ～</h1>が最上位の見出し（大見出し）で、以下数字が小さくなるにつれて下位の見出し（小見出し）となります。
●パラグラフ（ｐ要素）
<P>タグはParagraphの略で、<P>～</P>で囲まれた部分がひとつの段落です。
●リスト（ul・ol・dl要素）
リストの各項目は<li>タグを用いて記述します。
<ul>タグはUnordered Listの略で、順序のないリストを表示する際に使用します。
<ol>タグはOrdered Listの略で、順序のあるリストを表示する際に使用します。
<dl>はDefinition Listの略で、<dt>～</dt>に定義する用語を記述し、 <dd>～</dd>にその用語の説明を記述します。定義語と定義説明のセットは<dl>～</dl>の中に複数並べることができます。
●テーブル（table要素）
<table>はテーブル（表）を作成するタグです。基本的構造は <table>～</table>内に<tr>～</tr>で表の横一行を定義し、さらにその中に<th>～</th>や <td>～</td>でセルを定義します。
●フォーム（form要素）
<form>は入力・送信フォームを作成する際に使用します。 <form>～</form>の間に部品を配置します。
———-

HTMLやCSSコードの動的な追加や削除、コンテンツの表示・非表示の切り替え、Webブラウザに特殊な処理を指示するためには、JavaScriptと呼ばれる言語を利用するのが一般的です。HTML、CSS、JavaScriptの順に対応環境（デバイスやブラウザ、設定など）が限定される点を理解し、HTMLだけでもコンテンツが理解できる状態にすることが大切です。
なお、HTMLには複数のバージョンがあり、以前はHTML4.01に基づいてWebページを作成することが多かったようです。数年前からHTML4.01をXMLで再構築したXHTML 1.0が増え、最近では「HTML5」という新しいバージョンを利用する機会が増えています。CSSは長らくCSS2.1というバージョンが主流でしたが、新しいバージョンである「CSS3」のうちWebブラウザのサポートが進んでいる機能を積極的に利用するようになっています。

※CSSフレームワーク
印刷物のデザインと変わらない、カンプに頼った確認方法では、実際のデバイスで見た時に「やっぱりイメージが違った」と言われ、修正をよぎなっくされる場合があります。BootstrapやFoundationといった代表的なCSSフレームワークは、Webサイトを形にして行く過程で使える部品を先に準備してくれてるサイトデザインのワイヤー兼ラフ制作ASPのようなものです。

HTML4.01とXHTML1.0の比較

【制作環境とWebオーサリングツール】
Webサイトの制作では多種多様なツールを利用します。もっとも代表的なのはWebオーサリングツールです。特に「 Adobe Dreamweaver 」というアプリケーションは、Webページ制作だけでなく、デザインビューやコードビューなどの編集画面選択、プレビュー機能、FTP機能、素材管理、テンプレート制作、プログラミング言語対応など、多機能・高性能なツールで、Adobeのパッケージとして販売もされているので制作現場で広く使われています。最近では、価格の安さも含めてCoda 2やSublime Text 2といったソフトが流行りのようです。

———-
●代表的なWebオーサリングツール
・Adobe Dreamweaver（Windows/mac）
・Coda 2（mac）プレビューでHTMLやJavaScriptのデバッグがリアルタイムで行えます
・Sublime Text 2（ Windows、Mac、Linux ）パッケージを入れてカスタマイズできる
・NetBeans IDE 無償のオープンソースソフトウェアで、java、php、c/c++で開発できる
・ホームページ・ビルダー（Windows）
———-

HTMLやCSSは本来、プレーンテキスト編集のためのテキストエディタのみで制作できます。しかし、規模の大きいWebサイトではさまざまなスタッフが関わることになり、それぞれのスキルが異なります。また、特に更新作業に関わるスタッフがソースコードを直接編集するのは難しいケースもあります。Webオーサリングツールの利用には、さまざまな機能を使って作業を効率化することに加えて、制作環境を統一し、スタッフのスキルレベルに合わせた作業が可能になります。つまり、スキルレベルの補完をツールがしてくれる訳です。
一方でツールの限界も知る必要があります。まず、マークアップが完全に自動化されている訳ではない点です。マークアップの目的はページ内のコンテンツそれぞれに適切な役割を与えることですが、「ここはh1要素」「ここは p（パラグラフ：段落）要素」「ここは ul（ Unordered List ）要素」といった作業は、人間がツール内に用意されたボタンを押す、あるいは入力することで実現されます。
次にソースコードの適切さの問題が有ります。ツールによってはソースコードが正しく書き出されないもの（あるいは独自タグを書き出すもの）があるため、最終的にはバリデーション（ソースコードの検証作業）によってエラーをチェックし、間違いを正す必要があります。品質保証や安定運用の観点からも、ソースコードの検証作業は欠かせない作業です。実感として、制作ソフトでバリデーションを行ったところで、そのソフトウェア内では全ての検証が行えるはずもないので、他のバリデーションツール（W3C Markup Validation Service）やブラウザでのチェックは欠かせないものです。
全てをツール任せにするのではなく、これらの限界を知ったうえで有効利用することが、より高い品質のWebページを作成するのに不可欠です。

———-
●バリデータの例
The W3C Markup Validation Service（HTML/HTML5/XHTMLの妥当性チェック）
https://validator.w3.org/

W3C CSS 検証サービス（CSSの妥当性チェック）
httpsjigsaw.w3.org/css-validator/validator.html.ja
———-

【ガイドラインの用意】
HTMLとCSSによるWebページの作成はガイドラインに基づいて進めることが多いものです。ガイドラインは「レギュレーション」や「ルールセット」とも呼ばれ、作業効率の向上だけでなく、誰が作っても一定の品質を確保する目的があります。
ガイドラインには、まずファイル設計、マークアップやスタイル設計などHTMLやCSSに直接関係するルールを含めます。さらにディレクトリやファイルの命名規則、CI規定やカラースキーム、画像や動画などのマルチメディアファイルの組み込み方、プログラムやAPIとの連携など、制作や運用上の重要事項を含めるのが一般的です。
HTMLやCSSの標準仕様や、JIS-X8341-3やWCAG（Web Content Accessibility Guidelines）などのアクセシビリティ規格への準拠性を達成基準として設定する場合も有ります。バリデーターなどのツールを利用した機械的なチェックがある程度まで可能ですが、人間的な判断が求められる場合も多々あります。例えば、画像の代替テキストの有無はツールでチェックできますが、その内容の適否は人間が判断する必要があります。
Webサイトの公開時に仕様や規格に準拠していることと、運用段階でも準拠し続けることでは、おおむね後者の方が困難です。運用体制やガイドラインの整備はもとより、チェックポイントの明確化、チェックリストによる管理など、さまざまな工夫が求められます。

【テンプレートの利用】
テンプレートはWebページの「ひな形」で、Webオーサリングツールで作成する共用フォーマットを指します。ヘッダーやフッター、グローバルナビゲーションなど、全てのページに共通するフィールドをテンプレート化しておき、ページごとに異なるフィールドは編集可能領域として定義しておくのが一般的です。また、テンプレート化はPHP、SSI、JavaScriptなどでも可能です。テンプレートを用意しておくことで、制作時の作業効率を向上させることが出来ます。また、メニューなどの主要個所をテンプレートとしてモジュール化しておけば、Webサイト公開後も変更が一括で作業できたりするなどのメリットがある反面、経費はモジュールの初期開発費分が割高になったりします。
例えばDreamweaverのテンプレート機能では、提携処理部分を「編集不可領域」、ページごとに変更する部分を「編集可能領域」として定義しておくことができます。ただし、静的なサイトの場合、制作段階ではテンプレートが利いていますが、サーバーに上げる段階でページごとの独立したデータになっているため、その後の変更は各ページ行うか、全ページローカルから上げ直すことになります。
また、小規模なテンプレートとして「ライブラリ」や、定型コード挿入のための「スニペット※」を利用し、メンテナンス性を高めることもできます。

※この場合の「スニペット」は一般的な用法ではなく、DreamweaverがHTMLやCSSのコードの断片をスニペットと呼んで管理する仕組みを持っているということ。一般的にIT用語としては、短いプログラミングコードを呼び出す機能、または呼び出されるコード。
Googleは「ウェブページの説明もしくは引用」と定義しています。

【CMSの利用】
現在のWebサイト制作ではCMS（Content Management System）の利用も一般的になっています。CMSは、文字通りWebサイトに関するコンテンツを統一的に管理するシステムで、通常はサーバーにインストールして利用します。特に更新作業に多数のスタッフが関わっているWebサイトでは、CMSの利用が便利です。
有名なCMSとしてはMovable TypeやWordPressなどがあります。管理機能やWiki機能に優れたCMS、ECサイト構築に対応したCMS、大規模サイト構築のためのエンタープライズCMSなどもあり、それぞれに特徴があります。制作するWebサイトや運用体制、カスタマイズ性を考慮して、適切なCMSを選ぶことが大切です。

これは私見となりますがオープンソースとして一般的に利用されているWordPressには多くの問題点が潜みます。もちろん、運用則を規定したり、カスタマイズするなど回避の方法はありますが参考までに列記します。

●基本的にプリント対応していないので、公開するかどうかの判断を仰ぐ承認フローが必要
●複数のスタッフが関わる場合、誰がコンテンツ内容を変更したか不明瞭になる
●オープンソースとして公開されているため、多くの悪意有る者もプログラムを熟知できる（攻撃対象となりやすく、セキュリティー上の問題が発生する）

———-
※オープンソース・ライセンスの要件
・自由な再頒布ができること
・ソースコードを入手できること
・派生物が存在でき、派生物に同じライセンスを適用できること
・差分情報の配布を認める場合には、同一性の保持を要求してもかまわない
・個人やグループを差別しないこと
・適用領域に基づいた差別をしないこと
・再配布において追加ライセンスを必要としないこと
・特定製品に依存しないこと
・同じ媒体で配布される他のソフトウェアを制限しないこと
・技術的な中立を保っていること
———-

（参考）WordPressの画面

【Webブラウザやデバイスごとの確認と調整】
Webサイトはさまざまな環境で閲覧され、利用されることを前提としています。WebブラウザにはIE、Firefox、Safari、Google Chrome、Operaなどさまざまな種類があり、一部のブラウザでは意図しない表示や崩れが発生することがよくあります。制作者はあらかじめ要件定義で決められたターゲットブラウザで、きちんと表示され、動作することをチェックする必要があります。もし不具合がある場合は、HTML、CSS、JavaScriptなどを調整する、という作業手順が一般的です。
また、携帯電話やスマートフォンなど、通常のパソコン以外での利用を想定する場合は当然、これらのデバイスでの表現をあらかじめ計画しておく必要があります。まったく異なるページを制作する、CMSやプログラムによってコンテンツの絞り込みや変換を行う、CSSで見た目だけを変えるなど、様々な選択肢があります。デバイスごとに画面解像度や機能に違いがあるため、対応機種を計画にするのはもちろん、必要性、予算、運用体制などの観点から判断します。

【HTML5とCSS3】
HTML5は、従来のHTMLやXHTMLをWebアプリケーション開発のために発展させた言語です。文書構造を明確化するためのセクション要素（section・nav・article・aside・header・footer・hgroupなど）、マルチメディアの埋め込み（canvas・video・audioなど）、フォームやインタラクティブな操作に関する要素や属性が拡充されています。
また、HTML5ではWebアプリケーション開発に不可欠な「API」が充実しています。Webブラウザでデータベースやローカルストレージを扱うためのWeb Storage、Web SQL Database、Indexed Database、ブラウザの裏側で計算処理を行うためのWeb Workers、JavaScriptからサーバーと双方向通信を行うWeb Sockets、アプリケーションファイルのキャッシュを操作するApplication Cache、位置情報を取得するためのGeolocationなどがあります。また、SVGによるベクターグラフィックス表現、canvasとWebGLを組み合わせた3D表現なども今後の普及が予想されます。
Flashと比べた場合、Webカム（Webカメラ）やマイクへのアクセスができない、テキストのアンチエイリアス処理ができないなど、必ずしもHTML5でFlashのすべての機能を代替できるわけではありません。ただし、iPhoneやiPadなどFlashに対応していない端末では、代替表現をHTML5で行うことになります。
また、CSS3によって視覚表現の可能性が飛躍的に向上します。40以上のモジュールの策定が進められていて、すでにセレクタ、メディアクエリ、カラー、背景とボーダー、Webフォントなど、いくつかのモジュールを多くのWebブラウザがサポートしています。「Progressive Enhancement」という考えのもと、多くのWebサイトがCSS3を積極的に導入する時代になっています。iOS（iPhone／iPad）、AndroidなどのスマートフォンOSには、WebKitブラウザ（SafariやGoogle Chrome）が搭載されていて、通常のデスクトップ向けwebブラウザと同等の機能を備えているのはもちろん、HTML5やCSS3をかなりサポートしています。ですから、スマートフォン向けWebサイトはHTML5とCSS3で制作するのが一般的です。

———-
●<section>タグ
<section>タグは一般的なセクションを定義するタグであるため、要素内容を記事として配信する意味合いが強い場合には、<article>タグを使用することが推奨されています。また、補足情報の場合には<aside>、ナビゲーションの場合には<nav>を使用します。 他にも、ヘッダに該当する場合には<header>タグ、フッタの場合には<footer>タグを使用します。
———-