最終更新日 2021.09.5
用意するもの

ホームページはパソコンに最初から入っているメモ帳で作る事ができる

ホームページを作る上で、HTML・CSS・Java Scriptなどを使用して記述する事をコーディングと言います。僕はこのコーディングの作業が地味に好きですね（笑）。

勉強をはじめた頃は、何もわからないのでDreamweaver「ドリームウィーバー」というソフトを使っていました。が、値段が高い！そういうもんだと思ってソフトを購入していましたが、これからコーディングをする方にはおすすめはしません。無料で使えるテキストエディタでも十分です。

目次 [閉じる]

メモ帳とは
メモ帳にHTMLをコーディングしてみよう
保存したHTMLファイルをブラウザで確認

メモ帳とは

パソコンを操作したことがある方なら普通にメモ帳を使ったことがあると思います。Microsoft Windowsにはもともとテキストエディタとしてメモ帳が付いています。

ちなみに僕はMacintoshのiMacを初めてのパソコンとして購入しました。前知識でデザインをする人はMacを使うと聞いていたのでおしゃれなフォルムや「Mac」と言う響きに憧れていたんですが（笑）、今使っているのはWindowsです。

ホームページを作るのにWindowsでもまったく問題ありません！iMacは値段が高いので1台買うだけで今の僕の作業環境が3つ作れます（笑）。

こちらのアイコンがメモ帳です。さっそく起動してみましょう。

直接メモ帳のアイコンをクリックしなくても、パソコン画面の何もない所にカーソルを持ってきて「右クリック」→「新規作成」→「テキストドキュメント」で簡単にテキストファイルが作れます。

メモ帳にHTMLをコーディングしてみよう

さて、それではメモ帳を立ち上げたならば下のHTMLのコードをコピペしてみましょう。

こちらはCSSを別ファイルではなく、HTML内に直接記述しています。JSは使っていないのでHTMLとCSSの記述のみの簡単なソースコードです。

index.html

            
                <!DOCTYPE html>
                <html>
                <head>
                <meta charset="UTF-8">
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <title>メモ帳でホームページが作れます</title>
                <style>
                html {
                  font-family: "Meiryo", sans-serif;
                  font-size: 62.5%;
                  font-feature-settings: "palt"
                }
                 
                div {
                  width: 100%;
                  height: 100%;
                  text-align: center;
                  padding-top: 40px;
                  background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%);
                  position: absolute;
                  top: 0;
                  left: 0;
                  animation: huerotator 10s infinite alternate;
                  z-index: 1;
                  opacity: 0.5
                }
                 
                p {
                  color: #111;
                  font-size: 2.8rem;
                  letter-spacing: 0.09em;
                  text-align: center;
                  padding: 20px 60px;
                  border-top: 6px solid #c72227;
                  background: #fff;
                  border-radius: 0 0 20px 20px;
                  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
                  display: inline-block
                }
                 
                @keyframes huerotator {
                  0% { filter: hue-rotate(0deg) }
                  100% { filter: hue-rotate(360deg) }
                }
                </style>
                </head>
                <body>
                  <div>
                    <p>メモ帳で<br>ホームページが<br>作れます</p>
                  </div>
                <script type="text/javascript" src="js/jquery.min.js"></script>
                </body>
                </html>