初心者のWEBデザイン入門！HTML/CSSの独学方法まとめ

おおかみくん

ひつじくんひつじくん。俺のサイトカッコよくしたいんだけど、サイトデザインって何から始めればいいんだ？

ひつじくん

それならまずはHTML/CSSの基礎から学んでいけばいいんじゃないかな？

おおかみくん

え、えいちてぃーえむえる！？やばい、持病の頭痛がひどくなってきたぞ。

「今のサイトをもっと綺麗にデザインしたい！でもやり方がわからない」という人は多いのではないでしょうか？

WordPressのテンプレートを使えばある程度綺麗なサイトを作ることが出来ますが、オリジナリティを出していくならHTML/CSSの知識が絶対必要になってきます。ただ、HTML/CSSって聞くだけで頭が痛い人もいるのではないでしょうか？

そこで当記事では、誰でも理解できるくらいにHTML/CSSをわかりやすく解説していこうとおもいます。コードについては敢えて詳しく解説せず、HTML/CSSというプログラム言語の全体像を掴んでいただけるように作りました。

WEBデザイン入門｜HTML/CSSの基礎知識

HTMLとは、箱（ボックス）を作るプログラム言語

サイトというのは、実はボックス（HTML）の集合体なんです。

たとえば、当サイトのサイドバーにあるプロフィールなんかも箱の集合体なんです。一見複雑なデザインなように見えるかもしれませんが、幾つもの箱が組み合わさって1つの箱を魅せているのです。

CSSとは、箱（ボックス）を彩るプログラム言語

そして、配置された箱をデザインするのがCSS（スタイルシート）ですね。

箱にはそれぞれHTMLの名前が付けられていますので、これにCSSコードを当てていくと箱のデザインが出来上がっていきます。背景色/余白/箱の大きさなどいろんなことをCSSで決められます。

WordPressならCSSだけ覚えればOK！

WordPressはHTMLコードは標準記載されている

「WordPress」を使っているなら、HTMLコードを覚える必要は実はあまりありません。

なぜならWordPressのテンプレート（AFFINGER4,賢威など）にはHTMLが標準記載されているからです。この事前に用意されたHTMLにCSSを当てはめればデザインができていまいますので、HTMLコードを知っておく必要はあまりないのです。

記事の投稿部分で使う「h2」「h3」「li」「ol」「a」くらいを知っていれば十分です。これも基本的に書く必要はなく、タグを使うだけで入力できますしね。

ただ、オリジナリティの高いデザインをするならHTMLコードを自分で組んだりする必要もあります。「俺にしか作れないカッコイイサイトを目指すぜ！」というなら是非HTMLコードを覚えてガンガンコードを組んで行って欲しいですが、そうでない限りは知らなくて大丈夫ですね。

CSSを覚えるだけで基本的なデザインはできる

WordPressテンプレートには、HTMLコードが標準記載されています。だから自分でHTMLコードを書く必要はほぼないのですね。HTMLは箱を作っているということだけ知っておけば問題なしです。

したがって、CSSさえ覚えてしまえばオリジナリティのあるWEBデザインができてしまうというわけです。

CSSを覚えれば、箱（HTML）の名前を見てそれにデザインを当てはめるだけですからね。検証ツールでサイト研究したり、書籍を読んだりして少しづつCSSを学んでいきましょう。

簡単なデザイン練習をしてみよう！

HTMLを投稿に書いてみる（本来なら不要）

ではお試しにHTMLコードを書いて、CSSを当てはめてみましょう。

WordPressにはHTMLは標準記載されているので書く必要はほぼないのですが、今回は練習のために書いてみましょう。WordPressの記事作成画面を開いて、新規記事の中に以下のコードを記載してください。

<div class="box01">

お試しテキストです。

</div>

このコードが書けたら記事を公開してください。（非公開記事にしておけば誰も見れないし、インデックスもされないのでおすすめです。）

スタイルシート(style.css)に記載する

ではスタイルシートにCSSを記載して、先ほど書いたボックスを飾りつけてみましょう。

WordPressの管理画面を開いて、「外観」>「テーマ編集」と進んでください。

そうするとスタイルシート（style.css）が見つかるはずなので、スタイルシートの最下部に、以下のコードを記載してみてください。

.box01{
	background-color: #E8FCFF; /*背景色を水色に*/
	padding: 20px;　/*ボックスを大きく*/
	margin: 10px;　/*ボックスの外に余白を*/
	border: 2px solid #1FD8F4;　/*青の枠線をつける*/
}

ボックスが装飾されて完成！

CSSが適応されると、ボックスが以下のように装飾されます。

うまくできましたでしょうか？もし上手く反映されない時は「更新ボタン」か「キャッシュ削除」を試してみてください。

このようにして実際にコードを書いて、1つ1つ勉強していくと、少しずつ少しずつデザインができるようになっていきます。

最初は難しくて辛い部分も多いかと思いますが、1度覚えてしまえばアフィリエイトする上では一生の武器になりますので、十分練習する価値があると感じますね。

独学するなら参考にしたいCSS入門書

ああしたい、こう変えたいが手にとるようにわかる CSS基礎

[amazonjs asin=”4844365126″ locale=”JP” title=”ああしたい、こう変えたいが手にとるようにわかる CSS基礎”]

最後に書籍の紹介ですが、これからCSSを学び始めるなら間違いなく本書がおすすめです。

本当に必要最低限な基礎部分が書かれていますので、「CSSっていったいなんやねん」という状態の人にはぴったりですね。完成デザインを元にコードを逆引きできますので、サイトを作りながら部分的に覚えていけるのが嬉しいです。

人によっては他もおすすめ？

[amazonjs asin=”4797372966″ locale=”JP” title=”スラスラわかるHTML&CSSのきほん”]

[amazonjs asin=”4883379647″ locale=”JP” title=”HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)”]

[amazonjs asin=”4797388544″ locale=”JP” title=”いちばんよくわかるHTML5&CSS3デザインきちんと入門 (Design&IDEA)”]

HTML/CSS本はいろいろなものがリリースされています。わかりやすい本というのは人によって結構異なりますので、これらを読み比べた上で最もしっくりくるものを採用するのもアリかと思いますね。

まとめ

HTML/CSSの基礎と勉強方法のまとめでした。なんとなくHTML/CSSの全体像は掴めましたでしょうか？

全体像を掴んだら後は練習あるのみです。検証ツールで綺麗なサイトのデザインを研究したり、参考書を買ってきて1つ1つ手を動かしながら覚えていったりするのが、サイトデザイン上達への近道ですね。

かなり地道ですが、デザインに興味があるなら少しずつトライしてみてはいかがでしょう？