ホームページの開設方法：初心者の方へ

今日は、ゼロから完全なウェブサイトを作成するプロセスをご案内します。もし、これが難しく思えるなら、心配しないでください、私がすべてのステップをご案内します。

ホームページを作りたいと思ったことはありませんか？HTML（HTMLを理解する）やCSSのチュートリアルは読んだことがあっても、これらの言語を大規模なプロジェクトでどのように使ったらいいのか分からないという方もいらっしゃるでしょう。

今日は、ゼロから完全なウェブサイトを作成する方法をご案内します。難しそうに見えても、ステップバイステップでご案内しますので、ご安心ください。

このサイトをHTML、CSS、JavaScriptで生成し、jQuery（jQueryガイド）を使って操作していただきます。最先端のことをするわけではないので、このコードはほとんどのモダンブラウザでうまく動作するはずです。

CSSがあるかどうかわからない場合は、W3のCSSガイドスクールのサイトをご覧ください。

デザイン

このサイトのデザインです。もっとよく見たい方は高解像度の画像をご覧ください。プロジェクトの全容はこちらからダウンロードできます。

Adobe Photoshop 2017で、架空の会社のホームページをデザインしました。興味のある方は、パッケージのダウンロードから.PSDファイルを入手するようにしてください。フォトショップファイルの中身はこんな感じです。

PSDでは、すべてのレイヤーがグループ化され、名前と色分けがされています。

正しく表示させるためにインストールする必要があるフォントがいくつかあります。1つ目は、すべてのアイコンにFont Awesomeを採用したこと。他の2つのフォントは、PT SerifとMyriad Pro（Photoshopを含む）です。フォントのインストール方法がわからない場合は、こちらのガイドをご覧ください。

adobephotoshopをお持ちでない方は、このままでも大丈夫ですのでご安心ください。

初期コード

デザインが明確になったので、さっそくコーディングしてみましょう。お気に入りのテキストエディタで新規ファイルを作成します（私はSublime text 3を使用しています）。index.htmlとして保存し、何度でも呼び出すことができます。 Webサーバーの仕組み上、多くのページがindexと呼ばれています。多くのサーバーは、ページを指定しない場合、index.htmlの1ページ目を返すようにデフォルトで設定されています。

詳細を知りたくない方は、ダウンロードから全コードを取得してください。

必要なコードはこちらです。

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Noise Media</title><link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><style>/* CSS goes here, at the top of the page */</style></head><body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" type="text/javascript"></script><script type="text/javascript">/* JavaScript goes here, at the bottom of the page */</script></body></html>

これによって、いくつかのことが可能になります。

必要最低限のHTMLを定義する。
"Noise Media "のページタイトルを定義する。
Google CDNでホストされているjQueryが含まれています（CDNとは何ですか）。
Google CDNでホストされているフォントが含まれています。
CSSを記述するためのスタイルタグを定義する。
JavaScriptを記述するためのscriptタグを定義する。

ファイルを保存し直して、ウェブブラウザで開いてみてください。おそらく、あまり気づかないでしょうし、確かにまったくウェブサイトのようには見えないでしょう。

ページタイトルがノイズメディアになることに注意。これはtitleタグの中のテキストで定義される。

タイトル

タイトルを作ってみましょう。こんな感じです。

明るいグレーと、その下の少し暗いグレーです。

このHTMLを一番上のbodyタグに追加してください。

ここにいる間に、これを分解する。潜水艦は、何かを入れる容器のようなものです。この「何か他のもの」は、容器以上のもの、テキスト、画像、本当に何でも構いません。特定のタグに入るものには制限がありますが、divはかなり汎用的です。これはトップバーのidを持ち、必要に応じてCSSでスタイルを設定し、JavaScriptでターゲットにするために使用されます。特定のidを持つ要素は1つだけであることを確認してください。複数の要素に同じ名前を付けたい場合は、代わりにクラスを使用します - そのために設計されています。スタイル付けに必要なCSSは以下の通りです（styleタグの先頭に配置してください）。

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;}

名前の前にハッシュ記号（#、hashtag、pound sign）が使われていることに注意してください。これは、その要素がIDであることを意味します。もし、aクラスを使用している場合は、フルストップ（.）.htmlタグとbodyタグは、paddingとmarginが0に設定されています。これにより、無駄なスペーシングの問題を防ぐことができます。

さて、いよいよロゴとナビゲーションバーに移ります。その前に、このコンテンツを入れる容器が必要です。クラスとして設定し（後で再利用できるように）、今回はレスポンシブなサイトではないので、幅900ピクセルに設定しましょう。

HTML形式です。

CSS形式です。

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

コードが完成するまで何が起こっているのか分かりにくいので、（一時的に）色付きの背景を追加しておくと、何が起こっているのかが分かりやすくなります。

background: red;

さて、いよいよロゴの作成です。Font Awesomeは、ベクターフォントとしてパッケージされたアイコンのセットで、素晴らしいです。上記の初期コードはすでに設定されているので、すべて準備完了です。

このHTMLを通常のwrapper divに追加します。

<div id="logo-container"><i class="fa fa-volume-down logo-icon"></i> <h1>Noise Media</h1></div>

CSS形式です。

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

他のフォントがデザインに合っていなくても気にしないでください。別のアイコンを使いたい場合は、Font Awesome ic*** のページで fa volume を使いたいアイコンの名前に変更してください。

ナビゲーションバーに移動して、この操作には「順序なしリスト（UL）」を使用することになります。ロゴコンテナの後に、このHTMLを追加してください（ただし、プレーンラッパーのままです）。

<ul id="navbar"><li><a href="">Home</a></li><li><a href="">About</a></li><li><a href="">Reviews</a></li><li><a href="" class="last-link" >Contact</a></li></ul>

hrefは他のページへのリンクに使用されます。このチュートリアルサイトには他のページはありませんが、ここに名前とファイルパス（必要な場合）を入力することができます。必ずダブルクォーテーションで囲んでください。

以下の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は、順序なしリストから始まります。次に、リストスタイルtype:none; remove bulleted items;を使用します。リンクは少し間隔をあけて配置され、カーソルを合わせると色が付きます。グレーの小さな区切り線は各要素の右側のボックスで、その後、最後のリンククラスを使って最後の要素の右側のボックスを削除します。こんな感じです。

この部分には赤い水平方向のカラーハイライトだけが残ります。このHTMLをプレーン・ラッパーの後に追加してください。

以下はCSSです。

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

これが上の部分です。こんな感じで、デザインにとてもよく似ていますよね？

主なコンテンツ領域

いよいよメインのコンテンツ部分、いわゆる「オーバーレイ」に移りますが、このような形になっています。

左側にテキスト、右側に画像を配置した、非常にシンプルなセクションです。この面積は、おおよそ黄金比に近い3分の1になります。

このセクションには、例の画像が必要です。ダウンロードに含まれています。この画像は幅670pxで、パナソニックLUMIX DMC-G80/G85のレビューから引用しています。

トップカラースプラッシュ要素の後にHTMLを追加します。

<div class="normal-wrapper"><div class="one-third"><h2 class="no-margin-top">Welcome!</h2><p>Noise Media is a technology company specialising in tech reviews.</p><p>We’re very good at what we do, but unfortunately, we are not a real company.</p><p>Make sure you visit makeuseof.com for the full tutorial on how to build this website.</p><p>Alternatively, check out our review of the Panasonic G80 shown on the right!</p></div><div class="two-third"><img class="featured-image" src="Image_1.jpg" /></div></div>

通常のラッパーの要素がどのように返されるかに注目してください（これがクラスを使うことの面白さです）。なぜ画像（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%になるようにします。このプロパティがない場合のデフォルト値は、指定された幅にパディング、マージン、ボーダーを加えたものになります。imageクラス（feature image）の最大幅は500pxです。widthまたはheightの1次元のみを指定し、他の次元を空白にすると、cssは画像の縦横比を維持したままリサイズを行います。

見積りエリア

引用部分を作ってみましょう。

これもシンプルなフィールドで、濃いグレーの背景に白を中心とした文字が書かれている。

前のプレーンラッパーの後に、このHTMLを追加します。

<div id="quote-area"><div class="normal-wrapper"><h3>“makeuseof is the best website ever”</h3><h4>Joe Coburn</h4></div></div>

それから、この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ではなくclassを使うのは理にかなっています。前回の引用部分にこのHTMLを追加した後。

<div class="normal-wrapper"><div class="icon-outer"><div class="icon-circle"><i class="fa fa-youtube logo-icon"></i></div><h5>YouTube</h5><p>Checkout our YouTube channel for more tech reviews, tutorials and giveaways!</p></div><div class="icon-outer"><div class="icon-circle"><i class="fa fa-camera-retro logo-icon"></i></div><h5>Reviews</h5><p>If you’re planning to buy a new gadget, check here first. We’ll give you in-depth reviews of the latest devices.</p></div><div class="icon-outer"><div class="icon-circle"><i class="fa fa-dollar logo-icon"></i></div><h5>Buying Guides</h5><p>At Buying Guides we strive to provide readers with the tools to get the best stuff for the lowest amount of money.</p></div></div>

3つのアイコンも素晴らしい。HTMLはまた通常のラッパークラスを使用しています。

.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;}

見てください。とてもシンプルなものです。

ピザを追加する

以上で、コーディングは完了です。そのままでいいんです、完全なWebページなんですから。しかし、デザインとは全く同じでないことにお気づきでしょうか。その最大の理由は、使用されているフォントにあります。それを解決しよう。

このフォントはadobecreatecloudに付属していますが、ウェブフォントとして使用することはできません。現在、Webで使われているフォントはHelveticaです。これは見た目が良いのでそのままでも良いのですが、PT SansはWebフォントとして使うことができます。すべてのテキストに使用されているフォントは、ウェブフォントであるPT Serifです。

Webフォントは簡単な操作でパソコンで新しいフォントを読み込むように、Webページにもオンデマンドでフォントを読み込むことができます。その最良の方法のひとつが、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 SansではなくPT Serifがデフォルトになります。

最後に、JavaScriptを使って、3種類の特集画像をスクロールしてみましょう。このセクションでは、画像2と画像3が必要ですが、これもオプションです。この機能がなくても、現時点では十分に機能します。こんな感じです（スピードアップしています）。

3つの特集画像が含まれるようにHTMLを修正する。そのうちの2つはCSSのクラスが非表示になっていることに注意してください。各画像はIDを持つので、JavaScriptは各画像を独立してターゲットにすることができます。

追加機能の画像を非表示にするには、以下のCSSが必要です。

.hidden {display: none;}

HTMLとCSSが扱われたので、JavaScriptに切り替えましょう。このセクションでDOM（Document Object Model）を理解することは有用ですが、必須条件ではありません。

ページ下部にあるスクリプトエリアです。

scriptタグに以下の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()に含まれています。setInterval() 関数は、あらかじめ定義されたミリ秒間隔（1000ミリ秒＝1秒）で定期的に changeImage() 関数を呼び出すために使用されます。時間変数に格納される。この値を増減することで、スクロールの速度を速くしたり遅くしたりすることができます。最後に、単純なcase文を使って、別の画像を表示し、現在表示されている画像を追跡しています。

コーディングの課題

それだ！その中で、多くのことを学んでいただけたと思います。チャレンジ精神旺盛な方、新しい技術を試したい方は、これらの改造を実践してみてはいかがでしょうか。

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

画像スクロールの改善：JavaScriptを修正して、画像変化のアニメーションを設定する（ヒント：jqueryfadeinを調べてアニメーションを設定する）。

複数の引用符を実装する：複数の異なる引用符のうちの1つを変更するように引用符を修正する（ヒント：出発点として画像スクロールコードを表示する）。

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

JavaScriptの使い方に慣れてきたら、あるいはRubyの経験があれば、Gat**yJSやJekyllなどの静的ウェブサイトビルダーでウェブサイトを作成してみるのもよいでしょう。

2021-03-15 13:25 に公開
閲覧 ( 33 )
分類：プログラミング