【初心者用】HTMLとCSSで出来ること
公開日: 2022/6/27
更新日: 2022/6/27
.
1. HTMLについて
かなり細かい言い方をすると、HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」のことで、WEBページを作成するためのプログラミング言語です。
「マークアップ」とは文章の構成や、文章の役割を示すという意味です。
例えば、見出しや段落・表・リンクなど、文章が構成されている要素がどのような役割を持っているかを指定しています。
HTMLの記述によって、検索エンジンがWEBページの構造を把握しやすくなります。
ブログやワードでも、タイトルをつけたり見出しを付けたりすると思うのですが、それらと同じイメージです。
世の中にあるWEBページは、ほぼ全てHTMLとCSSという言語でその見た目が作られています。
CSSについては、今後まとめていこうと考えているので、今は”そんなものもあるんだな”ぐらいで考えて頂ければ問題ないです！
もちろん今皆さんがご覧になられている本ページも、HTMLとCSSを組み合わせて表示されています。
基本的に、WEBページに記載されている文字は全てHTMLで出来ていると考えて問題ありません。
先述したように、文字を「見出し」という役割を持たせたり、その他には「太文字」や「文字の色」を変更して強調したり、「下線」を入れたりすることもあります。
こういったテキストの表現などは、HTMLが指示することによって意図した形に表示されています。
HTMLの基礎を学習するうえで、「タグ」という概念を理解することが重要です。
次章では、「タグ」とは何か？について解説していきます！
「マークアップ」とは文章の構成や、文章の役割を示すという意味です。
例えば、見出しや段落・表・リンクなど、文章が構成されている要素がどのような役割を持っているかを指定しています。
HTMLの記述によって、検索エンジンがWEBページの構造を把握しやすくなります。
ブログやワードでも、タイトルをつけたり見出しを付けたりすると思うのですが、それらと同じイメージです。
世の中にあるWEBページは、ほぼ全てHTMLとCSSという言語でその見た目が作られています。
CSSについては、今後まとめていこうと考えているので、今は”そんなものもあるんだな”ぐらいで考えて頂ければ問題ないです！
もちろん今皆さんがご覧になられている本ページも、HTMLとCSSを組み合わせて表示されています。
基本的に、WEBページに記載されている文字は全てHTMLで出来ていると考えて問題ありません。
先述したように、文字を「見出し」という役割を持たせたり、その他には「太文字」や「文字の色」を変更して強調したり、「下線」を入れたりすることもあります。
こういったテキストの表現などは、HTMLが指示することによって意図した形に表示されています。
HTMLの基礎を学習するうえで、「タグ」という概念を理解することが重要です。
次章では、「タグ」とは何か？について解説していきます！
2. 「タグ」とは何か？
本章では、HTMLの「タグ」について解説していきます。
いきなり本題ですが、「タグ」とは具体的に何を指すのでしょうか？どういう意味なのでしょうか？
端的にいうと、「タグ」とはテキストに意味を与えてあげるための印のようなイメージだとお考え下さい。
また、文字列などをタグで囲んだ情報の単位の事を「要素」と呼び、「タグ」と「要素」はHTMLでよく使用されますので、これを機にしっかりと覚えておきましょう！
下記の例のように、文字をタグで囲うと、ただの文字がh1やh2といった意味を持つようになります。
※最後のタグ（終了タグという）には「/」が入ることに注意してください。
記載忘れなどがあると、エラーが発生しバグの原因になります。
上記のように、タグを付けることによって、テキストに様々な意味を持たせることができます。
見出しに使いたい文字がある時は、その文字を
見出しより重要ではないけど、見出しの次に使いたい文字がある時は、その文字を
上記で紹介したタグ以外にも、頭が痛くなるほど多くのタグがあります。
いきなり本題ですが、「タグ」とは具体的に何を指すのでしょうか？どういう意味なのでしょうか？
端的にいうと、「タグ」とはテキストに意味を与えてあげるための印のようなイメージだとお考え下さい。
また、文字列などをタグで囲んだ情報の単位の事を「要素」と呼び、「タグ」と「要素」はHTMLでよく使用されますので、これを機にしっかりと覚えておきましょう！
下記の例のように、文字をタグで囲うと、ただの文字がh1やh2といった意味を持つようになります。
※最後のタグ（終了タグという）には「/」が入ることに注意してください。
記載忘れなどがあると、エラーが発生しバグの原因になります。
HTML文書
文字列などをタグで囲んだ情報の単位の事を「要素」
上記のように、タグを付けることによって、テキストに様々な意味を持たせることができます。
見出しに使いたい文字がある時は、その文字を
見出しより重要ではないけど、見出しの次に使いたい文字がある時は、その文字を
上記で紹介したタグ以外にも、頭が痛くなるほど多くのタグがあります。
2-1. 良く使われるタグの種類
上記で解説したように、HTMLには多くのタグが存在します。
本章ではHTMLの代表的なタグと、その意味について解説していこうと思います。
hタグ・・見出し：h1, h2, h3…と続く
pタグ・・段落：通常のテキスト
aタグ・・リンクを挿入
liタグ・・箇条書き
strongタグ・・太文字で強調
本章ではHTMLの代表的なタグと、その意味について解説していこうと思います。
hタグ・・見出し：h1, h2, h3…と続く
見出し１
見出し２
見出し３
pタグ・・段落：通常のテキスト
段落
aタグ・・リンクを挿入
リンクを挿入liタグ・・箇条書き
箇条書き strongタグ・・太文字で強調
箇条書き3. CSSとは？
CSSとはHTMLで作成したWebページの文字カラーや大きさ、背景、配置といったスタイル（見た目）を設定するプログラミング言語です。読み方は「シーエスエス」です。
上記でも解説した通り、一般的にWebサイトはHTML（エイチティーエムエル）というプログラミング言語で記述されており、これにスタイル部分のデザイン周りを装飾するために記述するプログラミング言語であるCSSを組み合わせることで、私達が普段見ているWebサイトが構成されています。
CSSはHTMLファイルに直接記述することも可能ですが、一般的なやり方とは少し違い、一般的にはHTMLとCSSは別ファイルで作成されます。
理由はホームページの文字や背景などを、ページ内で統一するためです。
例えば、とある企業のホームページにトップページと商品ページがあったとします。
このとき、それぞれのページでHTMLを作成することとなりますが、2ページとも全く同じような見た目にしたい場合、2つのHTMLファイルに、デザインに関する同じCSSの記述をする必要があり、非効率です。
そこでデザインに関する共通の記述を1つのCSSファイルとして作成し、そのCSSファイルをHTMLに適用することで、HTMLファイルが複数あった場合にでも一貫したデザインを適用することが可能となります。
効率化以外にもソースコードが読みやすくなり、デザインを修正・変更したくなったときに、一括でメンテナンスができるようになります。
上記でも解説した通り、一般的にWebサイトはHTML（エイチティーエムエル）というプログラミング言語で記述されており、これにスタイル部分のデザイン周りを装飾するために記述するプログラミング言語であるCSSを組み合わせることで、私達が普段見ているWebサイトが構成されています。
CSSはHTMLファイルに直接記述することも可能ですが、一般的なやり方とは少し違い、一般的にはHTMLとCSSは別ファイルで作成されます。
理由はホームページの文字や背景などを、ページ内で統一するためです。
例えば、とある企業のホームページにトップページと商品ページがあったとします。
このとき、それぞれのページでHTMLを作成することとなりますが、2ページとも全く同じような見た目にしたい場合、2つのHTMLファイルに、デザインに関する同じCSSの記述をする必要があり、非効率です。
そこでデザインに関する共通の記述を1つのCSSファイルとして作成し、そのCSSファイルをHTMLに適用することで、HTMLファイルが複数あった場合にでも一貫したデザインを適用することが可能となります。
効率化以外にもソースコードが読みやすくなり、デザインを修正・変更したくなったときに、一括でメンテナンスができるようになります。
3-1. CSSで出来ること
先述したように、CSSはHTMLで構築されたWebページに統一のデザインを適用するために記述します。
「sample.css」という名前のスタイルシートにCSSを記述していった場合、CSSを適用させたいHTMLファイルに「sample.cssを適用する」記述を行うことで、そのデザインを適用できます。
もし、2つ以上のスタイルシートを使いたい場合は、2つのCSSファイルを合体させた別の「sample2.css」というCSSファイルを用意しておき、同じようにデザインの記述をしておけば、HTML側で読み込むCSSファイルの記述を書き換えるだけで、「sample.css」と「sample2.css」を使い分けることができます。
CSSでは、文字の色や大きさ、フォント、背景色の変更に加えて、文字や画像を左寄せにするか、中央揃えにするか、2段組みにするか文字と文字の間隔はどれくらいにするか 等といった細かいレイアウトの調整もを行うことが可能です。
また、CSSでアニメーション（動的要素）の記述も可能です。
しかし、より本格的に動的なWebサイトを作る場合は今後紹介するJavaScriptというスクリプト言語を使うことになります。
アニメーション技術を活用することで、マウスがボタンの上に置かれたときに、ボタンの色を変更する（ホバー）、ラジオボタンやチェックボックスをユーザのクリックにあわせて表示する、数秒ごとに画像を切り替える、といったアニメーションの実現が可能となります！
「sample.css」という名前のスタイルシートにCSSを記述していった場合、CSSを適用させたいHTMLファイルに「sample.cssを適用する」記述を行うことで、そのデザインを適用できます。
もし、2つ以上のスタイルシートを使いたい場合は、2つのCSSファイルを合体させた別の「sample2.css」というCSSファイルを用意しておき、同じようにデザインの記述をしておけば、HTML側で読み込むCSSファイルの記述を書き換えるだけで、「sample.css」と「sample2.css」を使い分けることができます。
CSSでは、文字の色や大きさ、フォント、背景色の変更に加えて、文字や画像を左寄せにするか、中央揃えにするか、2段組みにするか文字と文字の間隔はどれくらいにするか 等といった細かいレイアウトの調整もを行うことが可能です。
また、CSSでアニメーション（動的要素）の記述も可能です。
しかし、より本格的に動的なWebサイトを作る場合は今後紹介するJavaScriptというスクリプト言語を使うことになります。
アニメーション技術を活用することで、マウスがボタンの上に置かれたときに、ボタンの色を変更する（ホバー）、ラジオボタンやチェックボックスをユーザのクリックにあわせて表示する、数秒ごとに画像を切り替える、といったアニメーションの実現が可能となります！
4. まとめ
今回はWEBの基礎知識であるHTMLとデザインの基礎部分であるCSSに関して開設させて頂きました。
HTMLとCSSはWEBのプロジェクトをスタートさせる上で必ず外せない知識となっており、開発の現場でも多く活用されているプログラミング言語となります。
基礎的な部分ではありますが、実はHTMLとCSSをしっかりできます！というエンジニアは少ないので需要はかなりあります。
また、少しだけ解説しましたが、デザイン部分をよりオシャレにするためにJavaScriptというプログラミング言語も併せて習得することで、市場価値の高いエンジニアになることが可能です。