【ITコンサルが解説!】 シニアのプログラミングの始め方-Webサイト制作編

eyecatch23 趣味・遊び

・はじめに

当記事は、プログラミング初心者の定年シニアが、独学で本格的なWebサイト制作(ブログサイト)に挑戦する場合の始め方ガイドになります。

HTML/CSSというWebサイト制作に必須の基礎知識習得から、WordPressを使って本格的なWebサイト(ブログサイト)を作成して公開するまでを目指します。

Webサイト制作には、HTML/CSSというWebページを作るための言語知識が必要になります。また、最近はWebサイトの多くが、WordPressというソフトを使ってさ作成されています。
これらの技術は、今後Web関係の仕事を行うのには避けて通れません、ぜひこの機会に習得しましょう。将来的にとても役に立つこと請け合いです!

ぜひ、いっしょに頑張りましょう!

HTML/CSSとは?WordPressとは?

1.html-css

HTMLとCSSはWebページを作成する上で必要な、文書構造(HTML)と、見た目の装飾(CSS)を定義する言語です。
また、WordPressはWebコンテンツを管理するソフトウェアです。Webサイト制作が非常に楽になります。

これらは、Webページを作る際の基礎中の基礎技術になります。

HTMLとは

HTMLとはHyperText Markup Languageの略で、WEBページを作成する時に使用される言語です。WEBページの文章内容や構造を指定します。

HTMLの最大の特徴のひとつは、他のファイルとリンクによって関係を持つことができることです。クリックしたら別のページに移動できるリンクに加え、画像や動画を表示させるのもリンク機能のひとつです。

CSSとは

HTMLがWEBページの文章内容や構造を指定するものであるのに対して、WEBページのデザイン(スタイル)を指定するのがCSS(Cascading Style Sheet)です。
※CSSはスタイルシートとも呼ばれます

HTMLとCSSを組み合わせることによって、見栄えのよいWEBページを作成することができます。
具体的には次のようなことができます。

・個々のコンテンツの配置調整
・コンテンツ同士の位置や隙間の調整
・フォントのサイズや種類の調整
・コンテンツの色、背景の色の指定

WordPressとは

WordPressとは、いわゆるコンテンツマネジメントシステム(CMS)というものです。

簡単にいうと、「HTMLやCSSを使ってWebページの制作ができない人でも、簡単にWebのコンテンツを管理できる仕組み」ということです。無料で使えるのが嬉しいです。
ただし、細かい調整や見栄えの向上を図るためには、HTMLやCSSの知識が必要です。

HTML/CSS学習の進め方

HTML/CSS学習の進め方は次の3ステップでいきましょう。
まずは習うより慣れろ。いくら机上の勉強をしてもできるようになりません。実際にコードを書いて、動かなくて悩んで、調べてスキルは向上していきます。
学習のステップは以下の3つです。

①まずお試しでHTML/CSSを使ってみる

②HTML/CSS言語の学習とHTML/CSSでWebページを作る
参考書でHTML/CSS言語の理解 + 動画を見ながらHTML/CSSを使ってWebページを作ります

③WordPressを使って自分のブログを作って公開する。

*******************************************
注)お金をかけたくなければ③は省略してください。
*******************************************

概算費用
・プログラミング学習サイト 1,080円 x月数
・参考書代         3,080円
(以下は省略可)
・Webサイト・ドメイン名代  1,000円 程度
・レンタルサーバー代     1,100円程度 x 月数

まずお試しでHTML/CSSを使ってみる

2.お試し

YouTubeのHTML/CSS入門動画を見る

まず、YouTubeのHTML/CSS入門の動画を見て、HTML/CSSの概要を肌で掴みましょう。
ここでは、なるほど、くらいで大丈夫です。気楽に行きましょう。
※アニメで結構面白いですよ。
JavaScriptも出てきますが、これは次のステップですね。

(参考動画)
【必須で見るべき】HTML/CSSとは?それぞれの特徴をわかりやすく解説!

お試しでやってみる

次に、さっそくお試しでHTML/CSS開発の体験をしてみます。
初心者向けのプログラミング学習サイトを利用します。おすすめは「ドットインストール」最初はもちろん無料です。
(新規無料会員登録が必要。下記参照)

ドットインストールへのリンクはこちら (https://dotinstall.com/)

パソコンとネット環境を準備し、まずはHTML/CSSの「無料コース」を始めてください。
ゲーム感覚で進められるため、飽きずに勉強ができます。
とりあえず、無料の以下のコースを全て終了させましょう。

(無料のお試しのコース)
1.学習環境を整えよう
2.HTML/CSSの概要を理解しよう

新たに開発専用パソコンの購入を考えているかたはこちらの記事の「2.1 PCの準備」を参考にしてください。
【定年エンジニアが解説!】 シニアのプログラミングの始め方 へのリンクはこちら

自己評価をする

いかがでしたか?
HTML/CSSというものに初めて触れたわけですが、案外簡単でしょう。
OKなら次のステップへ進みましょう。
もし、「もう無理と」という印象を持たれた方は、
●「5.次の展開」をお読みください

HTML/CSS言語の基礎学習(動画+本)

3.基礎学習

おめでとうございます!
これからは本格的なHTML/CSSを作っていきましょう。

HTML/CSSの参考書を買って読む

まず、参考書を買いに走りましょう。
参考書は以下がおすすめです。

よくわかるHTML5+CSS3の教科書 ※Amazonへのリンク

まず、1回ざっと読みます。30%理解くらいでで大丈夫。
どこに何が書いてあるかくらいわかればOK。
以上です。

ドットインストールのプレミアムコースで勉強する

次に、ドットインストールのプレミアムコースに申込み、以下のコースを実施する。

3.もっと詳しくHTML/CSSを学んでみよう
4.ウェブサイトをゼロから制作してみよう

動画で学習するとともに、参考書で該当部分の知識の確認をします。動画ではさらっとできてしまうので、本で確認することが大事です。

参考書の練習問題をやる

ドットインストールの動画が一通り終わったら、参考書の練習問題を自分でやってみましょう。
これらが全部できたら、知識が定着したということです。

自己評価をする

いかがでしたか?
HTML/CSSというものを使てって初めてWebページを作ってみたわけですが、案外簡単でしょう。
OKなら次のステップへ進みましょう。
もし、「もう無理と」という印象を持たれた方は、
●「5.今後の展開」をお読みください

WordPressでWebサイトを作る(ブログサイト)

4,wordpress

おめでとうございます!
実際にHTML/CSSでWebページができましたね!
最後はWordPressでWebサイトを作ってみましょう。

ブログの内容とタイトルを考える

まず、どのようなブログにするのかを考えます。Webサイトのコンテンツですね。また、ドメイン名(サイトの識別名)候補をいくつか決めておきます。
ドメイン名は他のサイトとの重複が許されません。既に誰かが使っていたら他の名前にする必要があります。
(例)
1.サイト名:からたち日記(日本語)
2.ドメイン名:karatachi-nikki(ローマ字)

WordPressを使ったブログサイトの構築

以下の、マナブさんのサイトを参照して進めてください。
このとおりやって私は出来ているので大丈夫です。

(記事タイトル)
「WordPressを使ったブログの始め方、収益アップとSEOも合わせて解説」へのリンクはこちら

(手順)
手順①:ドメイン取得
手順②:サーバーレンタル
手順③:ドメインとサーバーの紐付け
手順④:WordPressのインストール
手順⑤:WordPressテーマの設定

注)手順⑤:WordPressテーマの設定では、「cocoon」という無料のテーマが無難です(人気が高い)。ぜひ検索してみてください。

費用は、①ドメイン代、②サーバーレンタル代、の2つしかかかりませんので気を付けてください。
もともとの費用が格安なため、ドメイン会社、レンタルサーバー会社とも追加費用をなんとか得ようとあの手、この手を使ってきます。なので、変な費用の承認はしないよう、十分注意してください。(しつこいメールは「送付不要」と返信すれば来なくなります。)

わからないことが出てきたら、その都度Google検索や、YouTubeで検索してみましょう。たくさん情報があります。
自分で調べて問題解決する能力はこれからも非常に重要です!

どうですか?最終的にWebサイトができましたか?

自己評価をする

いかがでしたか?
WordPressを使って初めてWebサイトを実際に作成してみたわけですが、簡単だったでしょうか。
OKなら5.今後の展開で、今後の進め方を考えましょう。
もし、「もう無理、挫折!」という方は、やはり次の章で対応を検討しましょう。

今後の展開

5.最後のまとめ

WordPressのブログサイトが完成した場合

おめでとうございます。
独学でここまでできたということは凄いことです。Webサイト構築技術者としてのポテンシャルがあります。
WordPressはブログだけでなく、企業や団体等のWebサイト構築にも活用できます。
今後考えられる道として以下が考えられます。

1.クラウドソーシングの案件を受注して稼ぐ
・自分の技術に自信があれば、副業で稼げます
Lancers(ランサーズ)へのリンクはこちら
CroudWorks(クラウドワークス)へのリンクはこちら
2.趣味としてWebサイト制作を楽しむ(継続勉強する)
・やっぱり趣味としてやるのが良いですね。
3.Webシステム構築のための勉強を継続する(独学)
・PHPやRuby、JavaScriptなど、Webシステム構築のプログラミング学習をする。
・本格的な技術者になるには、Web系プログラミング学習をしましょう。リンクはこちら(予定)
4.Webシステム構築のための勉強を継続(スクール)
・プログラミングスクールでさらに技術を磨く
→これ以上自習が厳しそうなら、スクールですね。
(スクール紹介は次の項目を参照)

途中で挫折した場合

1.どうしてもHTML/CSSを身に着けたい場合

スクールに行きましょう。
お金はたくさんお持ちでしょうから、ここは大枚を払ってスクールで徹底的にHTML/CSSを勉強しましょう。先は長くないのですから、時間をお金で買いましょう!

おすすめのスクールは以下の3つです。

①TECH::CAMP https://tech-camp.in/
②TechAcademy https://techacademy.jp/
③DMM WEBCAMP https://web-camp.io/

2.HTML/CSSはもう嫌だが、自分のサイトを持ちたい

「はてなブログ」で自分のブログサイトを持ちましょう。
難しい知識がなくても、無料で自分のサイトが持てます。

はてなブログの無料申込みサイトはこちらです

3.Webサイト構築に嫌気がさした場合

Webサイト構築は諦めて、他の趣味にしましょう。

●定年後の趣味をご紹介したページはこちら

まとめ

さて皆さん、いかがでしたか?
「シニアのプログラミングの始め方-Webサイト制作編」をご紹介しました。これからWebサイト制作を始めるうえでの参考になったでしょうか。

Webサイト制作に少しでも興味をもお持ちなら、まずは始めて見ましょう。始めてみないことには何事も始まりません。残り時間はお互いあまり無いのですから。

まずは無料で視聴できる動画や、無料でお試しできるサイトで楽しみながら始めてみるのもアリだと思います。

では、明るく、楽しく、前向きに、毎日をお過ごしください。

コメント

タイトルとURLをコピーしました