【Webデザイン】コーティングはこの2つだけ知ってりゃ出来る！？

Webデザインをこれから始めようと思っている人に向けて、僕なりのアドバイスをお伝えしています。

前回は「Webデザインを独学で勉強するためのポイント」をお伝えしました。

と言うことで今回はもうちょっと踏み込んで「コーディングの基本的な考え方」についてお話します。

コーディングとは？

まずはコーディングって何？って部分から解説していきます。

基本的に「コーディング」とはコードを書いてプログラムを作っていく事を言います。

Webデザインにおいてコーディングとは「HTML等でマークアップしてCSSでスタイリングする」事です。

よく「プログラミング」と「コーティング」をごっちゃにして考えてる人もいるけど、ちょっとニュアンスが違います。

プログラミングとの違い

プログラミングとコーディングの違いを軽く説明しときますね。

正確な事かどうかは知らないけど、僕の認識では・・・

「プログラミング」とはプログラムを設計から作っていくことです。

「コーディング」とは既に設計してあるものを元に、コードを書いて作っていくことです。

誤解を怖れずに言うと、プログラミングは「考えながら作って」、コーディングは「コードを書く」って感じですかね？

プログラムを作る ＝ プログラミング
コードを書く ＝ コーディング

ですかね。

ウェブサイトの作成に関して言えば、実際に作っていくことを「コーディング」といいます。プログラミングではありません。

なので、ウェブサイトを作る人をプログラマーとは呼びません。「Webデザイナー」と呼びます。

ちなみにコードを書く専門の人を「コーダー」と読んだりします。

とりあえず、一人でウェブサイトを作って行く場合はデザインからコーディングまで全部一人でやるから、ひっくるめて自分の事を「Webデザイナー」と呼びましょう。

コーディングでやること

ちょっと話が逸れただけど、強引に戻して行きますよ。

コーディングでやることは基本的に2つです。

HTMLなどのマークアップ言語を使ってマークアップして、CSSでスタイリングする。これだけです。

WordPressを使ってウェブサイト（ブログ）を作っていく場合は、多少PHP言語っていうプログラミング言語も覚えたほうが良いけど、基本的にはHTMLとCSSさえ分かってればデザインできます。

マークアップとは？

マークアップを簡単に説明すると、HTMLのタグを使ってマーキングしていくことです。

「この文字はこのマーク。この文章はこのマーク。ほんでこの画像はこのマーク。」という具合です。

ウェブサイトに表示する文字や画像にマークを付けて、コンピューター（ブラウザ）が理解できるように記述してやることをマークアップって言います。

例えば、

アキヤマ ユウスケの日記

こんにちは。これは僕の日記です。
 
続きを読みたい方はコチラ

という文を表示させようと思った場合、マークアップなしで記述すると・・・

アキヤマ ユウスケの日記こんにちは。これは僕の日記です。続きを読みたい方はコチラ

↑こんな感じで、ただの文字の羅列になってしまいます。

これを前者のようにちゃんと表示させるには・・・

<h1>アキヤマ ユウスケの日記</h1>
<p>これは僕の日記です。</p>
<a herf="">続きを読みたい方はコチラ</a>

このように「タグ」と呼ばれるモノで囲んでやるんです。このタグで囲まれたモノを「要素」といいます。

これがマークアップです。

ちなみに「<h1></h1>」ってのは「見出しタグ」です。
「<p></p>」このタグは「段落」を意味しています。
「<a href=""></a>」これはハイパーリンクのタグです。

こうやって記述してやるとコンピューターは「これは見出しだな。これは段落か、、、これはリンクだね」っという具合で認識してそのように表示してくれるワケです。

CSSとは？

CSSとは「カスケーディング・スタイル・シート」の略で、マークアップした要素をスタイリングするために使う言語です。

さっきの例で言うと
「見出し（<h1>要素）は文字の大きさを24pxにして、段落（<p>要素）の下には一行分のスペースを空ける。」

という感じで、要素にそれぞれのスタイルを指示するための言語です。

簡単言えば、「Webサイトの見た目をイジるための言語」ってことです。

僕的には、Webサイトの見た目を作る重要な所だから、CSSを書いてる時が一番クリエイティブで楽しいところだったりします。

Webサイトのデザイン（見た目）の8~9割はCSSで決まるから、このCSSを理解しておけば、どんなテンプレートも自分色に染めらるってことです。

僕みたいに見た目のデザインに拘りたいって人にとっては、CSSが触れるようになるとメチャクチャ楽しくなってきます。

それこそ1日中コーディングしてられますよ（笑）

コーディングを図解すると

まずはこのブログ記事のCSSが適応されてない状態がコチラ↓

CSSが適応されていない状態

※それぞれの要素に色を振り分けてわかりやすくしています。

これがCSS適応前のマークアップされた状態です。全部の要素が左寄せで縦に並んでいるのが分かると思います。

上から
1. サイトロゴのイメージ要素
2. SNSボタンのリスト要素
3. グローバルメニューのリスト要素
4. パンくずリストの順序リスト要素
5. 日付のリスト要素
6. 記事タイトルの見出し要素
7. SNSのシェアボタンのリスト要素
8. アイキャッチ画像の画像要素
9. 本文の段落要素（※消すの忘れてCSS適応済みｗ）

と並んでいます。

今読んでるこの記事もCSSがなかったら上の画像のような状態で並んでるってことです。

とてもキレイな見た目とは言い難いですよね？

次にCSSでスタイリングすると・・・

CSSを適応させてスタイリングした状態

こんな感じで、各要素がスタイリングされて配置されます。

右のサイドバーはCSS適応前の画像だともっともっと下の方にマークアップされていた要素です。

簡単に説明すると、

1. ロゴのイメージ要素の上下にマージン（スペース）を開けた
2. SNSのリスト要素を横並びにして、リストの（・）を消して、Webアイコンを出力して右上に配置した
3. グローバルメニューのリスト要素の（・）を消して上下に線を表示して区切った
4. パンくずリストの順序リストの番号を消して、文字を小さく、横並びにして、各文の前にWebアイコンを表示させた
5. 日付のリスト要素の（・）を消して代わりにWebアイコンを表示。文字も小さくした。
6. 記事タイトルの見出し要素の文字を大きくして、文字を少し細くした。
7. SNSのシェアボタンのリスト要素を横並びにして、（・）を消した。
8. 画像要素のサイズを調整した
9. 本文の段落要素は、下に1行分のマージンを空けて、文字サイズを変更した（適応前の画像とは変わってない）
10. ３〜９の要素を左に配置して、右にサイドバーを回り込ませて配置した

今解説したようなことをCSSで指示していきます。

基本はこの２つです

コーディングの基本はこの２つです。

やってることはスゴく単純だと思いませんか？

表示させたいモノにマークして、そのマークした要素をスタイルするだけなんです。

これだけ知ってれば、Webサイトのコーディングはある程度理解したと思って大丈夫です。

後はタグの種類とか、指定の仕方とかを覚えて、どうやってスペースを空けるのか？どうやって右に持っていくのか？って事を覚えるだけです。

まぁ前回に記事を読んでもらえれば分かるけど、「覚える」必要すら無いんですけどね。

まとめ

今回は、Webデザインの概念的な部分を語ってみました。

実はWebサイトのコーディングって意外と簡単というか単純で、やってることはパズルみたいなもんです。

CSSの書き方もかなり人間の言語に近くて、極端に言うと「その文字のサイズを大きくしろ」って感じで打つだけです。

それぐらい人間の言語に近いんで覚えやすいと思います。

中身だけを見てしまうと、何だか難しそうなコードを覚えて呪文を打ってるように見えるけど、俯瞰して見てみるとやってることは単純だからそんなに難しくは無いんですよ。

これから勉強しようって思ってる人は、あんまり難しく考えないで、気楽に取り組んでみてください。