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

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

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

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

メモ帳とは

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

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

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

メモ帳

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

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

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

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

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

index.html

            
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
  6. <title>メモ帳でホームページが作れます</title>
  7. <style>
  8. html {
  9.   font-family: "Meiryo", sans-serif;
  10.   font-size: 62.5%;
  11.   font-feature-settings: "palt"
  12. }
  13.  
  14. div {
  15.   width: 100%;
  16.   height: 100%;
  17.   text-align: center;
  18.   padding-top: 40px;
  19.   background: linear-gradient(to bottom, #a6d900 0%, #ff4454 100%);
  20.   position: absolute;
  21.   top: 0;
  22.   left: 0;
  23.   animation: huerotator 10s infinite alternate;
  24.   z-index: 1;
  25.   opacity: 0.5
  26. }
  27.  
  28. p {
  29.   color: #111;
  30.   font-size: 2.8rem;
  31.   letter-spacing: 0.09em;
  32.   text-align: center;
  33.   padding: 20px 60px;
  34.   border-top: 6px solid #c72227;
  35.   background: #fff;
  36.   border-radius: 0 0 20px 20px;
  37.   box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
  38.   display: inline-block
  39. }
  40.  
  41. @keyframes huerotator {
  42.   0% { filter: hue-rotate(0deg) }
  43.   100% { filter: hue-rotate(360deg) }
  44. }
  45. </style>
  46. </head>
  47. <body>
  48.   <div>
  49.     <p>メモ帳で<br>ホームページが<br>作れます</p>
  50.   </div>
  51. <script type="text/javascript" src="js/jquery.min.js"></script>
  52. </body>
  53. </html>

ではコピペできたらファイルを保存しましょう。

メモ帳の左上にある「ファイル」→「名前を付けて保存」を選択します。そして「ファイル名」には何でもいいですが拡張子を「.html」としてください。例ではindex.htmlとしています。

あともう1点は「ファイル名」の下にある「ファイルの種類」をデフォルトの「テキスト文書」から「すべてのファイル」に変更して「保存」をクリックします。

表示される部分はめちゃめちゃシンプル!<div>と<p>しか使っていません。

CSSの部分は若干多めの指定をしてますが、初心者の方もちょっとずつで良いので覚えてみてください。そして、なんとなくわかってきたら自分でもデザインを変更してみてください。

簡単でも良いので自分の思い描くデザインを形にすることがとても大切です。

保存したHTMLファイルをブラウザで確認

これでメモ帳を使ってHTMLファイルを作ることができました。

ちゃんと記述したものが表示されているかの確認ですが、「えっ、それで見れんの?」というくらいシンプルです。パソコンって便利にできてますね~。

作成したファイルを起動中のブラウザにドラッグするだけで見れます。そのままファイルの変更をおこなって保存し、ブラウザのページを再読み込みすれば変更したものが表示されます。

わからない方もいるかと思いますので説明すると、ブラウザというのはChrome・Safari・ Internet Explorerなどのインターネットを見るときに使うアレです。僕は基本的にはGoogleのChromeを使ってます。

紹介したHTMLをブラウザで確認してもらうとわかりますが、CSSの指定だけでグラデーションの色が変化していますね。そう!JSを使わなくても簡単な動き・アニメーションならCSSだけで実装する事ができるんです。

他にもCSSで作れるいろんなデザインや動きも紹介しますので参考になさってください。

ホームページの簡単な作り方以外にも
お得な情報や日常を紹介するブログも是非どうぞ!
Webに関連するレンタルサーバーなどの特徴・料金比較や、
個人的に挑戦している資格取得についての勉強法やグルメなどを紹介しています。