ホームページ上級者はHTML/CSS/JavaScriptを駆使とホームページデザイン

ホームページ作成【上級者編】HTML/CSS/JavaScriptとホームページデザイン

　CHTML/DHTML/XHTML/XHTML Basicについては、CHTMLが携帯電話用の簡易マークアップ言語であるのに対し、XHTML Basicは携帯電話のみならず、PDAやカーナビ、テレビを含めた情報家電も想定したマークアップ言語、DHTMLはHTML/CSS/JavaScriptを組み合わせた動的な(Dynamic・ダイナミック)HTMLという概念であり、HTML自体は現在のHTML 4.0/4.01 の後継バージョンとしてHTML 5.0が策定され、これに併せてCSS3が策定されています。

　XHTMLの存在は、つまり、今後、単純にHTMLから完全移行してしまうというわけではないので、ホームページ作成における上級者としては(CHTML含む)HTML/CSS/JavaScript(DHTML)とホームページデザインに限定し、XHTML/XHTML BasicはXML/XSL/XSLTなどと共に以降のホームページ・ウェブ開発でご紹介しています。

　また、ここで紹介した以外にもCSSには多くの属性が、JavaScriptも他の動作やプロトタイプを使った拡張などできることは他にもたくさんありますが全てをご紹介する事は現実的ではありません。

ホームページ作成の上級者とは

　そこでwebzoitが「ホームページ作成」の上級者と考える目安は、以下の通りです。

• HTML・CSS・JavaScript共に環境(OSやブラウザ)によって利用できるものとできないものを区別してある程度配慮できる
• W3Cの実質標準バージョンとなっているCSS仕様を調べて取り入れられる
• 外部CSSを利用して極限までHTMLをシンプルにできる(装飾と構造の分離)
• ここで紹介した以外のJavaScriptテクニックを思い通りに作成して使う事ができる

※外部CSSでコンテナやボックスモデルの概念を取り入れるとHTMLのtableも利用する事なくシンプルなHTMLを作成する事ができます。

※外部CSSを利用してHTMLをシンプルにする事ができるようになると、結果的にCSSを先に考え作成してからHTMLに取り掛かる事ができるようになります。

※CSSとJavaScriptを組み合わせると多くのインタラクティブなコンテンツを作成する事ができます。

※但し、HTML/CSS/JavaScriptにはそれぞれ留意点があります。

　HTMLのDOCTYPEには非推奨タグと非推奨属性を含まない厳密な[strict.dtd]と非推奨タグ・非推奨属性を含みフレームを利用する場合の[frameset.dtd]、非推奨のタグや属性を含みフレームを含まない[loose.dtd]の3種類がありますが、クロスブラウザとは直接関係ないものの今後のHTMLバージョンアップ時の各ベンダーの対応が分かれる可能性がゼロではないと仮定すると厳密な[strict.dtd]でHTMLを作成しておくという考え方もあります。

※HTML4タグ要素全一覧・HTML4要素属性全一覧の非推奨列のマークD参照
※[strict.dtd]を検討する場合、もし予めHTMLを構造、CSSを装飾(HTMLには要素をCSSでHTML属性を設定する等)と明確に分離しておく事ができれば、特にCSSを外部ファイルにしておけば、たとえコンテンツが数百ページを超えてもたいていの場合CSSの編集だけで済みます。
　これによりHTMLでは、ほぼコンテンツの編集に専念できるようになります。


　CSSもJavaScriptもCSSとJavaScriptの組み合わせも、より多くの方々に閲覧して頂きたい場合にはCSSではブラウザのバージョンやベンダー間の実装の相違、訪問者の画面の解像度を考慮する必要がありますし、JavaScriptは、そればかりでなく、ユーザーがJavaScriptの有効／無効を設定できる点も留意が必要です(Ajaxがさほど広がらないのもこの点が大きな要因)。

　例えば、CSS2では[position:fixed]という設定を利用すると任意のブロックを固定でき、CSS2ヘッダ固定サンプルではページ上部のヘッダを固定してメニューと本文をスクロールする(スクロールでかぶった部分は透過にする)事などもできますが、IE6(IE2.0以前、Netscape2.0以前など)では期待通りにはなりません。

　当サイトは逐一CSS化を含めた移行をしており、当ページもセンタリングはtableタグではなくCSSで行っています。

　その点ではtableタグを1つも使っていないトップページの方がわかりやすいかもしれません。

　因みにIEやFireFoxなどの最新バージョンでご覧の方はこの注釈部分も赤の破線で囲まれていると思いますがこれもCSS 2の設定によるものです。

　しかし、CSSに関してはCSS 2.1でレイアウトを構成する場合、特にIE 6を含め旧タイプのブラウザが対応していないので不特定多数の方々に見て頂く場合には、CSS 2.1をフルスペックで使うかどうか悩ましいところです。

　サンプルページにもありますが一部対処法はあるものの使い勝手やクロスブラウザという意味では根本的な解決策とは言えそうもありません。

　基本的にブラウザで認識されない設定は無視されますが、無視された結果レイアウトが崩れないように考慮する必要はあります。

　そんな中、CSS 3が。。。他方、IE6のサポートが終了とのアナウンスもあったようですが、サポートが終わった＝即誰も使わなくなるというわけではないのでW3Cの新たな仕様をフルスペックで適用する場合には、

・未対応ブラウザへの代替策も講じる
・未対応のブラウザを考慮してW3C仕様の一部の利用を控える
・未対応ブラウザのことは考えない

のいずれかになるでしょう。

　また、mozillaのFireFox(ブラウザ)やOpera、Safari、Safariと同様のレンダリングエンジンを持つGoogle Chromeとブラウザも多岐にわたります。

　もちろんサイト運営者が検証用に利用する場合もあるでしょうし、IEを敬遠して乗り換える場合もあるでしょう。

　ここに挙げたFireFox、Safari、Opera、ChromeといったブラウザはIEに比しW3C仕様に忠実で且つバグも少なめであり、クロスブラウザを考える上でもIE以外のブラウザで検証後、IEの検証によるすり合わせをする方が効率的かもしれません。

　また、冒頭の上級者の目安の前提となると考える事項は以下の通りです。

ホームページ作成の上級者の前提

• W3Cの新しい技術に目を向け(どこかで見つけたら)調べて取り入れられる
• ホームページエディタがなくてもテキストエディタでも作成・編集ができる
• ブラウザでの表示をイメージしながらある程度HTML/XHTML/CSS/JavaScriptを記述できる
• CSS・JavaScriptは後で編集しやすいように外部ファイル化も考えて作る事ができる
• CHTMLやXHTML Basicなど何らかの手法で携帯電話用のサイトも作る事ができる
• スマートフォン(スマホ)を意識したサイトも作る事ができる
• 画像描画、一括置換、ftp、セキュリティソフト等のインストール・セットアップ・利用ができる
• sftpなどのセキュアなftpソフトを使っている
• ホームページに利用する音楽再生方法、既成の動画プレーヤーの設置方法の知識がある
• ショートカットキーを日常的に使っている(カット・コピー・ペースト・アンドゥ、ファンクションキー等)
• 検索エンジンで必要な情報を素早く探す事ができる
• SEO対策ができる
• 作った事はなくてもCGIに関する知識がある
• [http://]と[https://]の区別がつく、または適用できる(独自ドメイン)
• [.htaccess]を知っているまたは設定ができる(独自ドメイン)
• RSSを知っている・Googleなどのサイトマップを作成できる(.xmlファイル)

※外部ファイルについては、ホームページ更新の利便性もさることながら、今後、覚えるかもしれないXMLの概念であるDTD、スキーマ、名前空間の理解を早めますし、システム開発を意識されている場合にはデータベース、ライブラリやオブジェクト指向開発におけるクラス等を理解する一助にもなると思います。

※XMLでもホームページを作成する事ができますが、この機能はXMLのほんの一部の機能でしかない為、「ホームページ作成」では対象とせず、以降の「ホームページ・ウェブ開発」で取り上げます。

※携帯電話用サイト構築にあたっては、XMLのサブセットであるWMLなどもありますが、携帯電話に限らず携帯情報端末(PDA)、デジタル時計、産業機械や自動車の制御系、電車の券売機や自動改札、航空機のチェックイン・チェックアウト機器などの組み込みシステムにも関連する為「ホームページ作成」「CGI」「システム開発」のwebzoit構成としては「ホームページ作成」段階では対象としていません。

※スマートフォン(スマホ)による視聴環境はケータイよりもPCに近いのでPC用と同じHTML/CSSの組み合わせ(HTML5/CSS3がよりスマホと相性が良い)でサイトの共用さえできたりしますが、その場合でもスマホのハードウェア・機種間の相違、スマホのモニターは縦横何れも使える場合があること、表示幅に合わせてサイトが縮小されること、ボタンやリンク基準の移動などスマホの視認性や操作性を意識した作りにする必要はあるでしょう。

※セキュリティについてはインターネットやメールを利用する上でも重要ですし、CGIやシステム開発では意識せずにはいられませんから常に意識しましょう。

※ショートカットキーについては(Windowsの)右クリックよりも早く効率的なので何かと便利です。

※SEOについては良くも悪くも既に一般的となっており、サイト構成への影響も大きいので「予めSEOを考慮してホームページを作成する」方が得策です。
　ただしSEOについては、自身の運営サイトがある程度上位表示されるようになると理解できると思いますが、SEO目的で他サイトを訪問する事は様々な面で迷惑行為になります。
　ホームページ作成上級者レベルであれば、その過程で得られた知識と実践経験で、たとえ検索エンジンのアルゴリズムが変更になったとしても、(自身の希望するジャンルでなくても)いくつかのキーワードで検索するだけで傾向と対策が把握でき、検索エンジンで実際に上位表示しているサイトの構成やキャッシュやソースを表示するといった確認をする事なく、自身が希望するキーワードで上位表示できるという点も上級者の目安として挙げておきます。

　次はPerl、PHP、Ruby、Python、ASP、JSP等によるCGIなどを取り上げるウェブ開発の初級者編です。

　CGIについてはホームページ中級者あたりから利用する事もありますが、サーバサイドプログラミングなどシステム開発を意識して、ホームページ作成からシステム開発への入口にCGIをウェブシステム開発として取り上げています。

　以降は復習とおさらいにご利用ください。

【HTML】

【HTMLタグ要素と属性を再確認】

【HTML仕様妥当性確認】

【CSS】

【CSSの全体像をつかむ】

【CSS仕様妥当性確認】

【JavaScript】

【JavaScriptとは】

【JavaScript練習】

【DHTMLとCHTML】

【XHTMLとXHTML Basic】

【ホームページデザイン】

【ホームページデザインには】