【効果的学習法レポート】CSS/Sassをこれから学びたい人のためのオススメ書籍＆教材特集
※ 当ページには【広告/PR】を含む場合があります。
2021/12/10
2023/11/06
当社タコスキングダムではWebデザイン〜サーバーサイドのバックエンドまで「浅く広く」技術開発活動を行っています。また、フロントエンドネタの技術ブログを通じて、CSS/Sassの面白さを世に広め、若手エンジニアへの認知度を向上させることを目指し定期的に情報配信しています。フロントエンド界隈に限らずソフトウェア産業の分野では、常に新しい情報を得るために多方面にアンテナを張って、貪欲に知識をビジネスに取り入れるという姿勢が必要になります。事業活動の中で活用しているリソースから得た様々なナレッジを日々の継続的に積み重ねておりますが、IT分野の話題はなかなか尽きることない勉強の毎日です。この記事では、Webデザイン関連の話題で個人的に気になったものや、試してみたくなりそうなCSS・Sassの内容が盛り込まれた旬な学習素材を、定期的にチェックして、まとめていく内容になっています。気になる学習教材があれば、リンク先のサイトで是非ともチェックしてみてください。
HTML/CSSをしっかり学べる書籍ピックアップ
まず最初にHTML/CSS(主にSass)を学ぶ上で、コレは読んでおきたいと思う書籍を、著者の独断でピックアップしていきます。Web制作者のためのSassの教科書
まずはなんといっても『 Web制作者のためのSassの教科書 改訂2版 』はタイトルの通りで「Sassの教科書」的書籍の代表格です。改訂第二版と言えど出版から4年以上を経ていますので、すでにサポートが廃止されたnode-sassやGulpなどを今から始めようとされる開発者の方もかなり少ないと思います。ただSassの基本を勉強するのには、文法ごとに詳しく説明がまとまっていて、良い本であることは間違いありません。著者もWebデザインを専職で使い込んでいるわけではないので、Sassもしばらく触れていないと文法や書き方をド忘れしてしまうことがあります。この書籍を手元においておくと、急な用法をチェックする際の逆引き本としても重宝します。例によって、目次の項目一覧をざっと眺めてみましょう。個人的には、３・４・５章の内容は秀逸かと思うのですが、その他の章の内容は既に非推奨になったものも含んでいて参考にできないものも増えてはきています。より新鮮な内容で書籍を購入されたいのであれば、この本と併用して別の書籍をもう一つ程度は読んでおきたいものです。ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座
『 ほんの一手間で劇的に変わるHTML & CSSとWebデザイン実践講座 』は2021年2月に発売されたまだ比較的フレッシュな内容の本です。この書籍は、Sass本というより、CSSの入門書として分かりやすいと好評だった姉妹作・『1冊ですべて身につくHTML & CSSとWebデザイン入門講座』からより発展編的な内容にした読み物になっています。よって読者のターゲットとしてはCSSデザインの基礎を十分理解した方で、もっとWebデザインを極めたい人に向けられた内容が書かれています。更なる飛躍を求めずにCSSは基礎知識だけでも今のWebサイトで良いやと思われている方には、購入すると期待外れだったという意見もちらほらと見られます。目次だけ抜粋すると、以下のようなお品書きになっています。見てお分かりのように、レスポンシブ対応やグリッドスタイルなど高級感のあるページ作成に欠かせないテクニックを中心に説明されています。SassもCSSプログラミング効率化・省力化のフレームワークのようなものですので、本の後半でその活用事例が取り上げられています。現場のプロから学ぶ CSSコーディングバイブル (Compass Web Development)
『 現場のプロから学ぶ CSSコーディングバイブル - Compass Web Development 』は2021年8月に出版された、cssのモダンな文法を取り上げている比較的新しい本です。目次から書籍の内容を流し見すると以下のようになります。内容の構成もシンプルで、CSS > Sass > サンプルで実践という流れになっています。CSS/Sassの学習ポイントの要所要所を一冊通して勉強してみたい方にはオススメの書籍です。
CSS・Sassをしっかり学べる学習サービスピックアップ
ここからは書籍以外でもSassを深く学習できる選択肢にも触れてみましょう。「Udemy」からオンライン動画を受講する
『Udemy』はアメリカに本社を構える世界最大級のオンライン学習プラットフォームサービスを世界展開している企業です。日本国内では事業パートナーとしてベネッセ社が協業をしています。Udemyの学習プラットフォームの大きな特徴は、教えたい講師側と教わりたい生徒側のマッチングを行う「C2C(Consumer-to-Consumer)」型のサービスを実現させていることにあります。これによりプラットフォーム内に非常に豊富で多彩な講座が存在し、個人レベルの学習ニーズに応じたニッチな題材の学びを発見できるかもしれません。今回はSass関連の講座で気になったものを幾つかピックアップしてみます。まずは「 CSSを効率的に書く！フロントエンドエンジニアのための「Sass」講座 ~基礎から実践まで~ 」という講座ではCSSの基本を習得済みの方を対象に、ゼロからSassを学び、実践で使えるレベルまで習得することを目指しています。CSS以外のjavascriptなどのプログラミングや、コンソールからのシェルコマンド操作があまり得意でない人も、動画の手順通りに少しずつ学習を進めていくと、効率よくSassを覚えることができるでしょう。「TechAcademy」のオンラインスクールを受講
さきほどのUdemyは動画の教育講座ですので、受講生は最初から入門レベル前に必要な事前知識は持たれていることが大前提です。右も左も分からない、HTMLもCSSもなんなのか得体がしれない、という方にはメンター(講師)に全てお任せできる『TechAcademy』の「 【TechAcademy】Webデザインコース 」というオールインワンな学習講座などもあります。Webエンジニアをこれから目指したい人にとっては、最新のアクションをどう起こせば良いのか、色々と情報を仕入れながら、自分に最適な勉強プランを設計していくのも、それはそれで時間がかかります。さらに日々のスケジュールに追われて少し間が空いてしまうと持続性が失われ長続きしません。そこで『TechAcademy』では、Sassを含むwebデザインの総合的ノウハウを教えてもらえる全ておまかせ学習サービスの『TechAcademy | Webデザインコース』という講座が開講しています。オンラインのプログラミングスクール形式ですので、決まった時間に決められたカリキュラムをメンターに教わりながら自分のペースで進められることが大きな利点です。確実に講座受講後に、学習効果が成果として求められる、企業内の新人エンジニアの社内教育に以下がかと思います。また最終的に挫折することなく、確実に成果としてSassを含むでWebデザイン方法を覚えてみたい方におすすめです。
『副業』できるレベルまでHTMLとCSSをマスターする
近年ではWebエンジニアといえども、フロントエンド界隈の市場も成熟しつつあるのか、需要も飽和傾向にあります。現状、Webデザインだけをやっていても年収が減少したり、キャリアアップが行いにくいというお悩みをお持ちの方々も増加しているように感じます。そういった社会事情もあり、近年では従業員の「副業」を解禁する企業も結構増加しているようです。とはいえ、いきなり副業を推奨されても...はじめの一歩をどう踏み出せばよいのか不慣れな会社員にはそのメソッドが中々思いつきません。せっかく苦労して習得したWEB系のプログラミング知識ですが、さらにそこから外に出てて「副業化」・「収益化」にもっていくことはまた別の次元で難しくなります。会社で業務としてやっているからプログラミングが得意だと言っても、副業で誰しも必ず儲かるとは言えないことをまず念頭におかれておくと良いでしょう。プログラミングで副業をはじめてみたい人にとっては、大切な心構えとなるところですので、この辺の話を、少し長くなりますが、つれづれと語ってみます。エンジニアが自分の能力を売り出すことの難しさ
当然ながら、「プログラミングができる」だけだと報酬に繋がるわけでもなく、「プログラミングができる自分をセールス」できる、“営業”的なセンスも必要になってくるわけです。つまり、プログラミングを最短で副業化するためには、プログラミングの勉強を最低限のレベルになったらそこそこで切り上げ、「プログラミングできる自分の能力を商品として、どのように売り出せばよいのか」を考えはじめる必要があります。プログラミングを生業にする上で、まず考慮せずにはいられないのが、特定の言語ができるプログラマーに対して、その成果を欲しているクライアントがどのくらいいるのか、という「プログラマーの需要とクライアントの供給」の話です。ひと括りに、「プログラマー」といっても、世の中にはたくさんのプログラミング言語で溢れていますが、それぞれの言語には、生み出された目的や、得意分野が異なっています。著者などもそうですが、C言語に代表される上位のプログラミング言語は高い専門性と長い習得期間が必要です。通常、C言語などに代表される高級なプログラミングの習得には、工学系の大学の在籍期間などでじっくりと専門知識や高度な応用技術を身につけるものですので、長い習得期間が必要になるのはもちろんです。このような専門色の濃くなる言語は、各方面のスペシャリストが特定の分野に特化した扱われ方をします。さらに、そのようなプログラミング言語で独立して生計を立てられるようになるまでには、何かしらメーカーやベンダーに努めて、様々な業務を担当し、その現場で培われた実務の経験・実績もしばしばクライアントから重要視されてしまうのが現実です。プロとしての実績を積み重ねることでようやく、事はトントンと進み、(何かしらの理由で挫折しない限り)IT案件の依頼に困るということも無くなる、という段階までいったら理想的と言ってよいでしょう。実際のところ、ITエンジニアで活躍する上での本当の問題は、依頼当たりの報酬の方に行くつくようですが、一定の評価を受けるプログラマー・デザイナーになれば年収1000万円以上も夢でない、とされています。ここで言いたいことは、高度な言語は、決して誰もが気軽に身につけられることでもないですし、副業化してもそもそも「クライアントからの需要」が少ないので収益が出しにくいわけです。さらに、仕事内容にもよりますが、たまに来る案件依頼を受けても、何か既存の機能の修正内容であったりすると、前任者も既に去ってしまい、過去のアセットを紐解く工程で長時間モンモンと何万行のコードとに向き合わないといけない、クライアントからの不満にも対応しないといけない...などなど、本来の能力とは関係のないところで、忍耐力と苦痛への耐性が求められます。個人的な意見ですが、難しい言語は、元々「三度の飯より、得られる金銭的報酬より、プログラミングをするのが好きだ」という人のほうが向いています。この国のソフトウェア業界の不思議なところは、高度な専門知識とその報酬が必ずしも比例していない点にあります。これは日本のビジネスの慣習ということなのかもしれませんが、高い技術を持ったエンジニアの仕事は、出来て当然のこととして安く買い叩かれてしまう現実があるのは悲しいことです。つまり、「副業で稼げる言語 ＝ 専門性の高い言語」ではないということです。専門性とは程遠い素人がプログラミングを始めて副業で成功している話を良く耳にする一方で、情報工学の専門家がプログラミングを副業にしているという話は聞いたことがありません。(日々の本業の方が目が回るほど忙しすぎて、それどころではないのかもしれませんが...)何十年とJavaプログラマーとして委託社員で細かく数えられない開発案件に携わってきたやってこられたベテランの方より、大卒数年目でWebデザイナーとしてフリーランスとして成功されている方のほうが、年収が格段に高いのも、「プログラマーの需要とクライアントの供給」という観点から見れば、至極当然のことかもしれません。Web系エンジニアのこれから
ここから話は本題に戻りますが、現在のHTML・CSSは、Webサイトのデザインを行うために、なくてはならないプログラミングです。これはインターネットを使ってブラウザから操作するという仕組みが無くならない限りは、これからも常に必要とされる需要の尽きない技術です。他の高級なプログラミングと違うところというと、数学やコンピューターの専門的な知識が乏しくても、Webページ自体は作成できるため、「プログラマー初心者にとって、圧倒的に勉強しやすい」言語といえます。このため、Html/Cssはウェブページのデザインを組み立てていくことに特化した言語で、理系の知識に自信がない人でも...極端にいうと、大学の文系科目の専攻の人でも、高校生、中学生でも、努力したいで十分デザイン・プログラミングを短期間でモノにできる(はず)です。Webサイト構築・デザインのお仕事の需要は増加傾向にあるとされ、Webサイトのデザインを扱うプログラミングスクールなども、「副業で収入を得たい方に人気」があります。世の中にはプログラミング言語といっても様々あり、時代によっても流行り廃りがある中で、副業するに当たって断トツでおすすめなのがHTMLやCSSを生業としたWEB系のエンジニアもしくはデザイナーになります。そうなってくると、Web系のエンジニア・デザイナーの数はこれからも増え続けるのは間違いなく、「Web系エンジニアの能力＋α」が求められる時代になってくること思います。例えばこの"＋α"は、「マーケティング解析のノウハウ」であったり、「クラウドサーバー系のインフラ系技術」であったりと、WEB系の能力以外の２つ目、３つ目を貪欲に取り込んでいく姿勢が重要になってくるかもしれません。副業を始めるならTechAcademyのオンラインスクールから
最近では、「オンラインスクール」に卒業課題として「お試し副業案件」が一緒に付いてくる学習講座が存在しています。例えば『TechAcademy』の「 「テックアカデミー」Web制作副業コース 」という講座が挙げられます。Html/Cssに慣れてくると、必然的にJavascriptなどのプログラミング言語も知識も得られて徐々にレベルが上がり、Python/PHP/RubyなどのWebエンジニアが使いこなす言語のバリエーションも増えてくるはずです。プログラミングで得られた知識は他の言語とも根っこのところで繋がっているので、早いうちに何かしらの言語でも勉強してステップアップすることで、実績を積み上げほど得られる報酬がうなぎのぼりに上がっていったエンジニアも多く存在しています。これから先、空前のIT人材不足時代に突入するとみられているわけですから、20代後半からでもプログラミングはやったことがないからと諦めずにより積極的にオンライン形式のプログラミングスクール等を試されるのはいかがかと思います。また、副業の枠を超えて、ゆくゆくはフリーランスとして独立を視野に入れたい方には「 「テックアカデミー」Webデザインフリーランスセット 」という講座も選択肢として存在しています。現在フリーで活躍しているプログラマーの相場は時給換算で1万円前後というケースもよく耳にするので、「フリーランスで年収1000万円以上を目指す」とか「ゆくゆくはIT業界で独立してやっていく」という志を持った方にとっては、副業から始めて、フリーランスへ移行されるのが王道のメソッドになっています。最近では駅前プログラミング教室などでマンツーマンレッスンを受けられるサービスも珍しくなくなりました。自宅にいながら勉強できるオンラインスクールで有名な『TechAcademy』であれば1週間無料で利用できます。プログラミングの世界に興味があれば是非ともこれを機会に本格的にHtml/Cssをコツコツ勉強されても良いでしょう。
