バナー画像

HTMLとは、テキストファイルの中にタグと呼ばれる目印を付けたもので、Webページの構成要素になります。CSSとは、HTML文書をブラウザなどに出力する際の表示スタイル(色、大きさ)を指定するための記述言語です。HTMLとCSSにより文書構造と表示スタイルを分離出来るので、汎用性のあるWEBの作成が可能になります。

 

Webページを作るためには、その構成要素となるHTMLと、Webブラウザへの表示を制御するCSSのスキルが必要です。そして、HTMLとCSSはお互い密接に関わっており、意図したWebページを作るには、この両方を正しく理解していなければなりません。

 

今回は、Webエンジニアを志すなら、まずは知っておきたいHTMLとCSSについてお伝えします。

HTMLとCSSはwebページの見た目を作る言語

HTMLとCSSを扱うことができるだけで、かなり幅広いWEBサイトを作成することができます。それでは、WEBサイト内でそれぞれの言語がどのような機能を持っているのか見ていきましょう。

 

HTMLは見た目を作る言語

HTMLとは、テキストファイルの中にタグと呼ばれる目印を付けたもので、基本的に<タグ>~</タグ>のような書式でページの構成要素を囲みます。これによって、「ここからここまでがページのタイトルです」のようにWebページの構成要素や意味、そして、どの要素がどの要素に含まれているかといった文章構造を、コンピューターにも理解可能な形で定義することができます。タグを使ってWebページの構成要素に目印を付けておけば、「タイトルは太字にしよう」のように、目印の種類ごとに表示方法を指定することが出来ます。これは、CSSの使い方とも密接な関係があります。

 

HTMLは、HyperText Markup Languageの略で、Webページに表示される段落や文章、表、図などの構成要素を記載するのに用いられ、Webブラウザに読み込まれることでWebページとして表示されます。また、HTMLは、タグと呼ばれる目印で構成要素を記述するテキストファイルであり、~のような書式でページの構成要素を囲んで記述するのが基本です。

 

そしてタグで囲むだけで記述できることから学習も容易です。なお、後述のCSSと密接な関係があるので、必ずセットで学んでください。

CSSは見た目を調整する言語

CSSには、Webページのレイアウト構成やHTMLで記述した要素の色、太さなど、Webブラウザにどのように表示されるかを記述します。そのため、文字サイズや図形の寸法を数値で指定することから、デザインに合わせて詳細なプランを作り、細かく数値を調整しながら作っていくのが一般的です。

 

また、CSSは、HTMLに記述されている個々のタグの見栄えを定義するのに使われており、同じタイプのタグ全てに同じ修飾を適用したり、特定のタグに対して適用する修飾を記述するなど、HTMLと密接に連携しています。そして、HTMLと同じく、汎用のテキストエディタを用いるのが一般的です。

HTMLとCSSを書く方法

”テキストエディタ”を用意する

HTMLとCSSを書く場合、ホームページ作成アプリや、Web上のサービスを利用する方法もありますが、多くのエンジニアはテキストエディタを利用しています。なお、WindowsやmacOSに付属するメモ帳のようなアプリでもHTMLやCSSを書けますが、エンジニアが使っているのはもっと高機能なテキストエディタです。

 

そして、テキストエディタについてネットで検索すると、多くの記事はヒットします。そういった記事を参考にして、自分が使いやすいテキストエディタを見つけてください。

HTMLのファイルを作成する

HTMLで記述するタグは、それぞれ書き方のルールが決まっているので、それに従って記述します。特に、タグ同士の階層構造に注意してください。

 

そして、HTMLを構成するタグの多くは、CSSで修飾するので、ユニークなIDや同じ修飾を適用するクラスを定義するのが一般的です。また、HTMLには、CSSやJavaScriptなども記述できますが、複雑なWebページを記述する場合は、CSSやJavaScriptを別ファイルにし、タグを使ってそのファイルを呼び出した方が見やすいのでよく使われます。

CSSのファイルを作成する

CSSは、HTMLで使われる同じ種類のタグに共通の修飾の定義もできますが、多くの場合はHTMLに記載されたIDを持つユニークなタグや、クラスとして定義された同じ修飾を適用するタグに合わせて記述します。

 

また、昔の古い仕様では、HTMLに記述されるタグの属性の一部としても記述できましたが、最新の仕様では、タグの属性としては記述しません。そして、Webページで使われる文字の修飾のほかに、ページの割り振りや、図形や文字の配置位置の調整にも使われており、イメージ図に合わせて詳細な配置プランを作ってから、座標や枠のサイズを数字で定義する必要があります。

HTMLとCSSを習得するための2つの勉強法

HTMLとCSSは、IT系のスキルの中では習得しやすく、仕事の需要も多いことから多くの方が学んでいます。そして、本屋を行けば初心者向けの学習書が幾つも並んでおり、通信教育で有名なユーキャンにも講座があるなど、学ぶ方法がたくさんあるのも特徴の一つです。次から、おすすめの学習方法についてご紹介します。



独学で勉強する

インターネット上には多くの学習サイトがあり、中には無料で利用できるサイトもあります。そういった無料で利用できる学習サイトの中には、HTMLとCSSを学べるサイトもあるので、そのようなサイトを利用し独学で学ぶのがおすすめです。

 

なお、インターネット上の学習サイトは、ネットに繋がったパソコンさえあれば、いつでもどこでも学習できるのがメリットです。また、短い動画やサンプルを使い、わかりやすく解説しているの、初心者でも十分理解できます。

 

しかし、学習を進めていくと、必ず解らないことを出てくるでしょう。その場合、ネットで調べることも可能ですが、初心者の方が調べるのは大変です。どうしても解らないことがあれば、質問に解答してもらえる有料のサービスや、後述のプログラミングスクールの利用も検討してください。

独学のメリット・デメリット

メリット

  • ネットにつながったパソコンがあれば、いつでもどこでも学べる。
  • 短い動画やサンプルを使うので、わかりやすい。

デメリット

  • 解らない点があっても誰にもを教えてもらえないので、自力で解決しなければいけない。

プログラミングスクールに通う

独学で勉強するのは苦手という方におすすめなのが、プログラミングスクールです。

 

なお、プログラミングスクールは、IT系のスキル習得に特化した社会人向けのスクールで、仕事が終わった夜や休日に学べる施設です。また、現役エンジニアが講師を勤めており、解らない点を丁寧に教えてもらえるのがメリットです。さらに、いっしょに学ぶ仲間がいることが刺激になって、学習を続けられる点もメリットと言えるでしょう。

 

ただし、プログラミングスクールの費用は決して安くはありません。しかもある程度期間がかかるので、高い費用をかけてもHTMLとCSSのスキルを学ぶという強い意志が必要です。また、HTMLとCSSに加えて、Rubyによるプログラミングスキルも習得し、Webエンジニアとして活躍したいと考えているのなら、短期間で未経験からITエンジニアになれるポテパンキャンプがおすすめです。

プログラミングスクールのメリット・デメリット

メリット

  • 仕事が終わった夜や求人に学べる。
  • 現役エンジニアが丁寧に教えてくれる。
  • いっしょに学ぶ仲間がおり、学習を続けられる。

デメリット

  • 費用が高い。
  • ある程度の学習期間がかかる。

まとめ

HTMLとCSSは、Webエンジニアにとって必須のスキルです。また、IT系のスキルの中でも習得が容易で、需要も多いことから、スキルの幅を広げたいデザイナーや、自宅でできる仕事を探している方も学んでいます。

 

しかし、本格的なWebページを作成するには、デザインプランを作り、タグのIDやクラスをしっかり管理しなければならないなど、プロのスキルが必要です。まずは簡単なものから初めて、すこしずつ複雑なページにチャレンジして、HTMLとCSSのスキルを身につけていきましょう。

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ 」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。 プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか?

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。