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

WEBCRE8TOR.COM

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

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

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

自己紹介

講師:脇坂 基徳

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

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

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

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

といったところ。

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

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

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

(-人-)アリガタヤ〜

本講義の目的

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

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

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

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

本講義の進行・公欠課題について

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

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

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

公欠課題提出ページ

基礎知識: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・・・の略です。

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に何も記述しなければ先ほどと同じです。

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ブラウザを挙げてみましょう。

lesson01_4

Internet Explorer

ごく最近まで国内で最もシェアを持っていたブラウザはこのInternet Explorer(以下:IE)です。 日本で一般的に普及しているOSはWindowsですが、そのWindowsのバージョンが8まで、デフォルトブラウザはIEでした。 Windowsのシェアに伴って必然的にIEが最もシェアを広げたということになります。

ちなみにWeb関係のお仕事をしている方々に、 早く消えればいいのに・・・ と、最も嫌われているのはこのIEです。

Google Chrome

IEの嫌われ具合とは逆に、Web関係のお仕事をしている方々が最も使用しているであろうブラウザがこのGoogle Chrome(以下:Chrome)です。

時価総額で世界2位を誇る企業、Googleが開発したブラウザで、2008年にリリースされたとても新しいブラウザであるにもかかわらず、現在日本ではシェア1位、世界でも40%近くのシェアをもって第1位に輝いています。

Firefox

日本では約15%、世界では約5%程度のシェア(※2020年9月現在)を持っているのがこのFirefoxです。 Web業界で使用している人もわりといますが、起動時などにとてももたついてしまうのでわりと敬遠されています。

Firefoxは「アドオン」と呼ばれるブラウザの機能を拡張するソフトウェアが豊富で、ブラウザを自分好みにカスタマイズしたい人には向いているんじゃないかと思います。

Safari

MacやiPhoneの標準ブラウザとしてプリインストールされているのがこのSafariです。 シェアは少ないですが、開発者向けの機能がけっこう便利なので、私はGoogle Chromeと併用しています。

ちなみに高解像度でWebサイトを閲覧したい場合、「Retina対応のMac + Safari」の組み合わせが最も美しく表示してくれると思います。

この他にもブラウザにはいろんな種類がありますが、代表的なものをあげればこの4つくらい。

ブラウザでどんな違いがあるの?

色々なブラウザがありますが、どんな違いがあるんでしょう?
挙げればきりがないですが、一番大きな違いは、「HTMLやCSSの解釈の違い」です。

Web制作の現場ではこれが一番困るんです。

・・・どう困るのか??

HTMLやCSSの解釈が違うと各ブラウザで見え方が変わってきます。

意図しないレイアウト崩れを起こしたり・・・
動画が見られなかったり・・・
使えない機能があったり・・・

Webサイト制作には・・・
ブラウザごとの見え方の差を最小限にするという対応が必ず毎回存在するわけです。

・・・これが本当に大変。

ブラウザのシェア

では日本のブラウザのシェアを見てみましょう。

WebブラウザシェアランキングTOP10(日本国内・世界) – ソフトウェアテスト・第三者検証ならウェブレッジ

バージョンも合わせて表示していますが、日本でのブラウザシェアは、Chromeが圧倒的に多く、
Windows10のプリインストールブラウザのEdgeやInternet Explorer・Safariがランクインしていますね。

実は少し前まではバージョンを別にして見てみてもInternet Explorerが最も多く、非常に厄介な状況でした。
なぜなら、不具合のほとんどは、バージョンの古いIEで起こっていたからです。

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

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

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

課題の提出

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

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

学籍番号(必須)
氏名(必須)
フリガナ (必須)
メールアドレス(必須)
ウェブデザインBの受講(必須)
聞きたいこと・知りたいこと
(必須)

本日のまとめ

  • WebサイトはHTMLとCSSでできている。
  • HTMLは文書に名前をつけ、CSSはそれを元にデザイン装飾を行うことができる。
  • 日本ではブラウザはほとんどがIEかChrome、またはFirefoxで、最新版のEdgeでさえ不具合を起こす。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE