ウェブデザイン演習 第01回 - ウェブデザイン演習 | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザイン演習 第01回

こんにちわ、ウェブデザイン演習の講義を担当する龍弥デザインの脇坂といいます。
今後半年間にわたって、Webの基礎知識やWebサイトの作り方、
HTML・CSS・JavaScriptを用いたコード記述によるページ構築に関して学んでいきます。

ウェブデザイン演習について

講師の自己紹介

講師:脇坂 基徳

フリーランスでWebデザイン制作の仕事をしています。

岡山 ホームページ制作 龍弥デザイン

カバーしているスキルは、

  • HTMLコーディング
  • CSSコーディング
  • JavaScriptコーディング
  • PHP(必要に迫られて)
  • WordPress(そこそこ使えてると思われます)

といったところ。

現在までに制作したWebサイトは、直接のクライアントさんであれば、
飲食店やカーディーラーやNPO法人、クリニックや鍼灸院や一般企業など、
それなりに色々とお手伝いさせていただいてます。

また、直接的なクライアントさんとのつながりでのお仕事もありますが、
代理店さんを通してお仕事をさせていただいて活動を続けられています。

ご飯を食べていくために代理店さんのお仕事をこなし、
楽しむために直のクライアントさんのお仕事をしてるっていうのが正直なところで、
報酬面や精神面など様々なバランスをとっています。

本講義の目的

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

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

とのことです。
・・・と、講義の大義名分はそうなんですが、

前期のウェブデザインBと合わせて、この講義が、
将来のWebデザイナーを生み出すきっかけ作りになればいいな・・・と思っています。

本講義の進行について

本講義の進行は全てこのブログを使って講義を進めていきます。
トップページのURLをブックマークしてすぐに表示できる状態にしておいてください。

WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

本講義でやること

この講義でみなさんはコード記述を行い、簡易的なウェブページウェブコンテンツを何種類か構築してコーディング技術を習得してもらいます。

後ほど出てきますが、基本的な言語とは「HTMLCSSJavaScript」の3つになります。
実務でもデザインを反映させる際には必ずこの3つの言語の組み立てから始めます。

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

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

そして最終的にはスマホ対応や動画表示、ページアニメーションなど、
より発展的な内容もできるだけレクチャーしていきたいと思っています。
「やりたいこと探し」をしながらコード記述を楽しみましょう。

本講義の提出物など

ウェブデザイン演習では半年間15回にわたって講義を進め、
簡易的なウェブページやウェブコンテンツを何種類か構築します。
そのウェブページを提出課題として提出するようになります。

日々の課題の提出状況などを採点方法にするので定期試験はありません。

出席について

本講義の出席確認は全て、各講義回の出席確認フォーム(記事上部)を使って行います。

(↑これね)

このフォームは当該記事内の講義時間内にしか表示していません。
やむを得ない欠席の場合は、下の「公欠課題について」の方法を使ってください。

公欠課題について

公欠に関しては公欠届とともに公欠課題を提出して認可となります。
公欠課題の提出は以下のページの説明に沿って行なってください。

公欠課題提出ページ

Webデザインの基礎知識

基礎知識:Webサイトの仕組み

普段皆さんが見ている「Webサイト」って、
どんなもので構成されていると思いますか??

lesson01_1

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タグと呼んでいます。
これをブラウザで表示すると以下のようになります。

lesson01_2

ちなみに今回使った<p>というタグは、「Paragraph」の略で、段落の機能を持っています。
<p>から</p>で囲った文章は一つの段落ということになります。

今さら聞けない!HTMLとは【初心者向け】 | TechAcademyマガジン

上記のページの説明が参考になります。

CSSとは??

CSSは、Cascading Style Sheetの略です。
CSSが何をするものかというと、HTMLに記述した(名前をつけた)コードに対して、デザインを反映させるために必要です。CSSファイルの拡張子「css」になります。(style.html・main.cssなど・・・)

CSSに何も記述しなければ先ほどと同じです。

HTML

<p>こんにちわ</p>

CSS

//何も書かない

lesson01_2

こうなります。 じゃあ例えば「こんにちわ」と赤字で表示したい場合はどういう書き方をするか?? 

HTML

<p>こんにちわ</p>

CSS

p {
  color: red;
}

lesson01_3

CSSはこういう書き方をします。
ここでは「color(色)」というプロパティに「red(赤)」という値を使って装飾を行っています。

pに波カッコ({} ← これ)で「pタグへの装飾はここに記述するよ」と指定し、
さらに「色(color)を赤(red)にしてください」と、
コロン(: ← これ)からセミコロン(; ← これ)の間に内容の指示を行います。

こんな風に「こんにちわ」を囲っている<p></p>というHTMLタグに対して、
CSSを使って文字色を指定することで装飾が可能になります。 

最も基礎的な部分を取り上げて説明するとこういう感じです。
こうした記述を複数行うことによってWebサイトは構成されています。

CSSには様々な技術やテクニックが存在しています。
現場で実際に使うものを教えますので、今後の講義の中で徐々に知っていきましょう。

今さら聞けない!CSSとは【初心者向け】 | TechAcademyマガジン

HTMLとCSSで一つのコンビ

HTMLとCSSはコンビのようなものです。
HTMLだけでは装飾ができず、CSSだけではブラウザに表示できません。
それぞれの役割をもって一つの結果を導き出す、まさにコンビのようなものです。

また、記述にも色々とルールがあります。そのルールを守るか否かで、
YahooやGoogleなどで検索した時に上位に表示されるかどうかにも関わってきます。

HTMLとCSSを適切にマークアップすることで、たくさんの人に見てもらえて、
たくさんの人の役に立つ素晴らしいサイトを作っていきたいですね。

基礎知識:ブラウザを知る

WebサイトをPCで閲覧するとき・・・どんなソフト・アプリを使っていますか??
Webサイトを閲覧するにはWebブラウザというソフトを使う必要があります。

Webブラウザとは?

では国内外でユーザー数が多く、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のサポートは打ち切られ、ついに絶滅しました・・・!

Internet Explorer は Microsoft Edge へ – Windows 10 の Internet Explorer 11 デスクトップアプリは 2022 年 6 月 15 日にサポート終了 – Windows Blog for Japan

そして、上記のように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+モバイルでの世界のブラウザシェアを見てみましょう。

【2022年6月】日本とグローバルのWEBブラウザシェアランキング(PC・モバイル) | SHIFT ASIA -ソフトウェア品質保証のプロフェッショナル-

世界的なブラウザシェアはChromeが圧倒的に多く、
SafariやEdge、Firefoxがランクインしていますね。

現在はGoogle Chromeのほぼ一強ですが、実は少し前まではIEが最も多く非常に厄介な状況でした。なぜなら、不具合のほとんどは、バージョンの古いIEで起こっていたからです。(そこらへんをしっかり受け継いでるEdgeとか消えrゲフンゲフン)

そして近年、比較的新しいEdgeでさえも表示差異の不具合が多く、MicroSoftのブラウザは名前や形が変わっても、いつまでもWebクリエイターの頭を悩ませてくれます。

この問題は、Webデザイナー全員が直面しますが、Webサイトを問題なく、幅広く様々なブラウザでみられるように不具合を解決する必要があります。コーディングで解決しましょう!

次回以降、Webサイトが表示される仕組みやコードの記述の際に使用するテキストエディタなどを紹介する予定です。

課題の提出

ウェブデザイン演習は今回は初回の講義です。
そのため、みなさんがウェブサイト構築に関して本講義を通して聞きたいことや知りたいことを教えてください。楽しみにしています。

なおウェブデザインBと同じように以降の講義内で紹介しようと思っています。
(基本は匿名で紹介します)

では、以下のフォームの必要項目に記入を行い、送信を行ってください。

    学籍番号(必須)

    氏名(必須)

    フリガナ (必須)

    メールアドレス(必須)

    ウェブデザインBの受講(必須)

    聞きたいこと・知りたいこと(必須)

    聞きたいこと・知りたいことを
    講義で紹介してもいいですか?(必須)

    本日のまとめ

    • WebサイトはHTMLとCSS(+ その他もろもろ)でできている。
    • HTMLは文書に名前をつけ、CSSはそれを元にデザイン装飾を行うことができる。
    • 日本ではブラウザはほとんどがChromeで、次いでSafariやEdge、Firefoxが多い。
    • 不具合のほとんどは、バージョンの古いIEで起こっていたが、最新版のEdgeでさえ不具合を起こす。

    WEBCRE8TOR.COM

    SEARCH

    PAGES

    CATEGORY

    ARCHIVE

    LINK

    CLOSE