気の向くままに辿るIT/ICT/IoT
webzoit.net
ホームページ作成

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

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

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

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

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

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

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

  • 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の検証によるすり合わせをする方が効率的かもしれません。

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

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

※外部ファイルについては、ホームページ更新の利便性もさることながら、今後、覚えるかもしれない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をウェブシステム開発として取り上げています。

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