30代空手パパ MAGMEの子育て日記

30代空手パパMAGMEです。二児の父親で空手大会に一緒に挑戦しております。 このブログでは子供との大会挑戦やトレーニングについての記事を掲載しております。youtubeに試合動画をアップしております。下記URLからこれらも合わせてご覧いただけますと幸いです。https://www.youtube.com/@-magme-2375

初心者がプログラミングを始める ~progateで学ぶHTML,CSS~

 f:id:mazmeblog:20200519153332j:plain

 「もっと見やすいページにしたい」

 

 

「空手パパの子育て日記」というブログを始めて半年少々経ち、当初は月間pv数が10ぐらいでしたが、少しずつ多くの方に閲覧していただけるようになり、最近は月3000pvぐらいになってきました。もっともっとpv数を増やして多くの人に情報発信していきたいと考えています。

 

 

さて、挑戦できるものは何でも挑戦するというのが私のモットーでして、最近新たに挑戦しようと思っていることがあります。

 

 

 

 

それは、プログラミングです。

 

 

 

 

恥ずかしながら、私空手パパは、全くプログラミングが出来ません😅完全に初心者です。

これまで、プログラミングが出来なくても、はてなブログの使いやすさもあって、特に不自由なく作業が出来ていました。

ただ、最近初心者なりに、多少文章の見せ方や文字の配置意識するようになり、見ていただいている方々にとって、もっと魅力的なものにしていきたいと思うようになりました。

 

 

 

そこで身に付けたいのが、HTMLとCSSというプログラミング言語です。

 f:id:mazmeblog:20200519175401j:plain

HTMLは「Hyper Link Markup languge」の略で、ハイパーリンクの機能を持った文章の構造を表すタグを付ける言語のことで、一言でいうとホームページの情報そのもののことです。

 

 

CSSとは「Cascading Style Sheets」 の略で、構造化された文章(=HTML)のデザインを変更する言語のことです。文字の太さ、色、余白などをデザインすることが出来ます。

 

はてなブログでは、自動的にコードを組んでくれているので、HTML,CSSの知識が全くなくても不自由なくブログが書けるようになっていますが、あくまで基本的なことしか出来ませんので、より自分好みのカスタマイズをしていくためには、自分でHTML,CSSのコードを入力していく必要があります。

HTML,CSSを習得することで、webページをより自分好みなものに変えていくことができるというわけです。

 

 

 

ということで、早速やってみましょう!

 

 

 

 

f:id:mazmeblog:20200519175812j:plainまず本屋に行き、htmlやcssの解説書を読んだのですが、初心者には、易しくないんですね。

 

  <p>   </p>   font-size:20px;   、、、💦

 

初めて見るアルファベットの羅列、構文の数々、

体がアレルギーを反応を起こしそうです。

これでは、頭に入ってくる気がしない。

 

さて、どうしましょうか。

 

 

次に目を向けてみたのがスクールです。

予想はしていましたが、費用は10万円ぐらいかかると分かりました。

講師の人件費や昨今のプログラミングの需要の高さを考えれば、妥当な金額とは思いますが、初学者にはちょっとハードルが高いなと感じてしまいました。

 

 

 

そんな中、web上でHTMLとCSSを学べるwebサイトを見つけました。それが、progateです。

 

 

 

f:id:mazmeblog:20200519180531j:plain

progateはパソコンを使ってweb上で本格的なコードの入力の仕方を学んで、実際にコードの入力まで出来るwebサイトのことです。

 

progate

https://prog-8.com

 

progateでは、好きなプログラミング言語を選び、基本から、分かりやすいイラスト図を用いたスライド学習をして知識をインプットして、その知識を使ってすぐに実際にコードを入力するという学習方法で、私のような初心者でも独学でプログラミングが学びやすい仕組みになっています。

コース選択画面

f:id:mazmeblog:20200519181944j:plain

イラスト図を用いたスライドでインプット

f:id:mazmeblog:20200519182127j:plain

コーディング画面

f:id:mazmeblog:20200519182414j:plain

気になる費用負担ですが、初期投資は無料。勉強するのが楽しくなれば、課金して高度な技術を学ぶことも出来ます。課金した場合でも最大月額980円

これはやらない手はないなと思い、始めてみることにしました。

 

 

 

 

現在の進捗状況 

f:id:mazmeblog:20200519154724j:plain

progateのよく作りこまれているところは、学習者が飽きてしまわないように、演習をクリアしていくと、経験値が溜まりレベルアップしていくところです。

さながらRPGのような達成感が味わえます。

 

 

受講コースが入門編ということで、まだそこまで難しさは感じません。手厚いガイダンスに従ってコードを入力していけばいいだけですので、サクサクと進みます。これからどんどん難しくなっていくのかもしれませんね。

 

 

今日もこの後、解き進めていきたいと思います。

 

 

今回はここまでです。

progateの体験談を今後も書いていきます。

 

宜しければ読者登録をお願いします。

 リモート練習時の親のサポートはこちら

mazmeblog.hatenablog.com

電車のちょい技はこちら~電車の窓の開け方~

mazmeblog.hatenablog.com

 親子で競争! ドラクエ200時間の記録はこちら

mazmeblog.hatenablog.com

人工芝のDIYはこちら

mazmeblog.hatenablog.com

 グルテンフリー14日間体験談はこちら

mazmeblog.hatenablog.com