気の向くままに辿るIT/ICT
webzoit.netウェブサイトホームページ
ホームページ作成

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

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

上級者向けホームページ作成・ウェブサイトの作り方

ホームページ作成【上級者編】

 上級者編と銘打ったものの、その目的がホームページを作れるようになることなのか、活用できるようになることなのかによって異なりますよね。

 活用となると目的に応じて三者三様ですし、それによっては、ここでウェブ開発として括っている内容が絡むこともあるでしょうし、ということでここでは、前者の「ホームページを作れるようになること」を指すものとするのが妥当でしょう。

 ホームページを作る為には、その目的で作られた仕様であるHTML、CSSを覚えることが大前提であることからW3Cの各文書を読み解き、必要に応じてIETFのRFC等を参照して「自在に作ることができる」ことは上級者としての前提と言えるでしょう。

 JavaScriptについても同様で後に標準化されたECMAScriptの仕様書を読んで・・・と言いたいところですが、ECMAScriptについては、NetScapeのJavaScript1.1仕様やMozillaによる仕様書を読まないと実質理解に苦しむでしょうが、何れにしても元の仕様を読解し、関連情報を収集して実装することができるのが上級者と言えるでしょう。

 ただし、仕様書に書かれた各種仕様を使って表現し得るバリエーションは豊富なのでそこは感性次第と言うより他ないでしょう。

 HTML5/CSS3は、現時点では未だ勧告となっていませんし、CSS3は、基本部分が勧告になったとしても拡張モジュールというスタイルを取り、任意の拡張部分の仕様が勧告となれば、その都度、仕様が膨らむことになるので、こうしたことを踏まえると更新やバージョンアップ含め元の仕様を把握、または、難なく調べて使える前提でクロスブラウザ対策を考慮、適宜対応を検討、実施することができるのが、上級者と言えそうです。

マークアップ+スタイルシート+スクリプト

 CHTML/DHTML/XHTML/XHTML Basicについては、CHTMLが携帯電話用の簡易マークアップ言語であるのに対し、XHTML Basicは携帯電話のみならず、PDAやカーナビ、テレビを含めた情報家電も想定したマークアップ言語、DHTMLはHTML/CSS/JavaScriptを組み合わせた動的な(Dynamic・ダイナミック)HTMLという概念であり、後にJavaScript+XML1.0から生まれたAjax含むRIA/Rich Internet Applicationの実用化と共に動的であることが当たり前となるに連れ、DHTMLという呼称は、それ自体浸透しているというには微妙なWebの第2世代を意味するWeb2.0というフレーズに置き換わり、HTML自体は現在のHTML 4.0/4.01 の後継バージョンとしてHTML5が策定され、これに併せてCSS1/CSS2に加えCSS3が策定されています。

 HTML4+XML1.0によって生まれたXHTML 1.0/1.1の存在は、簡潔に言うとスクリプトなどでウェブページを入出力データとして扱う際に比較的扱いやすいものとする為の仕様、つまり、次世代のHTMLという位置づけではなく、(XHTML 2.0策定中止もあって)完全移行してしまうというわけではないのでホームページ作成における上級者としてはHTML/CSS/JavaScriptとホームページデザインに限定し、XHTML/XHTML BasicはXML/XSL/XSLTなどと共にホームページ・ウェブ開発以降でご紹介しています。

ブラウザごとの動作確認

 できることなら主要なブラウザで実際に表示を確認しておきたいものですが、これが、考えれば考えるほど実に悩ましいところ。

 モバイル/スマホは別としてPC用ブラウザに限定してもInternet Explorer、Firefox、Chrome、Opera、Safai...といった種類があり、IE以外の多くは、早い時期からMacintoshにも対応していますし、昨今ではUNIX/BSD/Linuxにも対応しています。

 ちなみにブラウザ間の違いを考える場合には、ブラウザというより、解析描画するレンダリングエンジンの違い、JavaScriptについては、ECMAScript仕様以外のブラウザ独自拡張機能の有無、処理速度については、JavaScriptエンジンの違いに着目します。

 多くの場合、ネット上などの情報やアクセス解析による傾向からアクセスに占める割合が高いブラウザにおいて対策をしているものと思われます。

 例えば、OSは圧倒的にWindowsが多く、ブラウザは、IE/Firefox/Chromeが占める割合が圧倒的だから、Windows搭載マシンでこれらブラウザの挙動を確認・調整し、加えてIE5以前にもなかったような癖の強い(バグの多い)IE6と癖の抜けきらないIE7の対策を講じて調整といった具合ですね。

 これに加えてMacintoshで、更にはUNIX/BSD/Linuxでも確認するというケースやメインOSが逆である場合を含めてもそれほど多くはないでしょう。

 しかし、あっさり無視できる数でもないなと思いを持ちつつ、他方、ふとある1年間のOSとブラウザバージョンの組み合わせを見てみるとFirefoxとChromeはIEが10種類前後なのに比し、30~40倍、ただ、何れもマイナーバージョンアップが相当数あるのでWindows Updateで知らず知らずに同じ程度更新が行われている可能性を考慮し、これら3つの差がないものとしても、これがバグ修正や機能性アップがスピーディに行われている歓迎すべき対応であるにしても、これらの内どのくらいがレンダリングに影響するのかしないのかは図り知れず、実のところ考慮しきれていないのでは。。。と思ってみたり。

 何れにしてもこうした背景もあってCSSについては、以前からCSSハックといったバグなどを逆に利用したトリッキーなクロスブラウザ対策などもありますが、対策を講じるには、実際の挙動を確認しないことには始まりません。

 というわけでIE6/IE7という悩ましいバージョンを抱える開発元のMicrosoft社もその辺りの自覚はあるようでIE8から標準で付属の『開発者ツール』(Windowsの場合、ファンクションキーである[F12]キーで起動)では『ブラウザモード』、『ドキュメントモード』をサポートしています。

IE 開発者ツール 『ドキュメントモード』
モード意味
QuirksIE5相当
Internet Explorer 7 標準(7)IE7
Internet Explorer 8 標準(8)IE8
Internet Explorer 9 (ページの既定)(9)IE9

 『ドキュメントモード』では、(問題多発のIE6は除き)各種ブラウザバージョンの表示モードを切り替えることで1つめのタブにあるページの挙動を確認することができるようになっているので確認してみるとよいでしょう。

 尚、HTTPヘッダやmetaタグで『ドキュメントモード』を固定することもできるようになっているので、これらが指定されているページでは、他のモードの確認はできません。

 IE7は、IE5相当でも示さないようなやんちゃな挙動をすることがあるので、安定版といえるのはIE8、更に一部とは言えIE9ならCSS3をサポートしているので不特定多数を対象としたホームページ作成者、ウェブ開発者としては、シェアは徐々に落ちているとはいえIEユーザーには是非是非IE8やIE9以降を使ってほしいところでしょうが、現実はそうはいかないようです。

当サイトの閲覧ブラウザ比率

 参考までに当サイトへのアクセスは、平日9時~18時、主要都市ひいてはビジネス中心地区からのアクセスが圧倒的多数を占めることから、たぶん、ビジネス街在住の専業主婦や乳幼児、ペットなどが迷子になったというわけではなく、ビジネスパーソン中心のアクセスと考えてよいでしょう。

 そうした背景の当サイトにおいて2010年4月~2011年3月には、アクセス全体に占めるIEのシェアは、かろうじて50%超えていましたが、2011年04月~2012年03月時点でシェア50%を切り、それでもIEの方がやや多めではあったもののFirefoxとChromeの合算が拮抗、直近を見るとFirefox、Chrome共に伸びて合算で50%を超え、IEがシェア減少に転じ、FirefoxとChromeも逆転、わずかながらFirefoxよりChromeが多くなっています。

 IEに限ってみれば、2011年04月~2012年03月には、IE8が圧倒的多数、続いてIE6、IE7、IE9となっていますが、2011年4月26日にリリースされたIE9が1年で結構な伸びを示し、直近では、圧倒的多数は相変わらずIE8も、続いてIE9、そしてそれぞれ前年比20%弱/10%弱の減少に留まり、それ相応の数にのぼるIE6、IE7と続き、極々わずかではあるもののWindowsで且つIE5/IE5.5というケースもあります。

verリリース
Internet Explorer 62001年09月20日
Internet Explorer 72006年11月02日
Internet Explorer 82009年03月20日
Internet Explorer 92011年04月26日
Internet Explorer 10...

 このことからもいろいろなことが推測できますが、何れにしても、ほぼ全てIE8以降に。。。というのは、あってもまだまだ遠い先の話になりそうですし、ブラウザOSがOSの圧倒的なシェアを占めるようなことにでもなれば、そもそも既存のIE云々の話ではなくなりますけどね。

HTML/CSSだけでも多彩

 例えば、スライドメニューは、タブレット端末やスマホ含め、有用性も高く、一般的だと思いますが、HTMLとCSSだけで実装することも可能ですし、JavaScriptを使用して実現することももちろん可能です。

画像も背景も不透明度設定可能

 このページにもある「IT用語解説」「MENU」とある JPEG (jpg) 画像は、実は、スライドメニューとして利用できるようになっており、IE6含む以前の比較的古いブラウザ以外は、多くの場合、スライドメニューとして使えると思います。

 これは、CSS(外部スタイルシート)とHTML、もっと言えば、スライド機能には、CSSの overflow プロパティのみ、リンクは単にHTMLのaタグというシンプルな構成になっています。

 尚、CSS3をサポートするIE9含む以降のIEとFirefoxやChromeなど主要なブラウザでは、 opacity プロパティの効果により、更にマウスオーバー時、ロールオーバー時に「IT用語解説」「MENU」や「MENU」からスライドする「Reference」「Step Up」「どうやるの?」「資格試験」といったJPEG画像のサブメニューの色が濃くなり、他方、各サブメニューをポイントした時に出る各リンクメニューの背景は、少し透けて見えるかと思います。

 ここでは、スライドは、1層と2層ですが、設定如何で更にネストすることも可能です。

 これらにはJavaScriptなどのスクリプトやプログラミング言語の類いを一切使っていませんから、仮にJavaScriptがOFFでも利用可能です。

 JavaScriptの併用が前提なら似たようなことをするのに display プロパティや visibility プロパティを利用することも可能かと思いますし、例えば、前者ならCSS1で最初に定義されたプロパティであることから(JavaScriptがoffの場合は、noscriptで対応するとして)IE6以前の古いブラウザでも利用可能なスライドメニューを作るといった有用なケースもあるでしょう。

既存のHTMLタグの機能をCSSでも設定可能

 少し地味なところでは、これらスライドメニューの各リンクは、ul/olなどの箇条書き用のHTMLタグではなく、divタグに設定値を list-item としたCSSの display プロパティを設定することによって div をリストとして list-style 関連プロパティを使ってフォルダ風マークを入れていますが、構成によっては、既存のページにpタグなど任意のタグから成る羅列をタグを書き換えることなく、外部スタイルシートだけでリストにすることも可能ということになります。

CSSだけでも驚きの機能

 更には、汎用性はともかくとしても擬似要素、擬似クラスセレクタなどを駆使すれば、同じサイトでもHTMLファイルを一切変更することなく、CSSだけで全く異なるデザインに変更することすらできるということでもあります。

旧情報

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

 HTML/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]という設定を利用すると任意のブロックを固定したり、相対値とすることでスクロールできるようにしたり、スクロールでかぶった部分は透過にする事などもできますが、IE6(IE2.0以前、Netscape2.0以前など)では期待通りにはなりません。

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

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

 因みにIEやFirefoxなどの最新バージョンでご覧の方はこの注釈部分も赤の破線で囲まれていると思いますがこれも CSS2 の border 関連プロパティの設定によるものです。

 また、右にある縦スクロールバーも外側の div タグと内側の p タグという2つのブロックレベル要素に対して CSS2 の overflow プロパティを設定して表示させています(textareaタグではありません)。

 しかし、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をウェブシステム開発として取り上げています。

  • ウェブ開発【初級者編】
  • ウェブ造ホーム前へ次へ