国内最大級プログラミング・WEBデザインスクール検索サイト

(連載)いざプログラミングスクールに入会、HTML/CSSは身についた?DMM WEBCAMP SKILLS受講レポート

個人事業主のライターとして開業して3年、ついに法人成り(会社を設立)したライター。

これで将来安泰!かと思いきや、やり残したことがあったのでした。それこそが、プログラミングの学習
編集
編集

なにせ1人会社なので、Webサイト制作はもちろん、いろいろな作業を自分でやらなければいけないんです。

そのうえ、今後は、義務教育でプログラミングを学んだ子どもがどんどん社会に出てくるというじゃありませんか。10年後生き残れているのか、恐怖でしかない!

(文部科学省に直接取材。「こんなに高度な内容を扱うの!?」ときっと驚くはず)

そんなわけでこの連載では、大好評のオンラインプログラミングスクールDMM WEBCAMP SKILLSに自ら入会。

2回目となる今回は、カリキュラム前半にあたる「HTML/CSS」パートについて、受講風景をくわしくお届けします!

こういう感じのサイトを作っていきますよ!


学習目標時間を設定し、学習スタート!

前回の記事で、プログラミングスクールDMM WEBCAMP SKILLSへの入会を決めたライター。さっそく専用フォームから必要事項を入力し、申し込みます。

DMM WEBCAMPは受講開始日が毎週月曜と決められており(今後変更になるかも)、私は6月7日開始を選択。受講期間スタートが楽しみです!


DMM WEBCAMPの公式Slack


そして、なんやかんやと忙しく過ごしているうちに、ついに受講開始日がやって来ました。ダッシュボードにログインし、曜日ごとの学習目標時間を設定します。

私の場合、平日は仕事や学業があるので1時間程度が現実的。一方で土日は比較的時間が取れるかな?と考え、5時間ずつにしました。

少し小さくて見にくいですが、赤線のところで学習時間を設定しています


これで必要な準備は完了。いよいよ学習を進めていきます。

「コンピュータの仕組み」からのんびり学べる


テキストでは、「いらすとや」のイラストを交えて分かりやすく説明してくれる。この図はコンピュータの中身を示したもの


DMM WEBCAMPの学習は、テキストを読み進めながら手を動かす形で進んでいきます。

プログラミングスクールの学習スタイルはいろいろあり、対面授業を受けられるところもあれば、動画教材やライブ配信で学ぶスクールも。でも、私にはこのテキスト型が一番しっくりきました。
編集
編集

読書が趣味なので、文字を読むほうが圧倒的に早いんです。

ページを行ったり来たりするのも、動画より気軽にでき、マッチしているなと。

なお、カリキュラムの冒頭には、「コンピュータについて学ぼう」という、基礎知識パートが設けられています。

「そもそも、コンピュータって何?」レベルからスタートしてくれるので、まったくの初心者さんや、「パソコンはどうにも苦手だけど、やらざるを得ない!」という方にも優しい仕様だなと思いました。

それぞれの章末には小テストと、理解度のチェックボックスが設けられています。



テキスト形式は、スムーズに進められる一方で、「はいはい、なるほどね〜」と流し読みしてしまうリスクもあります。こうした仕掛けがあることで、「おっとっと、理解できていなかった」と立ち止まることができ、独学よりも注意深く学習できるなと感じました。
編集
編集

「読んだはずなのに、全然内容を覚えてないや!」って本、ときどきありますよね。

「わかったつもり」は危険です。

いざHTML/CSSでのWebサイト制作に挑戦、メリットとデメリットは?


DMM WEBCAMPでの学習フローに慣れたところで、いよいよWebサイト制作に入っていきます。

DMM WEBCAMP SKILLSのカリキュラム前半(HTML/CSS)はこのような流れになっています。

Webの仕組みを学ぼう
  • ブラウザとWebサイト
  • Webが表示されるまでの流れ
  • プロトコル
HTML・CSSを学ぼう
  • 学習の準備をしよう
  • HTML・CSSの概要を理解しよう
  • HTML・CSSの基本書式を学ぼう
  • Webページの構造を理解しよう
  • Webページの枠組みを作ろう
  • ヘッダーとフッターを作ろう
  • メインビジュアルを作ろう
  • メイン部分を作ろう
一般に「Webサイトを作る」というと、サーバーやドメインを契約してWrodPressを導入し、テーマを適用して……みたいな流れをイメージする人も多いと思うのですが、DMM WEBCAMP SKILLSの学習内容は、イチからWebサイトを構築するような内容になっている様子。

これにはメリット/デメリットの双方があると思っていて、

メリット
  • 「そもそも、Webサイトってどうやって動いているんだ?」という根っこの部分がわかる
  • ゆくゆくはWebデザインを学びたい人が、基礎的なスキルを身につけるのに役立つ
デメリット
  • 「明日、すぐにサイトが欲しい!」みたいなニーズには遠いかも
    (ただし、無料の追加Tipsで便利なWebサイト制作ツール等の紹介もあったので、まったくカバーできないわけではありません)
この感覚を文章にたとえると……

「いずれはいい論文を書きたいな」という時間軸であれば、言葉の使い方や論理構成といった、ごく基本のところから学んでおいたほうが結果的に近道です。

一方で、「一週間後までに論文を出さなきゃ!」みたいな状況であれば、「とにかく使えるテンプレートをちょうだい!」という気持ちになると思うんですよね。

編集
編集

小手先の知識って応用が効かず、結局後戻りすることになるんですよ。

私の場合は前者(ゆっくりでもいいから、基礎的なところを理解しておきたい)だったので満足できましたが、「1ヶ月後までにサイトが必要!」みたいな状況の方にはちょっと合わないかもしれないなと感じました。

一歩ずつ進むから戸惑いが少ない

さて、本題に戻り、学習の様子をレポートしていきましょう。

DMM WEBCAMPでのコーディングにはVisual Studio Code(略してVSCode)を使います。「ぐええ、英語やん」と思いつつインストールし、もろもろの設定を完了。


面白いなと思ったのが、「自動保存」を有効にするなど、学習のモチベーションを下げない工夫を教えてくれること。
編集
編集

せっかく書いたコードが吹き飛んだら2、3日立ち直れないですもんね。

※とはいえ、実際に仕事にする場合は、考え中のコードが勝手に保存されると面倒なので、OFFにしておいたほうが良さそうです。

設定ができたら、いよいよHTML/CSSを実際に書いていきます。

学習を進めると、最終的にはこういうサイトができるのだとか。

編集
編集

すごく複雑なサイト!という感じではないですが、ポートフォリオサイトならこれくらいで充分。

ていうか、難しすぎると心が折れちゃいそうですし……。(ケーキ作りで挫折した経験あり)

本当に私にできるの?と不安でしたが、各ステップの説明がかなり丁寧で、無理なく進んでいくため、サクサクと学習を進めることができました。

「macの場合」がちゃんと書いてあることに感動。mac版の情報がないことってよくあるので……


このレベルから始まるので安心です


HTMLの構造を理解したら、次は見た目(CSS)もデザインしていきます。

見出しブロックの色を設定しています

編集
編集

このくらいの内容に関しては、以前、Progateで学んだことがあるのですが……

スマホで気軽に学べるのはありがたい反面、コードがコピペだったので、細かなところが頭に入らなかったんです。

いや、100%、なまけ者の私が悪いんですけど。

(ライターによるProgate体験記事。パソコン版で学べばきちんとタイピングしながら学べるのですが、スマホの気軽さに負けてしまいました)

DMM WEBCAMPではもちろん、各コードを自分で書く必要がありますし、ときには……
DMM WEBCAMPのテキスト
DMM WEBCAMPのテキスト

コピペではなく、一つずつ書くようにしましょう!

編集
編集

ギェッ!!どこかで私を見ているのか!?

そうなんです。学習の各所で、受講生がサボらないように気合の一言!

小さな工夫ではありますが、あるのとないのとでは気持ちの持ちようがずいぶん違うので、ありがたいことだなあと思いました。(こっそりコピペしていたので……!)

と、このあたりで、モチベ維持の面談が

そんなこんなで学習を進めていると、入学後の初回面談の日がやってきました。


なんでも、受講生の心が折れないよう、メンタリング目的の面談を定期的に実施してくださるのだとか。所定の方法で予約を取り、オンラインで対応してもらいました。
編集
編集

よろしくお願いします!

DMM WEBCAMP SKILLSライフコーチ
DMM WEBCAMP SKILLSライフコーチ

こちらこそ、よろしくお願いします!

さっそくですが、夏野さんが今回、どのような目的でプログラミングを学び始めたのか、教えていただけますか?

編集
編集

はい。実は……

(法人成りし、今後のキャリアを考えて、という経緯を説明)

DMM WEBCAMP SKILLSライフコーチ
DMM WEBCAMP SKILLSライフコーチ

なるほど。確かに、プログラミングは今後、ビジネスパーソンの教養になり得る分野ですから、素敵なことだと思います!

今はHTML/CSSを学んでいただいていますが、学習する上で、お困りごとはありませんか?

編集
編集

はい。HTML/CSSは今のところサクサクと進められています。

章末課題がちょっと不安ですが、この感じだと、なんとかクリアできると思います。

DMM WEBCAMP SKILLSライフコーチ
DMM WEBCAMP SKILLSライフコーチ

それはよかったです!

DMM WEBCAMPではこのように、随時オンラインで質問対応していますので、また分からないところが出てきたらいつでも聞いてくださいね。

それから、HTML/CSSが終わったあとの話なんですが……

編集
編集

終わったあと?

DMM WEBCAMP SKILLSライフコーチ
DMM WEBCAMP SKILLSライフコーチ

はい。HTML/CSSが終わると、「Ruby」というプログラミング言語の学習に入っていきます。

Rubyはエンジニアも実際に使う言語で、学んでおいて損はないのですが、HTML/CSSがWebサイトの「見える部分」を作る言語なのに対し、Rubyは「裏側」を作る言語なんですよ。

編集
編集

ほうほう。

DMM WEBCAMP SKILLSライフコーチ
DMM WEBCAMP SKILLSライフコーチ

その分、人によっては「何をしているのか分からない」「学習の効果が実感できず、モチベーションが持続しづらい」と感じることもあるんです。

そんなときにはぜひ、私たちライフコーチを頼ってくださいね。

編集
編集

なるほど……!

つまずきそうなところをあらかじめ教えていただけて、助かりました!

と、おおよそこのような流れで面談は終了。まるで漫画に出てくる長老のごとく、「お前はこの先、さらなる強大な敵に出会うだろう」と予告されたのが意外でしたが……
編集
編集

実はこのあと、ライフコーチさんの言葉は真実だったと思い知ることになります。

なお、質問対応についても、だいたい同じ流れで申し込み、オンラインで答えていただく形式でした。

ただ、私個人に関して言えば、HTML/CSSに関してはサクサク進められたのと、家族にエンジニアがいたため、質問利用は1回のみ(非常にスムーズに対応していただけました)。
編集
編集

対応内容には大満足だったけど、隣の部屋にいる家族を呼ぶほうが早かったので……。

こればかりは、我が家特有の事情です。

そしてラスボス、課題提出にチャレンジ!

ライフコーチさんに励まされた結果、なんとか学習もひと段落。ついに「課題提出」のときがやってきました。

やってきました、章末課題!


課題は、見本のサイトに指定のブロック(内容)を付け加えるもので、これまでの学習内容の総決算。

分かっていたようで分かっていなかったさまざまな概念が、群れをなして襲いかかってきます。

なんてことはないデザインに見えますが、テキストを画像に回り込ませたり、中央揃えにしたりする必要があり、「どうやるんだっけ?」の連続です

編集
編集

な、なんかこう、float?とかいうのがあったはず。前の回に戻って……あ、これだ。

あれっ、でも、これだとデザインが崩れちゃう!?あ、そっか、clearfixしなきゃいけないんだった!

こうしてセリフにするとスムーズに試行錯誤している印象ですが、実際のところは「キェ〜ッ」とか言いながら悪戦苦闘。既習範囲をぐるぐる回っても解決せず……
家族
家族

さっきからどうしたの?

編集
編集

課題がもう、意味わかんなくて……

家族
家族

落ち着いて1つずつ解決しなよ。今、どこまで出来たの?

編集
編集

とりあえず見出しを設定して、(中略)までできた。

で、次に画像を中央揃えで配置したいんだけど、それが……あれっ、待って、中央揃えって書いてなかったわ。ちょっとやってみる。

家族
家族

はいはい。

家族にたしなめられつつ、順番に問題を解決する私。っていうか、やっぱり本職のエンジニアは違うんだなと……。「問題を1つずつ解決する」流れに慣れているんだなと思い知らされます。(私は家族に頼りましたが、これと同じような流れでメンターに見てもらえば、課題を解決していけると思います。)

ピィピィ言いながら3時間ほど格闘し……
編集
編集

できたーーーー!

無事に課題を提出完了!

こんなにやることがありました!慣れればサクサクなんだろうけど、大変だった……

編集
編集

きっとプロのエンジニアさんや、デザイナーさんから見れば「このレベル?」って課題なんだろうけど……

正真正銘、自分でクリアした実感があり、ものすごく自信につながりました。

提出した課題には、翌日、メンターさんよりフィードバックのコメントが。こうして、無事にHTML/CSS編を終わらせることができました。

「行を増やすとレイアウトが崩れる場合があるから、さぼらず本文を書きなさいよ」と怒られてしまいました。でも合格できて嬉しい!

編集
編集

サクッと書いてるけど、長くて、それでいて楽しい道のりでした!

次回で完結!Rubyでプログラミング基礎にチャレンジ

そんなこんなでカリキュラム前半を終えたライター。今回の課題のファイルを使えば、今すぐにでも簡単なポートフォリオサイトが今すぐ作れてしまうわけで、「よしよし」という感じ。

何より、根気強く取り組んだことで、コンピュータが「わけのわからんもの」から「頑張れば意図通りの動きをしてくれるもの」に変わったのが大きな収穫だと感じました。

というわけで、次回は連載の完結編。Rubyを使ったプログラミング基礎に挑みます。

めちゃくちゃミスったRubyのプログラム。エンジニアへの道は甘くない

編集
編集

突然難易度が上がって混乱したところも!

でも、まさに「プログラミング」の世界で、ハマる人はきっとハマりますよ。

記念すべき1回目記事と、完結編はこちらからどうぞ!


ゼロからプログラミングを学べる!DMM WEBCAMP SKILLSへの申し込みはこちら

プログラミングスクールで、転職に有利なスキルが学べる!

DMM WEBCAMP SKILLS|知識ゼロでも始められる!未経験者97%、初心者にやさしいプログラミングスクール

DMM WEBCAMP(ディーエムエム ウェブキャンプ スキルス)はDMM.comグループ傘下の株式会社インフラトップが運営する、短期集中型プログラミングスクールです。

目的に応じてCOMMIT/PRO/SKILLSの3コースから選ぶことができ、中でも、教養・スキルアップ目的の「SKILLS はじめてのプログラミングコース」では、まったくの初心者でもゼロからプログラミングを学習することが可能。前半ではWebサイト制作(HTML/CSS)、後半ではWebアプリケーション制作(Ruby、Ruby on Rails)を学ぶことができるので、「自分のWebサイトを作ってみたいな」といった需要にも対応できます。

また、学習を終え、「もしかして向いているかも?」と感じた方は、そのまま転職コースへ進むことも可能!気軽に初めて、意外な適性を発見するかもしれません。デジタル社会に必須のスキルを、今こそ身につけませんか?

\\本気で生き方を変えたいなら//
DMM WEBCAMP SKILLSに申し込む

RECOMMEND

この記事を読んだ方へおすすめ