ホームページの作り方:さきちんうぇぶ

ホームページの作り方を基礎から学べるウェブサイト。
わかりやすい説明で初心者も安心!

HTMLを入力する前に

入力前の準備

HTMLファイルを作成するにはタグを入力するだけでOKなので、専用のソフトなどは必要ありません。Windowsならば、標準で付属している「メモ帳」などのテキストエディタでも入力することができます。
つまり、「メモ帳」さえあればホームページは作れてしまうのです。

[メモ帳でソースコードを入力した図]
ホームページの画像

でも、「メモ帳」を使ってHTMLを入力すると、色んな問題が発生してしまいます。

少し専門的な話になりますが、例えば「Shift_JIS」といった文字コードしか取り扱うことができないため、文字化けの原因となる場合があります。
また、ファイルの保存時にBOM【Byte Order Mark】といった要素を付加してしまうため、様々な不具合の原因となる場合があります。

そこで、当サイトではテキストエディターの使用をおすすめします。
テキストエディターとはメモ帳を高機能にしたソフトで、HTMLやプログラムコードの入力にピッタリのソフトです。

テキストエディターは「秀丸」や「サクラエディタ」「TeraPad」など、様々なソフトがあります。
使うソフトはお好みで構わないのですが、今回は「TeraPad」を使ってみましょう。

「TeraPad」は動作も軽快で高性能なテキストエディタです。
またHTML編集モードや様々な文字コードにも対応しているので、初心者にもわかりやすく、非常に便利です。

本来ならばDreamweaverなどのホームページ作成専用ソフトを使うことが理想的ですが、有料だし、楽チンすぎるので、本当の意味でHTMLを理解・習得することができません。
まずは原始的な方法である「手入力」で基礎力を養い、理解することから始めましょう。

当サイトでは、基本的に「TeraPad」を使ってHTMLを学習・入力します。

覚えておきたいポイント

ホームページは「メモ帳」で作れる!

ホームページ制作には、特別なソフトなど必要ありません。「メモ帳」などのテキストエディタがあれば作れてしまいます。
「メモ帳」はWindowsには必ず付属しているソフトです。XPはもちろん、Vista、7にも入っています。もちろんMacやLinuxにだって付属している、基本的なソフトウェアです。
※OSにより名称が異なります。

ホームページの制作ソフト

ホームページ制作ソフトとして代表的なのが、Adobe(アドビ)社のDreamweaver(ドリームウィーバー)です。Web業界標準のソフトウェアとして利用されており、プロはもちろん、世界中のクリエイターから支持されています。
管理人も愛用しており、どんなページでも簡単に、効率よく、キレイに制作することができます。
しかし使いこなすには一定のスキルが必要であり、最低限HTML、CSSを理解していないと上手く扱うことができません。

作業用フォルダの準備

この先、HTMLファイルやCSS、画像ファイルを扱うことになりますので、作業用のフォルダを用意しておきましょう。

作業フォルダの作成手順

step.1

作業フォルダの準備

デスクトップ画面の何もない所で右クリックし、「新規作成」→「フォルダー」を選択します。

step.2

作業フォルダの準備

あたらしいフォルダが作成されますので【homepage】と名前をつけておきましょう。

これで作業用フォルダの完成です。

※Windows8、Windows Vista、Windows XPの場合も同様に、【新規作成】→【フォルダ】から作成します。

覚えておきたいポイント

他のOSの場合

Windows8、Vista、XPの場合も同様に、デスクトップ画面から右クリック、「新規作成」→「フォルダ」を選択し、「homepage」フォルダを作成します。

拡張子を常に表示設定する

ホームページを制作する場合、様々なファイルを扱います。その際に拡張子が表示されていないと非常に不便なので、常に表示する設定へ変更しておきましょう!

拡張子の表示設定方法

step.1

拡張子表示の設定1

※赤枠のメニューが表示されていない場合は、「Alt」キーを押しましょう。
さきほど作成した「homepage」フォルダを開き、「ツール」→「フォルダーオプション」をクリックします。

step.2

拡張子表示の設定2

「表示」タブを選択し、「登録されている拡張子は表示しない」のチェックを外して、OKをクリックします。

それでは準備も整ったので、さっそく次のページでHTMLを入力してみましょう!

覚えておきたいポイント

他のOSの場合

Windows8、Vista、XPの場合も同様に、「登録されている拡張子は表示しない」のチェックを外しておきましょう。

簡単なHTMLを入力してみよう!
« 前のページへ 【STEP.3】簡単なページを作ってみよう!

コンテンツの一覧

学習ページの一覧ナビ

快適なサイト運営のために

セキュリティソフトを導入しよう
ウィルス対策について

安心してホームページを運営するための心がけ。

HTMLの特殊文字一覧
HTMLの特殊文字一覧

よく使う、HTMLの特殊文字・記号の一覧表。

カラーコードの一覧表
カラーコードの一覧

HTML・CSSで使えるカラーコードの一覧表。

規約やお問い合わせなど

ご利用案内
ご利用案内

当サイトをご利用になる前に、必ずご確認ください。

FAQ
FAQ

よくあるご質問など。

お問い合わせ
お問い合わせ

さきちんWEBについてのお問い合わせはこちらから。

プライバシーポリシー
プライバシーポリシー

個人情報管理とWeb広告配信について。

運営者情報
運営者情報

さきちんWEBの管理・運営者、さきちんについて。

サイトマップ
サイトマップ

さきちんWEBのサイトマップ。