2018.02.23どうも!やないです。実は私、5月から札幌の職業訓練校(WEBデザインクリエーター科)に通っているのですが11月で卒業なので学生でいるのももう残り僅かになりました。訓練校に入学した時はPhotoshopとかHTML(WEB上の文書を記述するための言語)とかはほとんど使えませんでした。HTMLを独学でちょっとかじったことがあるくらい。今では簡素なWEBサイトならどうにか作れるくらいにまでなりました。訓練校の先生方の指導のおかげです。今回はそんな僕がWEBデザインの勉強をするにあたってまずは何を勉強するべきなのかを説明いたします。スポンサーリンクスポンサーリンク目次HTMLCSSおすすめ参考書HTML何といってもまずはこれでしょ!まずHTMLというのはWEBサイトを制作するために絶対に欠かせない言語になります。僕らが見ているWEBサイトのほとんどがこのHTMLで成り立っているからです。ヤフージャパンのサイトここで右クリックを押して「ページのソースを表示」を押してみましょう。!なんだか大量の文字コードが出てきましたね・・。これはWEBページの元になっているソースコードというやつです。この中に含まれるHTMLタグで成り立っている文書がブラウザに読み込まれて僕らが見るヤフーのWEBサイトになるというわけです。※HTMLタグとはソースコード上にある<h1>や<head>のことを指します。僕は今学校でこれらを駆使してWEB制作を勉強しているというわけです。え?ぴんとこない?じゃあもっとかみ砕いて説明しますよ。HTMLとは・・・これだ!<html><head></head><body></body><footer></footer></html>・・・え?ますます分からなくなったって?でもでも、よく見てください。htmlの中にheadやらbodyやらfooterあるでしょ。head=頭body=体footer=足そう!これは人間の体だと思えばいいのです!HTMLとはすなわち人間の体だ!WEBサイトは人間のようにhtmlがあってその中に頭(head)と体(body)と足(footer)がある。その中に画像やら活字やらをぶっこんでWEBページとして成り立たせるというわけです。?簡単でしょ?CSSですがHTMLだけでは活字やら画像やらをぶち込むことは出来ても背景の色を変更したりオシャレにWEBページをデザインすることはできません。しよう・・このままでは味気ないWEBサイトになってしまいます。そこでCSSの出番です。なにか?HTMLと合わせて使う言語のことです。CSSはHTMLで組んだ活字やら背景やらをどのように装飾するか(色を変えてみたり横線を引いてみたりなど)指定することが出来ます。htmlの中に文章があったとしましょう。<html><head></head><body><p>見せてやろう!超エリートサイヤ人の圧倒的パワーを!</p></body><footer></footer></html>※ちなみにここでいう<p>はバラグラフ、つまり段落の意味を持っています。htmlのなかでは文章をくくるのに必要です。ここで<p>と</p>の間にある文を赤くしたい場合、どうすればいいか?そのためにはこのHTMLとは別に「スタイルシート」というものを作成しHTMLに反映できるよう設定しそこに以下のように入力する必要があるわけです。pを入力しカッコでくくり色を指定します。red;}すると「見せてやろう!超エリートサイヤ人の圧倒的パワーを!」の部分が赤字になります。こんな感じでCSSはHTMLとあわせて使っていきます。HTMLで出来た骨組みにCSSで肉付けしていくという感じですね。?結構面白いでしょ?こうしてWEBサイトは出来上がっていくのです。最後にボクがHTMLとCSSの勉強をするにあたって一番はじめに使用したテキストを紹介します。こちらのテキストは初心者向けなのですが実際にWEBサイトを作りながら勉強することが出来るのでまるでゲームみたいに楽しみながらやれます。このテキストが終わるころには簡単なWEBサイトは作れるようになります。2013-05-24Amazonガジェット将来の計画スポンサーリンク最後まで読んでいただきありがとうございました。この記事を気に入っていただけたらシェアしてくれると嬉しいです。「やないやないか!」著者。最新情報をお届けします。「やないやないか!」著者。