【初心者向け】「HTML」「CSS」とは？具体的な使い方と学習方法を解説

この記事で解決できるお悩み

・HTML・CSSってなに？
・いまいち使い方がわからない…
・オススメの勉強方法は？

はじめに
「HTML」「CSS」とは
HTMLの使い方
- よく使うHTMLタグ
CSSの使い方
- よく使うCSSプロパティ
おすすめの学習方法
最後に

はじめに

今回は、これからWEBデザインの勉強始める、もしくは始めたばかりの方に向けてこの記事を書きました。
勉強を始めたけど全然覚えられない。
どうやって勉強したらいいのかわからない
という方も多いと思います。

実際にWEB制作会社に勤務している僕がわかりやすく解説していきます。

※本記事はプロモーションが含まれています。

「HTML」「CSS」とは

まず、HTMLとCSSについて簡単に説明します。
どちらもWEBページを作成するために使用する言語で、HTMLは主にページの土台の役割を持っています。
また、文字も基本的にHTMLに記述することで表示されるようになります。

CSSはページのデザイン（色、フォント、サイズ、配置）などを指定することができます。
この2つを組み合わせることで、おしゃれなページを作ったり自由にカスタマイズすることが可能です。

ケーキでイメージすると、HTMLがスポンジでCSSがクリームやフルーツなどの装飾ですね。

HTMLの使い方

HTMLはタグというものを使って記述していきます。
タグを付けることで見出し、テキスト、リンクなど様々な役割を与えることができます。
実際にHTMLを書いてみるとこんな感じです。

<h1>Hello World</h1>
<p>一般的な文章です。</p>

これを実行してみると↓

h1で囲った部分は自動的に文字のサイズが大きくなりタイトルらしくなります。
今回はかなり簡易的なものですが、このようにタグを使用することで様々な役割を与えることができます。

よく使うHTMLタグ

タグは数多くの種類がありますが、使う機会の多いタグを一部紹介します。

<h1>~<h6>	タイトル
<p>	文章
<a>	リンク
<li>	箇条書き
<img>	画像

これらは必ずと言っていいほど使用するものです。
他にもたくさんあるのでいろいろ使ってみましょう。

CSSの使い方

次にCSSの使い方について解説します。
CSSの記述方法は、CSSを適用するHTML要素を指定するセレクタと、スタイルを変更するためのプロパティを指定します。

以下に例を示します。

h1{
color:#ff6347;
}

p{
color: #0000ff;
}

これを実行してみると↓

このように文字の色を変えることができました。
また、一つの要素に対して複数のプロパティを指定することもできます。

よく使うCSSプロパティ

ここでは、WEBサイトを制作する上で使用する頻度の高いプロパティをご紹介します。
作りたいデザインによって使用するCSSは変わってきますが、ここで紹介するものはほとんどのデザインで使用するプロパティになります。
基本的にコードを暗記する必要はないですが、これらは覚えておくといいでしょう。

color	文字の色
font-size	文字の大きさ
display	要素の状態を変更（ブロック要素、インライン要素など）
text-align	文章の配置（中央寄せ、右寄せなど）
border	線を引く
margin	外側の余白
padding	内側の余白
width	横幅
height	縦幅

最後に

今回は、HTMLとCSSの使い方やおすすめの勉強方法について解説しました。
HTMLとCSSは初心者の方でも独学で十分習得できます。
また、勘違いされがちですが暗記する必要はまったくないです。
学校の勉強と違ってテストがあるわけではないですし、忘れてしまったら調べればOK
暗記よりもどんなことができるか頭で理解することが一番大切なのです。

なのであまり考えすぎず、気軽に始めてみてください＾＾
この記事が、これからWebデザインを勉強しようと考えている方、今勉強している方の参考になれば幸いです。

【初心者向け】「HTML」「CSS」とは？具体的な使い方と学習方法を解説

はじめに

「HTML」「CSS」とは

HTMLの使い方

よく使うHTMLタグ

CSSの使い方

よく使うCSSプロパティ

おすすめの学習方法

書籍

学習サイト

YouTube

プログラミングスクール

最後に

コメント