まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
Sponsored Link
前回の講義内容覚えてますか？？
- Webサイトが表示される仕組みは、
PCやスマートフォンを使って検索やクリックなどの方法でWebサーバーにリクエストを送り、
Webサーバーが応答して表示されるというもの。 - htmlファイルの役割は他の言語の受け皿で最終的な表示用ファイル。
cssファイルの役割はhtmlへデザインを反映させること。
JavaScriptファイルの役割は表示状態などの変更をリアルタイムで処理すること。 - ウェブサイトデザインで大事なのは、
「見やすさと操作性の向上」と「トーン・マナーの設計」。 - 「見やすさと操作性の向上」とは、
誰が見ても理解しやすくすること、目的を達成しやすくすること、
迷わせないこと、一貫性のあるルールを持たせること。 - 「トーン・マナー」とは、
属性や世界観を伝える要素、メッセージを伝えるための色・形・言葉の軸となるものです。
これを設計していくことにより、Webサイトに「らしさ」を持たせましょう。 - 紙は固定サイズ、Webは可変サイズ。
それぞれに役割を持たせることでターゲットユーザーに有効に訴求することができる。
といった内容でした。
今回は実際にhtml・cssコーディングに入る前に、
htmlタグの役割の解説とコーディング前の下準備を行います。
テキストエディタ
以後の講義、および後述する手順の中で「テキストエディタ」、
もしくは「エディタ」という呼び方をするものについて説明しておきます。
これらは「Dreamweaver」や「Visual Studio Code」など、
コーディングやプログラミングに使用するソフトウェア・アプリケーションのことを指します。
まずはどういったものがあるのかを紹介します。
色々と種類がありますが、より実用的なのは今回紹介する以下の3つです。
Adobe Dreamweaver（サブスクリプションで有料）
みんなご存知、Adobeから発売されているテキストエディタソフトです。
Adobeから発売されているため当然PhotoshopやIllustratorとの連携が魅力ですが、
反面、多機能すぎて覚えるまでの時間的コストが大きくなりがちです。
とはいえ最も多くのユーザーに使用されているであろうテキストエディタはやはりこれ。
ユーザーが多いということは、公式以外でもTips系の記事などがわんさかあって、
何をどうすればいいかわからない時、調べれば簡単にやり方が見つかります。
Adobe Dreamweaverのメリット
- WindowsとMacで使える
- 日本語のマニュアルや情報が豊富
- リアルタイムプレビューで書いたものを即座に確認できる
Adobe Dreamweaverのデメリット
- 費用がかなり高額（単体月額2,728円）
- 多機能すぎて使いこなせない場合が多い
Sublime Text（買い切りで有料・無料）
龍弥デザインで使用しているテキストエディタはこのSublimeText。
キャッチフレーズは「恋に落ちるエディタ」だそう。
使い始めてもう5年ほどになりますが、とにかく動作が軽く、
拡張機能が豊富で必要な機能をすぐ取り込める点が非常に優秀です。
導入までに行うインストール作業のハードルは多少高いですが、
それさえクリアできれば他のエディタには戻れなくなります。
もし将来的にコーディング・プログラミングをする予定があったら、
試しに一度使ってみてください。買う気になるまでは無料で使えますよ。
Sublime Textのメリット
- WindowsとMacで使える
- 圧倒的に動作が軽い
- うっかり終了しても終了時の状態を復元してくれる
- コード補完（予測変換に似た機能）機能が優秀
Sublime Textのデメリット
- 日本語環境だと言語や検索が不自然な場合が多い
- 導入のハードルが高い・時間がかかる
- 有料版は買い切りだがちょっと高い（現在 $99USD）
Visual Studio Code（無料）
MicroSoft謹製のエディタであるVisual Studio Code。
こちらのエディタも機能や拡張性が優れているようですね。
Visual Studio Codeのメリット
- WindowsとMacで使える
- 動作が軽い
- 基本機能と設定で即実用可能
- とはいえ拡張機能も豊富
- コード補完（予測変換に似た機能）機能が優秀
Visual Studio Codeのデメリット
- 多機能すぎて使いこなせない場合が多い
講義はVisual Studio Codeで進めます
ウェブデザインAの講義では基本的に記述にはVisual Studio Codeを使っていこうと思います。
とはいえコーディング・プログラミングはツールにそこまで縛られないのがいいところ。
みなさんがDreamweaverや他のエディタを使いたければ使っても問題ありませんし、これは！と思ったエディタがあったら使えばいいし逆に教えてもらえたら嬉しいです。
注意！メモ帳は使わないで！
Windowsに最初から入っているメモ帳もテキストエディタですが、
コーディング・プログラミングには絶対に使ってはいけません。
文字コードを指定して保存することができないからです。
文字コードに関しては以後の講義で詳しく解説していきますが、
文字コードが文字化けを起こすだけでなく、プログラムが動かない場合があります。
メモ帳だけに限らず、文字コードが指定できないテキストエディタは、
ウェブサイトのコーディングやプログラミングでは絶対に使用しないでください。
コーディングの基礎① htmlタグについて
なぜhtmlタグを使うのか？
SEO
ここからは、検索結果の表示順を検索順位という言い方に統一し、
検索結果の1ページ目など、早い段階で掲載されているサイトは順位が高い、逆は順位が低い、として解説します。
Yahoo!やGoogleで検索を行った時に検索結果が表示されますよね。
検索結果の1ページ目・2ページ目に出てくる検索順位の高いサイトは開くけど、
3ページ目、4ページ目以降の検索順位の低いサイトはあまり開くことがありません。
つまり、検索順位が低いと多くの人に見てもらえる可能性はグンと下がってしまいます。
多くの人に見てもらうため、Yahoo!やGoogleなどの検索エンジンでの検索順位がより高くなるように対策をする検索エンジンへの最適化を行うことが、有名なSEO（Search Engine Optimization）と呼ばれる手法です。
クローラー（検索ロボット）とは？
ではこの検索順位はどうやって決まっているんでしょうか？
その答えは・・・
検索エンジンが、クローラーを使って収集したWebサイトの情報をもとに、
検索した内容に最もふさわしい内容を、最もふさわしい順番で表示」しているというもの。
これは、検索内容からいち早くユーザーに答えを提供出来るように検索エンジンがとっている配慮です。
このネット上のWebサイトの情報を集める仕事を担っているのがクローラー（検索ロボット）と呼ばれるもので、
Yahoo！やGoogleなどの検索エンジンが定期的にそれぞれのクローラーを使い、ネット上の巡回を行っています。
検索エンジンは、クローラーが巡回を行うことにより、
新しくオープンしたWebサイトを追加したり、閉鎖してしまったWebサイトがあれば検索結果から削除したり、
ページの内容が変わればそれを反映して検索結果を更新して、検索結果の様々な整理を行っています。
人間とクローラーの見え方の違い
そもそもなぜhtmlタグを使うんでしょう？？
それは、閲覧する人間と、巡回するクローラーの、Webサイトの見え方の違いに理由があります。
人間が見ている状態はまさにみなさんが今見ているページの状態です。
ではクローラーにはこのページはどのように見えているんでしょうか？
前回、前々回と講義で紹介した、まさに記号や英数字などの文字情報だけのページです。
情報を集めるクローラーには、人間が見ているようなデザインは見えていないんです。
その代わりにhtmlタグを判別してサイトの構成や内容を判断し、検索エンジンに報告します。
つまり、「ここはページタイトル、ここはブロック、ここは段落」と、
クローラーが判別しやすいように最適なhtmlタグを使ってコーディングを行わなければ、
検索順位にいい影響を与えてはくれません。
使用頻度の高いhtmlタグ
開始タグと閉じタグの理解
今回はWebサイト制作において最も使用頻度の高いタグを紹介しますが、
各タグを紹介する前に、まず大原則として開始タグと閉じタグの概念を理解してください。
開始タグと閉じタグ
<p><!-- 〜これが開始タグ〜 -->
今日はウェブデザインAの第3回目の講義です。
</p><!-- 〜これが閉じタグ〜 -->こちらのマークアップの場合、
開始タグとは、「これからp（段落）を始めます」という記述で、
閉じタグは「p（段落）はここまで」という記述になります。
原則、タグのマークアップは開始タグと閉じタグの両方を記述してください。
ただタグは様々なものがあり、中には開始タグのみ記述して閉じタグを記述しなくていいものもあります。これに関しては下のimgタグのブロックで解説します。
<div></div>（divタグ：開始タグあり・閉じタグあり）
まず基本となる、div（ディヴ）タグを覚えましょう。
divタグとは、「division（分けること、分割すること）、divide（分ける、分割する）」の略で、
そのままの意味で「分割したブロックのこと」だと考えてください。
divタグは単体では特に意味を持ちませんが、主に各ブロックのレイアウトの役割を持っています。
特に意味を持っていないので逆に自由度が高く、大半のことに対応できる万能なhtmlタグです。
以下の画像をみてみましょう。
龍弥デザインのクライアントの倉敷市児島の女性向け鍼灸院 はりきゅう処 群青様のウェブサイトです。
さて、この画像の見える範囲で、どれくらいのdivタグをどのあたりに仕込んでいるのか？？
正解は下の画像です。
正解は「ほぼ全部」でした。
実は全体を見ると、これらのdivタグのさらに外側に、この画像の範囲すべてを囲うdivタグがあります。
逆に細かいもの、今回で言えばメッセージブロックの枝のイラストなどもdivタグで実装しています。
divタグは箱のようなもの（以下：ブロック）だと考えてください。
レイアウトを行うためにブロックを生成する必要があり、
その際に頻繁に使用するのがdivタグです。
また、このdivタグは、後述するhタグやpタグなどを入れ子にするカタチで包括（囲う）し、
さらにこのdivタグを入れ子にすることで複雑なレイアウトを実現しています。
この入れ子の原理によって、様々なレイアウトが可能になります。
<h○></h○>（h○タグ：開始タグあり・閉じタグあり）
h（エイチ）タグは、サイト内の見出しの役割を持っています。
hの後に1〜6の文字が入り、数字が小さいほど重要な見出しになり、
適切に使用すればクローラーへのアピールポイントとして非常に有効になります。
一目でわかる使い方で言えば以下のようになります。
html
<h1>最も重要な要素（ページタイトルなど）</h1>
<h2>2番目に重要な要素（各ブロックのセクションタイトルなど）</h2>
<h3>3番目に重要な要素（小見出しなど）</h3>
・
・
・
<h6>6番目に重要な要素</h6>下の画像に、h1タグとh2タグを表示していますので見てみましょう。
はりきゅう処 群青様のWebサイトでは、
ページタイトルにh1、ブロックのタイトルにh2を使っています。
ただし上にも書いた通り、hタグは「適切に使用する」ことが重要です。
hタグの1〜6の順番付けでクローラーが判別を行っているため、乱用すると何が重要か判別ができなくなってしまいます。
アピールに有効だからといってh1タグを乱用すると検索エンジンからペナルティを受け、
最悪の場合、検索結果から削除されてしまうor検索順位を下げられてしまうこともあります。
<p></p>（pタグ：開始タグあり・閉じタグあり）
p（ピー）タグは以前にも少しだけ解説しましたが、文章の段落のための役割を持っています。
Webサイトはそのほとんどを文章によって構成されています。文章が多ければ段落が増えるので、自然とpタグがWebサイト制作で一番使うタグになってきます。
使い方は以下のように段落ごとにpタグを使って囲います。
html
<p>舞台は先生のかっこうしずかげがへんにおどかしとんとんましです。それからしばらくだめたでしというおいましう。</p>
<p>気の毒たたんございはたまたざとじぶんのの生意気屋のままとはとうとう愉快でしまして、何などセロに見ろられる方ですまし。なっすぎ君は子でいいたながらこんどのねずみの野ねずみ汁をし第一ゴーシュたちの活動に見て来だた。子どもははじめ走っていまし。糸は万見るかっこうのようをあげてしまいた。</p>
<p>扉は手あとやそれをくわえながらしまえない。</p>引用元：宮沢賢治「セロ弾きのゴーシュ」
<a></a>（aタグ：開始タグあり・閉じタグあり）
a（エー）タグは、内部や外部へのリンクの役割を持っています。
aタグを使用するときは「href=”〇〇”」の〇〇部分にリンク先を記述します。
また、現在開いているページを残したままブラウザの別タブなどで表示させたい場合は、
href=”〇〇”の後に半角スペースで半角1文字分あけて「target=”_blank”」と記述します。
html
<!-- 〜href="〇〇"と書くと、〇〇にリンクする〜 -->
<a href="https://ryu-ya.jp">リンクテキストを記述します</a>
<!-- 〜target="_blank"と書くと、ブラウザの別タブでリンクを開く〜 -->
<a href="https://ryu-ya.jp" target="_blank">リンクテキストを記述します</a>また、aタグは基本的にpタグなどの文章内に使用することが多くなります。
上のものを少し改変すると・・・
html
<!-- 〜aタグはpタグなどの中に記述する〜 -->
<p>私は<a href="https://ryu-ya.jp">龍弥デザイン</a>の脇坂と申します。</p>といった記述になります。
<img />（imgタグ：開始タグあり・閉じタグなし）
img（イメージ）タグとは、その名の通り、画像を読み込む役割を持ったhtmlタグです。
このブログでも画像を結構使っていますが、その全てでimgタグを使って画像を表示させています。
開始タグと閉じタグの理解の項で、
「閉じタグが必要ないhtmlタグがある」と言いましたが、
このimgタグには閉じタグは必要ありません。
閉じタグの代わりに、開始タグの最後に/（スラッシュ）を入れます。
html
<img src="画像のURL" width="画像の横幅" height="画像の縦幅" alt="画像の内容を示す文章" />また、今後紹介するhead要素内に記述する<meta>タグや<link>タグなどにも閉じタグが必要ありません。
htmlタグはまだまだあります
今回は頻繁に使用するであろうhtmlタグを紹介しました。
次回からは実際にWebサイトのコーディングを行うための必須のhtmlタグを紹介し、少しずつコーディングに慣れていってもらおうと思っています。
フォルダ・ファイルの準備
ではコーディングに進む前に、htmlファイルやcssファイルなどの準備を行いましょう。
本講義の最後まで毎回使いますので、管理しやすくデータが消えないような場所にフォルダとファイルを作ってください。
必ずUSBメモリなど自分で持ち歩けるものにフォルダとファイルを保存して、講義の度に持ってきてください。
最終的には以下のようなファイル構成を作り上げましょう。
では、一つ一つ一緒にやっていきましょう。手順は以下です。
- 自分で管理できる場所にフォルダを作り、名前を「html」にする。
- htmlフォルダの中にさらに「css」「js」「img」というフォルダを作る。
- テキストエディタを開き、新規ファイルを作成。
「index.html」という名前をつけてhtmlフォルダの直下に保存する。 - テキストエディタで新規ファイルを作り、「main.css」という名前をつけて、
htmlの中のcssフォルダの中に保存する。
実際に作業を行なったスクリーンショットを使って解説しますが、
Macでの表示なので厳密には内容が少し違うかもしれません。
1・2 フォルダの作成
まずはじめにフォルダから作っていきましょう。
これは普通にフォルダの中にフォルダを作ればいいだけの話です。
右クリックメニューから、新規作成 > フォルダー と進み、「html」と名前をつけてください。
作成されたhtmlフォルダを開き、フォルダの中に「css」「js」「img」の3つのフォルダを再び作成して終わりです。
3・4 ファイルの作成
次に、3の「index.htmlの作成」の説明をします。
まずDreamweaverかVisual Studio Codeのいずれかのテキストエディタを起動してください。
好きなほうで構いませんが、慣れが必要になるので、可能であれば統一したほうがいいと思います。
起動して出てきたウィンドウの「新しいファイル」をクリック、
もしくは、ショートカットキー「Ctrl + N」（新規ファイル作成）を押す。
上から新規作成のウィンドウが出てきたら「テキストファイル ビルトイン」をクリック。
※新規ファイル作成の時にCtrl+ Nを使った場合はこのウィンドウは出てきません。
上部メニューから、ファイル > 保存 をクリックするか、
ショートカットキー「Ctrl + S」（保存）を押す。
名前を「index.html」に、フォーマットを「html」にし、
場所を先ほど作成したhtmlフォルダにして、保存をクリックしてください。
4の「main.cssの作成」も同様に、名前を「main.css」、フォーマットを「CSS」にし、
場所を今度は「html」フォルダの中の「css」フォルダにして、保存をクリックしてください。
ファイル・フォルダ構成の確認
さて再度確認しましょう。
問題なくできていれば、以下の画像のようなフォルダ構成になっているはずです。
フォルダ・ファイル構成がもし違っていたら、もう一度よく確認しながら作ってください。
本日のまとめ
- ネット上のWebサイトの情報を集める仕事は、
各検索エンジンのクローラーと呼ばれる検索ロボットが行っている、 - 人間が見るWebサイトとクローラーが見るWebサイトは違い、
クローラーは文字情報だけを見ている。 - htmlタグを使うのは、クローラーにページの構成や内容を判別させるため。
- クローラーが収集してきた情報をもとに、検索エンジンが表示順を決定する。
- 表示順を少しでも上に持っていくために行うのがSEOと呼ばれる手法。
- htmlタグには開始タグと閉じタグがあり、文字を囲うことで使用する。
またimgタグなど、中には閉じタグが存在しないhtmlタグもある。 - divタグは箱のようなもので、いろいろな要素を入れることができる。
- hタグは見出しで、数字が少ないほど重要な見出しになる。
- pタグは段落で、最も使用頻度の高いhtmlタグ。
- imgタグはページに画像を読み込むhtmlタグで、閉じタグが必要ない。
