WEBデザインの勉強ならまずは入門編としてHTML・CSSを!

最後まで読んで頂きありがとうございました。 この記事を気に入って頂けたらシェアしてくれると嬉しいです。

どうも!やないです。

実は私、5月から
札幌の職業訓練
(WEBデザインクリエーター科)に
通っているのですが
11月で卒業なので学生でいるのも
もう残り僅かになりました。
訓練校に入学した時は
Photoshopとか
HTML(WEB上の文書を記述するための言語)とかは
ほとんど使えませんでした。
せいぜいHTMLを独学で
ちょっとかじったことがあるくらい。
しかし今では簡素なWEBサイトなら
どうにか作れるくらいにまでなりました。
訓練校の先生方の指導のおかげです。
 今回はそんな僕が
WEBデザインの勉強をするにあたって
まずは何を勉強するべきなのかを
説明いたします。

HTML

 何といってもまずはこれでしょ!
まずHTMLというのは
WEBサイトを制作するために
絶対に欠かせない言語になります。
何故なら僕らが見ているWEBサイトの
ほとんどがこの
HTMLで成り立っているからです。
例えばヤフージャパンのサイト

f:id:yanai8713:20160907182718p:plain

ここで右クリックを押して

「ページのソースを表示」を

押してみましょう。

f:id:yanai8713:20160907182902p:plain

ででん!

f:id:yanai8713:20160907183019p:plain

なんだか大量の文字コードが出てきましたね・・。

 これはWEBページの元になっている

ソースコードというやつです。

この中に含まれる

HTMLタグで成り立っている文書が

ブラウザに読み込まれて

僕らが見るヤフーの

WEBサイトになるというわけです。

※HTMLタグとはソースコード上にある<h1>や<head>のことを指します。

僕は今学校でこれらを駆使して

WEB制作を勉強しているというわけです。

え?ぴんとこない?

 じゃあもっとかみ砕いて説明しますよ。

HTMLとは・・・

これだ!

<html>

 <head>

 </head>

 <body>

 </body>

 <footer>

 </footer>

</html>

 ・・・え?ますます分からなくなったって?

でもでも、よく見てください。

htmlの中に

headやらbodyやらfooterあるでしょ。

head=頭
body=体
footer=足

 

そう!これは人間の体だと思えばいいのです!

f:id:yanai8713:20160908172545p:plain

HTMLとはすなわち人間の体だ!
WEBサイトは人間のように
htmlがあってその中に
頭(head)と体(body)足(footer)がある。
さらにその中に画像やら活字やらを
ぶっこんでWEBページとして成り立たせるというわけです。
どうです?簡単でしょ?

 CSS

ですがHTMLだけでは活字やら画像やらを

ぶち込むことは出来ても

背景の色を変更したり

オシャレにWEBページを

デザインすることはできません。

どうしよう・・このままでは

味気ないWEBサイトになってしまいます。

そこでCSSの出番です。

CSSとは なにか?

HTMLと合わせて使う言語のことです。

CSSはHTMLで組んだ活字やら背景やらを

どのように装飾するか(色を変えてみたり横線を引いてみたりなど)

指定することが出来ます。

例えばhtmlの中に文章があったとしましょう。

<html>

 <head>

 </head>

 <body>

<p>見せてやろう!超エリートサイヤ人の圧倒的パワーを!</p>

 </body>

 <footer>

 </footer>

</html>

 

※ちなみにここでいう<p>はバラグラフ、つまり段落の意味を持っています。htmlのなかでは文章をくくるのに必要です。

 

例えばここで<p>と</p>の間にある文を赤くしたい場合、どうすればいいか?

そのためにはこのHTMLとは別に

スタイルシートというものを作成し

HTMLに反映できるよう設定し

そこに以下のように

入力する必要があるわけです。

まずpを入力しカッコでくくり色を指定します。

p{color: red;}

 

すると

「見せてやろう!超エリートサイヤ人の圧倒的パワーを!」

の部分が赤字になります。

こんな感じでCSSは

HTMLとあわせて使っていきます。

HTMLで出来た骨組みに

CSSで肉付けしていくという

感じですね。

どうでしょう?結構面白いでしょ?

こうしてWEBサイトは

出来上がっていくのです。

おすすめ参考書

 最後にボクがHTMLとCSSの勉強をするにあたって

一番はじめに使用したテキストを紹介します。

こちらのテキストは初心者向けなのですが

実際にWEBサイトを作りながら

勉強することが出来るので

まるでゲームみたいに

楽しみながらやれます。

このテキストが終わるころには

簡単なWEBサイトは作れるようになります。

トップへ戻る