初心者必見!HTMLとCSSの違いを知ってウェブページを作成しよう!
  • facebookページ
  • twitterページ
  • 2018.10.11

    初心者必見!HTMLとCSSの違いを知ってウェブページを作成しよう!

    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のスキルを身につけていきましょう。


    ポテパンが提供するサービスについて

    本メディア「ポテパンスタイル」を運営する株式会社ポテパンは、エンジニアキャリア領域で複数サービスを提供しています。

    ポテパンフリーランス

    ポテパンフリーランス

    フリーランスエンジニアの方に高単価案件をご紹介しております。弊社ではフリーランス案件を常時300件ほど保有しており、その中からあなたに適した案件をご案内いたします。また、これから独立してフリーランスになる方の無料個別相談も承っております。フリーランスになった後の案件獲得方法やお金面(税金や保険など)についてお答えいたします!フリーエンジニアになりたい方向けのコンテンツも盛りだくさんです。

    ポテパンキャリア

    ポテパンキャリア

    エンジニア職専門の転職エージェントです。ポテパンキャリアでは、技術のわかるエージェントがあなたの転職をサポートします。エージェント自身がエンジニアなので、あなたと同じ目線で仕事内容や今後のキャリアについて一緒に考えることができます。年収800万円以上のハイスペック転職をご希望の方は「ポテパンプロフェッショナル」もご用意しておりますのでご利用下さいませ。

    ポテパンキャンプ

    ポテパンキャンプ

    ポテパンキャンプでは、RubyにてゼロからオリジナルのECサイトを作り上げてる3ヶ月間の実践型カリキュラムを提供しております。すでに本スクールの卒業生は、エンジニア職として様々な企業様に就職しております。なお、本スクールは受講料25万円と他社スクールに比べ格安となっており、またポテパンからご紹介させていただいた企業へ就職が決まった場合は、全額キャッシュバックいたします。



    株式会社ポテパンは、企業とエンジニアの最適なマッチングを追求しています。気になるサービスがあれば、ぜひ覗いてみてください!

    ポテクラバナー ポテプロバナー

    この記事をシェア

    • Facebookシェア
    • Twitterシェア
    • Hatenaシェア
    • Lineシェア
    pickup









    ABOUT US

    ポテパンはエンジニアと企業の最適なマッチングを追求する企業です。

    READ MORE