HTML入門講座|ウェブサイトの構成について学ぼう

HTML
ユウキ
ユウキ

うーん・・・

うさタブ
うさタブ

どうしたッピ? ユウキくん

ユウキ
ユウキ

学校の宿題で、ホームページの作成がでたんだけどさ・・・

タグの使い方はわかったんだけど、なんていうか・・・

うさタブ
うさタブ

???

ユウキ
ユウキ

オレ、

そもそもホームページがどんな風に作られてるか、よく分かってなくて・・・

いきなり作れっていわれても、何からやればいいか手がつけられないんだよなぁ~

うさタブ
うさタブ

なるほど・・・ユウキくんは、

どちらかというとスマホのアプリに触る時間の方が多くて

ウェブページが何たるかというイメージが曖昧ッピな~

ユウキ
ユウキ

そうそう!

何ていうか、わからなすぎてもうお手上げなんだよ~

うさタブ
うさタブ

良い機会ッピ!

これを期に、ウェブサイトのデザインの基本について学んでいくッピよ~!

この記事で学べること
  • ホームページデザインの基本
  • HTML宣言
  • SEO対策やホームページの紹介をするメタタグ
  • ホームページのタイトルをつける<title>タグ
  • ホームページの上部をつくる<header> / <nav> タグ
  • ホームページの中央をつくる<main> / <article><section><aside> タグ
  • ホームページの下部をつくる<footer> / <address> タグ

ホームページのデザインの基本

ウェブサイトは主に 上部/中央/下部 で成り立っている

うさタブ
うさタブ

ではホームページデザインの基本について、説明するッピ!

ウェブサイトは 上部/中央/下部 で成り立っている
ウェブサイトは 上部(ヘッダー)/中央(コンテンツ)/下部(フッター) で成り立っている
うさタブ
うさタブ

ホームページやウェブサイトは、

主に3つのブロックで成り立ってるッピ!

うさタブ
うさタブ

上部<header> / ロゴ・ナビゲーション

中央<main>/ ホームページのコンテンツ

下部<footer>/ 著作権表記やより詳しいナビゲーション

がウェブサイトのデザインの主流ッピネ!

サンプル例
ウェブサイトデザインの基本
ウェブサイトデザインの基本
ヘッダー・メイン・フッターサンプル
ユウキ
ユウキ

あ~ ハイハイ、こーゆーのよく見るわ!

うさタブ
うさタブ

2010年代前半は、

<div>というタグでこの3つのブロックを構成こうせいしていたッピが、HTML5というバージョンアップが来てから、

<header> / <main> / <footer> というタグが使用できるようになったッピ!

これで『これはどういう考えで作られて、どんな風に表示したいのか?』という共通のものが出たことで、大人数で仕事をするエンジニアがやりやすくなったッピよ~!

ユウキ
ユウキ

なるほどなー

<header>の中でよく使われるもの

ナビゲーションサンプル
グローバルナビゲーション

 <header>の中で最もよく使われるのが、このナビゲーションリンクです。

 ウェブサイトの案内図でもあり、各コンテンツへユーザーを案内する項目です。

<nav><ul><li>タグがよく使用されています。

企業ロゴ
企業ロゴ

 企業の顔であるロゴマークです。フッターで著作権表示と一緒に掲載される場合もあります。

 段落を作る<p>タグの中に<img>で画像を組み込む他、見出しで使われる<h1><h2>等のタグが使われることもあります。

アイキャッチ / イメージ画像

 映画やアニメーション等のサイトで、ユーザーを引きつける役割を持つ画像です。

 そのまま<img>タグを入力したり、段落をつくる<p>タグ<h2><h3>などの見出しタグに背景をつけるパターン等があります。

<main>の中でよく使われるもの

メインコンテンツ

 ウェブサイトの要になるものです。

 <article><section>タグがよく使われます。

サイドバー

 メインコンテンツのナビ、目次のような意味合いで使われるものです。

 <aside>タグ等が使われています。

<footer>の中でよく使われるもの

著作権表示
著作権表示

 よくあるウェブサイトのコピーライト(著作権表示)です。

 <address>タグがよく使われています。

サイトマップ

 フッター(下部)にあるナビゲーションです。

 サイト全体の全容を大まかに説明しています。<nav><ul><li>タグ等が使われています。

うさタブ
うさタブ

だいたいこんな感じッピネ~!

使われてるタグも加えると、こんな感じで作られてるッピよ~!

ウェブサイトを作るときに使われてるタグの解説

ホームページデザインの基本
うさタブ
うさタブ

次のページでは、実際にウェブサイトを作ってみるッピ!

今まで説明していなかった、HTML宣言タイトルの付け方検索エンジン対策等も勉強していくッピネ~!

スポンサーリンク
スポンサーリンク
スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

それなら、やっぱり一番安心自宅近所の教室がよいッピ!

うさタブ
うさタブ
テレビや雑誌に紹介された超有名教室
QUREOプログラミング教室とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのねっ!

うさタブ
うさタブ
キュレオプログラミング教室は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、確かな実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生 Scratch
HTML/CSS
JavaScript
全国各地
教室
無料体験◯
 

Tech Kids Online Coaching

小学1年生〜中学3年生 Scratch
C++
Unity
渋谷
またはオンライン
無料体験◯
 

Udemy

社会人 HTML/CSS
JavaScript
Python
講座購入
ブラウザ
アプリ
サンプル等◯
うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんな、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

スポンサーリンク

どうしてもわからない、そんなときは?

ユウキ
ユウキ

うーん・・・

やっぱり、どうしてこーなるか良くワカンナイな~

説明を聞いたすぐはわかったつもりなんだけどさ

アイカ
アイカ

そうね・・・わたしも

先生やうさタブさんにすぐに聞ける環境じゃないから

宿題とか困っちゃうわ・・・

ユウキ
ユウキ

他に気軽に教えてくれる先生とかいるといいんだけどな~

うさタブ
うさタブ

フムフム!

そんなときは、プログラミング教室がオススメッピね~

アイカ
アイカ

プログラミング教室??

アイカ
アイカ

そんなのあるのか?

ていうかドコいけばいいんだよ

うさタブ
うさタブ

プログラミング教室は、やっぱり安心の近所の教室ッピ!

うさタブ
うさタブ

テレビや雑誌に紹介された超有名教室

プログラミング教室数国内No.1!「QUREOプログラミング教室」
とかどうッピか?

うさタブ
うさタブ

未来都市キュレオを舞台に、魅力的なキャラクターがたくさん登場する・ゲーム感覚で楽しく学べるプログラミング教室ッピ!

困ったことも先生に直接聞けるのが最高ッピ~!

うさタブ
うさタブ

全国2500教室もあるから、

きっとみんなの近くにも教室があるッピ。

公式サイト近くに教室があるかチェックしてみるとよいッピ!

ユウキ
ユウキ

なんだこれ! スゲーなっ

ゲームみたいにやってるうちに、自然と勉強できてるみたいな感じ?

アイカ
アイカ

そんなものがあるのね

うさタブ
うさタブ
「QUREOプログラミング教室」は、
アメーバブログやアベマTV・バンドリをプロディースしている
サイバーエージェント」のグループ会社で、実績があるッピ!

うさタブ
うさタブ

オンラインで授業を受けるなら

Tech Kids Online Coachingがオススメッピ!

こっちもサイバーエージェントのグループ会社が運営してるッピ!

教室名 対象 学習言語 無料体験・カウンセリング
 

「QUREOプログラミング教室」

小学2年生〜中学3年生
教室で授業を受けたい方
Scratch
C++
JavaScript
無料体験◯
 

Tech Kids Online Coaching

小学生~中学生
オンライン授業を受けたい方
Unity
C++
Scratch
無料体験◯
Udemy
社会人
講座コースで勉強したい人向け
HTML/CSS
JavaScript
Python
サンプル等◯

うさタブ
うさタブ

パパやママ、お兄ちゃんお姉ちゃん
就活や転職で役立つプログラミング知識を身につけたいなら
Udemy】で講座のコースを買ってみるのもオススメッピ!

動画付きの魅力的な教材が格安で、好きな時間に学べるッピ~

うさタブ
うさタブ

ちびっこのみんなは、スクールで
自分以外の同い年と一緒に勉強することで、自分も負けないゾ!と思えて
おサボりを防ぐことができるッピ!
さらに、クラスのみんなと差をつけてすごいプログラムが作れちゃうッピ

先生やパパママにほめられて、学習効率が最高にグングン↑↑ッピよ~~♪

ユウキ
ユウキ

よーし、ちょっと体験だけでもやってみるか!

アイカ
アイカ

わたしもさっそくチェックしてみようかな♪

HTMLプログラミング
学んで遊んでジャンケンポン!
タイトルとURLをコピーしました