ホームページの作り方・作成【中級者編】
中級者向けホームページ作成・作り方
中級者向けホームページ作成・ウェブサイトの作り方
【中級者相当のホームページ作り】
ホームページ作成「超初心者編」・「初心者編」では、HTMLとCSSの存在を知り、PCとネット環境、ホームページ公開スペースがあれば、HTMLタグやCSSプロパティを使って自分で作ったホームページをFTPソフトなどでインターネット上に公開できるところまでいったと思いますし、また、Windows OSの場合、ちょっとしたショートカットキーを覚えておくと編集に便利であることがご理解いただけたかと思います。
中級者では、まず、少しだけ新たなHTMLタグとCSSプロパティを見ていきましょう。
【HTML+CSS】
【ホームページの見栄えをグレードアップ１】
アンカータグ(リンク)の下線を消したい！『style文編』
クリックした時、立体的にボタンや文章が押されたように見せたい『疑似クラスhover編』
【HTML】
【ホームページの見栄えをグレードアップ２】
ページを分割したい！『frameタグ編』
画像の一部をクリックできるメニューにしたい！『イメージマップ編』
【W3C/World Wide Web Consortium】
ところでHTMLやCSSの約束事は、一体誰がどこで作っているのでしょう？
W3Cとは？
【Uniform Resource】
あ、あれってURLっていうのか。。。ふむふむ。。。
IRI/URI/URL/URN えっ！？URLって呼ぶんじゃないの！？
【HTML＋CSS】
さて、この辺りまで来たら、中級者としてはHTMLとCSSの全体像を眺め、文法や他にどんな要素や属性があり、どんなレイアウトが可能かなどを体系的に捉え、また一方でW3C仕様だからとはいえ、OSやブラウザ、解像度によっては対応できない事、ブラウザによっては独自拡張があり、他ブラウザでは利用できない事もある為、配慮する必要がある(クロスブラウザ対策)という点も知っておきましょう。
【HTML】
【HTMLタグ要素と属性を再確認】
HTMLバージョン
HTML TAGタグ
HTML4タグ要素全一覧
HTML4要素属性全一覧
HTML5
HTML5の主な機能
HTML5の技術基盤
HTML5誕生の時代背景
HTML5要素一覧
HTML5用途別要素一覧
HTML5追加要素一覧
HTML5/HTML4継承要素一覧
HTML5/HTML4除外要素一覧
HTML5要素属性全一覧
【HTML仕様妥当性確認】
W3C-HTML検証ツールでサイトをチェックする
【CSS】
【CSSの全体像をつかむ】
CSS
CSSのコンセプト
CSSバージョン
【CSS共通定義】文法と記述方法
CSS設定例
CSS利用可能文字
CSS＠ルールと規則集合ステートメント
CSSプロパティの定義と設定方法
CSSのコメント方法
CSS解析エラーにおけるルール
CSS数字と数値
CSS/URL+URN=URI
CSSのカウンター
CSSの色・カラー
CSS角度・時間・周波数
CSS文書表現
CSS1 / CSS 1.0
【CSS1】プロパティ・属性一覧
【CSS1】セレクタ一覧
【CSS1】擬似クラス一覧
【CSS1】擬似要素一覧
CSS2 / CSS 2.0
CSS2 / CSS 2.1
【CSS2】プロパティ・属性一覧
【CSS2】セレクタ一覧
【CSS2】擬似クラス一覧
【CSS2】擬似要素一覧
CSS3
【CSS3】プロパティ・属性一覧
【CSS3】セレクタ一覧
【CSS3】擬似クラス一覧
【CSS3】擬似要素一覧
CSSインライン設定
CSSファイル内部設定
CSS外部ファイル設定
【CSS仕様妥当性確認】
W3C-CSS検証ツールで外部ファイルやサイトをチェックする
【中級者におけるプラスアルファ】
実は、HTMLやCSSは、今なお進化を続けていて一定の進化ごとにバージョンが存在し、HTMLでは、その過程で場合によってタグの取捨選択があり、CSSは基本的に従来のプロパティに新たなプロパティが追加されていく仕様となっていてHTMLのバージョン4(HTML4)は、91要素、継承、再利用される要素78要素を含め、HTML5では、108要素、CSS3ではプロパティ数95+拡張モジュール(理論的には無限大)です。
この数字だけ見ると人によっては、ギョッ！？とするかもしれませんが、実は、「超初心者編」、「初心者編」と「中級者編」のサンプルや例だけでも結構な数のタグやプロパティを使えるようになっているはずです。
そもそも全て使わないといけないわけではありませんし、全てまたは、大部分を使っているサイトは、それほど一般的ではないと言えますから、あとは必要都度、調べて、試してみて、使ってみるとよいでしょう。
HTMLはネット上に公開、利用する為の文書構造の統一、CSSはデザイン、CSSに関しては、プロパティを覚える記憶力も必要と言えば必要ですが、それよりも何よりも、また、設計書があるならともかく、その結果は、個々のセンスに大きく左右されますから、自由に作るとなるとそれはもうまさにフリーのデザイナーの域であり、画一的に説明するというような話ではなくなってきますから感性を思う存分発揮してみてください。
さて、ところでHTMLやCSSでそれなりにページを作成・公開できるようになると試してみたくなるのが、動きのある動的なページ作りではないでしょうか？
【JavaScript】
そんな場合に外せないのは、やはり、JavaScriptでしょう。
JavaScriptは、HTMLやCSSのようにタグやプロパティから成るコードを羅列するのとは少し趣きが異なりますから取り組むのに少し抵抗を覚えることもあるかもしれませんが、実際にやってみるかどうかは別としても、せめてJavaScriptが、どういうものであるか程度は知っておかないとホームページ作成の中級者とは言えないでしょう。
【JavaScriptでは例えばどんなことができる？】
セレクトボックスでメニューを表示し選択したページへ飛びたい！
文章をスクロールさせたい！
画像をスクロールさせたい！
アニメーションを作りたい！
現在の時間を表示させたい！
タイマーを使いたい！
JavaScriptをふんだんに使ったページを作ってみる
escape/unescape変換フォームを作りたい！
計算フォームを作りたい！
n進数変換フォームを作りたい！
マウスの状態によって処理したい！
【JavaScriptとは】
【世界標準規格 ECMA-262 Edition 5.1 ECMAScriptベースのJavaScript】
関連リンク
【DHTMLとCHTML】
【DHTML】=HTML＋CSS＋JavaScript
【CHTML】携帯電話用HTML簡易版
【XHTMLとXHTML Basic】
【XHTML】=HTML4＋XML1.0
【XHTML Basic】携帯電話/PDA/etc用XHTML簡易版
【ajax】
【ajax】=JavaScript＋XML / JavaScript＋ JSON (非同期通信)
【ホームページデザイン】
文書構造をHTML、デザインをCSS、動的な仕組みにはJavaScriptといった組み合わせをある程度使えるようになるにつれ、以下のようなことも気になってくるでしょう。
【ホームページデザインには】
アプリケーションソフトを活用しよう。
フリーソフトを活用しよう。
ツールとして活用しよう。
イメージ画像描画(ドロー)ソフトを入手する
画像を使ってホームページデザイン
ボタン用アイコンの素材が欲しい！
ところで画像の保存形式って？
アニメーションの作り方や動画のアップ方法は？
【RIA/Rich Internet Applications】
外観を彩るアプリをRIA/Rich Internet Applicationsと呼び、Java AppletやJavaFXもその1つですが、Java Appletは、Javaというプログラミング言語で作ったアプリケーションをHTML上で表示させる仕組みなのでJavaのプログラミング経験がないホームページ作成の中級者であれば、出来上がったJavaアプリケーションをページ上に掲載する方法を知っていれば十分です。
また、HTML5とCSS3はまさにRIAを目的とした仕様であり、PCだけでなく、スマホやタブレット端末も対象となっていますが、スマホアプリ開発もプログラミング言語の範囲なのでホームページ作成の中級者や上級者も範囲外であり、プログラミング言語含め、その先でご紹介するシステム開発の範囲となります。
ここまで出来たら次は、
