【知識編】ゼロから始めるHTML・CSS 基本のキ

\ Welocome to ゼロWeb! /
みなさん、こんにちは!Webエンジニアのm o c o.です!

このページを見てくださっているということは、「プログラミングを始めてみようかな」「HTMLってなんだろう」と興味を持ってくださっている方が多いのではないかなと思います!

今回は、「HTML/CSSがどういったものなのか」5分ほどで読めるようまとめましたので、 HTML/CSSの基本知識を学んでみましょう!

HTMLとは?

HTML(HyperText Markup Language)は、ウェブページを作る言語です。
プログラミングといえば、HTMLを思い浮かべる人も多いかと思いますが、HTMLはプログラミング言語ではありません。

HTMLは、それぞれの意味や役割を”タグ”という目印で囲い、情報を整理しコンピューターに認識させるマークアップ言語です。

タグで囲んだそれぞれの目印は、“要素”と呼ばれ、HTMLには100種類以上の要素があります。
それぞれの要素は特定の役割を持ち、見出しや内容、配置などを表現します。

実際にどんなタグがあるか、役割と一緒に見てみましょう!

代表的なHTML タグ – 5選 –

<header>タグ(ヘッダー)
 ページの先頭に配置され、タイトルやナビゲーションなど、ページに関する重要な情報を含む

<main>タグ(メインコンテンツ)
 ページの主要なコンテンツを含んだページの要となる

<section>タグ(セクション)
 ページ内の特定の部分や文章のまとまりをグループ化する

<img>タグ(画像)
 画像を表示する

<h>タグ(見出し)
 見出しのレベルを指定し、コンテンツの構造を示す

HTMLをマスターしたら?

HTMLをマスターすることは、WEB開発において基本ではありますが、正しく理解して知識をつけることで、汎用性やユーザーの実用性を意識した高度なWEB開発ができるようになります。

ウェブページの構造を理解し、コンテンツを適切に配置することは、ユーザーがスムーズに情報を閲覧できる使いやすいウェブサイトを構築につながります。また、HTMLをよく理解することで、他のウェブ技術やフレームワーク(CSSやJavaScriptなど)を学びやすくなります。

HTMLの理解は、ウェブ開発の基礎を築くだけでなく、より高度なフロントエンド開発やバックエンド開発にも活かすことができるので、ウェブ開発のキャリアの可能性を広げることができます。

CSSとは?

CSS(Cascading Style Sheets)は、文字や背景を装飾する言語です。
HTMLとよくセットで出てくることが多いですが、HTML同様、CSSもプログラミング言語ではありません。

CSSは、HTMLでマークされた文字や背景の、色や位置、装飾などを指定するスタイルシート言語です。装飾を設定する項目をプロパティと呼び、その数は200種類を超えます!(HTMLのタグ数の倍以上!)

CSSは、セレクタ(要素:適用したいもの)を指定して、要素のデザインやレイアウトを指定するプロパティとどんな風にするか(色や数値など)を設定することで適用されます。

実際によく使われるCSSのプロパティを見てみましょう!

代表的なCSS プロパティ – 5選 –

colorプロパティ
テキストの色を、色の名前(”red”、”blue”など)、RGB値(rgb(255, 0, 0))、または16進数カラーコード(”#FF0000″)で指定する

font-sizeプロパティ
テキストのサイズを、ピクセル(px)、ポイント(pt)、パーセント(%)などの単位で指定する

widthプロパティ
要素の横幅をピクセル(px)やパーセント(%)で指定する

heightプロパティ
要素の縦幅をピクセル(px)やパーセント(%)で指定する

background-colorプロパティ
要素の背景色を色の名前(”red”、”blue”など)、RGB値(rgb(255, 0, 0))、または16進数カラーコード(”#FF0000″)で指定する

CSSをマスターしたら?

CSSをマスターすることで、より高いデザイン性、またユーザビリティの高いページを作ることができるようにもなります。プロパティを1つずつ設置するよりも、HTMLのタグの性質も考慮して複数を組み合わせて実装することが多いです。

上手く使えば、JavaScriptがなくて動きのあるページが作ることもできるので、まずはCSSの基本を押さえて、どんどんレベルアップさせた実践的な学習をして理解を深めることがおすすめです!