これだけは知っておきたい！HTML/CSSの基礎【人事担当者のためのIT勉強会レポート】
TechAcademyで開催しているIT勉強会のレポート記事です。今回は「HTML/CSSの基礎」がテーマです。Webサイトを作る際の、基礎中の基礎の内容ですので、初心者の方はまずお読みください。サンプルコードつき。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
今回のテーマは、HTML/CSSの基礎です。
なお、こちらの内容はTechAcademyのWebデザインオンラインブートキャンプでも扱っています。
HTMLの基礎
まずはHTML（Hyper Text Markup Language）について学びました。
HTMLはあくまでも文書ですので、文書を書くことが前提になっています。その上で、画像やリンクも追加できます。
また、ファイルの拡張子は「.html」です。よく耳にする「マークアップ」とは文字列をHTMLタグで囲むことによって正しい文書構造を作ることです。
実際にHTMLを書くと、このような構造になっています。
headは見出し、bodyは本文です。
開始タグと終了タグがあるので、<p>〜</p>のように閉じることを忘れないようにする必要があります。
勉強会では、基本的なHTMLタグとして下記のタグが紹介されました。
- <html> HTML文書の範囲を示す
- <head> ページのヘッダー情報の範囲を示す
- <title> ページのタイトルを示す <head>タグ内で使用
- <body> ブラウザに表示する内容を記述する範囲を指定
- <p> 段落を示す
- <br> 改行を示す
- <h1><h2> 見出しを表示する 1-6までのレベルがある
- <div> まとまりを示す グループ化する
- <ul> 順番の無いリストを表示する
- <ol> 番号順のリストを表示する
HTMLを書く上で気をつけること
実際に書き始める前の注意点についても紹介されています。
まず、HTMLを書く際は全角文字がNGなので、コードは必ず半角英数字で書く必要があります。同じく、全角スペースもエラーの原因となるため、見分けれるようにエディタを設定することも多いです。
その後、勉強会では参加者が実際にプロフィールページをHTMLで作成しました。
テキストエディタを使って、まずは自分のプロフィールを打ち込んでいきます。続いて、HTMLを書き加える形でコーディングしていきました。
どうしてタグを書かなければいけないんですか？
HTMLは書籍や書類、手紙などのように実際の形は無いよね。見出しとかタイトルとかを指定してあげなければならないんだよ。
レイアウトやデザインで工夫すれば、わかってもらえないんでしょうか？
サイトに訪問してくれた人にはわかって貰えるだろうけど、検索エンジンにはわかってもらえないよね。検索エンジンはタグによって、ページのタイトルとかを判断しているんだ。
なるほど！検索エンジンに知ってもらうためだったりもするんですね～。
CSSの基礎
CSS（Cascading Style Sheets）の基礎も学びました。
CSSは、見栄えを記述するための言語です。HTMLだけでも装飾することはできますが、HTMLだけを使うと手間がかかるのでCSSを使うと便利になります。拡張子は「.css」です。
また、CSSには、「セレクタ」「プロパティ」「値」の3つがあります。
- セレクタ：対象となるHTMLの要素を指定
- プロパティ：セレクタに対する修飾方法を指定
- 値：プロパティの値
例えば、h1タグの文字を「フォントサイズを20px」にする場合はこのように記述します。
h1 {
font-size: 20px;
}
この際、h1がセレクタ、font-sizeがプロパティ、20pxが値となります。
最後に、CSSの書き方として「CSSを別ファイルにした場合」と「HTMLに直接書く場合」の2つが紹介されました。
HTMLに直接書く場合は、styleタグを使ってこのように記述します。
<html>
<head>
<style type=”text/css”>
h1 {
color:red;
}
p { font-size: 12px; }
</style>
</head>
<body>
<p style=”color:red”>この文章は赤で表示されます</p>
</body>
</html>
ぜひこのコードも参考にして自分でHTML/CSSを書いてみてください。
今回の勉強会レポートは以上です。
勉強会に興味のある人事担当者の方は、まずはFacebookグループにご参加ください。
CSSを適用するには、外部ファイル、ページに定義、タグに直接定義の3つでいいですか？
そうだね。タグに直接定義するような内側にあるほうが、優先度が高いんだよ。
CSSだと見た目を大きく変えられるので、HTMLより興味があります。
ただ、デザインも適した箇所に設定したほうがいいのでHTMLの基礎も大事なんだよ。
[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTML/CSSの基礎から学ぶことができます。
