1. ホーム
  2. ホームページの作り方

ホームページの作り方

ホームページの作り方

初心者の方でも簡単にホームページが作れるように解説していきます。

むずかしい話はすっ飛ばします（笑）。細かい話をすればキリがないですし、いろんな設定が必要になってきます。まずは自分でホームページを作ってみましょう！

そうすると「ホームページって意外と簡単に作れる」「もっと自分好みのサイトにしたい」など、好奇心と一緒に欲も出てくるはず！そうなればシメたものです（笑）。あとは自分好みにホームページをカスタマイズする事も楽しくなっているはずですから。

目次 [閉じる]

ホームページを制作するために用意するもの

ホームページを作るうえで最低限用意するものは「パソコン」です。逆に言うとインターネットが使える状態であればパソコンひとつでホームページはつくる事ができます。

  • パソコン
  • メモ帳（テキストエディタ）
  • 画像編集ソフト
  • FTPソフト

厳密に言うと上記の4点。

メモ帳はパソコンにはじめから入っていますし、画像編集ソフトとFTPソフトも無料のものをダウンロードすることができます。

なのでパソコンさえあればホームページを作る環境ができあがるわけです。

こちらも見てください

竹馬

ちなみに初心者の方には耳慣れない言葉（FTPソフトなど）がこれからも出てきますが、特に意味は考えずにわからなければわからないまま流して読んでください（笑）。

全体の形はHTMLという言語でつくる

HTMLとはそのまま「エイチ・ティー・エム・エル」と読み、HyperText Markup Languageの略です。はい、覚えなくて良いです（笑）。

とにかく記述する内容を見てもらう方が早いですね。

index.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. <meta charset="UTF-8">
    5. 
                        
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 
                        
  6. <title>はじめてのホームページ</title>
    7. 
                        
  7. <link type="text/css" rel="stylesheet" href="css/slick.css">
    8. 
                        
  8. <link type="text/css" rel="stylesheet" href="css/style.css">
    9. 
                        
  9. </head>
    10. 
                        
  10. <body>
    11. 
                        
  11.  
    12. 
                        
  12. <script type="text/javascript" src="js/jquery.min.js"></script>
    13. 
                        
  13. <script type="text/javascript" src="js/slick.min.js"></script>
    14. 
                        
  14. <script type="text/javascript" src="js/main.js"></script>
    15. 
                        
  15. </body>
    16. 
                        
  16. </html>
    17.

さぁ！どうでしょう、いきなり訳わから～んってカンジですが（笑）、とりあえず「用意するもの」で紹介したメモ帳（テキストエディタ）にそのままコピペしてみましょう。

ファイル名は何でも構わないですが拡張子だけ「.html」の形にして保存します。例として「index.html」というファイル名にしています。

それでは新規でフォルダを作ってその中にindex.htmlを入れておきましょう。

ここでは最低限のルールとして上記のタグの意味をざっくり説明します！

<!DOCTYPE html>
ドキュメント宣言と言い、このファイルがHTML5であることを示しています。
<html> ～ </html>
ドキュメント宣言以外のすべての要素をこのタグの中に記述します。
<head> ～ </head>
検索エンジンに対する情報やホームページの仕様などを設定するタグを記述します。
<body> ～ </body>
ホームページに表示される部分をこのタグの中に記述します。
<meta ～ >
ホームページの情報を指定します。「charset」は文字コードを指定し、「viewport」はスマホやタブレットにも適した表示をさせるために指定します。
<title> ～ </title>
ホームページの名前を記述します。当サイトであれば「Chepirare」ですね。
<link ～ >
外部のCSSファイルを読み込んでいます。
<script> ～ </script>
外部のJSファイルの読み込んでいます。

CSSやJava ScriptはHTMLファイル内に直接書く事もできますが、基本的には別のファイルに記述してHTMLファイルで読み込みます。

竹馬

タグには「<title>～</title>」のように2個セットで使うものはブロックレベル要素と言い、2個目の閉じタグに「/」を追加します。また「<meta ～>」のようなタグはインライン要素と言い、1個のタグのみで閉じタグは必要ありません。

CSSを設定して各項目にデザインを施す

CSSは「シー・エス・エス」と読み、Cascading Style Sheetsの略です。CSSを使って色んなデザインを装飾する事ができるのでたくさんパターンを知ると楽しくなりますよ。

style.css

                	
    
                    	
  1. @charset "utf-8"
    2. 
                        
  2.  
    3. 
                        
  3. * {
    4. 
                        
  4.   margin: 0;
    5. 
                        
  5.   padding: 0;
    6. 
                        
  6.   box-sizing: border-box
    7. 
                        
  7. }
    8. 
                        
  8.  
    9. 
                        
  9. html {
    10. 
                        
  10.   font-family: "Yu Gothic", "YuGothic", "Hiragino Kaku Gothic Pro", "Meiryo UI", "Meiryo", "MS PGothic", sans-serif;
    11. 
                        
  11.   font-size: 62.5%;
    12. 
                        
  12.   font-feature-settings: "palt"
    13. 
                        
  13. }
    14. 
                        
  14.  
    15. 
                        
  15. .sliderWrap {
    16. 
                        
  16.   text-align: center;
    17. 
                        
  17.   margin-top: 40px
    18. 
                        
  18. }
    19. 
                        
  19.  
    20. 
                        
  20. .sliderWrap h1 {
    21. 
                        
  21.   font-size: 2rem
    22. 
                        
  22. }
    23. 
                        
  23.  
    24. 
                        
  24. .sliderWrap ul {
    25. 
                        
  25.   width: 100%;
    26. 
                        
  26.   max-width: 640px;
    27. 
                        
  27.   margin: 20px auto 0
    28. 
                        
  28. }
    29. 
                        
  29.  
    30. 
                        
  30. .sliderWrap img {
    31. 
                        
  31.   width: 100%
    32. 
                        
  32. }
    33.

それではこちらもコピペしちゃいましょう！拡張子が「.css」であればOKです。例として「style.css」というファイル名にしています。

CSSもはじめは何のことかサッパリですが、指定する形を知ると意外と簡単！

CSSでは「何に対して・何を・どうする」の3点をかならず指定する形を取ります。

例えば「html { ～ }」の部分で言うと、「htmlタグに対して・font-family（文字の種類）を・游ゴシックにする」という意味になります。その他にfont-size（文字サイズ）とfont-feature-settings（文字詰め）の計3項目の指定をしています。

ここで使用しているCSSの意味もざっと説明します。

@charset ～
このファイルで使う文字コードを指定します。記述は一番上です。
width
横幅を指定します。
max-width
要素の横幅が変わる時の最大幅を指定します。
font-size
文字のサイズを指定します。
font-family
文字の種類を指定します。
font-feature-settings
文字と文字の間隔、文字詰めを指定します。
text-align
文字を左寄せ・中央寄せ・右寄せに指定します。
padding
要素の内側の余白を指定します。
margin
要素の外側の余白を指定します。
box-sizing
widthやheightの値にpaddingとborderを含めるかどうかを指定します。

こちらも見てください

あとは「slick.css」（←ココをクリック）をダウンロードして、index.htmlがある場所に「css」フォルダを作り、コピペしたstyle.cssとともにcssフォルダへ入れてください。

竹馬

コピペしたCSSの中にある「.sliderWrap」というのはクラス名です。クラスというのは各htmlタグに追加することができます。「<div>」タグにこのクラスを付けるのであれば「<div class="sliderWrap">」という形になります。

こちらも見てください

動きを加えるために必要なJava Script/jQuery

Java Script（ジャバ・スクリプト）とjQuery（ジェイ・クエリ）と読みます。この2つは厳密に言えば違うものですが、もう…ほぼ同じものと思ってもらっても良いです（笑）。

Webの発展に伴ってJava Scriptを使いやすいようにまとめてくれたものがjQueryというプログラムです。

main.js

                	
    
                    	
  1. (function($) {
    2. 
                        
  2.   $(document).ready(function(){
    3. 
                        
  3.     $(".slider").slick({
    4. 
                        
  4.       lazyLoad: 'progressive',
    5. 
                        
  5.       arrows: false,
    6. 
                        
  6.       dots: false,
    7. 
                        
  7.       infinite: true,
    8. 
                        
  8.       fade: true,
    9. 
                        
  9.       autoplay: true,
    10. 
                        
  10.       autoplaySpeed: 2500,
    11. 
                        
  11.       speed: 2000
    12. 
                        
  12.     });
    13. 
                        
  13.   });
    14. 
                        
  14. })(jQuery)
    15.

はい、こちらもコピペです。今度は拡張子が「.js」になりますよぉ～。例として「main.js」というファイル名にしています。

チェピレアではJava ScriptとjQueryはまとめて「JS（ジェイ・エス）」と言いますが、細かい説明はここでは省きます！正直、JSは難しいです。そして使わなくてもホームページは作れます。

まずは初心者の方に、JSでこんなことができるのかぁ～と思ってもらえるように簡単で素敵な動きを見てもらいますね。

それではCSSと同様に「jquery.min.js」（←ココをクリック）と「slick.min.js」（←ココをクリック）をダウンロードしてください。

こちらも見てください

そしてindex.htmlがある場所に「js」フォルダを作り、コピペしたmain.jsとともにjsフォルダへ入れてください。

竹馬

ぶっちゃけ僕もJSは一から書けないです（←ダメでしょ笑）。何かやりたいことがあればネットで調べてあれやこれやと試しながらできたりします。そんなもんです。すべて覚えなくても大丈夫！

コピペしたホームページの動作確認をしてみよう

さて、最後にindex.htmlの11行目～20行目（<body>と<script ～>の間）にホームページに表示する部分を追加しましたのでコピペしてみてください。

index.html

                	
    
                    	
  1. <!DOCTYPE html>
    2. 
                        
  2. <html>
    3. 
                        
  3. <head>
    4. 
                        
  4. <meta charset="UTF-8">
    5. 
                        
  5. <meta name="viewport" content="width=device-width, initial-scale=1">
    6. 
                        
  6. <title>はじめてのホームページ</title>
    7. 
                        
  7. <link type="text/css" rel="stylesheet" href="css/slick.css">
    8. 
                        
  8. <link type="text/css" rel="stylesheet" href="css/style.css">
    9. 
                        
  9. </head>
    10. 
                        
  10. <body>
    11. 
                        
  11.   <div class="sliderWrap">
    12. 
                        
  12.     <h1>スライダーはこれで動いている！</h1>
    13. 
                        
  13.     <ul class="slider">
    14. 
                        
  14.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider01.jpg"></li>
    15. 
                        
  15.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider02.jpg"></li>
    16. 
                        
  16.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider03.jpg"></li>
    17. 
                        
  17.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider04.jpg"></li>
    18. 
                        
  18.       <li><img src="https://chepirare.com/wp-content/themes/Chepirare/codepen/how-to-make-homepage/img/slider05.jpg"></li>
    19. 
                        
  19.     </ul>
    20. 
                        
  20.   </div>
    21. 
                        
  21. <script type="text/javascript" src="js/jquery.min.js"></script>
    22. 
                        
  22. <script type="text/javascript" src="js/slick.min.js"></script>
    23. 
                        
  23. <script type="text/javascript" src="js/main.js"></script>
    24. 
                        
  24. </body>
    25. 
                        
  25. </html>
    26.

はい、もう文字が見えてますが、これでスライダーをホームページに実装することができました。スライダーとは画像が切り替わるアレですよね？

JSは複雑でとっつきにくい所もあるんですが、それを使えればホームページは劇的によくなります。今回は設定を省きましたけどJSの設定を変えればいろんなスライダーを表現できます。

こちらも見てください

デモを表示しますので同じように動くか確認してください。

See the Pen ホームページの作り方 by 竹馬 (@takeuma)on CodePen.

竹馬

CSSとJSのファイル名を変更した方はindex.htmlに記述しているCSSとJSの名前も変更を忘れずに！ひとまずここまでできた方、おつかれさまです！

サーバーとドメインの設定をしていざ公開！

これでホームページをどうやって作っていくかをわかっていただいたかと思います。まだまだ色んなタグや設定の種類はあるけど、流れは同じです！

今回は簡単ですけどこれでホームページが完成です。（←いやいや、こんなんホームページちゃうやん！と思われるかもしれませんが、その気持ちが大事！）

「もっとこうしたい！」っていう欲求があればあなたのホームページはどんどん良くなる！

次に紹介する「無料で使えるデモサイト」のページではホームページをひと通り制作しますので是非チャレンジしてみてください。

ただ、今のままでは作ったホームページは自分のパソコンでしか見れません。

次におこなう作業が「ドメインの取得」と「サーバーへファイルを設置」です。

まずドメインというのは当サイトであれば「chepirare.com」です。ドメインはドメイン管理会社（お名前.comやムームードメインなど）で取得します。費用は年間いくらや月々いくらという形で支払います。大体どこの会社も年間で千円ちょっとですね。

こちらも見てください

そしてサーバー会社（XSERVERやさくらインターネットなど）へ申し込みをして、サーバーをレンタルします。サーバーは会社によって費用がかなり変わります。安ければ月々百円くらいのサーバーもあります。

こちらも見てください

サーバーの中で取得したドメインを設定して、振り当てられたフォルダにホームページのファイル一式をアップロードすればインターネット上にホームページが公開されます。（←ここでファイルをアップロードするために「用意するもの」で紹介したFTPソフトを使います。）

こちらも見てください

ホームページの制作から公開するまでの流れは以上です。

ホームページの制作って僕が言うのもなんですが費用がかなり掛かるんですよ（笑）。制作会社でホームページを作ると普通にうん十万円や規模が大きくなれば百万円以上の費用がかかってしまいます。

それがホームページを自分で作ってしまえばドメインとサーバーの費用だけで済む訳です。チェピレアで提供する情報で、あなたが自分のホームページを作るきっかけになれば幸いです。

トップページ 無料で使えるデモサイト

よく読まれている記事

おすすめの記事

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

チェピレア日記