サイトのコーディングを学ぶことは、高収入の仕事や無限のチャンスへの扉を開くことができる、非常に価値のあるスキルです。ほとんどのサイトは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を使っています。
ヒント: WordPressの設定にお困りですか?当社の専門チームが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.
Syed Balkhi
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Ayanda Temitayo
While no-code tools like WordPress and other CMS platforms have democratized website creation, I still advocate for learning the fundamentals of the web development languages as mentioned in this article: HTML, CSS, JavaScript, and PHP.
Although writing code to develop a website takes a lot of time against using no-code tools like wordpress. But you can easily tweek the functionalities and customise it to your taste.
Great insight in this article. Thanks
Peter Iriogbe
Although WordPress and other CMS platforms have made it easier for many people with no coding experience to create an awesome website, I still recommend learning the basics of web development languages mentioned in this article: HTML, CSS, JavaScript, and PHP. Acquiring knowledge in these languages will enable users to manually customize their site or address issues without spending a dollar.
Additionally, gaining proficiency in these languages opens up endless possibilities for creative and functional enhancements to your website.
THANKGOD JONATHAN
I never thought I could code a website, but this guide made it seem so easy. I’m excited to know that I can build my own site now! However, with WordPress here I don’t think there is anything to worry about.
Jiří Vaněk
I’ve learned a lot about using artificial intelligence lately. For instance, it’s fantastic for WordPress snippets. I specify exactly what I need for WordPress to create an AI-generated snippet. It’s not always successful on the first try, but we get to the result. What’s great is that once the snippet works, I ask AI to explain how each element functions. It’s taught me a lot.
WPBeginner Support
You need to be careful of AI hallucinating but that is certainly a way to learn more
管理者
Moinuddin Waheed
I have also utilised chatgpt for writing specific code snippets and coming from somewhat coding background it easily makes sense for me what works and what doesn’t.
These tools have speed up the process of writing code for the better. we only need to make some tweak to suit our needs.
Jiří Vaněk
But it is good to pay attention to the security of the plugin. Some codes can be written incorrectly by the AI. Therefore, just to be sure, I have a snippet written using chat GPT, and when I get to the point that it works, I usually have it checked with Bard from Google to tell me if there is any gap in the code. Pretty good practice to eliminate the problem.
A Owadud Bhuiyan
Thanks for sharing.
Have you any articles regarding inspecting website?
WPBeginner Support
We have a guide on how to use inspect element that you can take a look at below:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
管理者
Ralph
I remember learning HTML in school and was proud of first website that was basically plain text and color background. However after many years i came to conclusion it is just not for me and I prefer website builders. But knowing basics and having any idea how “to think” is really helpful when you want to customize something, that theme author didn’t think about.
Jiří Vaněk
I started out with HTML, and my initial websites were in HTML. Then, in 2006, I began working at a data center as a second-level administrator and started learning WordPress, Joomla, phpBB, and Drupal. That led me to grasp the basics of PHP and CSS. Particularly, knowing CSS nowadays is truly beneficial because even though you can download a ready-made template or use Elementor, if you know CSS, you can fine-tune everything to your liking.
Moinuddin Waheed
writing code for making websites requires time and effort which at times people will be overwhelmed and left in the process. there are benefits of course in learning to code but it is not every one’s cup of tea.
whereas using modern tools to create website is much more easier and cost effective although there are some downside to it as well.
these plugins like seedprod have made the life of every developer easier and efficient.
Thanks for making a holistic approach of pros and cons of each side.
WPBeginner Support
You’re welcome!
管理者
Olaniyi Ifeoluwa
Thanks for this helpful Article.
Please concerning coding a website from scratch, do I still need to purchase domain and hosting.
WPBeginner Support
You can create the site on your computer if you wanted for testing. To allow users to see your site, we would recommend using a hosting provider and a domain as those would be required then.
管理者
Muntaha
I liked this one because all in it helps always….Thank you
WPBeginner Support
Glad you found our guide helpful
管理者
Ehis
This is great Thanks a million
WPBeginner Support
You’re welcome
管理者
Esther
This was very helpful!
WPBeginner Support
Glad our article was helpful
管理者
Muhammad Atif
Wow, Nice article. I am really proud of you for great tutorials, tips and hacks. Started Wpbegginer by a Pakistani Syed Balkhi.
Feeling good.
WPBeginner Support
Thank you, glad you like our content
管理者