近年ではゼロ円起業なんてメディア等でもよく言われ、「独立したい」「フリーランスになりたい」なんて声を多数耳にします。
ネットの発展でパソコン一台があれば初期投資ゼロで起業ができる時代になったことから、時間のある学生起業家が増えているということも事実です。
私も学生時代から起業し、フリーランスでの活動を数多く行ってきました。
なによりもフリーランスは自分で働き方を決める事が出来るのでおすすめです。
そんな中、フリーランスになりたい友人からは「どんなスキルが必要？」と聞かれます。
「プログラミング」と言いたいところですが、挫折する人も多く、簡単に習得できない人が多いのも事実です。
そんな中、私がフリーランスになりたい人におすすめするのはHTMLとCSSというものです。
HTML/CSSはプログラミングではなく、タグを組み合わせて作るマークアップ言語といわれるもので、
主にウェブページの生成に使用されています。
また、プログラミングに比べて比較的容易にスキルとして身に着けることが可能ということもあり、 近年では簡単にHTML/CSSを学ぶ事が出来るプラットフォームも増えています。
当記事ではそんなHTML/CSSについて語っていきます。
特に以下に当てはまる方には読んで頂ければ嬉しいです。 超初心者用に紹介いたします。細かいHTMLやCSSなどのコンテンツについては今後ページを追加していきます。
- ウェブデザイナーになりたい方
- 今後独立（フリーランス）を視野に入れてる方
- フリーでフォトグラファーやデザイナーをやっているけどプラスで仕事を取りたい方
- ものづくりやデザインなどが好きで、何か手に職をつけたい方
- 将来的にプログラミングに挑戦したい方
- プログラミングから入ったけど挫折した方、前に進まない方
もくじ
HTML/CSSの基礎知識
ウェブデザイナーになるために
ウェブデザイナーとは思った以上に幅広いものです。
というのも、業種や業態、自称している人によってさまざまなのです。
一概にコレがウェブデザイナーみたいなものはなく、以下に相当する全てを私はウェブデザイナーだと考えています。
- 外部のデザインを用いてHTMLやCSSを用いてコードを記述する人
- ウェブページに使用するデザインのパーツを作成する人
- 自身でデザインを手がけ、それをHTML/CSSで一つのページに仕上げる人
- プログラミングなどを用いて高度なウェブページを作成する人
私的には実際に手を動かしてウェブページを形にしていく人だと思っています。
下から一番需要が高い順になっています。
最終目標としてはパーツデザインからプログラミングまでを手掛けるというのもいいと思います。
まずHTMLやCSSを学ぶにあたって「簡単」とは言ったものの挫折する人も多いです。
しかしながら向き不向きはなく、誰しもがある程度まで楽に習得できるものだと考えています。
クライアントとのやり取り、細かいページデザインの擦り合わせなども必要になるため、ある程度のコミュニケーション能力も必要になるかと思います。
私もどちらかというとコミュニケーションを取るのが苦手で、慣れるまでには人より時間が掛かったと思います。
ともいい、先のことを言うよりもまずは意図したページを一枚作れる様になりましょう。
Javascript、PHP、Ruby、SEOとかも一緒にやった方がいいの？と聞かれることもあります。
しかしながら欲張ることなく順を追って一つ一つ進めていくことが大切です。
HTML、CSSとは何か知る
ここまでHTMLやらCSSやら言ってますが、結局のところなんなの？って感じかもしれません。
・HTMLは文章を記述したり、パーツの区切りや文節などを定義するもの（要素や構造の定義）
・CSSは上記のHTMLを自分の意図した位置に配置し、デザインを手掛けるもの（HTML要素の装飾）
細かく、様々な視点の捉え方によって違いはあるかと思いますがここでは簡単に紹介しています。
- 例1：HTMLで記述した文字の大きさや文字色、フォントなどをCSSで指定する
- 例2：divというHTMLのブロックを作成する要素に対して、横幅や高さの大きさをCSSで決める
上記のものなどが挙げられ、’HTML’というコードに対して’CSS’で装飾を付けることにより形にするイメージです。
HTMLとCSSのバージョンについて
HTMLやCSS、その他プログラミング言語には時代によってバージョンというものが存在します。
いわば、スマートフォンにおける電波の3G,4G,5Gに近いものです。
古いバージョンも使用する事はできますが、最新のものをおさえておくことでクライアントの獲得に繋がります。
現在のHTMLでは「HTML5」、CSSでは「CSS3」が最新です。
今はバージョンを気にすることなく、「HTML5」と「CSS3」を学ぶという事のみ考えて進めていただくのが得策です。
学習が進むにつれて「バージョン」に対する理解が深まります。
どうやって勉強すればいい？教材は？
私が最初にHTML/CSSを学びはじめたのは約10年前のことです。
その当時は今のように学習プラットフォームサービスなどが出揃ってませんでした。
そのため本を購入して実際に模写しながら勉強を進めていきました。
実際パソコンとネットワーク環境さえ揃っていれば無料で一切お金をかけず学習を進めることも可能です。
しかし、情報が分散しており多くの情報が頭に入ってくるためキャパオーバーになる可能性もあります。
そういう方は教則本や学習プラットフォームのをををおすすめいたします。
超初心者の方は一度で理解できないことが多いと思います。
そのため、一通り読み進めてから前に戻ることで理解が深まることと思います。
私は理解力がなく、初めての教則本を5周近くしたと思います。
ここでは現在人気のある教則本とウェブ上の学習プラットフォームをお伝えいたします。
当ブログでも学び方の記事を随時書いていきますのでご覧いただけますと幸いです。
教則本
よくわかるHTML5+CSS3の教科書【第3版】
入門の一冊といえば私はこの本をおすすめいたします。
不要なテクニックなどについては記載せず、実用的なHTMLとCSSの「基本」という部分が詳しく紹介されています。
高度な技術を学ぶことができる教則本とは言えませんが、基礎を学ぶにはもってこいの一冊です。
本のタイトルにはHTML5、CSS3の教科書とありますが、「HTML5」や「CSS3」を学ぶのではなく、
「HTML」と「CSS」を学ぶというイメージで取り組むべき本だといえます。
初心者の最初の一冊目としては間違いなくお勧めです。
デザインの学校 これからはじめる HTML ＆ CSSの本
HTML、CSSがどの様なものかざっくり理解できた人におすすめの一冊です。
デザインベースでHTMLやCSSのタグの意味を丁寧に解説されています。
本書に従って実際にタグの記述を進めることで、ウェブページを一つ作り上げることができます。
そのため、達成感や充足感からモチベーションの向上にもつながります。
一番素早く身につく方法は無理矢理仕事で実務に励むことだとも言われています。
そのことからも実際に形づくることが一番の成長の近道だともいえます。
勉強よりも実際に作って学ぶタイプだと自分で思える人はぜひ手にとってみてください。
いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)
上記で紹介した二冊に比べ、HTML5やCSS3の新しいバージョンの要素を多く含んだ教則本です。
私も実際に使う実用的な記述が数多く見られ、分かりやすく解説してくれるのですが、
少し初心者にとって多くの情報が詰まった一冊だという印象です。
いわば、初心者～脱初心者のコンテンツを一気に詰め込んだイメージです。
モダンな記述を学ぶことができるため、この一冊を身に着けることができれば、
一気に実用レベルにまで到達できることでしょう。
学習プラットフォーム
Progate
HTML、CSS、プログラミングなどを学ぶ上で一番有名なオンライン学習プラットフォームです。
世界100ヵ国以上で100万人以上の方が利用しているサービスです。
その拡散数からも見えるようにイラスト中心の説明が分かりやすく、サイト上で自分の書いたコードが
間違っていないかを答え合わせできる機能があったりと大変評判の良い学習プラットフォームです。
無料会員でも「基礎編」などを利用することができるため、触りだけ学ぶという方法も可能です。
使いやすいと感じたら月額980円の課金で有料版に移行することで、上級編まで利用可能となります。
細かい部分から難易度の高いコンテンツまでを全てこのサイト一つで教わることができるため非常におすすめです。
月額有料会員の解約違約金などもなく、辞めたくなったらいつでも辞めることができるのも良い点といえます。
その他含め全68レッスン(約150時間)分が月額980円で受けられるためコスパ抜群です。
基礎のみが書かれた教則本一冊が約2,000～3,000円です。
ドットインストール
動画でHTML、CSS、プログラミングを学ぶことができる学習プラットフォームです。
ドットインストールもProgate同様一部無料で学習可能です。
無料会員で初心者を学び、月額会員(1,080円)で中級車～上級者のコンテンツを学ぶことができます。
「動画」での解説を元に、自身のテキストエディタを使用して学習を進めていくことができ、
様々な学習サイトがある中でも特に多くのプログラミングに関する動画を有したサイトです。
実際に実務に励んでいるプロの愛用者も多いため、初心者から上級者まで長く愛用できるサイトです。
進行度や難易度が分かるように「学習カレンダー」や、他のユーザーが受講したカリキュラムや完了率を確認することもできます。
進捗率と完了度を明確に把握しながら進めることができ、自身のスキルを見える化できるのは大きな強みともいえます。
SkillHub
Skillhubはフリーランスなどの起業家にフォーカスを当てたWeb制作関連の講座を無料で提供してくれるオンラインスクールです。
実際に学校で教わる内容や、数十万円の費用を掛けて受ける講座内容を受講することができます。
また、有料のプレミアム会員サービスでは、実際に起業経験のある講師から、オンライン上で課題や添削などを通じて指導を受けることができます。
お金を掛けてでも素早く、手早くフリーランスとして独立を考えている方にはオススメのWebサービスです。
Udemy
Udemyは「学びたい人」と「教えたい人」の相互のユーザーにより、動画コンテンツの需要と供給で成り立っているWebサービスです。
プログラミングに限らず、ビジネススキルや自己啓発、フィットネスなど様々なジャンルの多くの動画が存在します。
動画を買い切るWebサービスのため、月額制などのサブスクリプションサービスではありません。
そのため、月々の定額費用を気にすることなく購入分を好きなタイミングで好きなだけ見る事ができます。
購入前に学習内容の概要、コンテンツの数(長さ)、受講生の数やレビューなどを見る事ができるため、
あらかじめ目標設定などをしている方はその目標に合った動画コンテンツを購入することができます。
実際にシリコンバレーでIT活動を行っている方が動画に出演したりと実務的なことも学ぶ事ができるため、
私も常にお世話になっているWebサービスです。
通常時は動画1つが数万円という価格で販売されておりますが、年に3～4回程度のビッグセールで、
90％OFFの価格で購入する事ができますので、購入の際はそのタイミングがオススメです。
Schoo
生放送授業に参加して学ぶことや、既存の動画を見ながら授業を受ける事ができ、
「仕事に活きる」をベースにした知識やスキル、考え方を学ぶことが出来るサービスです。
Schooはコミュニティをベースとしたプラットフォームで、他の人が受講して学んだ事や、
授業内容に基づいたコメントなどをリアルタイムで確認できるため、他者の意見も参考にしながら学習することができます。
その他にも生放送授業を受講している際に、講師の方に質問を行うことができるため、
実際のオフライン授業にも近い形で、「分からない」を潰しながら進めることが強みです。
生放送授業の閲覧や、おためし受講コンテンツは無料で閲覧可能です。
有料会員は「プレミアムサービス」といい、月額980円で様々なコンテンツが使い放題になります。
ビジネススキル以外にもマインドやモチベーションの上げ方の授業も数多く受講可能です。
気軽に質問・相談を行う事ができる、コミュニケーションをベースとした新しいオンライン学習サイトです。
CODEPREP
「Learn Something New」というキャッチコピーを打ち出す実践型オンライン学習サービスです。
一冊10分から隙間時間を利用してテンポよく進めることができ、用意された教材通りに進めることで
基礎から応用まで理解して進めることができます。
CODEPREPをProgateに近い要素があり、サイト上でコーディングした内容を答え合わせしたり、
分からない場合はHINTやTIPSを見ながら進める事が来ます。
実際にコーディングする、というよりも穴埋め形式のものが多いため、要点を絞って学習することができます。
挫折したり、どうしても分からない場合は「ディスカッションボード」で質問することで、
他の利用ユーザーから教えてもらうことができます。
2013年から始まったサービスのため、今では学習コンテンツも数多く存在しています。
【HTML】CSSは無視。まずはHTMLから
多くの学習本/サイトを紹介いたしましたが、HTMLを学び始める方によくあるのが、「HTMLとCSSが同時に書かれていて困惑した」という声です。
そのことから私のおすすめする学習手順は、HTMLでよく使うとされているタグを全て覚えることです。
ほんの10種類程度覚えるだけで応用は効いてきます。
HTMLを学ぶにあたって最初に重要となるものとして、以下を覚えることだと思います。
- タグの種類(10個程度)
- そのタグの意味
- ブロック要素/インライン要素について
- 入れ子（インデント）について
HTMLだけを記述しても、空白だったり、ページの左上からダラダラと文章が出てくるだけなので、
実際にそれがウェブサイトになるという実感は沸きにくいかもしれません。
しかしながら、その「文字が出力できた」「目には見えない要素を作ることができた」ということが
HTMLを学習し、一歩前進したことだともいえます。
その一歩前進することを経て、CSSへと移ることをおすすめいたします。
【CSS】HTMLなんとなく分かったからCSSも
CSSは線や色、HTMLで作成した要素の横幅や高さなどの情報を与えるものです。
最初はまず、「記述の方法」にフォーカスを当てて学ぶことをおすすめいたします。
色や横幅の情報をCSSファイルへ記述しても、HTMLのどの要素に割り当てるかを間違えて記述すると元も子もありません。
そのあとでCSSの種類、それぞれの書き方などについて学ぶことで記述したHTMLに様々な情報を与える事ができるようになります。
HTMLはどのタグを何に使うか覚えるだけで済みますが、CSSは自分が想像した通りにパズルが組みあがらなかったり、
最初は難しいと感じる部分もあるかと思います。
プログラミングやマークアップに関しては、「分からない→つまずく→調べる→理解」を繰り返して自身の成長に繋がります。
HTMLやCSSは比較的簡単に形にできますが、プログラミングともなると挫折を繰り返して上達したという方がほとんどにも思えます。
HTMLとCSSを使えるということはWebデザイナーフリーランサーの第一歩に過ぎませんので、
是非今後Webの分野でフリーランスになろうという方はトライしてみてください。
まとめ
「Webサイトの作成」として紹介いたしましたが、HTMLやCSSはその内の一部です。
その他にもデザインスキル、デザインソフトの利用方法、ネットサーバーに対する理解、Webアプリケーションの制作（プログラミング）等
多岐にわたって学ぶ必要があります。
焦ることなく、一つ一つ習得していくことが大切です。
HTML、CSSに関しては実際に作り、形として認識しながら学めていくのが最も近道だともいえます。
細かいHTML,CSSの習得方法や学習コンテンツについては今後紹介していきます。
コメント