記事一覧
WEBデザイン基礎（9）headタグ内には、最低何を書けばいいのか？
headタグの中は、必要なページのリンクなどがあれば、ページ自体は見ることができるが、重要な情報が抜けていると、見てもらえないページになるかも・・・。
<head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-sca
WEBデザイン基礎（8）Bootstrapでテンプレートを作ってみよう。
Bootstrapのテンプレートは、ネット上にたくさん公開されていますが、英語のテンプレートが多く、日本のサイトにはしっくりこないものが多いように感じます。それでは、自分でテンプレートを作ってみましょう。
まずは、ワイヤーフレームを作ってイメージを固めましょう。例えば、ケーキ屋さんのお店のホームページや、趣味のイラストを紹介するブログなどと具体的に考えるとイメージしやすいです。
下記のページなどを
WEBデザイン基礎（７）Bootstrap(3)
カード（Cards）を作ろう。
商品を写真やキャプションを使って紹介したいときに便利なカードを作ってみましょう。
カードには、いろいろなスタイルを選べますが、以下のコードは、上の画像のような、写真、タイトル、説明文、ボタンが入ったものです。
<div class="card" style="width:15rem;"><img src="cake.png" class="img-fluid
WEBデザイン基礎（６）Bootstrap(2)
Grid System(グリッドシステム)についてとりあえず、やってみよう。
行、列に箱を作って、レイアウトしていきます。
まず、container内にrow(行)、その中にcol(列、カラム)を作る。
カラムは、12個作ることができる。
col-1 カラム1個分の大きさ
col-2 カラム2個分の大きさ
col-3 カラム3個分の大きさ
・
・
となる。数字を指定しなくてもco
WEBデザイン基礎（５）Bootstrap(1)
Bootstrapを使ったデザイン
Bootstrapとは、レスポンシブWEBデザインで制作することを容易にする、コンポーネントライブラリです。つまり、容易されたパーツを組み合わせて、カスタマイズしていけば、ゼロからJavascript、やCSSを書かなくても短時間でWEBページを作ることができます。まずは、ダウンロードしてみましょう。
Bootstrapダウンロードページ
ダウンロードして
WEBデザイン基礎 いろいろなソフトをつかってみよう（2）Adobe Photoshop
Adobe Photoshopとは？WEBデザインの制作に欠かせないソフトとして、Adobe Photoshopがあります。写真の加工は、もちろん、WEB用の画像（jpeg、gif、png）の書き出しにとても重宝するツールです。画像編集ソフトの業界標準になっているので、ファイルのやりとりもスムーズにできるでしょう。
演習 ドット絵を描いてみよう。新規ドキュメントで、50ピクセルの正方形のアートボ
WEBデザイン基礎（４）レスポンシブWEBデザイン
レスポンシブWEBデザインってどんなデザイン？レスポンシブWEBデザインとは、パソコン、スマホ、タブレットなど、画面サイズが違っていても、デバイスの大きさに合わせて、最適化して表示させるデザインのことです。
デバイスごとにHTMLを作っていたら、作業が増えます。CSSで表示を切り替えれば、複数のHTMLを作らずに済みます。
レスポンシブWEBデザインの方法headタグ内にviewport設定をし
WEBデザイン基礎（３）配色
WEBの配色色が人に与える心理的な影響は大きいです。WEBデザインにおいても配色について基本的な知識が必要です。「清潔感のあるホームページを作ってほしい」とクライアントから依頼されたとき、要望に基づいた提案をできなければいけません。「清潔感」でイメージする色は、人それぞれかもしれません。ただ、多くの人が清潔だと感じる色はあります。色の持つ共通イメージを学んでいきます。
WEBの色は、モニターが表
WEBデザイン基礎 いろいろなソフトをつかってみよう（１）
簡単3Dモデリング”MagicaVoxel”で遊ぼう。
MagicaVoxelダウンロードページ
MagicaVoxelは、立方体を積み木のように積み上げていくような方法でモデリングできるソフトです。英語のソフトですが、いじっているうちに、いつの間にか夢中になってしまいます。
制作したグラフィックは、WEBデザインに使用することもできますし、モデリングしたキャラクターに、ボーンを入れてアニメー
WEBデザイン基礎（２）
WEBデザインの基本的な考え方WEBデザインは、四角のボックスを組み合わせて作っていきます。
雑誌の表紙やポスターと違い、パソコンやスマホのブラウザで見るという制約があります。必ず上からスクロールして読みますし、ユーザーの環境によっては、フォントも幅のサイズも違う場合があります。さらに大きな違いは、随時更新するということです。一度作ったら終わりではありません。
見やすさ、デバイスの違いによる見た目
WEBデザイン基礎（１）
はじめにWEBデザインとは、WEBブラウザで表現できるホームページやWEBサービスのデザインのことです。この授業では、実践的なWEBデザインを制作するための基礎知識の習得を目的とします。
HTMLの基礎は、1年生で履修済みですので、タグの説明は省きます。
基本のおさらいとして説明します。
・WEBサイト、ホームページ サイトは同義？
・WEBブラウザの種類
（Internet Explorer