【効果的学習法レポート】CSS/Sassをこれから学びたい人のためのオススメ書籍&教材特集


2021/12/10

当社タコスキングダムではWebデザイン〜サーバーバックエンドまで幅広く技術開発活動を行っています。

この活動の中で活用しているリソースから得た様々なナレッジを日々の継続的に積み重ねておりますが、IT分野の話題はなかなか尽きることない勉強の毎日です。

特にソフトウェア産業の分野では、常に新しい情報を得るために多方面にアンテナを張って、貪欲に知識をビジネスに取り入れるという姿勢が必要になります。

この記事では、そんなWebデザインの話題で個人的に気になった&試してみたいSassを活用したHTML&CSSの良質で旬な学習素材をまとめていく内容になっています。

気になる学習教材があれば、リンク先のサイトで是非ともチェックしてみてください。


HTML/CSSをしっかり学べる書籍ピックアップ

まず最初にHTML/CSS(主にSass)を学ぶ上で、コレは読んでおきたいと思う書籍を、著者の独断でピックアップしていきます。

Web制作者のためのSassの教科書

合同会社タコスキングダム|蛸壺の技術ブログ

タイトルの通りで
「Sassの教科書」的書籍の代表格です。

改訂第二版と言えど出版から4年を経ていますので、node-sassやGulpなどを今から始めようとされる開発者の方もかなり少なくなってきました。

ただSassの基本を勉強するのには、文法ごとに詳しく説明がまとまっていて、良い本であることは間違いありません。

著者もWebデザインを専職で使い込んでいるわけではないので、Sassもしばらく触れていないと文法や書き方をド忘れしてしまうことがあります。

この書籍を手元においておくと、急な用法をチェックする際の逆引き本としても重宝します。

例によって、目次の項目一覧をざっと眺めてみましょう。

合同会社タコスキングダム|蛸壺の技術ブログ

個人的には、3・4・5章の内容は秀逸かと思うのですが、その他の章の内容は既に非推奨になったものも含んでいて参考にできないものも増えてはきています。

より新鮮な内容で書籍を購入されたいのであれば、この本と併用して別の書籍をもう一つ程度は読んでおきたいものです。

ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座

合同会社タコスキングダム|蛸壺の技術ブログ

2021年2月に発売されたフレッシュな内容の本です。

この書籍は、Sass本というより、CSSの入門書として分かりやすいと好評だった姉妹作・
『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』からより発展編的な内容にした読み物になっています。

よって読者のターゲットとしては
CSSデザインの基礎を十分理解した方で、もっとWebデザインを極めたい人に向けられた内容が書かれています。

更なる飛躍を求めずにCSSは基礎知識だけでも今のWebサイトで良いやと思われている方には、購入すると期待外れだったという意見もちらほらと見られます。

目次だけ抜粋すると、以下のようなお品書きになっています。

合同会社タコスキングダム|蛸壺の技術ブログ

見てお分かりのように、
レスポンシブ対応グリッドスタイルなど高級感のあるページ作成に欠かせないテクニックを中心に説明されています。

SassもCSSプログラミング効率化・省力化のフレームワークのようなものですので、本の後半でその活用事例が取り上げられています。

現場のプロから学ぶ CSSコーディングバイブル (Compass Web Development)

合同会社タコスキングダム|蛸壺の技術ブログ

2021年8月に出版された、このブログ記事執筆中ではかなり新しい本です。

目次から書籍の内容を流し見すると以下のようになります。

合同会社タコスキングダム|蛸壺の技術ブログ

内容の構成もシンプルで、
CSS > Sass > サンプルで実践という流れになっています。

CSS/Sassの学習ポイントの要所要所を一冊通して勉強してみたい方にはオススメの書籍です。


Sassをしっかり学べる学習サービスピックアップ

ここからは書籍以外でもSassを深く学習できる選択肢にも触れてみましょう。

Udemyのオンライン教材を使う

合同会社タコスキングダム|蛸壺の技術ブログ

『Udemy』はアメリカに本社を構える世界最大級のオンライン学習プラットフォームサービスを世界展開している企業です。

日本国内では事業パートナーとしてベネッセ社が協業をしています。

Udemyの学習プラットフォームの大きな特徴は、
教えたい講師側と教わりたい生徒側のマッチングを行う「C2C(Consumer-to-Consumer)」型のサービスを実現させていることにあります。

これによりプラットフォーム内に非常に豊富で多彩な講座が存在し、個人レベルの学習ニーズに応じたニッチな題材の学びを発見できるかもしれません。

今回はSass関連の講座で気になったものをピックアップしてみます。

この講座ではCSSの基本を習得済みの方を対象に、ゼロからSassを学び、実践で使えるレベルまで習得することを目指しています。

CSS以外のjavascriptなどのプログラミングや、コンソールからのシェルコマンド操作があまり得意でない人も、動画の手順通りに少しずつ学習を進めていくと、効率よくSassを覚えることができるでしょう。

もう一つは、

というWebデザインの内容を中心として、Sassを使ってWebページのスタイリングを行う実践的な講座も選択可能です。

この講座はデザイン重視ということもあり、

デザイン編でAdobe Photoshop、実践編でAdobe XDがそれぞれ手元のパソコンにインストールされてあることが条件とされています。ただし、コーディングだけを学習したい方にはこれらのデザインツールは不要のようです。

Webデザイン開発の一連の流れを学びたい方や、コーディング、デザインだけ学びたい方にもオススメの講座です。

TechAcademyのオンラインスクールを使う

合同会社タコスキングダム|蛸壺の技術ブログ

色々と情報を仕入れながら、自分に最適な勉強プランを設計していくのも、それはそれで時間がかかります。

さらに日々のスケジュールに追われて少し間が空いてしまうと持続性が失われ長続きしません。

『TechAcademy』では、Sassを含むwebデザインの総合的ノウハウを教えてもらえる全ておまかせ学習サービスの『TechAcademy | Webデザインコース』が開講しています。

オンラインプログラミングスクール形式ですので、決まった時間に決められたカリキュラムをメンターに教わりながら自分のペースで進められることが大きな利点です。

確実に講座受講後に、学習効果が成果として求められる、企業内の新人エンジニアの社内教育に以下がかと思います。

また最終的に挫折することなく、確実に成果としてSassを含むでWebデザイン方法を覚えてみたい方におすすめです。


HTML/CSSをマスターして『副業』を始めよう!

当社は技術ブログを通じて、CSSの面白さを世に広め、若手エンジニアへの認知度を向上させることを目指し定期的に情報配信しています。

Cssは
副業で収入を得たい方にとっても勉強しやすいデザイン指向のプログラミング言語のようなものです。

通常、高級なプログラミングの習得ほど、色々な専門知識と長い習得期間がいるのはもちろんです。

またそのようなプログラミング言語で生計を立てられるようになるまで、何かしらメーカーやベンダーなどからの業務案件依頼を受けたという実務の経験・実績も重要視されるのが現実です。

しかしながら、そうした実績を一つでも作ってしまえば、割と事はトントンと進み、(何かしらの理由で挫折しない限り)IT案件の仕事に困るということも無くなるように思います。

ITエンジニアで活躍する上での本当の問題は、仕事当たりの報酬の方が重要になり、一定の評価を受けるプログラマー・デザイナーになれば年収1000万円が普通の世界でお仕事ができるようになります。

C言語に代表される上位のプログラミング言語は高い専門性と長い習得期間が必要です。このような専門色の濃くなる言語は、各方面のスペシャリストが特定の分野に特化した使われ方をします。

高度な言語は、決して誰もが気軽に身につけられることでもないですし、副業化してもそもそも需要が少ないので収益が出しにくいわけです。

仕事内容にもよりますが、たまに来る案件依頼を受けても、何か既存の機能の修正内容であったりすると、前任者も既に去ってしまい、過去のアセットを紐解く工程で長時間モンモンと何万行のコードとに向き合わないといけない忍耐力と苦痛への耐性が求められます。

ここらの難しい言語は、
元々「三度の飯よりプログラミングをするのが好きだ」という人のほうが向いています。

この国のソフトウェア業界の不思議なところは、高度な専門知識とその報酬が必ずしも比例していない点にあります。

これは日本という国のビジネスの慣習ということなのかもしれませんが、高い技術を持ったエンジニアの仕事は、出来て当然のこととして安く買い叩かれてしまう現実があるのは悲しいことです。

つまり、
「副業で稼げる言語 = 専門性の高い言語」ではないということです。

専門性とは程遠い素人がプログラミングを始めて副業で成功している話を良く耳にする一方で、情報工学の専門家がプログラミングを副業にしているという話は聞いたことがありません。(日々の本業の方が目が回るほど忙しすぎて、それどころではないのかもしれませんが...)

世の中にはプログラミング言語といっても様々あり、時代によっても流行り廃りがある中で、副業するに当たって断トツでおすすめなのがHTMLやCSSを生業としたWEB系のエンジニアもしくはデザイナーです。

Html/Cssはウェブページのデザインを組み立てていくことに特化した言語で、特に数学などの理系の知識がない人でも...極端にいうと理系に縁のなかった体育会系出身の方でもプログラミングをモノにできる気がします。

Html/Cssに慣れてくると、必然的にJavascriptなどのプログラミング言語も知識も得られて徐々にレベルが上がり、Python/PHP/RubyなどのWebエンジニアが使いこなす言語のバリエーションも増えてくるはずです。

プログラミングで得られた知識は他の言語とも根っこのところで繋がっているので、早いうちに何かしらの言語でも勉強してステップアップすることで、実績を積み上げほど得られる報酬がうなぎのぼりに上がっていったエンジニアも多く存在しています。

これから先、空前のIT人材不足時代に突入するとみられているわけですから、20代後半からでもプログラミングはやったことがないからと諦めずにより積極的にオンライン形式のプログラミングスクール等を試されるのはいかがかと思います。

現在フリーで活躍しているプログラマーの相場は時給換算で1万円前後というケースもよく耳にするので、「フリーランスで年収1000万円以上を目指す」とか「ゆくゆくはIT業界で独立してやっていく」という志を持った方にとっては副業から始めるのが王道です。

最近では駅前プログラミング教室などでマンツーマンレッスンを受けられるサービスも珍しくなくなりましたが、自宅にいながら勉強できるオンラインスクールで有名なテックアカデミーであれば1週間無料で利用できます。

プログラミングの世界に興味があれば是非ともこれを機会に本格的にHtml/Cssをコツコツ勉強されても良いでしょう。