きょうは「無料でサイト制作」について学びます。
「バグったとき誰かに相談できればもっと早くマスターできたのになあ」と後悔したことないですか？
「バグったら PC で調べる！」で、何とかそれでも問題なかったことも事実ではないでしょうか。相談する人がパソコンだったということですね。
それとも、学習意欲が自分自身の中にかっては確かに存在し、それはあらゆる活動の源だったかもしれません。しかし今、それは燃えカスのようなものしかなくなってしまったような気がしているのかも知れません。
きょうは無料でサイト制作について学習します。
１．「どういう開発にどの言語を使用しているのか？」
これが分からないと学ぶ言語を選べませんね。 初めて学ぶ言語を間違えると「難しい！」となり、挫折の原因にもなります。
「Web 制作を考えている人」は 当記事を実践することでクラウドワークスで1～5万円くらいの案件がこなせるようになります。独学は自由な反面、つい時間に流されがちですが「実際に動かしてみよう！」を合言葉にがんばりましょう。
現在、インターネットで閲覧できるほとんどのサイトは HTML を使って作成されています。
HTML を知ることで簡単に編集したり、より実用的なホームページ・ブログを作成したりすることができるようになります。HTML の基本や画像の挿入、表やリストの作成、リンクの設定、デザインを設定する CSS などを習得していただいてウェブページを作ってください。
１. ドットインストール「詳細 HTML 基礎文法編」
ドットインストールの特徴は、3分くらいの短い動画でプログラミングの基礎から応用まで学べるってとこや。これが初心者にとってほんまにええんや。長い時間集中するんが難しい人でも、ちょっとずつ学べるから続けやすいんやで。
動画は日本語でわかりやすく解説されてるし、実際にコードを書きながら学べるスタイルやから、実践的にスキルが身につくんや。しかも、無料で見れる動画もいっぱいあるから、お財布にも優しいんや。
そやから、ドットインストールはプログラミングやウェブ開発を始めたい初心者にとって、ほんまにおすすめの学習プラットフォームやで！ぜひ試してみてな。
ウエブページを作るための言語である HTML の基礎的な文法について無料公開中
24講座の3分動画でマスターできるプログラミング学習サービスです。初心者の方向けにプログラミングの仕組みを知ることができ、質問と回答欄も設けられています。
》詳細 HTML 基礎文法編（全24回）-プログラミングのドットインストール
》詳細 CSS 基礎文法編（全23回）-ブログラミングのドットインストール
ドットインストールは数ある国内のプログラミング学習サービスの中でも、先駆けで、初心者からプロまで幅広く支持されています。
初心者は、学習のために分厚い書籍から入ってしまいそこで難しさを感じて挫折してしまう方も少なくないので、まず動画教材で学びはじめましょう。動画は情報量を短縮しているので重要なところだけ学べます。初心者にはこのドットインストールがぴったりです。
ドットインストールはプログラミングやウェブ開発の初心者にとって人気のある学習プラットフォームであり、HTMLの基礎文法を学ぶためのコースも提供しています。多くの学習者にとっては、分かりやすく実践的な講義内容が特徴的であり、初心者にとって有益な情報を提供していると評価されています。
ただし、具体的な個人の評判は個人の意見によるものであり、人それぞれ異なる場合があります。他の学習者のレビューやフィードバックを参考にすることで、より具体的な評判を知ることができるでしょう。また、最新の評判や口コミを探すために、インターネット上のフォーラムやレビューサイトを調べることもおすすめです。
２．世界一わかりやすい HTML5 CSS3
Web サイトの構造/構成についての知識全般を身につけ、基本的な HTML タグおよび CSS プロパティを使って初歩的な Web ページを作成できる技術が習得できます。各章に練習問題が１～２題用意されています。
ドットインストールの「動画」をみて理解して、「世界一わかりやすい HTML5 & CSS」を読んでみれば初歩的な Web ページを作成できる技術が習得できます。
「世界一わかりやすいHTML5＆CSS3コーディングとサイト制作の教科書」
初心者向けのHTML5とCSS3の学習教材として広く知られています。
この教科書は、初めてHTMLとCSSを学ぶ人でもわかりやすく解説されていることが特徴であり、実践的な手順や具体例を通じて学習を進めることができます。多くの人から好評を得ており、初心者にとっては有益な情報源となっていると評価されています。
ただし、個人の評判や感想は個人の意見に基づくものであり、人によって異なる場合があります。他の学習者のレビューやフィードバックを参考にすることで、より具体的な評判を知ることができるでしょう。また、最新の評判や口コミを探すために、インターネット上のフォーラムやレビューサイトを調べることもおすすめです。
３．Web 開発でよく使う Chrome ディベロッパーツールの使い方
ここでデベロッパーツールの使い方をマスターしておくことが大切です。私が学んでいたころはこのツールがあることを知りませんでした。技術は日々進化しています。このツールの使い方は以下の記事に詳しく載っています。
ディベロッパーツールの起動
まずはディベロッパーツールを起動せなあかん。方法はいくつかあるんやけど、一番簡単なんは次のどれかを使うことや：
- ページ上で右クリックして「検証」を選ぶ
- F12キーを押す
- Ctrl + Shift + I（Windows）もしくは Cmd + Option + I（Mac）を押す
メインの機能
ディベロッパーツールには色んなタブがあるから、それぞれの基本的な使い方を紹介するで。
Elementsタブ
ここではHTMLとCSSを直接編集できるんや。例えば、特定の要素を右クリックして「Edit as HTML」を選んだり、スタイルを変更したりできるんや。
- 要素を選んで右クリック → 「Edit as HTML」
- CSSスタイルを変更するには、右側のスタイルペインでプロパティを変更する
Consoleタブ
ここではJavaScriptのコードを直接実行したり、エラーの確認ができるんや。デバッグや実験的なコードを試すのに便利やで。
console.log('Hello, world!');と入力してEnter- エラーメッセージやログが表示される
Networkタブ
このタブではネットワークリクエストの状況を確認できるんや。ページの読み込み速度を調べたり、特定のリソースがちゃんと読み込まれてるか確認できるで。
- ページをリロードして、リクエストの詳細を確認
- 各リクエストをクリックして、ヘッダーやレスポンスの内容をチェック
Sourcesタブ
ここでは、ページのJavaScriptファイルを確認したり、ブレークポイントを設定してデバッグできるんや。
- 特定のJavaScriptファイルを選んで表示
- コードの行番号をクリックしてブレークポイントを設定
Applicationタブ
このタブでは、WebストレージやCookieの内容を確認できるんや。ローカルストレージやセッションストレージのデータを管理したりできるで。
- 左側のメニューから「Local Storage」や「Cookies」を選ぶ
- 右側のパネルで内容を確認、編集
Chromeディベロッパーツールはウェブ開発にめっちゃ便利なツールやから、色々と触ってみて慣れるのがええで。基本の使い方はこんな感じやけど、もっと詳しく使いこなしたいなら公式のドキュメントも参考にしてな。
ChromeデベロッパーツールはWeb開発者にとって非常に便利なツールです。
ツールを開く
- WindowsやLinuxの場合: Ctrl + Shift + I
- macOSの場合: Cmd + Option + I
- または、Chromeのメニューから「その他のツール」>「デベロッパーツール」を選択します。
HTMLとCSSの編集
- Elementsパネルで、ドキュメントの構造やスタイルを表示および編集できます。要素を選択し、右側のスタイルペインでCSSプロパティを追加、変更、削除することができます。
デバッグとエラーの修正
- Consoleパネルでは、JavaScriptのエラーやデバッグ情報を表示します。また、JavaScriptのコードを実行したり、DOM要素を操作したりすることもできます。
ネットワークの監視
- Networkパネルでは、リクエストとレスポンスの詳細情報、レスポンスのステータスコード、レスポンスヘッダなどを表示します。パフォーマンスの改善やネットワークの問題のトラブルシューティングに役立ちます。
デバイスのエミュレーション
- Device Toolbarを使用して、異なるデバイスや画面サイズでの表示をエミュレートできます。レスポンシブデザインのテストやモバイルフレンドリーなサイトの確認に役立ちます。
パフォーマンスのプロファイリング
- Performanceパネルでは、ページの読み込みと実行のパフォーマンスを評価できます。タイムラインの記録やプロファイルの作成を行い、ボトルネックやパフォーマンスの改善点を特定することができます。
これらはChromeデベロッパーツールの一部ですが、その他にも多くの機能があります。実際に使いながら試してみることで、より詳細な使い方を学ぶことができます。また、公式ドキュメントやオンラインチュートリアルも参考にすると良いでしょう。
》Web開発でよく使う Chrome デベロッパー・ツールの機能 – Build Insider
》初心者向け！Chrome の検証機能（デベロッパーツール）の使い方
》Chrome DevTools の使い方を解説！
４．フレームワーク Bootstrap を使う
フレームワークとは、「枠組み」「構造」などといった意味で、その土台となる機能で進めていくのが一般的です。サイトを自分の手で一から作ると面倒です。フレームワークには、あらかじめ必要な機能が用意されているのでシステム独自の処理を組み込めば完成です。
軽量で機能が絞り込まれているなど多種多彩なフレームワークがあります。目的のアプリをゼロから開発する必要がないので、作業を大幅に短縮できます。ただし、特有のコードがあるために、そのコードを覚えなければならないという欠点もあります。
Bootstrap（ブートストラップ）はメリットがたくさんあります。Twitter でも使われています。スマホやタブレットなどに対応するスタイルを作っていると大変手間がかかります。ブラウザの横幅サイズ、レイアウトデザインを調整できるのです。
Bootstrapは、HTML、CSS、JavaScriptを使用してウェブサイトやウェブアプリケーションを開発するための人気のあるフロントエンドフレームワークです。
１．Bootstrapのインストール:
Bootstrapを使用するには、まず必要なファイルをダウンロードするか、CDN（Content Delivery Network）を使用してファイルにアクセスする必要があります。以下の方法のいずれかを選択してください。
a. ダウンロード: Bootstrapの公式ウェブサイト（https://getbootstrap.com）から最新のリリースをダウンロードして、プロジェクトのディレクトリに配置します。
b. CDN: HTMLファイルの<head>セクション内に、次のCDNリンクを追加します。
２．Bootstrapの利用方法:
Bootstrapを使用するには、HTMLファイル内でBootstrapのクラスやコンポーネントを使用します。以下はいくつかの基本的な例です。
a. グリッドシステム:
Bootstrapのグリッドシステムを使用すると、レスポンシブなレイアウトを作成できます。以下は、2つのカラムを持つ基本的なグリッドの例です。
b. ボタン:
Bootstrapのボタンクラスを使用すると、スタイリッシュなボタンを作成できます。以下は、基本的なボタンの例です。
c. ナビゲーションバー:
ナビゲーションバーを作成するためには、Bootstrapのナビゲーションバークラスを使用します。以下は、基本的なナビゲーションバーの例です。
これらはBootstrapの一部の基本的な機能の例です。Bootstrapにはさまざまなコンポーネントやクラスがありますので、公式ドキュメント（https://getbootstrap.com/docs）を参照して詳細を確認してください。また、カスタマイズやテーマの適用など、さらに高度な使い方も可能です。
》【旧版】Bootstrap 4.0入門 (全22回) – プログラミングならドットインストール
５．Webサイトにアクセスを集める「SEO入門編」
Web サイトを作成する際、ツールを開いていきなり作業をすることもできますが、その前にまとめておきたいことがあります。事前準備なしで作ってしまうと途中で迷った時にどのような方向性で作成していいかわからなくなってしまうこともあります。
もっとも大切なことは「Web サイトの役割を知る」「Web サイトを開設する目的をはっきりする」です。「名刺代わりに」「パンフレットとして」「販促・集客に」「求人に」など、役割や目的が決まったら、あなたの Web ページに訪問して欲しい「対象者」をはっきりさせます。
閲覧してほしい人は、男性？女性？何歳ぐらい？
”何となく集めたい”というサイトでは誰もひきつけることはできません。そもそも検索結果の上位に表示されないと誰にも見られません。検索エンジンに「良いサイト！」だと判断してもらう必要があります。
そこで必要となってくるのが SEO です。あるキーワードで検索されたとき、上位表示を狙うために必要となる技術です。では、どういった流れで SEO を勉強していくべきか見ていきましょう。
１. これからはじめる SEO 内部対策の教科書
少し刊行が古いですが、CSS の基本が集約されています。価格が高いので２の足を踏むかも知れません。そこは図書館等で借りだして読んではいかがでしょうか？
2. SEOで成果を出すために必要な知識と実践方法の全て
Webマーケティング業界ではかなり有名です。記事は多いのですが、初心者の方はバズ部の中で必読記事3つご紹介します。
》SEO内部対策で行うべき２０の事
》SEO対策｜検索上位を独占するために弊社が行っている36の対策手順
》ロングテールSEOで検索アクセスを倍増させるための基礎知識と具体策
２．キーワードプランナーで読まれる文章を書ける
SEO がわかると Web サイトに続々と閲覧者が増えてきます。しかし、記事の質が低かったら読者は失望し、以後閲覧することはないでしょう。リピーターを増やす努力なしに未来はありません。
そこで必要となってくるのがライティング技術です。すばらしい文章が書ければ鬼に金棒です。その文章力はどのように鍛えるか？
それは、「書き方の基本」を確立することです。そのために必読な記事と書籍をご紹介します。
》たった1記事で8万人に読まれる文章を書けるようになるライティング術
》コンテンツマーケティングの進め方｜弊社が広告費ゼロで10倍の売上を達成した手法
「人心掌握」「大衆煽動」を文章に応用し、 読み手の心を自在に操る「メンタリズム文章術」を大公開。 「読み手の見たい現実を見せてあげる」という、 相手の心理を先回りした「想像力を刺激する」書き方のテクニック。
自分の思いをどうやって「言葉」にして「伝える」か? 「うまく自分の言葉で話せない」「人の心に刺さる表現力を身につけたい」そんな悩みを抱えている全ての人に、独自の手法をわかりやすく開示する、人の心を動かす言葉の法則。
「見向きもされない文章」を「思わず読んじゃう」に一発変換! — 「文章がつまらないといわれる」「内容には自信があるのに」「サイトの反応が少ない」—そんな悩みを解決させる77の技法。
１．【徹底図解】キーワードプランナー使い倒し術
次に学ぶべきことは「検索ボリューム」です。あるキーワードがどのくらいの回数で検索されているかという意味です。これを測るには、Google のキーワード別の検索ボリュームで調べることができます。
３．WordPress で Web サイトを制作する
１．わかりやすい本を
FC サイトの制作・運営を行ったのち、企業の Web 担当者として企画・運営・制作など Web にかかわるあらゆく業務を経験してきた著者ならではの内容です。体系的に、ポイントを無駄なく押さえています。短時間に要点だけをマスターするにはピッタリです。
Web 制作初心者に最初にオススメしたいのが WordPress です。WordPress は CMS というシステムで、初めてでも安心な、思い通りの Web サイトがつくれるツールです。オリジナルの高機能なテンプレート（ひな形）を使って、きれいな見やすい Web サイトをかんたんに作ることができます。
ローカル PC でテーマを制作して公開サーバへという実践的な手法を通じて現場で役立つ力を身につけます。では、WordPress を使って実際にWebサイトをつくっていきましょう。具体的な勉強方法を書いていきます。
相場に関しては、「ランサーズ」の相場価格が参考になります。
見積前の商談サイト制作ヒヤリングシートです。
1. ドットインストール（WordPress 入門）
人気のプログラムシステムである WordPress について、基本的な使い方やゼロからテーマを作る方法についてです。とりあえず#01〜#06までを見ておきましょう。それ以上の部分は、現時点だと少し難しいです。1つの動画が3分なので、6つの動画は約20分で閲覧できます。
2. WordPress はじめてのデザイン＆カスタマイズ入門
WordPressで、専門知識がなくても Web サイトの更新が簡単になりました。管理画面やテンプレートの構成が複雑なため、デザインのアレンジ・カスタマイズを行いたいと思ったときに、 お手上げとなってしまうこともあります。
そこで本書は、きちんとした手順で目的のデザイン・カスタマイズを行うための方法をまとめました。
WordPressはじめてのデザイン＆カスタマイズ入門
3. WordPress でブログを作成してみる
ここでブログをつくってみましょう。HTML/CSS/SEO/コピーライティング/WordPress の知識をじっさいに活用していきます。
管理画面からテンプレートを WordPress にインストールします。『WordPress 無料 テーマ まとめ』などでググると、まとめられた記事が数多くヒットします。お気に入りのテンプレートでインプットしてきた知識をカスタマイズしていきましょう。以下のテーマがオススメです。
世界で最も人気のあるフロントエンド（Webページを記述するエンジニア）のコンポーネントライブラリ（ソフトウェア・ファイル）です。
レスポンシブウェブデザイン（効率的に切りかえをする考え方や具体的な手法）でモバイルファースト（ユーザー＆コンテンツ中心の Web サイト構築によってお客さまのニーズに最適化すること）を実現しています。
Bootstrap は HTML、CSS そして JavaScript で構成されたオープンソース（プログラムソースコードを広く一般に公開し、だれでも自由にあつかってよい）のツールキットです。
Sass（Syntactically Awesome Style Sheets ）で構文的に素晴らしいスタイルシートの略で、CSS を便利に使えるように拡張した言語です。
- 変数とミックスイン（クラスを拡張するクラスのこと）
- レスポンシブ（異なる画面サイズの幅を基準に 見やすく最適な表示にすること）
- グリッドシステム（レイアウトを行う際、無駄なくスッキリした画面を作る手法）。
- 豊富なコンポーネント、jQuery ベースのパワフルなプラグイン（ソフトウェアに機能を追加するためのプログラム）
これらで、あなたのアイデアをすばやく形にします。
- 変数とミックスイン（クラスを拡張するクラスのこと）
- レスポンシブ（異なる画面サイズの幅を基準に Web サイト表示を調整し、見やすく最適な表示にすること）
- グリッドシステム（レイアウトを行う際、画面上に架空の縦横線を引き、そのブロックごとに文字や図版を配置し、無駄なくスッキリした画面を作る手法）。
- 豊富なコンポーネント、jQuery ベースのパワフルなプラグイン（ソフトウェアに機能を追加するためのプログラム）
4. WordPress ブログに広告を載せてみる
ブログでは収益を生むことができます。
- 閲覧者が広告をクリックする（1クリックで1円～）
- 閲覧者がクリックした広告のリンク先で商品購入（購入額の数%）
Web サイト上に掲載するには、Google アドセンス、Amazon アソシエイト、A8.net を使います。
４．Web サイトに動きを入れる
javaScript の環境の準備から、Webでの表示の切り替え、描画、アニメーション、 地図の活用といった利用方法を、サクサク動くサンプルで体験することで、 基本をしっかりとつかむことができます。 プログラミング経験がゼロでも大丈夫!
HTML や Web 開発の学習を進めていくと 次に興味関心が向くのは、「サイトをもっと見やすくしたい」「サイトに動きをつけてみたい」といったことではないでしょうか？
そこで必要となる知識が JavaScript です。JavaScript が難しかったら、今は jQuery を利用します。jQueryは、JavaScript を簡単に記述できるように設計されています。
例えばwebサイトの背景色を変更する場合、JavaScript をつかうとこのようになります。
function changeBackground(color)
{document.body.style.background = color;}
<BODY onload=”changeBackground (‘red’);”>
しかし、jQuery を使って同じ命令を記述すると、
になります。では、じっさいにどういった流れで学習していくべきかを見ていきましょう。
1 .ドットインストール（jQuery入門）
まずは定番のドットインストールです。全20回をしっかり閲覧してください。jQuery について、その基本的な使い方を学びます。 jQuery の全体像がつかめるようになります。
2. jQuery 仕事の現場でサッと使える！デザイン教科書
jQuery をこれから学習する初級者のために、基本的な知識、記述方法、具体的な利用例などを解説します。
「コードの書き換えだけで jQuery が使える」「実際の Web サイト制作に使えるコードを多数紹介」「かんたんな文法解説も行うので、コードの内容もよくわかる」「仕事で使える知識であることを意識した内容とする」といった点が特徴です。
【とことん丁寧】&【ステップアップ解説】だから、知識ゼロからでも本当によくわかる!
基本的な仕組みから、実務で活かせるテクニックまでを徹底詳解! 経験に裏付けられた「わかりにくいポイント」を押さえた解説で確かな基礎力と、実務で活かせる実践力を身につけられる!
５．Web サイトをさらにブラッシュアップ
ここまでくると、Webサイト制作にあるていど満足するかもしれません。しかし、さらに自由度の高いWebサイトをつくりたい方には PHP をおすすめしています。
PHPでは、基本的な機能を備えた「掲示板」や「お問い合わせフォーム」「ショッピングサイト」や、WordPressの「カスタマイズサイトを作ります。
1. よくわかる PHP の教科書
これからWebアプリケーションを作ってみたい。そんな人にぴったりの入門書です。やさしい言葉で分かりやすく書かれているので、プログラミングの用語やコードに拒否感がある人でも、すいすい読み進めることができます。
プログラミングの本を読むのが気が進まない人にとっても、「この本だけは最後まで読めた」と言っていただける1冊です。「少しずつ理解」して「挫折しない」ように、説明の内容や難易度を工夫し、「学ぶ楽しさ」を積み重ねながら進められるように配慮しています。
かなり高額なので中古本か図書館で借りてください。
今、いちばん売れている本はこれです。
2. ドットインストール（PHP入門基礎編）
Web サービス開発でよく使われる PHP の基礎的な文法について学んでいきます。PHP の基礎は味気ないものですから、実際に「つくって動かしてみる」実践的な学習をおすすめします。
応用編の方も見ておいたほうがいいですが、最近ではすばらしいフレームワークが数多くあるので、長いコードを書く必要性が低下しています。
3. みんなの PHP
PHP開発の現場で役立つノウハウを、最新の動向を踏まえてわかりやすく解説します。
PHP開発環境の構築、PHP 7以降で導入された新たな文法の解説とそれらを活用するためのポイント、パッケージ管理システム Composer の使いこなし術。
多様なインフラ上で動作する PHP 実行環境の整理、ユニットテストや CI/CD 導入ノウハウ、人気のフレームワーク Laravel の活用ポイントなど、PHP をもっと使いこなすための情報満載です
4. YouTube で「php tutorial」とus.com/
海外のプログラミングサイトです。有料のもありますが無料で公開されているのもあります。「Learn PHP for WordPress」は無料です！
》初心者から中級者になる秘訣は YouTube にあります。
あとがき
女の人を口説くのは中々難しいことです。まず相手を選ばなきゃならないし、それから、先方が私のことをどのように考えているかも見極めななくてはなりませんし、それから私の気持ちを相手に伝えなければなりません。めんどうなことですがそうやってコツを学んでいる三重県在住のそこそこ年をとっている男性です。
プログラミングは独学できます。実際に、多くのプログラマーが独学でプログラミングを学び、成功を収めています。独学でプログラミングを学ぶためには、
ウェブ上には、プログラミングに関する情報やチュートリアルが豊富にあります。ウェブサイトやブログ、ビデオチュートリアル、オンラインコースなどを利用して、自分のペースで学ぶことができます。
プログラミングに関する書籍やオンラインのチュートリアルも役立ちます。初心者向けの入門書や手引きから、より高度なトピックに特化した書籍まで、幅広い選択肢があります。
プログラミングを学ぶ際には、実際のプロジェクトを作成することも重要です。自分の興味や関心に基づいたプロジェクトを選び、実際にコードを書いて動作させる経験を積むことで、より実践的なスキルを身につけることができます。
プログラミングの学習中には、同じ趣味や目標を持つ他の人々とつながることも重要です。オンラインのプログラミングコミュニティやフォーラムに参加し、他の人と情報やアイデアを共有しながら学ぶことができます。
最後までご覧いただきありがとうございます。この記事は私が Web 制作を独学で学ぶ際に使っている方法です。この方法が必ずあなたに合うとは限りませんが、多少なりとも参考になれば幸いです。プログラミング学習がんばりましょう。
Webサイト制作について、悩みや疑問がありましたらご自由にコメント欄に投稿してください。（コメント欄はこの記事の最下部です）。いただいたコメントはすべて拝見し、真剣に回答させていただきます。
コメント