新米UIUXデザイナーがHTMLとCSSを学んで副業でサイトを作ったりできるようになったので、勉強するプロセスをまとめました。
勉強する順番
- [1]エディタのインストール
- [2]基本的なCSSの記述を学ぶ
- [3]HTMLでよく使うタグを学ぶ
- [4]レイアウトを学ぶ
- [5]とりあえず簡単なページを作ってみる
- [6]ちょっと本格的なページを作ってみる
[1]エディタのインストール
エディタとはざっくり言うとコードを書く用に便利になっているソフトウェアのことです。
とりあえずなんでもいいので以下のどちらかのメジャーなエディタをインストールしてください。
https://visualstudio.microsoft.com/ja/downloads/
https://atom.io/
インストールできたら[2]に進みましょう。
[2]基本的なCSSの記述を学ぶ
CSSは基本的に全て以下のような形で書きます。
HTML
<p>赤色になるよ</p>
<p class="text">青色になるよ</p>
CSS
p {
color: red;
}
.text {
color: blue;
}
１つ目はHTMLのpというタグに対してCSSで文字色が赤色になるように指定しています。
２つ目はHTMLのclass="text"に対してCSSで文字色が青色になるように指定しています。
class="クラス名"で指定するときはそのクラス名の前に.をつけ、.クラス名という風に指定します。
形は以下のように常に同じです。
HTMLの指定したい部分の名前 {
hoge: 値;
}
/*
正確に言うと
セレクタ {
プロパティ: 値;
}
*/
では１つ目と２つ目の指定の仕方の違いはなんでしょう。
以下のような場合を考えてみてください。
①２つの文字を同じ文字色にしたいとき
<!-- ２つの文字を同じ赤色にしたい -->
<p>赤色にしたい</p>
<p>赤色にしたい</p>
<p class="text1">赤色にしたい</p>
<p class="text2">赤色にしたい</p>
/* ひとつのpで指定できる */
p {
color: red;
}
/* わざわざ2つのクラスで指定しなければならない */
.text1 {
color: red;
}
.text2 {
color: red;
}
②２つの文字を違う文字色にしたいとき
<!-- ２つの文字をそれぞれ赤色と青色にしたい -->
<p>赤色にしたい</p>
<p>青色にしたい</p>
<p class="text3">赤色にしたい</p>
<p class="text4">青色にしたい</p>
/* pで指定すると後に書いたcolor:blue;が2つのpに反映され、どちらも青色になる */
p {
color: red;
}
p {
color: blue;
}
/* それぞれのクラスで指定できるので色を分けられる */
.text1 {
color: red;
}
.text2 {
color: blue;
}
pタグで指定すると広い範囲を指定できる、クラスで指定すると狭い範囲を指定できるということです。
（①のような場合は単にクラスtextで赤色にしたい２つを指定することもできますが、指定の仕方の違いを説明する例として示しています）
また、タグ・クラスとは別に、#idで指定することもできるのですが、とりあえずその２つの指定方法を覚えておけば大丈夫です。
練習問題（所要時間15分）
では以下のようなHTMLがあったとき、CSSはどのようになるか、問題を解いてみましょう。
index.htmlとstyle.cssというファイルを作成し、[1]でインストールしたエディタで開き、style.cssにコードを書いていきましょう。
index.htmlには以下をコピペしてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>基本的なCSSの記述を学ぶ</title>
</head>
<body>
<p class="text">この文字を赤色 (red) にしてみよう</p>
<div class="block">
<p class="block_text">
blockを横幅500px、縦幅300pxにしてみよう<br>
blockの背景色を青色 (blue) にしてみよう<br>
blockに5px solid yellow のborderをつけてみよう<br>
textの色を白く (white) してみよう
</p>
</div>
<div class="section">
<h2></h2>
<div class="section_first">
<p>こちらの文字は #3498db に</p>
</div>
<div class="section_second">
<p>こちらの文字は #e67e22 にしてみよう</p>
</div>
</div>
</body>
</html>
CSSのプロパティが分からなければ以下のサイトを参照してください。
http://www.htmq.com/style/
答えは次の記事に記載します。