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

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

    ウェブページを作成するには、一般的にHTMLを使用します。HTMLのタグに属性を指定することで様々なレイアウトが可能となりますが、最近の規約(勧告)では装飾はCSSで行うことが推奨され、HTMLのタグからは削除される方向に向かっています。

    HTMLとCSSの違いとは

    HTML

    HTML(HyperText Markup Language)は、その名の通りハイパーテキスト(複数の文書を相互に関連付け、結び付ける仕組み)をマークアップ(出版の作業過程で原稿用紙の余白に印刷に関する指示の記号を書き加えること)する言語です。
    一般的な例としては、文書と文書の関わり(リンク、章立て)や、イメージをテキスト文書のどこに表示するか、といった役割を担うものといえます。

    CSS

    CSS(Cascading Style Sheets)はカスケード(異なるソースから成るプロパティ値を組み合わせる方法を定義するアルゴリズム)によって表す表示形式の定義(スタイルシート)です。
    HTMLタグのレイアウトのための属性は、よく使用されるCSSが予め用意されているものと考えることができます。

    HTMLとCSSを書く方法

    HTMLで記述した内容にCSSを指定するには以下の2通りの方法があります。

    • 特定のHTMLタグに直接指定する
    • 同一のCSSを複数のHTMLタグで使用するためにCSSをクラス化する

    また、クラス化したCSSを複数のHTMLファイルで使用するために、共通ファイルに外出しすることができます。

    HTMLの中に直接書く方法

    HTML内の特定のタグに直接指定する場合は、タグ内に”style”要素として記述します。
    要素と値は”:”(コロン)で接続し、複数のCSSを指定する場合は”;”(セミコロン)で区切ります。
    下の例は、テーブルのすべてのカラムに幅100ピクセル、高さ50ピクセルを設定し、更に、上列中央のカラム(TDタグ)のみに以下のCSSを設定した場合です。

    • 枠線(上)の幅=1ピクセル
    • 枠線(右)の幅=2ピクセル
    • 枠線(下)の幅=3ピクセル
    • 枠線(左)の幅=4ピクセル
    • 枠線(上)の色=赤
    • 枠線(右)の色=青
    • 枠線(下)の色=緑
    • 枠線(左)の色=黄
    • データの文字列の配置=中央寄せ
    • データの文字列の色=赤


    今度は、上列中央のカラムだけではなく、下列の左右のカラムにも同じCSSを適用してみましょう。

    実現はできますが、これではデータの文字列色を黒に変更したい、といった場合に同じ修正を何か所もしなければなりません。
    そこで、同一の設定を複数のタグで指定する場合は、head要素中に”style”タグでクラスとして定義します。
    基本的な記述として、styleタグの中で設定内容を.クラス名{}の中に記述し、適用するタグにclass=”クラス名”と指定します。


    これで、修正は1か所で済むようになりました。

    ついで、と言ってはなんですが、すべてのTDタグに幅100ピクセル、高さ50ピクセルを指定していますので、これも共通化してしまいましょう。
    タグ名をそのまま定義することで、そのタグ全てにCSSが適用されます。

    ずいぶんスッキリしました。

    HTMLと別のファイルに書く方法

    サイトを統一感を持って修飾するような場合には、クラス化したCSSだけを別ファイルとして、複数のHTMLファイルから使用することができます。

    まず、CSSだけ記述したファイルを作成します。ここでは「table.css」というファイル名で保存しています。

    CSSを使用するHTMLファイルでは、head要素中のlink要素にCSSだけを記述したファイルを読み込む定義をします。

    HTMLとCSSの勉強にオススメの参考書

    HTMLとCSSについては、入門書から内部の仕組みまで各種レベルの書籍が発行されています。
    ご自身の手に取って、使用するシーン、目的によって最適な書籍を選んでください。
    ■入門書
    今すぐ使えるかんたんPLUS+ HTML5&CSS3 完全大事典
    技術評論社
    中島真洋 著
    https://gihyo.jp/book/2018/978-4-7741-9811-8

    ■リファレンス
    CSS辞典 第5版 [CSS2/3/4対応]
    翔泳社
    株式会社アンク 著
    https://www.shoeisha.co.jp/book/detail/9784798134031

    ■O’Reillyの入門書
    CSS3開発者ガイド 第2版 ――モダンWebデザインのスタイル設計
    オライリー・ジャパン
    Peter Gasston 著、牧野聡 訳
    https://www.oreilly.co.jp/books/9784873117256/

    ■定番のO’Reilly
    CSS完全ガイド 第2版
    オライリー・ジャパン
    Eric A. Meyer 著、株式会社クイープ 訳
    https://www.oreilly.co.jp/books/487311232X/

    まとめ

    今後、HTMLから修飾関連の属性は益々削除される傾向があり、ブラウザもそれに応じて変更されてゆくため、今までは使用できた属性がブラウザによっては使用できたりできなかったりといったことが起きる可能性があります。また、現在はビジネスアプリケーションであっても操作性はもとより見栄えも重要視されるようになっています。

    CSSの要素は非常に種類が多いのですが、基本的な考え方を理解すれば応用は可能です。
    できるだけCSSを活用することにより、メンテナンス性の高い=使いまわしの利く寿命の長いシステム開発を心掛けましょう。


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

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

    ポテパンフリーランス

    ポテパンフリーランス

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

    ポテパンキャリア

    ポテパンキャリア

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

    ポテパンキャンプ

    ポテパンキャンプ

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



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

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

    この記事をシェア

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









    ABOUT US

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

    READ MORE