ウェブデザインA 第01回

ウェブデザインA 第01回

2025年09月26日 /最終更新:2025年09月26日
読了目安:約7分

Webサイトが表示される仕組みや各言語の役割などのWebデザインの基礎知識を学んでいきましょう。

ウェブデザインA 第01回

ウェブデザインAを担当する、情報ビジネス学科の脇坂です。
全15回にわたって、Web全体の基礎知識やWebサイトの作り方など、
具体的には、html・css・JavaScriptを用いたコード記述=コーディングによるページ構築に関して学んでいきます。

ウェブデザインAについて

本講義の目的

本講義は、「ウェブデザイン実務士」という資格取得のための必修科目になります。
ウェブデザイン実務士とは・・・

インターネット利用技術に関する知識と技能、ウェブページの意匠計画に関する基礎的、専門的知識、および、ウェブページの管理運営に関して必要な技能を身につけるのが目的だ。

ウェブデザイン実務士 | 大学・専門学校の【スタディサプリ 進路】 (shingakunet.com)

・・・と、講義の大義名分はそうなんですが、この講義が将来のWebデザイナーを生み出すきっかけ作りになればいいな・・・と思っています。

本講義の進行について

本講義はこのブログや、オンラインでコーディング練習ができるWebサービスのCodePenを使い講義を進めます。
引き続き当ブログ「WEBCRE8TOR.COM」を使用するため授業開始前に表示しておいてください。
またCodePenを使用してコード記述の練習を行いつつ知識を増やしていきたいと考えています。

CodePen: Online Code Editor and Front End Web Developer Community

基本的には講義1回につき1記事、全15回の講義で全15記事を使って進めていきますが、
進行具合によっては前の講義記事の途中からはじめることもあります。

本講義でやること

コーディング技術を習得

この講義では、htmlcssのコード記述=htmlコーディングcssコーディングを行い、
Webページコンテンツを何種類か作成し、htmlコーディングcssコーディングの基礎技術の習得を目指します。
欲を言えば最終的には自分でWebページを作ることができるようになってもらえたら・・・と思っています。

基本的な言語とは、htmlcssJavaScriptの3つです。
実務でもデザインを反映させる際には必ずこの3つの言語の組み立てから始めます。

コードの記述はデザインとは違い正解と不正解がはっきりとしているので、
記述や部品が間違っていたり欠けていると思ったように反映をしてくれません。
例えば1文字だけ半角文字を全角文字で書いてしまうだけで動かないこともあります。

ツールの知識や使用方法を身に付け、まずは「使ってみる」

また本講義では私が普段使っているツールやその使い方、書き方や考え方を共有しますので、
都度調べながらでもいいので、上記の言語をある程度「使ってみること」が大事です。
使ってみないとエラーも出ないし、エラーが出なければ最適解が見つかりません。

モバイル端末表示対応やアニメーションなどの応用的なテクニックを身に付ける

そして最終的にはWebサイトのモバイル端末表示対応(スマホ対応)やスクロールアニメーションなど、
より発展的な内容もできるだけレクチャーしていきたいと思っています。
「やりたいこと探し」をしながらコード記述を楽しみましょう。

本講義の提出物など

前述したように、本講義ではWebサイトページ・コンテンツを何種類か作成して提出します。
また授業内で紹介する、Web上でコード記述の練習が可能CodePenというサービスを使って、Web上でコーディング演習の課題を行い提出します。

上記のように、CodePenの課題学習や、作成したWebページ・コンテンツ課題の提出状況などで採点するため、
定期試験はありません

出席について

本講義の出席確認は、UNIPAのスマホ出席機能を利用します。
ただし科目履修者が一定数を超えない場合は目視や点呼による出席確認をします。
なお10分を超えると遅刻30分を超えると欠席です。

スマホ出席マニュアル

公欠の課題

公的理由での欠席は公欠の扱いになりますが、公欠を認めるには公欠届の提出とは別に公欠の課題を提出しなければいけません。
公欠課題に関して詳しくは以下のページを参照してください。

公欠課題提出

Webデザインの基礎知識

ウェブデザインA初回はWebデザインについての基礎知識を習得しましょう。
以下の記事をCtrl + クリックください。

[Webデザインの基礎] Webサイトの構成・表示の仕組み・作成方法

まとめ

  • Webサイトはhtmlとcss(と、その他もろもろ)でできている。
  • Webサイトが表示される仕組みは、PCやスマートフォンを使った検索などの方法によりWebサーバーにリクエストを送りWebサーバーが応答して表示されるというもの。
  • html文書ファイルを表示すると文字情報のみの状態だが、css文書ファイルによって見た目を整えることができる。

いかがでしたか?今後ウェブデザインAの授業で履修者のみなさんが学び目指すのは、
今回の内容を深く掘り下げ、簡単なWebサイトを自分で作るスキルを身に付けることです。
全15回よろしくお願いします。

課題の提出

Webサイトの構成・表示の仕組み・作成方法

今回は「Webサイトの構成・表示の仕組み・作成方法」で紹介した内容の理解度を確認するため小テストを行います。
記事を参考に内容を確認し、以下の課題提出フォームにある設問への回答を行い、提出してください。

演習01 Webデザインの基礎知識課題提出フォーム

今回の課題の提出期限も通常通り、次回授業開始前までとします。

就職支援センターより

10/8(水)就職ガイダンス「身だしなみセミナー」の事前予約を9/16(火)から開始しております。
なおUNIPA掲示板に9/16(火)に掲載されています。
予約フォームは以下です。

予約フォーム
ガイダンス概要チラシ