index

HTML/CSS初心者の為の
無料で挫折させない ホームページ作成講座

 更新日 : 2021年4月7日
ホームページ作成講座のガイダンス

画像

 

ホームページ作成技術を必要としている人は沢山います。店舗を宣伝して売上を伸ばしたい人、インターネットを利用した物品の販売を考えている人、会社でホームページ作成を託された人、アフリエイト収入を得たい人、自分の趣味をホームページで公開したい人、等々です。ホームページ作成を専門業者に頼むと何十万円もの費用が掛かってしまいます。完成後のホームページ更新にも費用が発生します。

出来るだけお金を掛けずにホームページを作成し、目的を達成したいと考えホームページ作成に取り組んだ人は多いと思います。その中には成功した方もおられると思いますが、挫折した人はその何倍もいるのではないでしょうか。挫折の理由は様々と思いますが、典型的な挫折の理由は次のようなことがあげられます。

分厚いホームページ作成の参考書を買って一から勉強を始めたが、最初のページから理解して覚えようとするので挫折します。英語の辞書を最初から覚えようとした人のように本の始めの部分で挫折します。

HTML及びCSSを一通り勉強したが、いざホームページを作成する段階で考えていたことが実現できない。英語の文法を一通り勉強した人が、英会話ができないと同じ理由で挫折します。

ホームページ作成ツールを買ってホームページを作成したが、ホームページ作成技術が身についていないために改修・改善が出来ないので、自分の思ったホームページが出来なくて挫折します。

今、当ページを読んでいる方は、EXCEL、WORDを十分に活用されていると思います。EXCELを習得した時のことを思い出して下さい。簡単な練習問題を何個か行ってEXCELを身につけた筈です。EXCELのマニュアルは何百ページもありますが、それを一から勉強した訳ではないと思います。EXCELに何ができるかを理解し、基本の基本だけを身に付け、実戦を通して習熟していったと思います。

当講座が目指しているのは、初心者が陥りやすい落とし穴の回避ルートを明示し、ホームページ作成の本道を示し、目的達成を支援することです。具体的には以下のとおりです。

簡単なサンプル画像を基にしたHTML及びCSSのコードをコピー&ペーストで貼り付け、様々に加工することによって、HTML及びCSSを体感・体得します。理論・理屈は後から勉強します。

HTML及びCSSをコーディングしていると思った通りにならないことが多々発生します。ミスを少なくするコーディングルールを作成し、トラブルが発生したときの対処について提案します。

設計の方法論無く、HTML及びCSSをコーディングすると修正ができない、追加ができないなどの事態が発生します。このような事態を避けるために設計の方法を提案します。骨組みHTMLの作成とCSSの共通化です。

ホームページの骨組み(メインタイトル、メインナビゲーション、ページタイトル、ページ目次、項目タイトル、項目表示枠、画像表示枠、トップページ移動ボタン、最下段のページ移動ボタン、フッター)を「skeleton.html」として纏めます。骨組みを固めることにより本文作成に集中できます。CSSは「frame-style-sheet.css」 として纏めます。

目次、各種見出し、各種箇条書き、コメントボックス、吹き出し、大きな矢印、他を使いやすい形に加工し、部品を「module-style-sheet.css」 として纏めます。部品(Module)を活用することで省力化が図れます。

使いやすい背景色36色と覚えておくと便利なカラーネーム22色、他に頻繁に使う文字関係の装飾を 「decoration-style-sheet.css」として纏めます。色合わせ他に便利に使うことができます。

HTML及びCSSの逆引き辞典を用意して、HTML及びCSSの書き方を覚えなくてもコーデイングが出来るようにしました。

演習1を実施することにより、シンプルなシングルページのホームページ作成を身に付けることが出来、演習2を実施することにより本格的な複数ページのホームページ作成を身に付けることができます。

演習1の完成画面は ここをクリックしてください。
この画面に戻るときは、ブラウザの戻るボタンを利用してください。

演習2の完成画面は ここをクリックしてください。
この画面に戻るときは、ブラウザの戻るボタンを利用してください。

pagetop

ガイダンス

Copyright (c) 無料で挫折させないホームページ作成講座 All Rights Reserved.
by yorozuken