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

WEBCRE8TOR.COM

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

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

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

自己紹介

講師:脇坂 基徳

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

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

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

といったところ。

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

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

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

(-人-)アリガタヤ〜

本講義の目的

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

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

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

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

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

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

lesson01_1

極端に言ってしまうとWebサイトは文書です。

文字情報の集合体で、見やすいように画像などを使って見た目を整えたものがモニターに表示されているわけです。

・・・ちょっと見てみる??

view-source:http://webcre8tor.com/ ※Google Chromeで見てください。

これがこのブログの中身です。
実際に中身を見てみると本当に複雑で一度見たらお腹いっぱいになると思います。
・・・先生は割とお腹いっぱいです。

基礎知識

「コーディング」や「マークアップ」とは??

コーディングやマークアップという言葉を使っていますが、それぞれの意味として、

コーディング コードの記述(キーボードなどで文字を打ち込む)。
マークアップ 「見出し」や「段落」、「リンク」など、
記述したコードのそれぞれの性質を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>で囲った文章は一つの段落ということになります。

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

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年にリリースされたとても新しいブラウザであるにもかかわらず、現在日本ではシェア2位、世界では40%近くのシェアをもって第1位に輝いています。

Firefox

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

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

Safari

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

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

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

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

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

僕らの仕事はこれが一番困るんです。

・・・どう困るのか??

HTMLやCSSの解釈が違うと各ブラウザで見え方が変わってきます。 意図しないレイアウト崩れを起こしたり、動画が見られなかったり、使えない機能があったり・・・ ブラウザが古ければ古いほど不具合があります。

つまりWebサイト制作には・・・ ブラウザごとの見え方の差をできるだけなくすという対応が 必ず毎回存在するわけです。

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

ブラウザのシェア

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

lesson01_5_new

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

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

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

現在では古いWindowsのサポートが終了し、同様に古いIEのサポートが終了したことで状況は多少楽になりましたが、主にWindows7で使われているIE9のサポートはまだ終わっていないためにまだまだ対応の必要があり、またIE自体にもレイアウト崩れ以外でも非常に不具合が多いのでまだまだ対応をしなければいけません。

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

本日のまとめ

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

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE