まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
Sponsored Link
こんにちわ、ウェブデザインA・演習の講義を担当する脇坂といいます。
後期15回にわたって、Webの基礎知識やWebサイトの作り方、
html・css・JavaScriptを用いたコード記述によるページ構築に関して学んでいきます。
ウェブデザインA・演習について
まずは以下のリンクを開いてください。
本講義の目的
本講義は、「ウェブデザイン実務士」という資格取得のための必修科目になります。
ウェブデザイン実務士とは・・・
インターネット利用技術に関する知識と技能、ウェブページの意匠計画に関する基礎的、専門的知識、および、ウェブページの管理運営に関して必要な技能を身につけるのが目的だ。
・・・と、講義の大義名分はそうなんですが、
この講義が将来のWebデザイナーを生み出すきっかけ作りになればいいな・・・と思っています。
本講義の進行について
本講義の進行は全てこのブログを使って講義を進めていきます。
トップページのURLをブックマークしてすぐに表示できる状態にしておいてください。
本講義でやること
この講義でみなさんはコード記述を行い、簡易的なウェブページやウェブコンテンツを何種類か構築してコーディング技術を習得してもらいます。
後ほど出てきますが、基本的な言語とは「html・css・JavaScript」の3つになります。
実務でもデザインを反映させる際には必ずこの3つの言語の組み立てから始めます。
コードの記述はデザインとは違い正解と不正解がはっきりとしているので、
記述や部品が間違っていたり欠けていると思ったように反映をしてくれません。
例えば1文字だけ半角文字を全角文字で書いてしまうだけで動かないこともあります。
本講義では私が普段使っているツールやその使い方、書き方や考え方を共有しますので、
都度調べながらでもいいので、上記の言語をある程度「使ってみること」が大事です。
使ってみないとエラーも出ないし、エラーが出なければ最適解が見つかりません。
そして最終的にはスマホ対応や動画表示、ページアニメーションなど、
より発展的な内容もできるだけレクチャーしていきたいと思っています。
「やりたいこと探し」をしながらコード記述を楽しみましょう。
本講義の提出物など
ウェブデザインA・演習では半年間15回にわたって講義を進め、
簡易的なウェブページやウェブコンテンツを何種類か構築します。
そのウェブページを提出課題として提出するようになります。
日々の課題の提出状況などを採点方法にするので定期試験はありません。
出席について
本講義の出席確認は全て、各講義回の出席確認フォーム（記事上部）を使って行います。
（↑これね）
このフォームは当該記事内の講義時間内にしか表示していません。
やむを得ない欠席の場合は、下の「公欠課題について」の方法を使ってください。
公欠課題について
公欠に関しては公欠届とともに公欠課題を提出して認可となります。
公欠課題の提出は以下のページの説明に沿って行なってください。
Webデザインの基礎知識
基礎知識：Webサイトの仕組み
普段皆さんが見ている「Webサイト」って、
どんなもので構成されていると思いますか？？
Webサイト = html + css（+ その他もろもろ）となっていますが、
htmlもcssも文書データであり文字がずらずらと書き込まれているだけです。
つまり極端に言ってしまうと、Webサイトは文書です。
このような文字情報の集合体によって、見やすいように見た目を整えたものがモニターに表示されているわけです。このようにページを構成している文書情報は一般的に「ソースコード」や「ソース」と呼ばれています。
・・・ちょっと見てみる？？
Google Chromeの場合は「右クリック > ページのソースを表示」、
Internet Explorerの場合は「右クリック > ソースの表示」
Edgeの場合は「キーボードのF12を押してDOM Explorerのタブへの切り替え」で、
表示中のページのソースコードを見ることができます。
これがこのブログの中身です。
実際に中身を見てみると本当に複雑で一度見たらお腹いっぱいになると思います。
・・・私は割とお腹いっぱいです。
ただこの授業では、文字列をカタマリとして扱うことで、
抵抗感をうまく消せる方法でレクチャーを行います。
ただただわけもわからずコードを書いていくと思って敬遠してたら損するよ～？？
基礎知識：どうやって構築するのか
「コーディング」や「マークアップ」とは？？
コーディングやマークアップという言葉を使っていますが、それぞれの意味として、
| コーディング | コードの記述（キーボードなどで文字を打ち込む）。 |
|---|---|
| マークアップ | 「見出し」や「段落」、「リンク」など、 記述したコードのそれぞれの性質をhtmlタグを使って指定する手法。 |
というような意味があります。
現段階では同じものと思って構いません。
htmlコーディングとは、htmlコードを記述すること全般、
htmlマークアップとは、htmlタグを使ってコードを記述するということになります。
htmlとは？？
次はhtmlのお話です。
htmlは、Hypertext Markup Language・・・の略です。
htmlファイルの拡張子は「html」になります。（index.html・about.htmlなど・・・）
| Hypertext | より機能を持つことができるテキスト |
|---|---|
| Markup | 文書中に“名前” をつけることで、構造や装飾のための指定を行う |
| Language | その記述文法 |
つまり・・・テキストに名前をつけて、デザインやレイアウトを変えたりしたものが 「html」ファイルです。
簡単な例を出します。
例えば「こんにちわ」とブラウザで表示するとき、htmlに以下のように記述をします。
html
<p>こんにちわ</p>htmlの文章中の「こんにちわ」という文章を<p>と</p>の間に記述しています。
この<◯◯>〜</◯◯>を一般的にhtmlタグと呼んでいます。
これをブラウザで表示すると以下のようになります。
ちなみに今回使った<p>というタグは、「Paragraph」の略で、段落の機能を持っています。
<p>から</p>で囲った文章は一つの段落ということになります。
上記のページの説明が参考になります。
cssとは？？
cssは、Cascading Style Sheetの略です。
cssが何をするものかというと、htmlに記述した（名前をつけた）コードに対して、デザインを反映させるために必要です。cssファイルの拡張子は「css」になります。（style.html・main.cssなど・・・）
cssに何も記述しなければ先ほどと同じです。
html
<p>こんにちわ</p>css
//何も書かない
こうなります。 じゃあ例えば「こんにちわ」と赤字で表示したい場合はどういう書き方をするか？？
html
<p>こんにちわ</p>css
p {
color: red;
}
cssはこういう書き方をします。
ここでは「color（色）」というプロパティに「red（赤）」という値を使って装飾を行っています。
pに波カッコ（{} ← これ）で「pタグへの装飾はここに記述するよ」と指定し、
さらに「色（color）を赤（red）にしてください」と、
コロン（: ← これ）からセミコロン（; ← これ）の間に内容の指示を行います。
こんな風に「こんにちわ」を囲っている<p></p>というhtmlタグに対して、
CSSを使って文字色を指定することで装飾が可能になります。
最も基礎的な部分を取り上げて説明するとこういう感じです。
こうした記述を複数行うことによってWebサイトは構成されています。
cssには様々な技術やテクニックが存在しています。
現場で実際に使うものを教えますので、今後の講義の中で徐々に知っていきましょう。
htmlとcssで一つのコンビ
htmlとcssはコンビのようなものです。
htmlだけでは装飾ができず、cssだけではブラウザに表示できません。
それぞれの役割をもって一つの結果を導き出す、まさにコンビのようなものです。
また、記述にも色々とルールがあります。そのルールを守るか否かで、
YahooやGoogleなどで検索した時に上位に表示されるかどうかにも関わってきます。
htmlとcssを適切にマークアップすることで、たくさんの人に見てもらえて、
たくさんの人の役に立つ素晴らしいサイトを作っていきたいですね。
基礎知識：ブラウザを知る
Webブラウザとは？
WebサイトをPCで閲覧するとき・・・どんなソフト・アプリを使っていますか？？
Webサイトを閲覧するにはWebブラウザというソフトを使う必要があります。
ブラウザとは、インターネットを介してホームページ（Webサイト）をパソコンやスマートフォンで閲覧するためのソフトウェアのことです。Webブラウザとも呼ばれ、Chromeやsafari、Internet Explorerなどが有名です。
代表的な4ブラウザ
では国内外でユーザー数が多く、PCでの代表的な4ブラウザを挙げてみましょう。
その他にもブラウザにはいろんな種類がありますが、代表的なものをあげれば以下4つくらいになります。
以前存在していたInternet ExplorerはMicrosoft Edgeに置き換わっていますね。
本講義内ではInternet ExplorerとMicrosoft Edgeをほぼ同じと考え講義を進めていきます。
Internet Explorer（Edge）
数年前まで国内で最もシェアを持っていたブラウザはこのInternet Explorer（以下：IE）です。 日本で一般的に普及しているOSはWindowsですが、そのWindowsのバージョンが8まで、デフォルトブラウザはIEでした。 Windowsのシェアに伴って必然的にIEが最もシェアを広げたということになります。
ちなみにWeb関係のお仕事をしている方々に、 早く消えればいいのに・・・ と、最も嫌われているのはこのIEです。その願いが届いたのか、2022年6月にIEのサポートは打ち切られ、ついに絶滅しました・・・！
そして、上記のようにEdgeはIEの後継ブラウザですね。
（Windowsのブラウザはどいつもこいつもゲフンゲフン）
ちなみに、もしなんらかの方法でInternet Explorerを使用している人は今すぐ使用をやめましょう。
サポートが切れているためセキュリティはないに等しく使用するのは大変に危険です。
Google Chrome
IEの嫌われ具合とは逆に、Web関係のお仕事をしている方々が最も使用しているであろうブラウザがこのGoogle Chrome（以下：Chrome）です。
みなさんおなじみのGoogleが開発したブラウザで、2008年にリリースされた比較的新しいブラウザであるにもかかわらず、世界で60%以上のシェアをもって第1位に輝いています。
この講義ではこのGoogle Chromeを使用して解説を行います。みなさんも特に重大な理由がないのであればできる限りGoogle Chromeを使って受講してください。
Firefox
日本では約4.7%、世界では約3.3%程度のシェア（※2022年9月現在）を持っているのがこのFirefoxです。 Web業界で使用している人もわりといますが、起動時などにとてももたついてしまうのでわりと敬遠されています。
Firefoxは「アドオン」と呼ばれるブラウザの機能を拡張するソフトウェアが豊富で、ブラウザを自分好みにカスタマイズしたい人には向いているんじゃないかと思います。
Safari
MacやiPhoneの標準ブラウザとしてプリインストールされているのがこのSafariです。 シェアは少ないですが、開発者向けの機能がけっこう便利なので、私はGoogle Chromeと併用しています。
ちなみに高解像度でWebサイトを閲覧したい場合、「Retina対応のMac + Safari」の組み合わせが最も美しく表示してくれると思います。
ブラウザでどんな違いがあるの？
色々なブラウザがありますが、どんな違いがあるんでしょう？
挙げればきりがないですが、一番大きな違いは、「htmlやcssの解釈の違い」です。
Web制作の現場ではこれが一番困るんです。
・・・どう困るのか？？
htmlやcssの解釈が違うと各ブラウザで見え方が変わってきます。
意図しないレイアウト崩れを起こしたり・・・
ウェブ動画が見られなかったり・・・
使えない機能があったり・・・
Webサイト制作には・・・
ブラウザごとの見え方の差を最小限にするという対応が必ず毎回存在するわけです。
・・・これが本当に大変。
ブラウザのシェア
ではPC＋モバイルでの世界のブラウザシェアを見てみましょう。
世界的なブラウザシェアはChromeが圧倒的に多く、
SafariやEdge、Firefoxがランクインしていますね。
現在はGoogle Chromeのほぼ一強ですが、実は少し前まではIEが最も多く非常に厄介な状況でした。なぜなら、不具合のほとんどは、バージョンの古いIEで起こっていたからです。（そこらへんをしっかり受け継いでるEdgeとか消えrゲフンゲフン）
そして近年、比較的新しいEdgeでさえも表示差異の不具合が多く、MicroSoftのブラウザは名前や形が変わっても、いつまでもWebクリエイターの頭を悩ませてくれます。
この問題は、Webデザイナー全員が直面しますが、Webサイトを問題なく、幅広く様々なブラウザでみられるように不具合を解決する必要があります。コーディングで解決しましょう！
次回以降、Webサイトが表示される仕組みやコードの記述の際に使用するテキストエディタなどを紹介する予定です。
課題の提出
ウェブデザインA・演習は今回は初回の講義です。
そのため、みなさんがウェブサイト構築に関して本講義を通して聞きたいことや知りたいことを教えてください。楽しみにしています。
なお以降の講義内で紹介しようと思っています。
（基本は匿名で紹介します）
では、以下のフォームの必要項目に記入を行い、送信を行ってください。
本日のまとめ
- Webサイトはhtmlとcss（+ その他もろもろ）でできている。
- htmlは文書に名前をつけ、cssはそれを元にデザイン装飾を行うことができる。
- 日本ではブラウザはほとんどがChromeで、次いでSafariやEdge、Firefoxが多い。
- 不具合のほとんどは、バージョンの古いIEで起こっていたが、最新版のEdgeでさえ不具合を起こす。
