IT人材のためのキャリアライフスタイルマガジン

【初級】エンジニア経験ゼロからはじめるHTML・CSS学習方法

入門

今回はそのような人の向けに、これまでプログラミングをほとんど触ったことがない人が、Webページを作れるようになるまでの道のりをまとめてみました。この通りに進めていけば必ずの実力はつきます。初心者のつまずきがちな部分もしっかりカバーして行きます。

更新日時:

いまの年収に不満はありませんか?

今の仕事に不満を感じてるけど、転職はリスキーであまり前向きでないあなた、エンジニアにおすすめの転職エージェントをうまく活用して心機一転新しい仕事に取り組んでみませんか?

独自の求人を持つことで多くの企業の紹介が可能

エンジニア向け転職エージェント「レバテックキャリア」ではエンジニア・クリエイターに特化したフォローアップ体制で転職を有利に進めることができます。 企業別の対策が詰まった面接詳細や模擬面接、客観的に強みを引き出すカウンセリング、また驚くほど企業の評価が変わる職務経歴書の添削など、あなたにあった方法で転職をスピーディーかつスムーズに行うことができます。

企業との絶対的な信頼関係を実現

レバテックキャリアは転職エージェント以外にフリーランスの参画サポートサービスを8年以上に渡り運営しており、数多くのIT・Web系企業と取引があります。そのコネクションを活かして、現場プロジェクトマネージャーとの情報交換MTGを年間累計3000回以上実施しています。 そのため企業から絶対的な信頼を得ています。この信頼関係があるため、通常より短い期間での面接設定→内定を可能としています。

転職のために設計されたフォローアップ体制で転職を有利に

人事担当者やプロジェクトマネージャーとのMTG中に「そういえば、今度◯◯やるから、実はこういう人が欲しいんだよね」といった非公開の求人が出てくるのも、レバテックの強みです。また、競争が激しいWebサービスでは秘密裏に開発を進めるプロジェクトも多いため、予想外の珍しいポジションも存在します。 さらに、求人がクローズしている企業とも日頃からコミュニケーションをとっているため、企業担当者に「実は最近、こんな人が転職を検討しているのですが・・・」という紹介をきっかけに急遽ランチやMTGが設定され、採用に至るケースもあります。 様々なメリットを持つレバテックキャリアはエンジニアの方に一番おすすめできる転職エージェントです。あなたもレバテックキャリアで転職を成功させませんか?

▽レバテックキャリアについての詳しい記事はこちら レバテックキャリアのよく聞く評判と口コミ・面談の雰囲気と方法 ▽その他のエンジニア向けおすすめ転職エージェントはこちら おすすめの「エンジニア転職サイト・エージェント」29選と特徴・強み

HTMLを習得しよう

HTMLを説明した後、その後学習の流れを紹介していきます。

1.HTMLを理解しよう

HTMLとは HyperText Markup Language(ハイパーテキスト マークアップランゲージ)、略記・略称HTML(エイチティーエムエル)とは、ウェブ上の文書を記述するためのマークアップ言語である。文章の中に記述することでさまざまな機能を記述設定することができる。 ウェブの基幹的役割を持つ技術の一つでHTMLでマークアップされたドキュメントはほかのドキュメントへのハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などの高度な表現力を持つ。 HTMLはwebサイトやサービスの画面を構成する最も基本的な技術です。PHPやRubyといった言語もありますが、それらもHTMLと密接に関係しています。まずはHTMLを習得することがプログラマーとしての第一歩になります。 HTMLとはなんなのか、なんとな〜くわかったところで(今はあんまりわからなくても大丈夫です)、さっそく学んでいきましょう。

2.Sublime Text 2 を入れよう

まずはテキスト・エディタを入れましょう。これはプログラミングする際に、コードを記録してくものです。レポートでいうとWordみたいなものですね。 いろいろありますが筆者がおすすめするのは、Sublime Text2 です。テキストエディタにもいろいろな種類もあるのですが、初心者にはSublimeTextをおすすめしています。インストールして使ってみてくださいね。

3.王道のドットインストール

そして、エディタをインストールしたら、ドットインストールで学習を進めていきましょう。

ドットインストールとは、約3分間の動画でプログラミングにおける様々な技術を学ぶことが出来るサイトで、初心者から中級者まで誰もが通るサイトです。まずは、ドットインストールのHTML入門をやっていきましょう。 おすすめの進め方は、 ・1周目:なんとなく見ていく(手は動かさない) ・2周目:しっかり見ていく(手は動かさない) ・3周目:手を動かしながら見ていく こんな感じです。はじめの2周は手を動かさずにこんな感じなんだな〜って分かる、早く手を動かしたいな、っていう状態になって下さい。ここでは手を動かさないことがポイントです。我慢してください。 3周目に先ほどインストールしたSublime Text 2 を利用して、動画を見ながら、手を動かしていきましょう。 ドットインストールで基本的な概念や仕組み、中身を「知る」ということが重要です。

4.COODPREPで手を動かしながら学習

次に、おすすめしている方法がこちらも無料プログラミング学習サービスのCODEPREPです。

ドットインストールでHTMLで実際に手を動かしながらCODEPREPを進めていきましょう。この中でも、基礎編はじめてのHTML を行いましょう。 おすすめのポイントは、 ・ドットインストールで理解した内容を手を動かしながらできる ・アウトプットを強めに行い、身に付けることができる という点です。時間が経たないうちに早めに行い、しっかりと身に染み込ませましょう。

CSSを習得しよう

さて、ここまででHTMLはひと通り学習することができました。次はHTMLで作ったサイトの構造にデザインを綺麗に整えていくCSSを見て行きましょう。

CSSとは

CSS(Cascading StyleSheets、カスケーディング・スタイル・シート)とは、ウェブページのスタイルを指定するための言語です。ワープロソフトなどで作成される文書も含めて、文書のスタイルを指定する技術全般をスタイルシートといいます。HTMLやXHTMLなどで作成されるウェブページにスタイルを適用する場合には、スタイルシート言語の1つであるCSSが一般的に利用されています。 CSSは、HTMLと組み合わせて使用する言語です。HTMLがウェブページ内の各要素の意味や情報構造を定義するのに対して、CSSではそれらをどのように装飾するかを指定します。例えば、ウェブページがスクリーンに表示される際の色・サイズ・レイアウトなどの表示スタイルや、プリンタなどの機器で印刷・出力される際の出力スタイル、 音声で読み上げられる際の再生スタイルなど、ウェブページをどのようなスタイルで表示・出力・再生するかについて指定することができます。 HTMLクイックリファレンスより 簡単にいうと、HTMLをよりきれいに、デザインを整えたりするのがCSSがです。さっそく学習を進めていきましょう。

1.再びドットインストールで学習

やはりはじめにおすすめするのがドットインストールです。

CSSも同じように学んでいきます。CSS入門をやっていきましょう。 ドットインストールは、基礎から必要な部分をもれなく学べるので初心者にとってはとても有用です。また今後も使う機会が多いと思うので、有料プランで2倍速で見るのもおすすめです 進め方はHTMLと同様、3周行っていきましょう。

2.またCODEPREP

こちらも2度目の登場のCODEPREPです。基礎編はじめてのCSS を行いましょう。CODEPREPで手を動かしながらCSSを身につけていきましょう。

3.最後の仕上げProgate

ここまでしっかりやることが出来たらHTML,CSSはひと通り理解出来ていると思います。 最後にHTML,CSSを両方使って実践形式で学べるサイト、Progateを利用して知識の体系化を行いましょう!

こちらのサイトでは、実際にWebサイトを作る過程でHTML,CSSを学ぶという形式になっていて、これまでバラバラだった知識が有機的にながります。 Progateで体系的な知識を身につけた後は、実際に自分でサイトを制作していきましょう。その際に、必要な知識はドットインストールやCODEPREP、Progateを見なおしていくことでしっかりと身につきます。 これで、webサイトを作れるようになりますね。

まとめ

いかがだったでしょうか?これまで全くプログラミングに触れてなかった人でもWebサイトを作れるようになれると思います。あとはPhotoshopやIllustratorなど、デザイナーのスキルをしっかり身につけていくため、バイトやインターン、もしくは個人制作でサイトを制作していきましょう。 マスターした方は、jQuery、JavaScriptの学習も行い、フロントエンドエンジニアとしての実力をしっかりと付けていけるようにしましょう。

関連タグ

アクセスランキング