銘打ったものの、その目的がホームページを作れるようになることなのか、活用できるようになることなのかによって異なりますよね。活用となると目的に応じて三者三様ですし、それによっては、ここでウェブ開発として括っている内容が絡むこともあるでしょうし、ということでここでは、前者の「ホームページを作れるようになること」を指すものとするのが妥当でしょう。ホームページを作る為には、その目的で作られた仕様であるHTML、CSSを覚えることが大前提であることからW3Cの各文書を読み解き、必要に応じてIETFのRFC等を参照して「自在に作ることができる」ことは上級者としての前提と言えるでしょう。外部スタイルシート設定JavaScriptについても同様で後に標準化されたECMAScriptの仕様書を読んで・・・と言いたいところですが、ECMAScriptについては、NetScapeのJavaScript1.1仕様やMozillaによる仕様書を読まないと実質理解に苦しむでしょうが、何れにしても元の仕様を読解し、関連情報を収集して実装することができるのが上級者と言えるでしょう。5.1訳JavaScript設定方法ただし、仕様書に書かれた各種仕様を使って表現し得るバリエーションは豊富なのでそこは感性次第と言うより他ないでしょう。HTML5/CSS3は、現時点では未だ勧告となっていませんし、CSS3は、基本部分が勧告になったとしても拡張モジュールというスタイルを取り、任意の拡張部分の仕様が勧告となれば、その都度、仕様が膨らむことになるので、こうしたことを踏まえると更新やバージョンアップ含め元の仕様を把握、または、難なく調べて使える前提でクロスブラウザ対策を考慮、適宜対応を検討、実施することができるのが、上級者と言えそうです。後継バージョンとしてHTML5が策定され、これに併せてCSS1/CSS2に加えCSS3が策定されています。BasicはXML/XSL/XSLTなどと共にホームページ・ウェブ開発以降でご紹介しています。ブラウザごとの動作確認できることなら主要なブラウザで実際に表示を確認しておきたいものですが、これが、考えれば考えるほど実に悩ましいところ。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が逆である場合を含めてもそれほど多くはないでしょう。Updateで知らず知らずに同じ程度更新が行われている可能性を考慮し、これら3つの差がないものとしても、これがバグ修正や機能性アップがスピーディに行われている歓迎すべき対応であるにしても、これらの内どのくらいがレンダリングに影響するのかしないのかは図り知れず、実のところ考慮しきれていないのでは。何れにしてもこうした背景もあってCSSについては、以前からCSSハックといったバグなどを逆に利用したトリッキーなクロスブラウザ対策などもありますが、対策を講じるには、実際の挙動を確認しないことには始まりません。いうわけでIE6/IE7という悩ましいバージョンを抱える開発元のMicrosoft社もその辺りの自覚はあるようでIE8から標準で付属の『開発者ツール』(Windowsの場合、ファンクションキーである[F12]キーで起動)では『ブラウザモード』、『ドキュメントモード』をサポートしています。(ページの既定)(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というケースもあります。10...このことからもいろいろなことが推測できますが、何れにしても、ほぼ全てIE8以降に。いうのは、あってもまだまだ遠い先の話になりそうですし、ブラウザOSがOSの圧倒的なシェアを占めるようなことにでもなれば、そもそも既存のIE云々の話ではなくなりますけどね。スライドメニューは、タブレット端末やスマホ含め、有用性も高く、一般的だと思いますが、HTMLとCSSだけで実装することも可能ですし、JavaScriptを使用して実現することももちろん可能です。画像は、実は、スライドメニューとして利用できるようになっており、IE6含む以前の比較的古いブラウザ以外は、多くの場合、スライドメニューとして使えると思います。プロパティのみ、リンクは単にHTMLのaタグというシンプルな構成になっています。Up」「どうやるの?」「資格試験」といったJPEG画像のサブメニューの色が濃くなり、他方、各サブメニューをポイントした時に出る各リンクメニューの背景は、少し透けて見えるかと思います。ここでは、スライドは、1層と2層ですが、設定如何で更にネストすることも可能です。これらにはJavaScriptなどのスクリプトやプログラミング言語の類いを一切使っていませんから、仮にJavaScriptがOFFでも利用可能です。プロパティを利用することも可能かと思いますし、例えば、前者ならCSS1で最初に定義されたプロパティであることから(JavaScriptがoffの場合は、noscriptで対応するとして)IE6以前の古いブラウザでも利用可能なスライドメニューを作るといった有用なケースもあるでしょう。関連プロパティを使ってフォルダ風マークを入れていますが、構成によっては、既存のページにpタグなど任意のタグから成る羅列をタグを書き換えることなく、外部スタイルシートだけでリストにすることも可能ということになります。汎用性はともかくとしても擬似要素、擬似クラス、セレクタなどを駆使すれば、同じサイトでも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を作成しておくという考え方もあります。※[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つも使っていないトップページの方がわかりやすいかもしれません。関連プロパティの設定によるものです。プロパティを設定して表示させています(textareaタグではありません)。2.1をフルスペックで使うかどうか悩ましいところです。サンプルページにもありますが一部対処法はあるものの使い勝手やクロスブラウザという意味では根本的な解決策とは言えそうもありません。基本的にブラウザで認識されない設定は無視されますが、無視された結果レイアウトが崩れないように考慮する必要はあります。・未対応ブラウザへの代替策も講じる・未対応のブラウザを考慮してW3C仕様の一部の利用を控える・未対応ブラウザのことは考えないのいずれかになるでしょう。Chromeとブラウザも多岐にわたります。サイト運営者が検証用に利用する場合もあるでしょうし、IEを敬遠して乗り換える場合もあるでしょう。ここに挙げたFirefox、Safari、Opera、ChromeといったブラウザはIEに比しW3C仕様に忠実で且つバグも少なめであり、クロスブラウザを考える上でもIE以外のブラウザで検証後、IEの検証によるすり合わせをする方が効率的かもしれません。冒頭の上級者の目安の前提となると考える事項は以下の通りです。動画プレーヤーの設置方法の知識があるショートカットキーを日常的に使っている(カット・コピー・ペースト・アンドゥ、ファンクションキー等)検索エンジンで必要な情報を素早く探す事ができる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をウェブシステム開発として取り上げています。無料オンラインゲーム。一覧メニューホームページ作成レベル別メニューウェブ開発レベル別メニュ。