Home / ネットワーク・IT / IT基礎知識 / プログラミング / HTMLとCSSって何?HTMLの役割とCSSの役割

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

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に関する知識は持っておく必要があります。

ブログなどでは、HTMLコードを書けなくても運営できるようなシステムが構築されていますが、自分で好きなように機能を追加したりはできませんよね。自分で好きなようにウェブサイトを作成するためにHTMLやCSSの学習は必須 となります。

1.初心者でも学習しやすい

HTMLは厳密には、マークアップ言語と言われるもので、プログラミング言語ではありません。

タグを当てはめていくだけでもそれなりの形にできる特徴があり 初心者にとっても比較的習得のハードルが低い言語 となっています。このような特徴から、プログラミングの導入として学ぶ方も多い傾向にあります。

またHTMLと合わせて使うことになるCSSも学習しやすい特徴があります。HTMLを装飾するためのプロパティは無数に存在するのですが、それを利用するための書式さえ理解してしまえば後は自由に使いこなすことができるんです。

2.ウェブサイトの仕組みが分かる

皆さんが普段見ているウェブサイトは、HTMLやCSSによって作成されています。もちろん本サイトもHTMLコードを利用したものです。

HTMLに関する知識がないとどのような作りになっているか完全に不透明ですが、自分で学習してみるとウェブサイトの仕組みをある程度理解できるように。

3.ウェブデザインができる

自分でHTMLやCSSを使ってウェブページを作成できるようになれば、ウェブデザインをできるということにも繋がります。自分のウェブサイトはもちろん、ブログなどのデザインを変更する時にも役立つ知識となります。

自分自身のホームページを持たない場合でも、何かと役に立つHTML&CSSです。学習のハードルも低いので、時間がある時にでも勉強してみてはいかがでしょうか。

3.HTMLとCSSを体験する

実際にHTMLやCSSを勉強するにはどうすれば良いのか。何から手を付けたらいいのか分からないという方もいると思います。

ウェブ上の情報をたよりにするのも良いですし、入門書を参考にしながら勉強を進めるのもおすすめです。入門書の多くはHTMLの基本や開発環境の整え方を紹介していますので、一冊購入すれば困ることはないでしょう。

しかしこういった行動を起こす前に、とりあえずHTMLやCSSに触れてみたいという方もいるのではないでしょうか。実は本格的な開発環境を整えなくても Windowsに標準搭載されているメモ帳でHTMLやCSSを体験することが可能 なんです。

1.メモ帳でも作れる

メモ帳のファイル形式をhtmlで保存する事とhtmlファイルとして認識され、ファイルをダブルクリックするとブラウザが開かれます。

たったこれだけの手順で、HTMLの記述とその反映結果を確認する環境が出来上がりました。を使ったHTMLタグも正しく認識されますからできないことはほとんどありません。

CSSも適用できる

HTMLコードの記述だけではなく、CSSを適用させることもできます。ここではHTMLファイル内に記述する方法をご紹介します。

記述方法は簡単です。styleタグの中にCSSの記述をするだけです。
<style>
*{color:#FF0000;}
<style>

上記の例ですと、全体の文字色を赤色に指定したことになります。試しに何かしら文字を記述してからブラウザを開いてみてください。文字の色が赤色になっているのが分かると思います。

複数指定することもできます。
<style>
*{
color:#FF0000; //赤色
font-size:50px; //50ピクセル
font-style:oblique; //斜体
font-family:Times New Roman,”MS Pゴシック”; //ゴシック体
}
<style>

以上のようにいくつでも追加することができます。例では全体指定にしていますが、基本的には、pタグなどを指定することが多くなります。

2.サイトに動きを付けられる「JavaScript」

HTMLとCSSを使いこなすことができれば思うようにサイトを作成することができます。しかし動的な動きを付けたい場合は「JavaScript」を必要とする場面も多いでしょう。

JavaScriptはプログラミング言語となり、本格的な学習が必要なってくるのですが、実はメモ帳でも記述することができます。ちょっとした入門程度ならメモ帳でも十分体験することができるので試してみましょう。

メモ帳で「JavaScript」を体験する

記述方法は簡単です。CSSと同じように scriptタグ で囲うのみです。
<script>
alert(“おはよう”);
<script>

上記のように記述してから保存してブラウザを開いてみてください。おはようというアラートが表示されるのが分かると思います。これは至って簡単な動作ですが、本格的なコーディングもできますので色々検索して試してみるのも面白いかと思います。

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

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

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

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

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

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

1 2

スポンサーリンク

スポンサーリンク

Check Also

大人気!国内で注目したいプログラミング教室3選

2020年には小学校でもプログ …

Facebookでのご購読が便利です