教科書がなくても独学でWebデザインはできる
このサイトはWebデザインの経験がない。それでもWebサイトを作成したい。
そんな方でもWebサイトがどのように出来ているのか理解して作成できるように解説しています。
PCひとつあればWebサイトを作ることが可能です。これから一緒に作成していくWebサイトを紹介します。詳しくは下記のリンクをクリック
見て頂けましたか？？
では一緒に作成していきましょう。初めてWebデザインを始める方はこのまま記事を読み進めていってください。
Webデザインをやったことがあるという方は下記をクリック。このままサイト作成をしていきましょう。
→「サンプルサイト」を作成へ移動
Webデザインで使用されるプログラミング言語を覚えよう
今回はこのWebサイトで使用されている言語に特化して説明していきます。Webデザインで使用されるプログラミング言語は3種類。それぞれの役割を理解して使用しましょう。
HTML
| HTMLとは | HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）の略。HTML（エイチティーエムエル）と言われることが多いです。 |
| HTMLで出来ること | Webサイト上に文字の表示、画像の表示することが出来ます。 |
| 拡張子 | 拡張子はhtmlになります。例：test.html |
CSS
| CSSとは | Cascading Style Sheets（カスケーディング・スタイル・シート）の略。CSS（シエスス／スタイルシート）と言われることが多いです。 |
| CSSで出来ること | htmlで記述した文字の大きさや色を設定したり、画像の形や大きさを設定することができます。 |
| 拡張子 | 拡張子はcssになります。ファイル名（例）：test.css |
Javascript
| JavaScriptとは | JavaScript（ジャバスクリプト）の略。JavaScript（ジャバスクリプト／ジャバ）と言われることが多いです。 |
| JavaScriptで出来ること | 一度表示したWebサイト上の画像や文字の大きさや色などを変更する事が出来ます。 |
| 拡張子 | 拡張子はjsになります。ファイル名（例）：test.js |
無料で使えるWebデザインで必要なソフト紹介
Webサイトを作る前に必要なソフトを準備します。必要なソフトは「ブラウザ」と「テキストエディター」です。
ブラウザとは
Webページの情報を画面上に表示するための閲覧ソフト。ちなみにブラウザには色々な種類があり、今回使用するソフトは「firefox」。こちらのソフトは無料でインストールして使用すること出来ます。
テキストエディタとは
コンピュータで文字情報の作成、編集、保存するためのソフトのことです。テキストエディタにも色々な種類があり今回使用するソフトは「TeraPad」。こちらのソフトは初心者の方にはオススメ。簡単な初期設定をしたらすぐに使用することができます。
詳しいインストール方法は下記をクリック
→FireFoxとTeraPadのインストール手順はこちらをクリック
Webデザインで使用するプログラミング言語に触れてみよう
HTML編
まず初めにプログラミングしてみよう
まず初めにHTMLというものがどういったプログラミング言語なのか理解しましょう。プログラミングは本を読んで理解するより、実際にPCを使ってやってみるのが1番理解しやすいです。
では実際にやってみましょう。今回やることが「HELLO WORLD」という文字をWebサイト上に表示してみます。下記の作業の順番でWebサイト上に文字を表示しています。
- テキストエディタにコードの記入
- ファイルの拡張子を「html」にして保存
- ブラウザを立ち上げ「HELLO WORLD」が表示されるか確認
では実際にやっていきましょう。詳しい作業手順は下記をクリック
タグの説明・タグの種類説明
HTMLでは、コンピュータに文書の意味を理解してもらうために、「< >」の記号を使いプログラミングしています。「＜＞」はHTMLタグと呼ばれています。
ちなみにHTMLタグの部分はWebサイト上には表示されません。表示されるのはHTMLタグの書かれている文字列が表示されます。様々な効果を持つタグを使い分けWebサイトを作成されています。
6種類のタグに分けて説明します。
- 全ての基礎となるタグ
- 各グループにまとめる時に使用するタグ
- 文字／画像の貼り付け／リンクを張るなどに使用するタグ
- 表作成の時に使用するタグ
- ボタンや入力テキストを作成する時に使用するタグ
- css／Javascriptを記載する時に使用するタグ
詳しくは下記のリンクをクリック
CSS編
CSSとはHTMLタグで記述したタグに対してデザインを設定することができます。CSSでデザインを設定することで、対象のHTMLタグの文字や背景の色を変更することができます。それではCSSの記述方法について説明します。
デザイン設定には3種類記述方法がある
デザインの設定方法については大きく分けて3種類の記述方法があります。
- HTMLタグに直接記述する方法
- htmlファイル内で＜style＞タグを使用して記述する方法
- cssファイルを別に作りhtmlファイルとリンクさせ、そのcssファイルに記述する方法
詳しい記述方法について詳細は下記をクリック
ちなみにWebデザインでは3番目の記述方法がよく使用されます。
CSSでよく使われるデザイン5選
基本となるデザインについて5種類に分けて説明していきます。CSSファイルに記述する方法で説明しています。基礎となるデザインになるためWebサイト作成中にデザインの仕方が分からなくなったら参考にして見てください。
- 文字のデザイン
- 背景のデザイン
- 要素の大きさ
- 要素の配置換え
- 要素の削除
- スマホ画面のサイズになった時のデザイン
詳しい記述方法について詳細は下記をクリック
Javascript
JavaScriptは1度Webサイト上に表示したHTMLタグに対してデザインを変更したりすることができます。プログラミングは実践あるのみなのでJavascriptを使用し簡単なプログラミングをしてみましょう。
今回は下記のプログラムを作成してみましょう。
- 「テキストボックス」に入力されている文字を「送信ボタン」を押したら対象の領域に文字を表示する
- 「リセットボタン」を押したら「テキストボックス」に入力されている文字と表示されている文字を消す