プログラミング初心者へのWebデザイナー攻略サイト

パソコンが苦手でプログラミング自体何も知らなかった自分が1ヶ月でWebデザイナーになる方法

【Webデザイナー初心者必見!】絶対に必要なスキルとは

 

こんにちは、ゆうきです。

 

今この記事を読もうとしている人は、「パソコン苦手でプログラミングも全然やったことないけど、Webをデザインしたい!」といったところでしょうか。

 

僕はそんな人達のためのいわゆる初心者の人のための記事を書いております。

 

さて、Webデザイナー(Webをデザインする人)になるためには何を学べばいいのでしょうか??

f:id:programmingkun:20200921000345j:plain

 

Webデザイナーになるためには「これとこれを学べ!」と決まったものはありませんが、これができていないと何もできないというような必要最低限学ばなければいけないプログラミング言語があります

 

では、一体どんなプログラミング言語なのか?

それを今から詳しく説明していきます。

 

 

Webをデザインするのに必要なプログラミング言語

 

結論から言うと「HTML」「CSS」です。

 

名目上、2つに分かれていますが2つで1セットです。というのも、HTMLだけでは何もできませんし、CSSだけでも何もできません。

 

HTMLとCSSで初めてWebをデザインすることができるのです。

 

では、HTML・CSSをそれぞれ分けて説明していきます。

 

HTML

f:id:programmingkun:20190716173143j:plain

 

・HTMLとは?

 

HTMLは、Webページの骨格を作るための言語です。Webページに表示したい文章やWebページの情報を独自のタグで挟むことでHTMLを書いていきます。

 

インターネット上に公開されているWebサイトでHTMLを使っていないものはほとんどありません。

今、あなたが見ているこのページにもHTMLが使われています。

 

とはいえあくまでもHTMLで書くのは、Webページの骨格です。HTMLだけで作られたWebページは文字と画像だけが並んだ白黒の単調なものになってしまいます。

 

・HTMLの書き方

 

HTMLとはテキスト(文字)に目印をつけて文章に構造を与えるための言語です。

目印をつけたテキストは、それぞれ役割を持った「要素」となり、それらの要素の集合体が1つのWebページを形成しています。

 

要素には、文章の見出しを指定するh1要素や、段落用のp要素などさまざまな種類があり、それらを組み合わせることでWebページの文章構造や段落が出来上がるのです。

f:id:programmingkun:20190716172604j:plain

そして、HTMLを書く際に必ず一番初めにHTMLを宣言するためのコードを書く必要があるコードがあります。それが

<!DOCTYPE html>

です。

 

こうすることで、HTMLを書くことができます。

 

CSS

f:id:programmingkun:20190716173024j:plain

 

CSSとは?

 

CSSは「Cascading Style Sheets(カスケード・スタイル・シート)」の略で、HTMLが文書構造を指定する言語であるのに対して、CSSはそのHTML文書のレイアウトや装飾など見た目を指定するための言語です。

 

なので、CSSはHTMLで作った文書で行うのでCSSだけで使うことは出来ないんです。

 

CSSの書き方

 

CSSの記述は、セレクタプロパティの3つで構成され、以下のように書きます。

 

セレクタ { プロパティ : 値 ; }

 

セレクタとは適応する対象(どれ)、プロパティとはスタイルの種類(何を)、値には適応させたい結果(どうするか)を設定します。

 

つまり、

どれの { 何を : どうするか ; }

が基本的な書き方になります。

 

これを実際にコードで当てはめてみると以下の図のようになります。

f:id:programmingkun:20190716180309p:plain

 

このようにして文字や背景の色を変えたりカラフルな線を引いたり余白を調整したりします。

 

まとめ

 

どうでしたか?

 

HTML・CSSはWebを作るためのプログラミング言語なので、Webデザイナーになるには、HTMLとCSSは最低限習得していないといけません。

 

そこから、JavaScriptPHPといった難易度の高い言語を学び、さらにクオリティの高いWebを作っていきましょう!!

 

 

 

現在プログラミング初心者の方限定にたった数日でHTML・CSSを攻略したい人を募集しています。
*ただし本気で取り組む方のみ



詳しくはこちらの記事をご覧ください。

programmingkun.hatenablog.com