この記事はホームページを自分の力で作って公開してみたい&プログラミングをやった事のない方向けの記事です。
wixやJimdoのような簡単にホームページを公開できるサービスを使う事なく、手元にあるパソコンとFirebaseを用いてシンプルなホームページを作っていきましょう。（無料）
簡単にホームページを作成できるサービスを利用していない分、自由度が限りなく高いホームページを作成でき、勉強にうってつけです。
この記事を読みながら、実際に手を動かすとHTML、CSS、JavaScriptの基礎が感覚的にわかるようになります。
目次
必要なもの
今回紹介する、ホームページ作成の方法に必要なものを事前に紹介します。
- パソコン
- テキストエディタ
- Googleアカウント
- GoogleChrome
テキストエディタやgoogleアカウントはパソコンさえあれば取得することができるので、パソコンがあれば自分だけのホームページを作成することができます。
ウェブブラウザはGoogleChrome一強なので、Chromeもダウンロードしておきましょう。
テキストエディタ、Chromeのダウンロード
初心者からベテランまで数多くの人に愛用されている、Atomがオススメです。
テキストエディタを使用することで、HTMLやCSS、JavaScriptの管理が簡単になります。
公式サイトからダウンロードしましょう。
ついでにChromeもダウンロードしておいてください。
GoogleChrome
フォルダを作成してAtomで開く
まずは、任意の名前のフォルダを作成してください。
Macの場合は二本指クリック→新規フォルダで作成をすることができます。
次に、先ほどダウンロードしたAtomを起動してください。
Open a Projectを選択し、先程作成したフォルダを開きましょう。
次に作成したフォルダ名のところで二本指クリック > NewFileを選択し、index.htmlを入力してください。
このindex.htmlというファイルがあなたのホームページの玄関になります。
初めてのHTML
HTMLを利用すると、文章を見出しにできたりリンクにしたり、流れる文字にできるといった効能があります。
HTMLの入門記事はこちらから。
index.html上に以下のコードを貼り付けて、command+sを押しましょう。
command+sでデータがセーブされます。
<h1>山田太郎のホームページにようこそ</h1>
<a href="https://twitter.com/AKakizoe?lang=ja">twitter</a>
GoogleChromeで確認
作成したフォルダ > index.html > 二本指クリック > このアプリケーションで開く >GoogleChromeで作成したホームページを確認することができますので確認してみましょう。
見出しとリンクが表示されているのを確認できたのではないでしょうか。
リンクを選択すると、僕のtwitterアカウントが出てきますので、ぜひフォローの程よろしくお願いします。
h1は英語で見出しの意味のheadingの略です。
<h1></h1>
で囲まれた部分がheadingで一番大きいサイズで表示されます。
<h2></h2>
で囲むと、二番目に大きいサイズで表示されます。
aタグは
<a href="移動させたいページのurl">表示したい文字</a>
で使うことができます。
HTMLのタグには色々あるので、index.html内で試しにちょこちょこ書いて行くと、早く習得できると思います。
HTML 4.01 要素一覧
初めてのCSS（直接記入）
CSSはレイアウトを担当します。CSSをマスターすると自由自在におしゃれなホームページを作れるようになります。
CSSを適用する方法は、タグの中に直接記入する方法と、styleタグにまとめる方法、CSSファイルを読み込む方法の3種類があります。
直接記入する方法が一番簡単なので、まずはそちらから紹介していきます！
先ほどの見出し部分を以下のように変更してください。
<h1 style="color: red;">山田太郎のホームページにようこそ</h1>
style=”color:red;”を追加したのですが、これによってそのタグ内の文字が赤くなります。
style=””の部分はタグ内に直接CSSを書く時の決まりです。
中のcolor:red;はプロパティーと値でcolorを赤にしてくれといっています。:（コロン)と;(セミコロン)を忘れるとエラーが出るので忘れないように癖をつけておきましょう。
変更・確認をcommand+s と画面のリロード(f5)で行ってください。
CSSによる、文字装飾では様々な要素をいじることができます。
以下の記事にまとめてあるので興味があれば是非ご覧になってください。
初めてのCSS （CSSファイルの読み込み）
index.htmlの入っているフォルダにstyle.cssを作成してください。
ここに書いたCSSをindex.htmlのhead内で読み込んでCSSを適用させていきます。
index.html
<h1>山田太郎のホームページにようこそ</h1>
<a href="https://twitter.com/AKakizoe?lang=ja">twitter</a>
style.css
body{
background-color:#dccdcdc;
}
bodyにスタイルを書くとホームページ全体への指定をすることができるので、背景色をグレイにしました。
色の値はカラーコードでも指定することができますので、今回はカラーコードを使用しました。
カラーコード
このようにCSSでレイアウトをいじれるようになりましたので、次はJavaScriptで動きをつけていきましょう。
HTMLとCSSは使い方さえわかれば段々と可愛いデザインにすることができると思います。
JavaScriptを使用する。
HTMLとCSSができればマークアップエンジニア、その次がフロントエンドエンジニアなのですが。
フロントエンドエンジニアはJavaScriptを使える事が条件となります。
せっかくなのでJavaScriptを使用してフロントエンドエンジニアになりましょう。
Twitterに跳ぶ際不適切なユーザーですが表示しますか？というalertを出します。
先程と同様に、フォルダ内にindex.jsを作成しJavaScriptを読み込みましょう。
index.htmlのheadの中に以下のコードを追加してください。
<script type="text/javascript" src=“index.js"></script>
これで、JavaScriptが読み込まれます。
次にindex.jsの中身に以下のコードを追加してください。
function alert(){
return confirm('不適切なユーザーですが表示しますか？')
}
アラート機能が実装されています。
詳しい意味はわからなくて大丈夫です。
最後にindex.htmlのaタグ部分にonClick=”alert()”を追加します。
これでJavaScriptでアラートを出す事ができます。
最終的なHTML
<h1>山田太郎のホームページにようこそ</h1>
<a href="https://twitter.com/AKakizoe?lang=ja">twitter</a>
完成物
その1まとめ
あまり可愛くないホームページが完成しましたが、HTMLとCSS、JavaScriptの基礎を紹介しました。
まずは、HTMLでいろんなタグを利用しながらCSSを適用して、可愛い（カッコいい）ホームページにするところからWEBの勉強を初めてみて欲しいなと思います。
その2では、firebaseを使って自分の力で作り上げたサイトを世の中に公開していきましょう。
WINDII
最新記事 by WINDII (全て見る)
- Nuxt.js + Contentful。HeadlessCMSでポータルサイトを作る - 2019年12月28日
- IOSアプリをAppStoreに公開する手順書（Ionic） - 2019年9月11日
- IonicAcademyでIonic＆Angularでのアプリ開発を学ぶ - 2019年8月30日
この記事へのコメントはありません。