デザイン&クリエイティブ

【html基礎】未経験・副業Webデザイナーにまず抑えてほしいhtmlの基礎

・副業でWebデザイナーとして働きたい!
・Webデザイナーとして働くなら、html/cssを学習しておくといいよと言われたけど、実際どうやって学習を始めればいいの?
・html/cssを見たことがあるけど、どこから学び始めたらいいかわからない。

そんなあなたに、簡単なhtmlコードの書き方とまずは抑えてほしいhtmlコードを紹介させて頂きます!

まずは、テキストファイルでコードを書いてみることから始めてみましょう。

【html基礎】未経験・副業Webデザイナーにまず抑えてほしいhtmlの基礎

htmlで何ができるの?

htmlとは、Hyper Text Markup Languageの略で、Webページ上のテキストや文章に当たります。


htmlで書かれたhtmlファルを、Webサーバーが読み込みをすることで始めて、Webページ上にテキストが反映されます。


htmlはwindowsならメモ帳、mac OSならCotEditorで気軽にコードの記入をすることができます。その他開発環境、クラウドサービスでもコードの記入をすることができますが、まずはテキストエディタを開いてコードの記入を試してみましょう!

htmlで何ができるの?

基本構成

まずは、htmlの基本構成からです。htmlは大まかに<head>と<body>で構成されています。


headではサイトの要素やリソースが記入されます。


Web上のページ内に実際目に見える形で現れるのは、bodyで囲まれた箇所です。


↓の画像であれば「本文です。」の文字がWeb上に表示されます。


<header>と<footer>はbody内に記入され、ヘッダー画像やメニューバーを表示するためにはheader、著作権を示したりサブナビゲーションをつけるにはfooterが使われることが多いです。

基本構成

テキストの段落と改行タグ

Webページ上にテキストを記入する際、一つの段落を表すのが<p>タグです。


この<p>タグを使うことで、Webサーバーが<p></p>で囲まれたくくりを一つの段落として認識します。


<p>タグ内で改行をしたい場合は<br>を使用します。注意点として、段落ごとの改行を行う時は<p>タグを使うようにしましょう。


<p>タグはコンピューターに「ここまでが一つの段落」だよと知らせる役割があるからです。

テキストの段落と改行タグ

見出しタグ

次に、h1〜h6についてです。<h>タグのhはHeadingの略で、「見出し」を意味しています。


h1が一番大きい見出しを表し、数字が大きくなるほど見出しの重要度は低くなります。h1のタグはWebサイトのタイトル、メディア記事のタイトルとなることが多いです。


注意点として、<h2>の見出しが<h3>の見出しの中に含まれているなど、重要度の高い見出しが重要度の低い見出しの中に含まれないように気をつけましょう。

見出しタグ

div要素、id・class属性

最後に、div要素とid、class属性についてです。


<div>単体としては特に意味を持ちません。画像を見るとidタグと共に使用されていることがわかると思います。一つの括りを表す要素と考えておきましょう。idタグは一括りの大きい見出し、classは小さいタイトルや性質です。


idタグは同じページに1回だけ、classタグは何度も使用できます。cssと適応させる際に、このidタグとclassタグを欠かすことができないのです。

div要素、id・class属性

まとめ

htmlのコードの書き方と、まずは抑えてほしいhtmlの基礎なんとなくでもご理解いただけましたでしょうか?


実際にテキストファイルでコードを書いてみると、一定の法則で使用されていることがわかると思います。


ここまでの使用方法を理解していると、他の要素も調べるだけで使用することが可能だと思います。div、id、classについては少し難しかったかもしれません。実際cssと共に使用すると理解しやすくなるので、今は頭の片隅に置いといて頂ければと思います。

Written by ねねまる
現在フリーWebデザイナー・フリーライターとして活動しております。
女性向け商品のLP制作/個人経営カフェのHP制作/女性向けのライフスタイル・デザイン・プログラミングの記事作成が得意です。

PICK UP NEWS