icon
icon

これだけは知っておきたい!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を書くと、このような構造になっています。

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の基礎から学ぶことができます。