プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP（旧WEBCAMP PRO）。
3月生は満員となっております。4月生募集に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
HTMLでホームページを作成するのに「開発環境を整えなきゃ、、でもめんどくさそう。。。」といった方がいらっしゃると思います。
今回はこんな方々に向けてHTMLを使ってメモ帳でホームページを作成する手順を教えます！
▼目次
メモ帳でもホームページは問題なく作れます
ホームページ作成ソフトやWEBオーサリングツール、または高機能テキストエディタを使うとワープロ感覚で簡単にホームページを作成できますが、自分でサイトを管理するようになるとHTMLの細かい編集など、知識は必ず必要になります。
HTMLを知っておくことは必須であるなら、まずはすべて自分の手で作り上げることは必要ではないでしょうか。そのためには、メモ帳にHTMLタグを直接打ってみましょう。
・プログラミングは8割はerrorとの戦いです。そんな時に役立つよくある間違いをまとめてみました。
こちらのよくある間違いを紹介！【HTML初心者入門】を参考にしてみてください。
HTMLの作成手順
メモ帳を開いて基本タグを打つ
Windowsの「アクセサリ」にある「メモ帳」を起動します。<HTML>を先頭に、基本的な枠組みとなるタグを打っていきます。すべてが手打ちなので、開始タグ(<***>)、終了タグ(</***>)を間違えないように確認しながらうっていきましょう。
&lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;/body&gt; &lt;/html&gt;
タイトル、本文を入れる
<head>タグ内の<title>タグを作成します。そのページタイトルを記載してください。<body></body>の間には実際に記載したい本文を入力します。
&lt;html&gt; &lt;head&gt; &lt;title&gt;メモ帳でHTML&lt;/title&gt; &lt;/head&gt; &lt;body&gt; メモ帳で１からつくったHTML文書です。 &lt;/body&gt; &lt;/html&gt;
・ホームページ作成を勉強する時に参考にしたい記事を集めてみました。
【初心者入門】HTMLの学習で参考になるおすすめのブログ８選！を参考にしてみてください。
ファイルを保存する
タイトルと本文の入力ができましたらメモ帳を名前をつけて保存します。（ここでは「memotest」というファイル名にします）
保存するフォルダに移動し、ファイルの種類を「すべてのファイル」にして、ファイル名は半角英数字で「memotest」、拡張子は「.htm」または「.html」にします。ファイル名の大文字小文字は区別されますので注意します。
ブラウザで確認する
作成したファイルをInternetExplorerやGoogle Chromeなどのブラウザで開き、表示させます。ブラウザを起動し、「ファイル」メニューの「開く」で保存したHTMLファイルを開きます。ページタイトルはブラウザのタイトルバーの部分に、本文や画像はウィンドウ内に表示されます。
更新して再表示する
メモ帳で先ほどのHTMLファイルを開き、本文を変更します。
&lt;html&gt; &lt;head&gt; &lt;title&gt;メモ帳でHTML（更新版）&lt;/title&gt; &lt;/head&gt; &lt;body&gt; メモ帳で作った文書を更新しました。 &lt;/body&gt; &lt;/html&gt;
ブラウザに戻り、画面を更新します。更新ボタンを押すか、F5キーを押してください。変更した内容が確認できればOKです。
ブラウザからソースを確認する
Microsoft Edgeの場合は、メニューの「F12開発者ツール」、InternetExplorerの場合は、メニューバーの「表示」メニューから「ソース」をクリックするとソースが表示されます。
自分が作成したメモ帳と同じ内容が表示されます。
気になるサイトがある場合はこうやってソースを確認し、ご自身のサイトの参考にしてみてください。
まとめ
慣れてきたら、自分なりのテンプレートを作るなどして、作業の効率化を図るのも良いです。HTMLやその他の知識について十分だと感じたら、無料の高機能ツールを探してみましょう。基礎知識を十分養った上での使用はとても有用です。
１ヶ月でHTML・CSSができる！「WebCamp」とは？
WebCampは１ヶ月でプログラミング・Webデザインスキルを学ぶ通い放題のプログラミングスクールです。
参加する方の90%は未経験者です！
短期集中型のスクールなので、期間を決めて圧倒的に効率よくサイト制作スキルを身に着けたい方におすすめです！
わからないことを講師にすぐ質問できたり、通い放題で自分のスケジュールに合わせて来校することができるので、独学で学習するよりも早く確実にスキルが身につきます。
学習の疑問点やWebスキルのマスターの仕方がわかる無料説明会も開催しています。ぜひお気軽にお申込みください！
プログラミング学習から転職成功まで導く、当社人気のDMM WEBCAMP（旧WEBCAMP PRO）。
3月受入枠は満員となっております。4月枠に向け、お早めの申込みをオススメします。
・プログラミング未経験でもエンジニア転職を絶対成功させたい
・スキルを身に着けて人生を自ら切り開きたい
上記にあてはまる方は、ぜひご検討ください！
▼未経験から1ヶ月でWEBデザイン・プログラミングを学びたい方はこちら！
