HTMLとCSSって何?HTMLの役割とCSSの役割

LINEで送る
Pocket

8cb159d53012efd6772c67826ecb7d56_s

HTMLやCSSという言葉を聞いたことありますか?Webサイトを作るにあたり知っておかなければいけない知識です。それぞれどのような意味があり役割を担っているのでしょうか。ここでは、「HTMLとCSSって何?HTMLの役割とCSSの役割」について、紹介いたします。プログラミングに興味がある方や、HTMLやCSSについて知りたい方は、参考にご覧ください。

スポンサーリンク

1.HTMLの役割とCSSの役割

80ae103cc037d9440c333be42634f325_s

ここでは、HTMLとCSSの基礎知識・役割について紹介いたします。

1.HTMLとは?HTMLの役割

HTMLとはHyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略で、ホームページなどを作成する際に用いられます。文書構造を定義するものであり、骨組みや構造となるマークアップ言語です。コンピュータに画像やテキスト、ロゴなどを認識させるための役割を担います。例えば内をh1で大見出しを示し、h3で小見出し、pで段落であることを認識させます。

HTMLタグと呼ばれ、認識させたいテキストなどの前後をタグで囲むことで、コンピュータがその通りに表示します。タグは他にもbでテキストを太字にする、buttonでボタンを作成する、dirでリストを表示するなどさまざまです。

2.CSSとは?CSSの役割

CSSはCascading Style Sheets(カスケーディング・スタイル・シート)の略で、ホームページなどの見た目・スタイルを定義するための言語のことです。HTMLで画面に表示する文書構造などを定義し、CSSで表示方法や装飾などを定義します。まさにCSSはデザインであり、テキストに下線を引いたり、枠で囲ったり、文字の大きさを変えたりします。

HTMLで作ったものを装飾して見やすくする役割を担います。よく例えられるのは、HTMLがすっぴんの似顔絵であれば、CSSは(その似顔絵の)化粧後の姿を作れます。HTML+CSSを使うことで、そのWEBページが見やすくなります。

2.HTMLとCSSのおすすめ入門書

ここでは、HTMLとCSSの初心者向けのおすすめ入門書について紹介いたします。

1.スラスラわかるHTML&CSSのきほん

スラスラわかるHTML&CSSのきほんは、フリー素材をインストールして実際に作業しながら学べる本です。小さなサイトを作りながら、HTMLとCSSの基礎が分かりやすく学べます。達成感も味わいながら勉強できるので、飽きやすい人にもおすすめです。

Webサイト作成の知識がたくさん掲載されていますので、勉強した後も使える一冊です。構成内容:Webサイトとその構成要素/Webブラウザの機能と種類/Webサイトを公開するまで/制作に使うソフトのインストール/HTMLの基本的な書式/見出し、段落、リスト/リンクと画像の挿入など

2.作りながら学ぶHTML/CSSデザインの教科書

作りながら学ぶHTML/CSSデザインの教科書は、実際にサイトを作りながら勉強していきますので、初心者でもできるという達成感を得れます。初心者向けに1から丁寧に解説しているため、非常に分かりやすいです。一つひとつの手順を勉強でき「何のために行うのか」が具体的に説明されているため、理解しながら進めます。

実践的なソースコードも豊富に掲載されているため、読みやすく勉強が苦手な方でも楽しみながら学習できます。他の参考書では勉強に身が入らなかった方におすすめの一冊です。構成内容:HTMLファイルを作成しよう/CSSで装飾しよう/画像を編集しHTMLで表示しよう/共通部分の作成とレイアウト/リンクを設定しナビゲーションを作り込もう/各ページを作成しようなど

3.いちばんやさしいHTML5&CSS3の教本

いちばんやさしいHTML5&CSS3の教本は、実際にWebサイトを作りながらHTMLとCSSの勉強ができる入門書です。ソースコードで画像もついているため分かりやすく、初心者が間違えそうな部分を重点的に解説しています。初心者の方でも楽しく学んでいけます。

構成内容:Webサイトを作成する準備をしよう/HTMLの基本を学ぼう/共通部分のHTMLを作成しよう/共通部分から個別のページを作成しよう/CSSの基本を学ぼう/CSSで共通部分をデザインしよう/コンテンツのデザインを整えようなど

4.HTML5&CSS3標準デザイン講座

HTML5&CSS3標準デザイン講座は、HTMLとCSSを体系的に学べる本です。講義パートと実習パートがあり、初歩的な文法学習や本格的なWebサイト制作まで勉強できます。実際にWebのサンプルページを制作しながら勉強できるため、実践的な知識が身に付きます。

構成内容:HTMLで文書を作成する/CSSで文書を装飾する/CSSレイアウトの基本/本格的なHTML5によるマークアップを行うための基礎知識/本格的なWeb制作のための設計と準備/実践的なWebサイトのコーディング/CSS3入門など

5.デザインの学校 これからはじめるHTML&CSSの本

デザインの学校 これからはじめるHTML&CSSの本は、まったくHTMLやCSSの知識がない方でも勉強を始めれる本です。HTMLタグの意味や使い方、CSSの役割など、基礎的なものから、実際にWebページを制作しながら実践的な知識まで学べます。各所丁寧に解説してあるので、しっかりと理解しながら進めれます。

構成内容:Webページについて知ろう/HTMLの基本を理解しよう/Webページを作ろう/サブページを作ろう/CSSの基本を理解しよう/CSSでレイアウトしよう/ページをデザインしよう/CSSでテキストをデザインしようなど

6.演習Webプログラミング入門

演習Webプログラミング入門は、学校の教科書のような作りになっている本です。HTMLとCSS、javaScriptの3つの言語について学べます。1つの項目・知識に対して実例や練習問題もあるため、実践的な知識を理解しながら勉強できます。HTMLやCSSの勉強をしたことがない方でも、基礎から学んでいけます。

7.いちばんよくわかるHTML5&CSS3デザインきちんと入門

いちばんよくわかるHTML5&CSS3デザインきちんと入門は、サンプルコードがたくさん掲載されており、実践的なHTMLとCSSの知識が身に付く参考書です。スマートフォン時代に必要な知識が学習できます。これからWebサイトの制作について学びたい方におすすめの一冊です。

構成内容:Webサイトの仕組みを知ろう/HTMLの基礎知識とマークアップの実践例/CSSの基礎知識とページデザインの実践例/テキストの装飾/リンクの設定と画像の表示/ボックスと情報の整理/テーブル/フォーム/ページ全体のレイアウトとナビゲーションなど

まとめ

いかがでしたでしょうか。今回は「HTMLとCSSって何?HTMLの役割とCSSの役割」について、紹介いたしました。HTMLとCSSがあることで、Webサイトの制作もできます。HTMLだけだと質素なサイトもCSSがあることで、華やかになります。

それぞれの言語について学ぶことで基本的なWebサイトの制作ができます。初心者向けの入門書も数多く出ていますので、興味がある方は、ぜひ勉強してみてください!始めは大変ですが、学ぶと他の言語も習得しやすくなります!

スポンサーリンク

LINEで送る
Pocket

Facebookでのご購読が便利です