サイトのコーディング方法（完全初心者ガイド）

サイトのコーディングを学ぶことは、高収入の仕事や無限のチャンスへの扉を開くことができる、非常に価値のあるスキルです。ほとんどのサイトはHTML、CSS、JavaScriptを使用して構築されており、マスターするには努力と練習が必須です。

ウェブサイトを作りたいと考えている方に朗報です。ゼロから始める必要はないのだ。優れたドラッグ＆ドロップ・ツールを使えば、コードを一行も書かずにどんなサイトでも作ることができます。

この包括的なガイドでは、これらのツールを使って簡単に機能的なサイトを作成する方法を探ります。また、基礎から学びたい方のために、ゼロからコーディングの基礎も解説しますので、コーディングを学ぶことでサイトを構築することができます。

サイトビルダーとコーディングの比較

インターネットの黎明期、サイト構築は複雑だった。開発者はゼロからサイトをコーディングしなければならず、数週間とは言わないまでも数時間はかかっていたからだ。

しかし、そんな時代はもう過去のものとなった。

インターネット上のすべてのウェブサイトの62.9％以上がウェブサイトフレームワークでビルトインされているため、開発者はもうゼロからウェブサイトを構築する方法を知る必要はありません。

現在、ほとんどの開発者は、ウェブサイト構築をスピードアップするために、オープンソースのWordPressやその他のCMSプラットフォーム（ウェブサイト・ビルダー・フレームワーク）を使用している。

私たちは、すべてのサイトにコード不要のページビルダー（WordPressとSeedProd）を使用しています。便利で、カスタマイズ可能で、効率的です。

95％の場合、ウェブサイトビルダーやコード不要のソリューションでサイトを構築することができ、ゼロからコードを書くのと同じようになります。

サイトビルダーを利用する利点と欠点

サイトビルダーを利用するメリットは以下の通りです：

• 初心者でも使いやすい。
• ウェブ開発を学ぶために時間やお金を投資する必要はない。
• 時間を節約し、その分をビジネスの成長に充てることができる。
• お金をかけずにeコマース、会員制、ビジネスサイトを簡単に構築できます。

しかし、サイトビルダーを使うことにはいくつかの欠点がある：

• あなたのサイトには不必要な機能があり、それがサイトを遅くしている可能性があります。
• プロジェクトにCMS機能は必要ないかもしれないが、ソフトウェアの更新やバックアップを維持する必要はある。

ゼロからコードを書くことの長所と短所

ゼロからすべて自分でコードを書くことの利点をいくつか挙げてみよう：

• サイトには必要なコードだけが表示され、読み込みが速くなります。
• ソフトウェアの更新を維持する必要はない。
• WordPressのキャリアにつながる貴重なプログラミングスキルを身につけることができます。

しかし、これらの利点と以下の欠点を比較する必要がある：

• 何時間も何日もかけて、HTML、CSS、JavaScriptのコードを学ぶことになる。
• あらかじめビルトインされたバックエンドシステムを利用することができないため、コンテンツを動的に生成するのは難しいだろう。さらに、PHPやPythonのようなサーバーサイド言語を学ぶ必要がある。
• コンテンツの追加や更新には、複数のファイルの編集が必須となる。
• 新機能の追加、SEO（検索エンジン最適化）、サードパーティツールとの統合は難しい。
• 自分のサイトへのアクセスを、他の誰かに完全にコントロールさせることなく、簡単に共有することはできない。
• もし開発者を雇ってコードを書いてもらうとしたら、高くつくし、費用対効果もあまりよくない。

時間はあなたの最も貴重な資産であるため、コード作成を代行してくれるツールを使ってサイトをコーディングする最速の方法を紹介する（方法1と2でカバーする）。

方法3では、ゼロからサイトを作る方法についてのリソースを共有します。プログラミングを学びたい学生には最適です。

ということで、サイトのコーディング方法を見ていきましょう。以下のクイックリンクから、使いたい方法にジャンプできます：

1.WordPressでカスタムサイトを作る

WordPressは最も人気のあるサイト構築プラットフォームです。実際、弊社のCMSマーケットシェアレポートによると、WordPressはインターネット上のすべてのサイトの43%以上を支えています。

私たちはすべてのサイトにWordPressを使用しています。WordPressの詳細なレビューでは、その長所と短所について詳しく説明しています。

コードを学ばずとも、ゼロからカスタムサイトを作成できる複数のツールを備えている。

私たちがよく使うWordPressデザインツールはSeedProdです。100万以上のサイトで使用されている、ドラッグ＆ドロップの最高のウェブサイトビルダーです（SeedProdのレビューをご覧ください）。

WordPressを始めるには、ドメイン名とホスティングサービスが必要です。私たちはBluehostを使用することをお勧めします。

彼らはWordPressホスティングサービスのトッププロバイダーのひとつで、読者にはドメイン名を無料で提供し、ホスティングを大幅割引（月額わずか1.99ドル）で提供している。

代替を検討したい場合は、ホスティングサービス、SiteGround、または他の最高のWordPressホスティング会社のいずれかをお勧めします。

ドメインとホスティングサービスを取得したら、次のステップはWordPressのインストール（正しい方法）です。

Bluehostのようなほとんどのホスティングサービスは、1クリック、ユーザーフレンドリーなWordPressのインストールプロセスへのアクセスを提供します。

WordPressをインストールしたら、管理ダッシュボードにログインします。このように表示されます：

次に、SeedProdプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストールに関するチュートリアルをご覧ください。

SeedProdは、WordPressのための最高のWordPressドラッグアンドドロップページビルダーです。コードを書くことなく、簡単に自分のサイトをデザインし、美しいページを作成することができます。

WordPressのカスタムテーマをゼロから作成することもできます。このテーマは、ユーザーがサイトを訪れたときに目にするフロントエンドとなります。

SeedProdをインストールしたら、SeedProd ” ランディングページページのページに行き、’新規ランディングページの追加’ボタンをクリックするだけです。

次の画面では、テンプレートの選択を求められます。

SeedProdには美しくデザインされたテンプレートが何十種類も用意されており、それらをスターターポイントとして使用することもできますし、’Blank Template’を選択して空のページから始めることもできます。

その後、ページのタイトルとURLスラッグを入力するよう求められます。

例えば、サイトのトップページを作成する場合、タイトルとURLに「Home」と入力します。

そして、「Save and Start Editing the Page」ボタンをクリックします。

SeedProdはページビルダーのインターフェースを読み込みます。これは直感的なページビルダーで、ポイント＆クリックするだけで編集を開始できます。

SeedProdのドラッグ＆ドロップインターフェースは、初心者には簡単ですが、開発者には十分強力です。

左の列には、ページに追加できるブロックとして、最も一般的に使用されるウェブデザイン要素が表示されます。

右側には、デザインのライブプレビューが表示されます。任意の要素をポイント＆クリックするだけで、編集、削除、移動ができます。

基本的に、ナビゲーションメニュー、サイドバー、フッターなどのカスタマイザーウェブデザインを、コードを書くことなく作成することができます。

ただし、カスタムコードを追加する必要がある場合は、カスタムHTMLブロックをドラッグ＆ドロップすることで追加できます。

カスタムHTMLブロックの中に、手動で任意のHTMLコードを追加することができます。

カスタムHTMLブロックのマージン、パディング、デザイン属性を調整することもできます。

同様に、ページにカスタムCSSコードを追加することもできます。

左下の「設定」ボタンをクリックし、「カスタマイザー」を選択するだけです。

ページの編集が完了したら、「保存して公開する」ボタンをクリックして公開します。

また、「プレビュー」ボタンをクリックして、ページを実写で表示することもできます。

このプロセスを繰り返すだけで、あなたのサイトの他のページを作成できます。数分で中小企業のサイトを素早く作成することができます。

SeedProdサイトビルダーは、簡単にウェブサイトを作成し、編集することができます。

そのため、多くのプロの開発者が世界中で使用しています。Awesome Motiveのような大企業の開発者でさえ、SeedProdを使用して主要なサイトを構築しています。

SeedProdの代替品

WordPressのページビルダーは他にもいくつかあります。以下は、実際にコードを書くことなくゼロからサイトをコーディングする初心者におすすめのトップピックです：

• Thrive Architect– 357以上のデザイン済みレイアウトがある、コンバージョンに特化したページビルダー。
• Divi Builder– ドラッグ＆ドロップのテーマとページビルダー
• Beaver Builder– もう一つの有名なWordPressページビルダー
• Astraは、ワンクリックでインストールできるレディメイドのスターターサイトを備えた、カスタマイズ性の高いテーマです。

私たちはWordPressに偏っていますが、その人気はWordPressが物語っています。BBC、Microsoft、Facebook、The New York Timesなど、多くの大企業がWordPressを使っています。

2.Web.com ウェブサイトビルダーでサイトをコーディングする

ドメインの取得、ホスティングサービス、WordPressのような様々なソフトウェアのインストールなどの手間をかけたくないのであれば、Web.comウェブサイトビルダーを利用することができる。

シンプルなビジネスサイトやオンラインストアを構築するのに最適なプラットフォームだ。ガイド付きウィザードも用意されている。

Web.comの料金プランには、無料のドメイン名、無料のSSL証明書、数十種類のテンプレート、ウェブサイトのコピーを素早く作成するのに役立つAIライティングツールが含まれています。

何千もの美しい既成のサイトテンプレートから選び、ポイント＆クリックであなたのブランドのニーズに一致するようにデザインをカスタマイズするだけです。

このビルダーには、期待される強力な機能がすべて備わっています。

フォトギャラリー、動画、お客様の声スライダー、お問い合わせフォーム、マップロケーション、ソーシャルメディアボタンなどを簡単に追加できます。

Web.comがすべて行ってくれるので、更新やセキュリティ、バックアップについて心配する必要はありません。また、24時間365日のチャット、メール、電話によるサポートも提供しています。

Web.comの代替

オールインワンのソリューションはたくさんあります。Constant Contactを除けば、以下はWordPress以外の簡単なサイト構築のトップピックです：

• Gator by HostGator– ドラッグアンドドロップツールとテンプレートを備えた完全ホスティングサービスサイトビルダー。
• Domain.com ウェブサイトビルダー– すべてのタイプのウェブサイトのための数十の美しいテンプレートを持つホスティングウェブサイトビルダー
• HubSpot– 中小企業向けオールインワンサイトビルダー＆マーケティングプラットフォーム
• Wix– ドラッグ＆ドロップでウェブサイトを作成できる、もう一つの有名なサイト。
• BigCommerce– eコマースストアを作成するための完全ホスティングサービスウェブサイトビルダー。

より多くのオプションについては、長所と短所を備えた最高のウェブサイトビルダーの比較を参照してください。

カスタマイザーにカスタムサイトをデザインしてもらいたいですか？Web.comのチームはカスタムWebデザインサービスも提供しており、ユーザー限定のお得なサービスを提供しています。今すぐ無料お見積もりを。

3.ゼロからサイトのコーディングを学ぶ

もしあなたが学生で、ゼロからウェブサイトのコーディング方法を学びたいのであれば、HTMLやCSSなどのウェブサイト開発の基礎を理解する必要があります。

無料や有料のコースはたくさんあるが、私たちが見つけた最高のコースはCode Academyのコースだ。

所要時間はおよそ9時間ですが、終了時にはHTML、CSS、Bootstrapを使ったカスタム・レスポンシブ・ウェブサイトのコーディングをゼロから学ぶことができます。

コースを修了しても、ゼロからサイトをコーディングできるようになるまでには、何時間もの練習が必要です。次のセクションでは、HTMLとCSSを使ったごく基本的なサイトのコーディング方法を紹介します。

基本的な静的サイトのコーディング

ウェブサイトはHTML、CSS、そして時にはJavaScriptを使用します。

HTML（Hyper Text Markup Language）は、画像、テキスト、動画などのコンテンツを含むウェブページの基本的なレイアウトを定義します。

CSSは、色、マージン、パディング、テキストサイズなどを定義します。

このコードを書くには、コードエディターが必要です。コードエディターにはシンタックスハイライトが付属しており、ミスを簡単に発見し、より効率的にコードを書くのに役立ちます。

次に、プロジェクトを開始する必要がある。

コンピューター上に新しいフォルダーを作成し、好きな名前を付けてください。ここにあなたのサイトのファイルをすべて保存します。

コードエディターを開き、新規ファイルを作成します。これはあなたのサイトのトップページになるので、index.htmlという名前をつけることをお勧めします。

このファイルに、最初のウェブページのHTMLコードを記述します。

基本的なHTMLページには以下のセクションがある。

• HTMLドキュメント・ラッパー
• ヘッド
• ボディ

この構造は以下のコードで定義できる：

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>

    </body>
</html>

doctype HTML宣言は、それがHTMLページであることをウェブブラウザーに伝えるだけである。

その後、ヘッド・セクション内のコードは画面に表示されなくなる。

HTML文書のタイトルやCSSファイルへのリンクなど、HTML文書のメタデータを定義します。

では、HTMLページのheadセクションを埋めてみよう：

<!DOCTYPE html>
<html>
    <head>
		<title>Star Plumbing Services</title>
		<link rel="stylesheet" href="style.css" /> 
    </head>
    <body>

    </body>
</html>

ウェブサイトの本文セクションは、ページのレイアウトを定義し、コンテンツを追加する場所です。

以下は、ヘッダー、メインコンテンツエリア、フッターを持つサンプルウェブページの例である：

<!DOCTYPE html>
<html>
    <head>
		<title>Star Plumbing Services</title>
		<link rel="stylesheet" href="style.css" /> 
    </head>
    <body>
		<header id="header" class="site-header"> 
		<h1 class="site-title">Star Plumbing Services</h1>
		<nav class="site-navigation">
		<ul class="nav-menu">
		<li><a href-"index.html">Home</a></li>
		<li><a href="about.html">About</a></li>
		<li><a href="contact.html">Contact</a></li> 
		</ul>
		</header> 
		
		<article id="main" class="content"> 
		
		<h2>The Best Plumbing Service Providers in Pawnee!</h2>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
		
		<p><a href="contact.html" class="cta-button">Call Now</a></p>
		
		<p><img src="images/plumbing-services.jpg" alt="Star plumbing services at work" width="600px" /></p>
		
		<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		</article> 
		
		<footer>
		<p>© 2023 Star Plumbing Services. All Rights Reserved - Call us +1-5555-5555</p>
		</footer> 

    </body>
</html>

ダミーのコンテンツを自由に置き換えて、変更を保存することをお忘れなく。

HTML文書を保存したら、ブラウザーでプレビューできます。このような外観になります：

それは、HTMLドキュメントが存在しない2つのファイルを指しているからだ。最初のファイルはCSSスタイルシートです。

CSS（カスケーディング・スタイル・シート）もコーディング言語のひとつです。HTMLドキュメントのHTML要素、ビルディング・ブロック、divセレクタのスタイリングに使用されます。

コードエディターを使ってstyle.cssというファイルを作成し、index.htmlファイルと同じフォルダーに保存するだけです。

その後、style.cssファイルに以下のコードを追加する：

body {
	margin:0;
	padding:0;
	font-family:sans-serif; 
	font-size:16px;
	background-color:#f2ffee;
}

h1, h2, h3 { 
font-family:Georgia, Times, serif; 
} 

h2 { 
font-size:xx-large;
}

.site-header {
background-color:#2751ac;
width:100%;
padding:20px; 
overflow: auto;
color:#FFF;
	} 

	
.site-title { 
float:left; 
}

.site-navigation { 

float:right;
text-align:right;
margin:20px 50px 0px 0px;
} 

ul.nav-menu { 
list-style-type:none;
list-style:none;
}
ul.nav-menu li { 
display:inline;
padding-right:20px;
}


.site-header:after{ 
clear:both;
}

#main {

margin:0 auto; 
background-color:#FFF;
	} 

.content {
	
max-width:60%;
padding:30px;
margin:50px 0px 50px 0px;
font-size:18px;
}

.content p { 
margin:50px 20px 50px 20px; 

}

a.cta-button {
    background-color: green;
    padding: 20px 100px 20px 100px;
    color: #fff;
    text-decoration: none;
    font-size: xxx-large;
	border:2px solid #abfcab;
	border-radius:18px;
   
}

footer {
background-color:#2751ac;
width:100%;
padding:20px; 
overflow: auto;
color:#FFF;
	} 

これでスタイリングは完了です。ただし、CSSはここで紹介した以外にもいろいろなことができることに注意してください。

ユーザーエクスペリエンスの向上、アニメーションの追加、メディアクエリーによる画面サイズに合わせた要素の調整などに利用できます。

次に、やはり画像をアップロードする必要がある。

プロジェクト内に新しいフォルダーを作成し、名前をimagesにするだけです。

次に、表示したい画像を作成し、それをimagesフォルダーに追加する必要があります。

次に、HTMLコード内の画像名を「plumbing-services.jpg」からあなたの画像ファイル名に変更します。

すべての変更を保存し、ブラウザーでページをプレビューすることをお忘れなく。

このプロセスを繰り返すだけで、サイトの他のページを作成することができます。index.htmlファイルを他のページのテンプレートとして使用するだけです。

この投稿が、サイトのコーディング方法を学ぶのに役立てば幸いです。WordPressを選んだのであれば、1週間以内にWordPressを（無料で）学ぶか、初心者に最適なコードエディターをご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.