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宣言タイトルの付け方検索エンジン対策等も勉強していくッピネ~!

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

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

 

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

ちびっこのみんなは、キュレオプログラミング教室がオススメッピ!

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

教室名 対象 学習言語 教室場所 無料体験・カウンセリング
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
コース買い切り
講座によってサンプル○
Unityゲーム講座アリ
 

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

小学2年生〜中学3年生 Scratch 全国各地
2500教室
無料体験◯
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
東京都,神奈川,埼玉県,千葉
オンライン
無料体験◯
3Dプリントなどの講座によっては別途料金

ユウキ
ユウキ

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

アイカ
アイカ

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

スポンサーリンク

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

ユウキ
ユウキ

うーん・・・

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

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

アイカ
アイカ

そうね・・・わたしも

すぐに復習できる環境じゃないから

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

ユウキ
ユウキ

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

うさタブ
うさタブ

フムフム!

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

アイカ
アイカ

そんなのあるのか?

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

うさタブ
うさタブ

それなら、やっぱり一番安心自宅でできる動画教材がよいッピ!

うさタブ
うさタブ
テレビCMでも話題の有名教材
Udemyとかどうッピか?

うさタブ
うさタブ
Udemyは、HTMLからJavaScript
人気の機械学習からUnityゲーム講座まで選び放題ッピ!

うさタブ
うさタブ

買い切り講座だから
いつでも勉強し放題、動画制作や難しいマーケティングなんかも勉強できるッピ~!

ユウキ
ユウキ

へえ~、こんなのがあるのか

うさタブ
うさタブ

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

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

うさタブ
うさタブ

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

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

うさタブ
うさタブ

全国2500教室もあるから、

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

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

ユウキ
ユウキ

なんだこれ! スゲーなっ

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

アイカ
アイカ

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

うさタブ
うさタブ

ロボットをプログラミングしてみるなら

LITALICOワンダーがオススメッピ!

JavaScriptも勉強できるッピよ~!

教室名 対象 学習言語 無料体験/教室場所
Udemy 学生~社会人 Unity
HTML/CSS
JavaScript
MySQL
Python等
オンライン講座
講座によってサンプル○
「QUREOプログラミング教室」
小学2年生〜中学3年生 Scratch 教室によって無料体験◯
全国各地の教室
【LITALICOワンダー】 小学1年生〜高校生 Scratch
Unity C#
HTML / CSS
JavaScript
無料体験◯
3Dプリントなどの講座によっては別途料金
東京周辺
オンライン

ユウキ
ユウキ

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

アイカ
アイカ

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

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