ウェブサイトの作り方：初心者向け

あなたはいつもウェブサイトを作りたいと思っていましたか？たぶんあなたは私たちのHTMLのいくつかを読んだことがあります（ HTMLを理解する ）およびCSSチュートリアルですが、より大きなプロジェクトでこれらの言語を使用する方法がわかりません。

今日は、完全なWebサイトを最初から作成するプロセスをご案内します。これが難しい作業のように思われる場合でも心配しないでください。すべてのステップでガイドします。

---

---

このWebサイトは、HTML、CSS、およびJavaScriptを使用してjQuery（jQueryのガイド）を使用して作成します。あなたは何もしません 本当 最先端であるため、このコードはほとんどの最新のブラウザでかなりうまく機能するはずです。

CSSがわからない場合は、 CSSガイド で W3Schools.com 。

デザイン

これがこのウェブサイトのデザインです。見栄えを良くしたい場合は、高解像度の画像をご覧ください。プロジェクト全体をここからダウンロードしてください。

私はこのウェブサイトを架空の会社のためにデザインしました アドビフォトショップ 2017.興味がある場合は、バンドルのダウンロードから.PSDファイルを取得してください。フォトショップファイルで取得できるものは次のとおりです。

PSD内には、グループ化され、名前が付けられ、色分けされたすべてのレイヤーがあります。

---

---

正しく表示するには、いくつかのフォントをインストールする必要があります。最初は FontAwesome 、すべてのアイコンに使用されます。他の2つのフォントは PTセリフ およびMyriadPro（Photoshopに含まれています）。フォントのインストール方法がわからない場合は、ガイドをお読みください。

持っていなくても心配しないでください アドビフォトショップ 、続行するためにそれは必要ありません。

---

---

初期コード

デザインが明確になったので、コーディングを始めましょう！お気に入りのテキストエディタで新しいファイルを作成します（私は使用しています 崇高なテキスト3 ）。これを名前を付けて保存 index.html 。これは好きなように呼ぶことができます。多くのページがインデックスと呼ばれる理由は、Webサーバーの動作方法によるものです。大多数のサーバーのデフォルト構成では、ページが指定されていない場合、index.htmlページを提供します。

詳細を知りたくない場合は、ダウンロードから完全なコードを入手してください。

必要なコードは次のとおりです。





Noise Media


/* CSS goes here, at the top of the page */





/* JavaScript goes here, at the bottom of the page */




これはいくつかのことを行います：

• 必要最小限のHTMLを定義します。
• 「ノイズメディア」のページタイトルを定義します
• Google CDN（CDNとは）でホストされているjQueryが含まれています。
• GoogleCDNでホストされているFontAwesomeが含まれています。
• を定義します スタイル CSSを書き込むためのタグ。
• を定義します 脚本 JavaScriptを書き込むためのタグ。

ファイルをもう一度保存して、Webブラウザで開きます。あなたはおそらくあまり気付かないでしょう、そしてそれは確かにまだウェブサイトのようには見えないでしょう。

ページタイトルがどのようになっているかに注目してください ノイズメディア 。これは、内部のテキストによって定義されます 題名 鬼ごっこ。この もっている 中にいること 頭 タグ。

Wiiをスマートテレビに接続する方法

ヘッダー

ヘッダーを作成しましょう。これは次のようになります。

上部にある小さな灰色のビットから始めましょう。ライトグレーで、下に少しダークグレーがあります。これがクローズアップです：

このHTMLを内部に追加します 体 上部のタグ：

あなたがここにいる間に、これを分解しましょう。 NS div 他のものを入れるコンテナのようなものです。この「他のもの」は、より多くのコンテナ、テキスト、画像、実際には何でもかまいません。特定のタグに入れることができるものにはいくつかの制限がありますが、divはかなり一般的なものです。それは id の トップバー 。これは、CSSでスタイルを設定し、必要に応じてJavaScriptでターゲットにするために使用されます。特定のIDを持つ要素が1つしかないことを確認してください。これらは一意である必要があります。複数の要素に同じ名前を付ける場合は、 クラス 代わりに-それは彼らが設計されたものです！スタイルを設定するために必要なCSSは次のとおりです（上部に配置します スタイル 鬼ごっこ）：

html, body {
margin: 0;
padding: 0;
font-family: 'Helvetica', 'Arial'; /* initial fonts */
}
#top-bar {
width: 100%;
background: #F1F1F1; /* light gray */
border-bottom: 1px solid #D4D4D4; /* dark gray 'underline' */
height: 25px;
}

名前の前にハッシュ記号（＃、ハッシュタグ、ポンド記号）がどのように使用されているかに注意してください。これは、要素がIDであることを意味します。クラスを使用している場合は、代わりにピリオド（。）を使用します。 NS html と 体 タグのパディングとマージンはゼロに設定されています。これにより、不要な間隔の問題が防止されます。

ロゴとナビゲーションバーに移りましょう。始める前に、このコンテンツを入れるためのコンテナが必要です。これをクラスにしましょう（後で再利用できるように）。 いいえ レスポンシブウェブサイトの幅を900ピクセルにします。

HTML：




CSS：

.normal-wrapper {
width: 900px;
margin: 0 auto;
padding: 15px 40px;
background: red;
overflow: auto;
}

コードが完成するまで何が起こっているのかを判断するのは難しい場合があるため、（一時的な）色付きの背景を追加して、何が起こっているのかを確認すると便利です。

background: red;

今度はロゴを作成します。 FontAwesome アイコン自体に必要です。 Font Awesomeは、ベクターフォントとしてパッケージ化されたアイコンのセットです-素晴らしいです！上記の最初のコードはすでにFontAwesomeをセットアップしているので、すべて準備ができています！

このHTMLを追加します 中身 NS 通常のラッパー div：





CSS：

.logo-icon {
color: #000000;
font-size: 60pt;
float: left;
}
h1 {
float: left;
margin: 21px 0 0 25px;
}

他のフォントがデザインと一致しないことを心配する必要はありません。後で整理します。別のアイコンを使用したい場合は、 FontAwesomeアイコン ページ、そして変更 fa-ボリュームダウン 使用したいアイコンの名前に。

ナビゲーションバーに移動すると、順序なしリストを使用します（ NS ） このため。このHTMLを追加します 後 NS ロゴコンテナ （しかし、まだ内部 通常のラッパー ）：

• Home


• About


• Reviews


• Contact

NS href 他のページへのリンクに使用されます。このチュートリアルWebサイトには他のページはありませんが、名前とファイルパス（必要な場合）をここに入力できます。 reviews.html 。これを両方の二重引用符で囲んでください。

CSSは次のとおりです。

#navbar {
list-style-type: none; /* remove bullet points */
margin: 29px 0 0 0;
padding: 0;
float: right;
font-size: 16pt;
}
#navbar li {
display: inline; /* make items horizontal */
}
#navbar li a:link, #navbar li a:visited, #navbar li a:active {
text-decoration: none; /* remove underline */
color: #000000;
padding: 0 16px 0 10px; /* space links apart */
margin: 0;
border-right: 2px solid #B4B4B4; /* divider */
}
#navbar li a:link.last-link {
/* remove divider */
border-right: 0px;
}
#navbar li a:hover {
/* change color on hover (mouseover) */
color: #EB6361;
}

このCSSは 順序付けられていないリスト 。次に、を使用して箇条書きを削除します list-style-type：なし; 。リンクは少し離れており、マウスをリンクの上に置くと色が付けられます。小さな灰色の仕切りは各要素の右側の境界線であり、最後の要素では ラストリンク クラス。これは次のようになります。

このセクションに残っているのは、赤い水平方向の色のハイライトだけです。このHTMLを 通常のラッパー ：

そしてこれがCSSです：

#top-color-splash {
width: 100%;
height: 4px;
background: #EB6361;
}

これが一番上のセクションです。これがどのように見えるかです-デザインにかなり似ていますか？

メインコンテンツエリア

今度は、メインコンテンツ領域（いわゆる「フォールドの上」）に移動します。この部分は次のようになります。

これは非常に単純な部分で、左側のテキストと右側の画像があります。このエリアは ゆるく 3分の1に分割され、おおよそ 黄金比 。

この部分のサンプル画像が必要になります。ダウンロードに含まれています。この画像の幅は670ピクセルで、Panasonic Lumix DMC-G80 / G85レビューからのものです。

HTMLを追加する 後 NS トップカラースプラッシュ エレメント：

Welcome!

Noise Media is a technology company specialising in tech reviews.

We’re very good at what we do, but unfortunately, we are not a real company.

Make sure you visit makeuseof.com for the full tutorial on how to build this website.

ワイヤレスヘッドフォンをxboxoneに接続する方法

Alternatively, check out our review of the Panasonic G80 shown on the right!

どのように 通常のラッパー 要素が返されました（それがクラスを使用する喜びです）。なぜ画像（ img ）タグが閉じない。これは自己終了タグです。スラッシュ（ /> ）は、タグを閉じる必要があるとは限らないため、これを示します。

CSS：

.one-third {
width: 40%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
margin-top: 20px;
}
.two-third {
width: 60%;
float: left;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
padding-left: 40px;
text-align: right;
margin-top: 20px;
}
.featured-image {
max-width: 500px; /* reduce image size while maintaining aspect ratio */
}
.no-margin-top {
margin-top: 0; /* remove margin on things like headers */
}

ここで最も重要な属性は ボックスサイズ：border-box; 。これにより、要素の幅が常に40％または60％になります。デフォルト（この属性なし）は、指定した幅にパディング、マージン、および境界線を加えたものです。画像クラス（ 注目の画像 ） があります 最大幅 の 500px 。 1つの寸法（幅または高さ）のみを指定し、もう1つの寸法を空白のままにすると、cssはアスペクト比を維持しながら画像のサイズを変更します。

見積もりエリア

見積もり領域を作成しましょう。これは次のようになります。

これは別の単純な領域です。背景は濃い灰色で、テキストは中央が白です。

このHTMLを追加します 後 以前 通常のラッパー ：

makeuseof is the best website ever

Joe Coburn

そしてこのCSS：

#quote-area {
background: #363636;
color: #FFFFFF;
text-align: center;
padding: 15px 0;
}
h3 {
font-weight: normal;
font-size: 20pt;
margin-top: 0px;
}
h4 {
font-weight: normal;
font-size: 16pt;
margin-bottom: 0;
}

ここでは多くのことが起こっていません。サイズ設定は、フォントサイズ、間隔など、必要な主な調整です。これが全体が今どのように見えるかです-それはウェブサイトのように見え始めています！

アイコンエリア

押し続けましょう-ほぼ完成です！作成が必要な次の領域は次のとおりです。

このパートでは、いくつかのクラスを利用します。 3つのアイコンは、コンテンツを除いてほとんど同じであるため、IDの代わりにクラスを使用するのが理にかなっています。このHTMLを追加します 後 以前 見積もりエリア ：

YouTube

Checkout our YouTube channel for more tech reviews, tutorials and giveaways!

Reviews

If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.

Buying Guides

At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.

これらの3つのアイコンも フォント-素晴らしい 。 HTMLは再びを使用しています 通常のラッパー クラス。 CSSは次のとおりです。

.icon-outer {
box-sizing: border-box; /* ensure padding and borders do not increase the size */
float: left;
width: 33.33%;
padding: 25px;
margin: 0;
text-align: center;
}
.icon-circle {
background: #EEEEEE;
color: #B4B4B4;
width: 200px;
height: 200px;
border-radius: 200px; /* make rounded corners */
margin: 0 auto;
border: 2px solid #D6D6D6;
box-sizing: border-box; /* ensure padding and borders do not increase the size */
font-size: 75pt;
padding: 30px 0 0 0;
cursor: pointer;
}
.icon-circle:hover {
/* change color on hover (mouseover) */
color: #FFFFFF;
background: #EB6361;
}
h5 {
margin: 15px 0 10px 0;
font-size: 20pt;
}

CSSではいくつかの新しいことが起こっています。丸みを帯びた角はによって設定されています border-radius：200px; 。この値を幅と同じに設定すると、完全な円になります。角が丸い正方形をもっと好む場合は、これを減らすことができます。ホバーアクションがdivにどのように適用されるかに注意してください。リンクだけに制限されていません。このセクションは次のようになります。

フッター

最後にすべきことはフッターです！これは、テキストのない灰色の領域であるため、非常に簡単です。アイコン領域の後にこのHTMLを追加します。 通常のラッパー ：

CSSは次のとおりです。

#footer {
width: 100%;
background: #F1F1F1; /* light gray */
border-top: 1px solid #D4D4D4; /* dark gray 'topline' */
height: 150px;
}

参照してください-本当に単純なもの。

いくつかのPizzazzを追加します

以上で、コーディングは完了です。あなたは絶対に物事をそのままにしておくことができます、それは完成したウェブページです。しかし、あなたはそれが見えないことに気づいたかもしれません まさに デザインのように。これの主な理由は、使用されるフォントです。それを整理しましょう。

ほとんどのタイトルに使用されているフォントは 無数のプロ 。これは付属しています アドビ クラウドを作成しますが、ウェブフォントとしては利用できません。ウェブページで現在使用されているフォントは ヘルベチカ 。これは問題ないように見えるので、そのままにしておくことができます PT Sans Webフォントとして利用できます。すべてのテキストに使用されるフォントは PTセリフ 、これはWebフォントとして利用できます。

Webフォントは単純なプロセスです。コンピュータに新しいフォントをロードするのと同じように、Webページはオンデマンドでフォントをロードできます。これを行うための最良の方法の1つは Google Fonts 。

このCSSを追加して、より適切なフォントに切り替えます。

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=PT+Serif');
h1, h2, h4, h5, h6 {
font-family: 'PT Sans', 'Helvetica', 'Arial';
}

次に、新しいフォントを使用するようにhtml要素とbody要素を変更します。

font-family: 'PT Serif', 'Helvetica', 'Arial';

h3要素がリストに含まれていないことに注意してください-これはデフォルトで PT-セリフ それ以外の PT-Sans 。

最後に、JavaScriptを使用して、3つの異なる注目の画像をスクロールしてみましょう。必要になるだろう Image_2 と Image_3 この部分についても、これもオプションです。この機能がなくても、この時点でWebサイトは完全に機能しています。これがどのように見えるか（スピードアップ）です：

HTMLを変更して、3つの注目画像を含めます。これらのうちの2つがCSSクラスを持っていることに注意してください 隠れた 。 JavaScriptがそれぞれを個別にターゲットにできるように、各画像にはIDが割り当てられています。







追加の注目画像を非表示にするために必要なCSSは次のとおりです。

.hidden {
display: none;
}

HTMLとCSSが処理されたので、JavaScriptに切り替えましょう。この部分のドキュメントオブジェクトモデル（DOM）を理解することは有用ですが、必須ではありません。

を見つける 脚本 ページ下部の領域：


/* JavaScript goes here, at the bottom of the page */


内に次のJavaScriptを追加します 脚本 鬼ごっこ：

/* JavaScript goes here, at the bottom of the page */
$(document).ready(function() {
// run once the page is ready
var time = 2500;
// get the image containers
$im1 = $('#f-image-1');
$im2 = $('#f-image-2');
$im3 = $('#f-image-3');
setInterval(function(){
// call function every x milliseconds (defined in time variable above)
changeImage();
}, time);
var currentImage = 1;
function changeImage(){
switch(currentImage) {
case 1:
// show image 2
$im1.hide();
$im2.show();
$im3.hide();
currentImage = 2;
break;
case 2:
// show image 3
$im1.hide();
$im2.hide();
$im3.show();
currentImage = 3;
break;
default:
// show image 1
$im1.show();
$im2.hide();
$im3.hide();
currentImage = 1;
}
}
});

ここで起こっていることがいくつかあります。コードは中に含まれています $（document）.ready（） 。これは、ブラウザがページのレンダリングを完了すると実行されることを意味します。これは良い習慣です。 NS setInterval（） 関数は、を呼び出すために使用されます changeImage（） ミリ秒単位の事前定義された間隔で定期的に機能します（1000ミリ秒= 1秒）。これはに保存されます 時間 変数。これを増減して、スクロールを速くしたり遅くしたりできます。最後に、単純なcaseステートメントを使用して、さまざまな画像を表示し、現在表示されている画像を追跡します。

コーディングチャレンジ

それでおしまい！うまくいけば、あなたはその過程でたくさんのことを学びました。チャレンジが好きで、新しく見つけたスキルをテストしたい場合は、次の変更を実装してみてください。

フッターを追加します。 フッターにテキストを追加します（ヒント：再利用できます 通常のラッパー と 3分の1/3分の2 クラス。）。

画像のスクロールを改善します。 JavaScriptを変更して、画像の変更をアニメーション化します（ヒント：jQueryを見てください） フェードイン と アニメーション ）。

複数の引用符を実装します。 引用符を変更して、いくつかの異なる引用符の1つを変更します（ヒント：開始点として画像のスクロールコードを確認してください）。

サーバーをセットアップします。 サーバーをセットアップし、Webページとサーバー間でデータを送信します（ヒント：JSONとPythonのガイドをお読みください）。

メールに関連付けられているすべてのアカウントを見つける方法

JavaScriptの使用に慣れたら、またはRubyの使用経験がある場合は、GatsbyJSやJekyllなどの静的Webサイトビルダーを使用してWebサイトを作成してみてください。

共有 共有 つぶやき Eメール Windows10デスクトップのルックアンドフィールを変更する方法

Windows 10の見栄えを良くする方法を知りたいですか？これらの簡単なカスタマイズを使用して、Windows10を独自のものにします。

次を読む 関連トピック

• プログラミング
• HTML
• ウェブデザイン
• CSS

著者について ジョーコバーン（136件の記事が公開されました）

Joeは、英国のリンカーン大学でコンピュータサイエンスを卒業しています。彼はプロのソフトウェア開発者であり、ドローンを飛ばしたり音楽を書いたりしていないときは、写真を撮ったりビデオを制作したりしていることがよくあります。

ジョーコバーンのその他の作品

ニュースレターを購読する

ニュースレターに参加して、技術的なヒント、レビュー、無料の電子書籍、限定セールを入手してください。

購読するにはここをクリックしてください