月別: 2021年7月

学科 HTML基礎⑥

-本日のアジェンダ-

1限目
学科 HTML基礎⑥
マークアップについて

2限目
学科 HTML基礎⑥
タグチェッカーについて

3限目
学科 HTML基礎⑥
SEOについて

4限目
学科 HTML基礎⑥
HTMLのまとめ

5限目
学科 HTML基礎⑥
グラフィックツールの復習

本日のテーマ

タグチェッカーを活用しましょう。

マークアップについて

マークアップとは、文書構造（テキスト）や視覚表現（装飾）などの情報を、コンピューターが正しく認識できるように、タイトルや見出しなどの各構成要素に「タグ」と呼ばれる識別のための目印を使い、意味付けを行っていくことを意味します。

ワンポイントアドバイス

Web関連の求人情報で、マークアップエンジニアという職種があります。マークアップエンジニアというのは、専門知識を必要とする仕事ではあります。Webサイト制作で、フロント寄りの領域を扱うことから、エンジニアやプログラミングとは大きく業務内容が異なります。
マークアップエンジニアは、制作現場で数多く求められている職種です。 未経験者であってもある程度の勉強や実践経験を積めば、募集企業によって十分チャレンジが可能な職種と言われています。

参考サイト

タグチェッカーについて

正確なHTMLが書けているか、自分の目ですべてをチェックするのはとても大変作業です。とはいえ、適切なHTMLが書けていないとレイアウト崩れの素となったり、修正に大幅に時間がかかったりなど決していいことはありません。そんな時に活用したいのがHTMLのエラーチェックツールです。

ワンポイントアドバイス

マークアップエンジニアやコーダーの求人応募をして、見られるのはソースコードです。最低限のやっておくべき事として文法エラーは減らしておきましょう。

参考サイト

SEOについて

検索エンジン最適化とは、検索エンジンのオーガニックな検索結果において、特定のウェブサイトが上位に表示されるよう、ウェブサイトの構成などを調整すること。また、その手法の総称。 サーチエンジン最適化ないし検索エンジン対策とも呼ばれ、ウェブポジショニングと同義である。

ワンポイントアドバイス

まずは正しい文法理解と記述を理解していきましょう。その次に目的であるSEO（検索エンジン最適化）を考えてより良いサイト構築・設計を考えていきましょう。

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。

学科 HTML基礎⑤

-本日のアジェンダ-

1限目
学科 HTML基礎⑤
テーブルタグについて

2限目
学科 HTML基礎⑤
セクショニング・コンテンツについて

3限目
学科 HTML基礎⑤
ブロックレベル要素とインライン要素について

4限目
学科 HTML基礎⑤
HTMLのまとめ

5限目
学科 HTML基礎⑤
グラフィックツールの復習

本日のテーマ

タグの役割と特性を確認しましょう。

テーブルタグについて

「TABLE」とは<tr>、<th>、<td>などと組み合わせて表を作成するためのタグです。表の基本的な構造は<table>～</table>の中に<tr>～</tr>で表の横部分を指定し、その中に<th>～</th>や<td>～</td>で表題や縦軸を指定してセルを定義します。この時ヘッダセルのテキストは、一般的なブラウザでは太字になりセンタリングされます。
<table>はしばし、レイアウトのために使用されることがあります。しかし本来の使用方法ではありませんので、レイアウトで同様の効果が欲しい場合はスタイルシートを利用するとよいでしょう。

参考サイト

ワンポイントアドバイス

楽天やヤフーショッピングの商品ページでテーブルレイアウトが必要になる場合があります。EC関連のお仕事をする場合は、想定しておきましょう。

セクショニング・コンテンツについて

HTML5から登場のセクショニング・ コンテンツのタグは、より細かい役割を指定する時に使いましょう。

セクションニングタグ一例

<section>∼</section>一つのセクションであることを示す
<nav>∼</nav>ナビゲーションであることを示す
<header>∼</header>ヘッダであることを示す
<footer>∼</footer>フッタであることを示す

コンテンツタグ一例

<div>∼</div>ひとかたまりの範囲として定義する
<main>∼</main>メインコンテンツであることを示す

サンプルページ（htmlの記述【body】）

参考サイト

テキストの意味を持つタグについて

<a>～</a>のタグのようにテキストに意味を持たせることが出来るタグがいくつか用意されています。必要に応じて使用してみましょう。

テキストの意味

<em>∼</em>強勢する（アクセントを付ける）箇所を表す
<strong>∼</strong>強い重要性を表す
<small>∼</small>免責・警告・著作権などの注釈や細目を表す
<i>∼</i>声や心の中で思ったことなど、他と区別したいテキストを表す
<b>∼</b>文書内のキーワードや製品名など、他と区別したいテキストを表す
<span>∼</span>ひとつの範囲として定義する

参考サイト

ワンポイントアドバイス

「div」「span」とタグは「意味を持たない」という意味を持っています。CSSで文法の意味を持たないレイアウト が必要な時に使いましょう。

ブロックレベル要素とインライン要素について

要素の多くは、ブロックレベル要素とインライン要素に分類されます。
■ブロックレベル要素
文書の骨組みとなる要素です（例えば見出しや段落など）。このタイプの要素は、body要素の直接の子要素として配置することができます。
■インライン要素
文章中の一部として扱われる要素です（例えばリンクや文字の強調など）。このタイプの要素は、通常はブロックレベル要素内で使用します。
※ただし、HTML5ではブロックレベル要素とインライン要素という考え方はなくなっていますので、あくまでも性質を持っていると考えておきましょう。

参考サイト

本日の課題①

wordpressのサイトに、本日学んだ内容を「投稿ページ」にまとめてください。
投稿日は、本日の日時で設定してください。
※ページタイトルに「議題」は必ず入れましょう。

本日の課題②

グラフィックデザイン基礎の内容をページにまとめてください。
投稿日は、該当する「学科　グラフィックデザイン基礎」の日時にしてください。
※ページタイトルに「議題」は必ず入れましょう。