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

スポンサーリンク

f:id:yanai8713:20160908172055j:plain

はじめに

どうも!やないです。

実は私、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サイトは作れるようになります。

スポンサーリンク

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

フォローしていただけたらお得な情報をお届けします。

Facebookページへのいいねボタン
この記事をお届けした「やないやないか!」更新情報を、いいねしてチェックしよう!