プログラミングとwebデザインを同時に学ぶ方法とは?

こんにちは、マルユメ@ブロガーです。

本記事では、

[chat face=”chara1.png” align=”left” border=”gray” bg=”gray” style=”maru”]プログラミングとwebデザインを同時に学ぶ方法が知りたい![/chat]

このような人に向けて下記の内容を解説します。

[box03 title=”目次【記事の内容】”]

  1. プログラミングとwebデザインを同時に学ぶ方法とは?

[/box03]

実際にプログラミングを独学で1年以上勉強してきた経験をもとに、プログラミングとwebデザインを同時に学ぶ方法について解説します。

この記事を読めば、プログラミングとwebデザインを同時に学ぶ方法がわかり、より効率的に勉強できるようになります。

1. プログラミングとwebデザインを同時に学ぶ方法とは

プログラミングとwebデザインを同時に学ぶ方法とは?

そもそもの話として、webデザインとプログラミングは切っても切り離せない関係にあります。
[jin-iconbox12]

  • webサイト → プログラミング言語(HTML、CSS、JavaScript、PHPなど)で作られている
  • webデザイン → webサイトの見た目をいじる

[/jin-iconbox12]
上記の通りで、webサイトの見た目をいじるということは、webサイトのコードをいじるということなので、webデザインをやるなら上記のようなweb系の言語を学ぶ必要があります。

そのため、上記で紹介したweb系の言語を勉強すれば、同時にwebデザインの知識も身につきます。

とはいえ、なかなかイメージがわかないと思うので、ここからはプログラミングとwebデザインを同時に学ぶための具体的な方法について説明していきます。

https://nokt1220.com/programming-language-recommend

他のサイトを真似して作る【難易度高め】

一つ目の方法は、自分が作りたいものに似ているサイトを見つけて、それを参考にしながら新しいサイトを作るという方法です。

サイトのコードは、Google Chromeのデベロッパツールで見れますが、自分でコードを書く必要があるので難易度は高めです。

ちなみに、webサイトを作る上でChromeは必須ツールなので、まだインストールしていない方がいたらこの機会に入れておくことをおすすめします。

ここからは実際にChromeのデベロッパツールを使って説明していきます。

サイトの構造を見る【HTML】

webサイトのHTMLを確認する方法は二つあります。
[jin-iconbox12]

  • HTMLを見たいページ上で右クリック → 「検証」
  • HTMLを見たいページ上で右クリック → 「ページのソースを表示」

[/jin-iconbox12]
「検証」では、HTMLのタグを細かく見ることができます。

下の画像は、私のブログ(マルユメブログ)上で「検証」をクリックしたものです。

プログラミングとwebデザインを同時に学ぶ方法とは?

左側のコードが、マルユメブログを構成しているHTMLです。

「ページのソースを表示」では、そのページのすべてのHTMLを一覧表示してくれます。

プログラミングとwebデザインを同時に学ぶ方法とは?

ただ、HTMLはあくまでもサイトの構造を決めるもので、デザインを決めているのはほとんどCSSなので、デザインをいじる場合には主にCSSをいじることになると思います。

サイトのデザインを見る【CSS】

そして、さっきの画像の右側に書かれているコードが、マルユメブログのデザインを決めているCSSのコードです。

プログラミングとwebデザインを同時に学ぶ方法とは?

では実際に、CSSのコードを確認してみたいと思います。ここでは例として、ブログのタイトルである「マルユメブログ」のCSSを確認します。

まず最初に、「マルユメブログ」のロゴにカーソルを合わせた状態で右クリック → 検証をクリックします。

プログラミングとwebデザインを同時に学ぶ方法とは?

すると、右側にcolor: #fff;というコードがあると思います。これが、「マルユメブログ」というロゴの文字色を決めているCSSです。

ちなみに、Chromeのデベロッパツールは、CSSを変更して結果をその場で確認することができます。

実際にCSSを書き換えているのではなく、あくまでもテストとして書き換えるだけなので、元のCSSに影響はありません。

その証拠として、ページをリロードすれば元に戻ります。

試しに、「マルユメブログ」の文字色を変えてみたいと思います。

やり方は簡単で、#fff;の部分をクリックすると、文字を入力できる状態になるので、あとは好きな色を選ぶだけです。

ここでは「青」にしたので、#fffの部分を#blueに変更しています。

プログラミングとwebデザインを同時に学ぶ方法とは?

すると、実際に「マルユメブログ」のロゴが白から青になっているのがわかると思います。

WordPressのテーマをカスタマイズする【簡単】

二つ目の方法は、WordPressのテーマをカスタマイズするという方法です。

この方法は、WordPress(サイト制作のための便利ツール)を使ってサイトを作る必要があります。

とはいえ、自分で一から作るよりはるかに簡単です。ひとつ目の方法でできそうにないと思った方は、WordPressを使うべき。

WordPressでサイトを作るには、WordPressに加えて、「テーマ(サイトデザインの型)」をインストールする必要があります。

とはいえ、ネット上にはいろいろなテーマが出回っているので、比較的カスタマイズしやすいテーマを選ぶ必要があります。

おすすめのテーマは、Stinger8です。このテーマは、無駄な機能を排除したシンプルなテーマになっているので、一からカスタマイズしたい方に向いています。

Stinger8のデザインは、こんな感じです。

プログラミングとwebデザインを同時に学ぶ方法とは?

また、テーマの中には有料のものもありますが、Stinger8は無料なので、出費をしたくない初心者にもおすすめです。

WordPressテーマをカスタマイズする方法

具体的な方法としては、テーマをインストールした後、そのテーマのstyle.cssというファイルを変更することでデザインを変えられます。

プログラミングとwebデザインを同時に学ぶ方法とは?

画像の通りで、この部分を変更していきます。

試しに、さっきと同じように「マルユメブログ」のロゴの文字色を変えてみたいと思います。

といっても、やることはさっきと同じで、color: #fff;を、変更したい色にするだけです。

さっきは「青」だったので、今回は「赤」にしてみます。

プログラミングとwebデザインを同時に学ぶ方法とは?

color: #fff;を、color: #red;に変更して、サイトを見てみると、「マルユメブログ」のロゴが「赤」になっているのがわかると思います。

プログラミングとwebデザインを同時に学ぶ方法とは?

というわけで、今回のまとめとしては、

プログラミングとwebデザインを同時に学びたいなら、
[jin-iconbox12]

  • 他サイトを参考にしてサイトを作れ
  • 初心者は、WordPressのテーマをカスタマイズしろ

[/jin-iconbox12]
でした。

Webデザインを本気で学びたい人向けのデザインスクール【2選】

[jin-iconbox12]

[/jin-iconbox12]

RELATED POSTS

COMMENT FORM

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です