WEBデザイナーを目指す人はこの記事をまず読んで!

2021/11/09

PC全般

t f B! P L

現在webデザイナーを目指して勉強中の私が、それぞれの言語の特徴とおすすめのテキストをご紹介します。

WEB制作を学ぶ際には、初めにアウトラインを理解していると勉強が進めやすくなります。

そして何よりも大切なのは、実際に作りながら学習することだと思います。

自分の趣味を紹介するサイトなどを作りながら練習をするのが、WEB制作習得への近道でしょう。

HTMLCSSjQueryについてまずはざっくりと解説します。


HTMLとは?

HTMLでなにができるのか

一言で言うと、このHTMLだけでWEBサイトは制作可能なんです。

HTMLで書かれた文章をWEBサーバーにアップすればインターネット上に乗り、誰でも閲覧できる状態になります。

他のCSSJavaScriptなんかはそれ単独ではWEBサイトを作ることはできません。

私たちが普段使っているブラウザ(クローム、エッヂなど)は基本的にHTMLを読み込むための装置だと思ってください。


学習難易度

学習難易度は低いです。中学生でも十分書けてしまいます。

プログラミングのように、計算をさせたり流れを考慮する必要はなく、決められた手順で記述するだけです。

たくさんある「タグ」を全てを覚える必要もないので、こういうものかということが理解できていればOKです。


CSSとは?

CSSでなにができるのか

HTMLだけでWEBサイトは制作が可能だという話をしましたが、それだとコンテンツがただ箇条書きに表示されるだけで、レイアウトも色も何もない状態です。

そこでこのCSSを使い、レイアウトを行っていきます。

文字のフォントや大きさを指定してあげたり、文字間の幅の調節、見出しと本文の間のスペースの調整など、見た目に関することはほとんどすべてCSSで指定してあげます。

通常、このCSSはHTMLとは別ファイルに書き込んで、ブラウザがHTMLを読み込んだ際に一緒にCSSも読み込まれるようにリンクを貼っておき、見た目を整えるという流れになります。

なので、HTMLだけではただの文字の羅列になってしまうところに、このCSSでレイアウトや装飾をしてあげて、WEBサイトを見ている人が中身(コンテンツ)をより理解しやすいようにする働きをするのが、このCSSです。

最近必須となっているレスポンシブ(PCでもスマホでも見られるサイト)もこのCSSで対応ができてしまいます。

バージョンアップするたびに機能が追加されている、いろいろなことができる言語です。


学習難易度

こちらもHTML同様、学習難易度は低いです。

HTML同様に、どのように動くかという仕組みさえ理解していればOKです。

ですが、ページの崩れなどを確認しながらレイアウトをしていく作業は根気が必要です。

HTMLもそうですが、言語自体は簡単なのですが、実際に手を動かしてたり調べたり、粘り強く一つずつ作業していく必要があります。

jQueryとは?

jQueryでなにができるのか

上記で説明したように、HTMLCSSだけでWEBサイトは制作可能です。

インターネットがまだ発展途上だったころはそのようなサイトも多かったです。CSSさえ使わずにHTMLだけで書かれたサイトも多くありました。

その2つではできないことをできるようにするのが、このjQueryと覚えてください。

jQueryHTMLCSSのような言語の名前ではありません。

JavaScriptという言語を使いやすいようにまとめたもの、と覚えましょう。

現段階ではそれで充分です。


例えば、画像をクリックしたら拡大表示になったり、ランダムに画像を表示させたり、マウスカーソルを乗せると画像が切り替わったり…そんなCSSではできない動きのある機能をWEBサイトに追加することができます。

JavaScriptそれ自体はとても難易度が高い言語なのですが、このjQueryを利用することで、その機能を簡単にWEBページに追加できるというわけです。


学習難易度

学習難易度はHTML,CSSに比べてやや高いですが、基本的にコピペをするだけでWEBサイトに機能を追加できるので、そんなに難しいことはありません。

JavaScriptを一から勉強することに比べれば、全然簡単かつ気軽に使えるのが、このjQueryです。


HTMLとCSSのおすすめテキスト

HTML5&CSS3標準デザイン講座 30LESSONS【第2版】


フルカラーでわかりやすいテキストというのが第一印象です。

基本的なマークアップの方法から、CSSによるレイアウトの応用までを一冊で網羅しています。一冊でHTMLとCSSを済ませたいと考えている人にはお勧めできるテキストです。

もちろんこの「第二版」は最新のものに準拠しているので、すでにweb業界で働いている方も手元に置いておくと何かと便利な一冊であると思いますよ。


jQueryのおすすめテキスト

jQuery標準デザイン講座


こちらもフルカラーで初心者でもわかりやすく書かれています。

そもそもjQueryとは?といったところからダウンロードの方法、記述のルール、実際にどのような動きを実装できるのかが段階的に難しくなりながら解説されています。

「標準デザイン講座」と書かれていますが、この本は初心者用です。

世界一わかりやすい」とか「超簡単」とか帯に書かれているものよりも簡単に書かれていると思います。

この本の良いところは、基礎学習だけではなくサンプル制作例が豊富に掲載されており、それぞれのデザインも洗練されているところです。なので、応用するイメージが湧きやすく、より実践的な内容になっています。

まとめ:WEBデザイナーを目指して勉強を始めよう!


いまだにWEB業界では人手不足の状況が続いているようなので、少し頑張って勉強をし現場で経験を積めば、好待遇の会社への転職も可能で、将来的にはフリーランスの道も見えてきます。

私もまだ、勉強を開始したばかりなので偉そうなことは言えませんが、とりあえず毎日少しずつ積み上げていこう!と努力しています。


今後も勉強のコツや使える情報をアップしていく予定です。

一緒に勉強を頑張りましょう!

QooQ

TOP