初めてのWebデザイン

目次

はじめに

今回はWebデザイン講座をはじめるにあたってのWebデザインについての基本知識についてです!

自分もプロのWebデザイナーではないので説明などに多々間違いなどがあるかもしれませんがご容赦くさい!もし、間違いなどがありましたらコメント欄の方に「ゴラアアアアアア‼なんじゃその説明はアアアアアア!!!!」とコメントで指摘してください。

f:id:try7974:20161125205411p:plain

自分は今年の夏の大阪大学豊中キャンパスでのLife is TechでWebデザインコースを選択し初めてWebデザインの基本について学びました。

Webデザインの基本

f:id:try7974:20161125210239p:plain

まず、Webサイトがどんなプログラムで書かれているのかを見てみましょう。プログラムは大きく分けて2つあります。HTMLとCSSです。

f:id:try7974:20161125210323p:plain

(上の画像はAdobe Dreamweaver CCでのコードとプレビューです。)

まず、HTMLについてです!HTMLとはいろいろな文字や写真を表示させたりするプログラムです。

f:id:try7974:20161125210428p:plain

(上の画像はAdobe Dreamweaver CCでのコードです。)

次に、これがCSSですCSSとはHTMLで表示させたものを飾り付けたり調整するものです。

ツールと作業環境

何と言っても、Webデザインを始めるのに必要なのはきちんとした作業環境です。まず、ハードウェアです。PCはだいたいintel core i3以上でメモリは4GB以上、HDDは500GB程度とそれほど高いスペックは必要ありません。

次に、ソフトウェアです。おすすめのソフトは無償のものと有償のものの2種類があります。

f:id:try7974:20161125212234j:plain

無償のものでおすすめなのはbracketsというadobe社製のソフトです、プロからビギナーまで幅広い層のWebデザイナーに使用されています。直観的に操作でき使いやすいです。また、たくさんの拡張機能があるので拡張機能を入れたりするのも楽しいです。

f:id:try7974:20161125212458p:plain

次に、有償のソフトです。有償のものでおすすめなのが同じくadobe社製のDreamweverというソフトです。このソフトはbracketsに比べ使える機能が多くライブビュー機能も素晴らしいです。しかし、欠点は重いことです、スペックの低いPCだとライブビューの繁栄がうまくいかない事があります。今年10月のアップデートでUIのデザインやエディタなどがbracketsから移植されたので使い心地はbracketsに近くなりました。

最後に

どんなことでも続けていくことが大切です。少しずつ一緒に学んでいきましょう!

解らないことがあればコメント欄にドシドシ質問してください!

てか、このブログのPVがのびてほしいい(切実)

はじめまして‼

どうもはじめまして!

通天閣のある国でライトオタクなクリエイティブ高校生をやっております、でぶマッチョというものです。

f:id:try7974:20161125203433j:plain

これからこのブログでは、自分の気になったガジェットや初心者の方向けのWeb開発について、また、オタクカルチャーについて書いていこうと思っています!

(文章を書くときにビックリマークが多くなるのは許してちょんまげ~)

では、これからもお付き合いのほどよろしくお願いします!