ソースコード掲載：Lesson16~Lesson19「実際にHPを作ってみよう！」

こちらでは、プログラミングを体系的に学ぶ事のできる「ウェブカツ!!」にて使用している
ソースコードを掲載しております。

1 index.html
2 contact.html
3 style.css

index.html

<!DOCTYPE html>
<html lang="ja">

    <head>
        <meta charset="utf-8">
        <title>サンプルホームページ</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    </head>

    <body>

        <!-- メニュー -->
        <header class="site-width">
            <h1><a href="index.html">WEBUKATU</a></h1>
            <nav id="top-nav">
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#merit">MERIT</a></li>
                    <li><a href="#recruit">RECRUIT</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>
            </nav>
        </header>

        <p id="akakusuru">

        </p>
        <!-- メインコンテンツ -->
        <div id="main">

            <!-- トップバナー -->
            <img src="img/top-baner.png" id="top-baner">

            <!-- ABOUT -->
            <section id="about" class="site-width">
                <h1 class="title">ABOUT</h1>
                <p>
                    ウェブカツ!!は最短1ヶ月でWEBプログラミングを修得できるオンライン動画総合学習サービスです。<br />
                </p>
                <p>
                    プログラミングを学ぼうと思っても、その多くが途中で挫折してしまっているのが現状です。<br />
                    その最大の要因は 「情報量」<br />

                    学び始めの頃は壁にぶつかる毎日。
                    分厚い教則本に魔法の呪文のような訳の分からない言葉がぎっしりと並んでいる。<br />
                    <br />
                    「そもそも、説明している言葉自体が分からない。。」<br />
                    <br />
                    そんなため息をつきながら、分からない事がある度にネットを検索し、あっちこっちのサイトを調る毎日。<br />
                    「そもそも、検索しようにも言葉自体が分からないだよな。。」<br />
                    なんてこともしょっちゅう。

                    このように調べている作業だけで学ぶ時間の9割を使ってしまいます。
                    しかし、もし
                    「このサイトだけ見ればWEBサービスを作るための全てが分かる」
                    そんな魔法のようなサービスがあったらどうでしょうか？
                </p>
                <p>
                    ウェブカツ!!では、独自の『ウェブカツ学習メソッド』によってあなたの学習時間を10分の1へ軽減し、
                    仕事として使えるまでに成長させます。
                </p>
                <p>
                    それぞれのステップごとに学べる内容を「部」として分け、それぞれの部には顧問やOB・OG、先輩がいて困ったらいつでも聞ける。
                    そう、まるで学校の『部活』のような環境が用意されています。
                </p>
            </section>

            <!-- MERIT -->
            <section id="merit" class="site-width">
                <h1 class="title">MERIT</h1>
                <section class="panel">
                    <h2>高給が期待できる！</h2>
                    <p>
                        T業界では、時給3000円、4000円は当たり前の世界です。<br /> 使うプログラミング言語や任されるポジションによっても変わりますが、
                        PHP言語の開発なら月40万円〜、Java言語の開発なら月50万円〜という具合。 <br />収入をUPさせたいと思っている方にはとても理想的な環境です。
                    </p>
                </section>
                <section class="panel">
                    <h2>WEBサービスを作るための全てがある！</h2>
                    <p>
                        WEBプログラミングを学ぶ上で大変な事は「調べる」という作業です。<br />
                        また、一つのサイトだけで全ての知識が得られないため、他のサイトを調べたり、教則本を色々買ってみたりととても非効率。<br /> しかし、「ウェブカツ!!」
                        ではこのサイト１つでWEBサービスを作るための全ての知識を得られるため、とても効率的に学ぶことが出来ます。
                    </p>
                </section>
                <section class="panel">
                    <h2>起業に必要なことまで学べる！</h2>
                    <p>
                        起業に必要なのは総合力です。起業したての頃は一人で全てをこなすことになります。 プログラミング、デザイン、マーケティング、営業スキル。
                        オールマイティーに全てが出来なければいけません。 ウェブカツ!!では、実際のIT起業家から集客方法・マーケティング、営業メソッドまで全て学ぶことが出来ます。
                    </p>
                </section>
            </section>

            <!-- RECRUIT -->
            <section id="recruit" class="site-width">
                <table>
                    <thead>
                        <tr><th class="color1">RECRUIT</th><th>ウェブカツ!!講師募集</th></tr>
                    </thead>
                    <tbody>
                        <tr><th>業務内容</th><td>プログラミング教育動画の作成・ホームページの制作</td></tr>
                        <tr><th>資格・経験</th><td>HTML,CSS,PHPを学んだ事がある人なら、業務経験がなくても構いません！</td></tr>
                        <tr><th>お給料</th><td>お気持ちだけで</td></tr>
                        <tr><th>勤務地</th><td>自宅で構いません</td></tr>
                        <tr><th>選考方法</th><td>メールでお問合せ頂いた後にSkype電話にてお話させて頂きます。</td></tr>
                        <tr><th>応募方法</th><td>メールでご応募ください。</td></tr>
                        <tr><th>応募先</th><td>info@webukatu.com</td></tr>
                    </tbody>
                </table>
            </section>

        </div>

        <!-- footer -->
        <footer>
            Copyright <a href="http://webukatu.com/">ウェブカツ!!サンプルホームページ</a>. All Rights Reserved.
        </footer>

    </body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<!DOCTYPE html>

<head>

<title>サンプルホームページ</title>

</head>

<body>

<h1><a href="index.html">WEBUKATU</a></h1>

<ul>

<li><a href="#about">ABOUT</a></li>

<li><a href="#merit">MERIT</a></li>

<li><a href="#recruit">RECRUIT</a></li>

<li><a href="contact.html">CONTACT</a></li>

</ul>

</nav>

</header>

</p>

<h1 class="title">ABOUT</h1>

<p>

ウェブカツ!!は最短1ヶ月でWEBプログラミングを修得できるオンライン動画総合学習サービスです。<br />

</p>

<p>

プログラミングを学ぼうと思っても、その多くが途中で挫折してしまっているのが現状です。<br />

その最大の要因は「情報量」<br />

学び始めの頃は壁にぶつかる毎日。

分厚い教則本に魔法の呪文のような訳の分からない言葉がぎっしりと並んでいる。<br />

<br />

「そもそも、説明している言葉自体が分からない。。」<br />

<br />

そんなため息をつきながら、分からない事がある度にネットを検索し、あっちこっちのサイトを調る毎日。<br />

「そもそも、検索しようにも言葉自体が分からないだよな。。」<br />

なんてこともしょっちゅう。

このように調べている作業だけで学ぶ時間の9割を使ってしまいます。

しかし、もし

「このサイトだけ見ればWEBサービスを作るための全てが分かる」

そんな魔法のようなサービスがあったらどうでしょうか？

</p>

<p>

ウェブカツ!!では、独自の『ウェブカツ学習メソッド』によってあなたの学習時間を10分の1へ軽減し、

仕事として使えるまでに成長させます。

</p>

<p>

それぞれのステップごとに学べる内容を「部」として分け、それぞれの部には顧問やOB・OG、先輩がいて困ったらいつでも聞ける。

そう、まるで学校の『部活』のような環境が用意されています。

</p>

</section>

<h1 class="title">MERIT</h1>

<h2>高給が期待できる！</h2>

<p>

T業界では、時給3000円、4000円は当たり前の世界です。<br /> 使うプログラミング言語や任されるポジションによっても変わりますが、

PHP言語の開発なら月40万円〜、Java言語の開発なら月50万円〜という具合。 <br />収入をUPさせたいと思っている方にはとても理想的な環境です。

</p>

</section>

<h2>WEBサービスを作るための全てがある！</h2>

<p>

WEBプログラミングを学ぶ上で大変な事は「調べる」という作業です。<br />

また、一つのサイトだけで全ての知識が得られないため、他のサイトを調べたり、教則本を色々買ってみたりととても非効率。<br /> しかし、「ウェブカツ!!」

ではこのサイト１つでWEBサービスを作るための全ての知識を得られるため、とても効率的に学ぶことが出来ます。

</p>

</section>

<h2>起業に必要なことまで学べる！</h2>

<p>

起業に必要なのは総合力です。起業したての頃は一人で全てをこなすことになります。プログラミング、デザイン、マーケティング、営業スキル。

オールマイティーに全てが出来なければいけません。ウェブカツ!!では、実際のIT起業家から集客方法・マーケティング、営業メソッドまで全て学ぶことが出来ます。

</p>

</section>

<table>

<thead>

<tr><th class="color1">RECRUIT</th><th>ウェブカツ!!講師募集</th></tr>

</thead>

<tbody>

<tr><th>業務内容</th><td>プログラミング教育動画の作成・ホームページの制作</td></tr>

<tr><th>資格・経験</th><td>HTML,CSS,PHPを学んだ事がある人なら、業務経験がなくても構いません！</td></tr>

<tr><th>お給料</th><td>お気持ちだけで</td></tr>

<tr><th>勤務地</th><td>自宅で構いません</td></tr>

<tr><th>選考方法</th><td>メールでお問合せ頂いた後にSkype電話にてお話させて頂きます。</td></tr>

<tr><th>応募方法</th><td>メールでご応募ください。</td></tr>

<tr><th>応募先</th><td>info@webukatu.com</td></tr>

</tbody>

</table>

</section>

</div>

</footer>

</body>

</html>

contact.html

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>サンプルホームページ</title>
        <link rel="stylesheet" type="text/css" href="style.css">
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    </head>
    <body>
        <header class="site-width">
            <h1><a href="index.html">WEBUKATU</a></h1>
            <nav id="top-nav">
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li><a href="#about">ABOUT</a></li>
                    <li><a href="#merit">MERIT</a></li>
                    <li><a href="#recruit">RECRUIT</a></li>
                    <li><a href="contact.html">CONTACT</a></li>
                </ul>
            </nav>
        </header>
        <div id="main">

            <!-- Contact -->
            <section id="contact" class="site-width">
                <h1 class="title">CONTACT</h1>
                <form>
                    <input type="text" placeholder="E-mail" name="email"><br />
                    <textarea cols="100" rows="10" placeholder="内容" name="comment"></textarea><br />
                    <input type="submit" name="submit" value="送信">
                </form>
            </section>

        </div>
        <footer>
            Copyright <a href="http://webukatu.com/">ウェブカツ!!サンプルホームページ</a>. All Rights Reserved.
        </footer>
    </body>
</html>

<!DOCTYPE html>

<head>

<title>サンプルホームページ</title>

</head>

<body>

<h1><a href="index.html">WEBUKATU</a></h1>

<ul>

<li><a href="#about">ABOUT</a></li>

<li><a href="#merit">MERIT</a></li>

<li><a href="#recruit">RECRUIT</a></li>

<li><a href="contact.html">CONTACT</a></li>

</ul>

</nav>

</header>

<h1 class="title">CONTACT</h1>

<form>

</form>

</section>

</div>

</footer>

</body>

</html>

style.css

body{
    color: #444;
    margin: 0;
    padding: 0;
    line-height: 150%;
}

/*トップバナー*/
#top-baner{
    width: 100%;
}

/*ヘッダー部分*/
header{
    margin-bottom: 15px;
    height: 200px;
}
header h1{
    font-size: 20px;
    font-family: 'Montserrat', sans-serif;
    margin: 15px;
  padding: 20px;
    text-align: center;
    float: left;
  height: 150px;
    width: 150px;
    background: #f6f5f5;
    border-radius: 100px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    line-height: 150px;
}
header h1 a{
    color: #333;
    text-decoration: none;
}

/*ナビゲーション*/
#top-nav{
    float: right;
    width: 500px;
    height: 200px;
    position: relative;
}
nav a{
    padding: 10px 15px;
    color: #444;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}
nav a:hover{
    text-decoration: underline;
}
#top-nav ul{
    height: 40px;
    width: 450px;
    position: absolute;
    bottom: 0;
    right: 0;
    list-style: none;
}
#top-nav ul li{
    float: left;
}

/*コンテンツ横幅*/
.site-width{
    width: 980px;
    margin: 0 auto;
}

section h1.title{
    font-family: 'Montserrat', sans-serif;
    text-align: center;
}
#about , #merit , #recruit{
    margin-top: 80px;
    margin-bottom: 80px;
}

/*パネル*/
.panel{
    background: #f6f5f5;
    border: 1px solid #eee;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
  margin: 0 15px;
  padding: 15px;
  width: 30%;
  float: left;
  box-sizing: border-box;
    min-height: 380px;
}
.panel h2{
    color: #333;
    text-align: center;
}

/*テーブル*/
table{
    background: rgb(246,246,246);
    border: 1px solid #eee;
    width: 100%;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    padding: 10px;
    margin: 10px 0;
    text-align: left;
    font-size: 14px;
}
th,td{
    padding: 5px 0;
    border-bottom: 1px dotted #ccc;
}
table thead tr th{
    color: #333;
    padding-bottom: 15px;
}
table thead tr th.color1{
    color: rgb(230,140,31);
    font-size: 18px;
}
table tbody th{
    color: rgb(142,130,113);
}

#merit{
    overflow: hidden;
}

/*フッター*/
footer{
    font-size: 12px;
    padding: 15px;
    background: #333;
    text-align: center;
    color: #f6f5f5;
}
footer a{
    color: #f6f5f5;
}

/*contact*/
#contact{
    margin-bottom: 150px;
}

/*フォーム*/
form{
    width: 50%;
    margin: 0 auto;
}
input,textarea{
    font-size: 18px;
    margin-bottom: 15px;
}
input[type="text"]{
    width: 100%;
    height: 60px;
    border: none;
    background: #f6f5f5;
    padding: 10px;
    box-sizing: border-box;
}
textarea{
    width: 100%;
    height: 400px;
    border: none;
    background: #f6f5f5;
    padding: 10px;
    box-sizing: border-box;
}
input[type="submit"]{
    background: #333;
    border: none;
    padding: 15px 30px;
    color: white;
    float: right;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

body{

color: #444;

margin: 0;

padding: 0;

line-height: 150%;

}

/*トップバナー*/

#top-baner{

width: 100%;

}

/*ヘッダー部分*/

header{

margin-bottom: 15px;

height: 200px;

}

header h1{

font-size: 20px;

font-family: 'Montserrat', sans-serif;

margin: 15px;

padding: 20px;

text-align: center;

float: left;

height: 150px;

width: 150px;

background: #f6f5f5;

border-radius: 100px;

-webkit-border-radius: 100px;

-moz-border-radius: 100px;

line-height: 150px;

}

header h1 a{

color: #333;

text-decoration: none;

}

/*ナビゲーション*/

#top-nav{

float: right;

width: 500px;

height: 200px;

position: relative;

}

nav a{

padding: 10px 15px;

color: #444;

text-decoration: none;

font-size: 14px;

font-weight: bold;

}

nav a:hover{

text-decoration: underline;

}

#top-nav ul{

height: 40px;

width: 450px;

position: absolute;

bottom: 0;

right: 0;

list-style: none;

}

#top-nav ul li{

float: left;

}

/*コンテンツ横幅*/

.site-width{

width: 980px;

margin: 0 auto;

}

section h1.title{

font-family: 'Montserrat', sans-serif;

text-align: center;

}

#about , #merit , #recruit{

margin-top: 80px;

margin-bottom: 80px;

}

/*パネル*/

.panel{

background: #f6f5f5;

border: 1px solid #eee;

border-radius: 3px;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

margin: 0 15px;

padding: 15px;

width: 30%;

float: left;

box-sizing: border-box;

min-height: 380px;

}

.panel h2{

color: #333;

text-align: center;

}

/*テーブル*/

table{

background: rgb(246,246,246);

border: 1px solid #eee;

width: 100%;

border-radius: 3px;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

padding: 10px;

margin: 10px 0;

text-align: left;

font-size: 14px;

}

th,td{

padding: 5px 0;

border-bottom: 1px dotted #ccc;

}

table thead tr th{

color: #333;

padding-bottom: 15px;

}

table thead tr th.color1{

color: rgb(230,140,31);

font-size: 18px;

}

table tbody th{

color: rgb(142,130,113);

}

#merit{

overflow: hidden;

}

/*フッター*/

footer{

font-size: 12px;

padding: 15px;

background: #333;

text-align: center;

color: #f6f5f5;

}

footer a{

color: #f6f5f5;

}

/*contact*/

#contact{

margin-bottom: 150px;

}

/*フォーム*/

form{

width: 50%;

margin: 0 auto;

}

input,textarea{

font-size: 18px;

margin-bottom: 15px;

}

input[type="text"]{

width: 100%;

height: 60px;

border: none;

background: #f6f5f5;

padding: 10px;

box-sizing: border-box;

}

textarea{

width: 100%;

height: 400px;

border: none;

background: #f6f5f5;

padding: 10px;

box-sizing: border-box;

}

input[type="submit"]{

background: #333;

border: none;

padding: 15px 30px;

color: white;

float: right;

}

ウェブカツは「年収1000万円」を目指すフリーランスITエンジニアを育成するオンライン最大級のプログラミングスクールとして、元医師やBIG4税理士法人会計士など高学歴高経歴な方から、中卒土方、40代主婦、海外在住者など様々な方が通われています。
現役ITエンジニアとして活躍し、富裕層でプロのファイナンシャルプランナーでもある顧問「かずきち」が教える【フリーランスITエンジニアになって10年で1億の資産を築く方法】など他のプログラミングスクールとは全く異なり、「転職をゴール」とはせずに「会社に依存せずに外で稼げる力」を身につけさせています。