【セミナー】ログインしていません。ログイン
セミナー詳細
【HTML入門】第2回:リストと画像!情報を整理して伝える「見せ方」の基本とパスの仕組み(60分セミナー・2026最新版)で学習しませんか?

【HTML入門】第2回:リストと画像!情報を整理して伝える「見せ方」の基本とパスの仕組み(60分セミナー・2026最新版)

【HTML入門】第2回:リストと画像!情報を整理して伝える「見せ方」の基本とパスの仕組み

第2回では、Webサイトに欠かせないビジュアル要素「画像」と、情報を整理する「リスト」を攻略します。単に配置するだけでなく、ハローワーク職業訓練講師が「なぜ画像が表示されないのか?」という初心者の最大の悩みである「パスの概念」を60分でスッキリ解消します。文字だけのページから、本格的な「Webサイトらしい見た目」へとステップアップしましょう。

具体的なワークショップ内容と実務のポイント

【重点攻略テーマ:画像とリスト】
箇条書きを作るul・ol・liタグの使い分けから、Web制作の最重要スキルであるimgタグとパス(相対パス)の仕組みを徹底解説。画像が表示されないトラブルを自力で解決できる力を養います。アクセシビリティに配慮した「alt属性」の正しい書き方も伝授します。

【学習メソッド】
20名のPL経験を持つ現役エンジニアの視点から、現場で推奨される「フォルダ構成」と「ファイル名の命名規則」を指導。職業訓練の現場で培った「画像が表示されないあるあるミス」を網羅し、未経験者でも確実にビジュアル豊かなページを作れる「構造的・実践学習法」を公開します。

この60分で得られる3つの実践スキル

1. 情報を整理するリストタグのマスター

メニューや箇条書きなど、情報を分かりやすく構造化する技術を習得。検索エンジンにも伝わりやすい正しい使い分けを学びます。

2. 「パス(階層)」の仕組みと画像表示の完全理解

初心者が最も躓く「ファイル間の距離(パス)」を、地図を読み解くように理解。画像が表示されない不安を自信に変えます。

3. PL直伝「管理しやすいファイル構成」の作法

大規模開発のPL視点で、画像フォルダの整理術や命名ルールを伝授。後の修正作業を楽にするプロの管理方法が身につきます。

HTML超入門:Web制作の基礎 全3回の学習ロードマップ

本シリーズは、全3回を通じて「Webサイトの構造」をマスターする短期集中プログラムです。今回は視覚効果を左右する重要なステップ「2. リストと画像:情報の整理と見せ方の基本」を攻略します。

第1回 HTML超入門:環境構築と「タグ」の本当の意味
今回のテーマ 2. リストと画像:情報を整理して伝える「見せ方」の基本

受講前のご注意: 本セミナーは第2回「リストと画像」に特化しています。inputタグを用いた入力フォームfooter等のセマンティックタグは、最終回の解説範囲となります。ロードマップに沿って順次開催される専門セミナーにてマスターいただけます。

イメージ写真

実際に動かして、理解を深めていきます
実際に動かして、理解を深めていきます
疑問に思ったことは、お気軽に質問してください
疑問に思ったことは、お気軽に質問してください
プログラミング未経験者や色々な職種の方が参加されています。
プログラミング未経験者や色々な職種の方が参加されています。
学んだことを自宅などで復習することが大切です
学んだことを自宅などで復習することが大切です

当日のタイムスケジュール(60分)

00 - 05 分

振り返り・「情報の整理」がサイトを美しくする理由

第1回の復習と、メニューや箇条書き(リスト)がWebサイトにおいていかに重要な役割を果たすか、職業訓練講師が実例を交えて解説します。

05 - 20 分

【タグ攻略】リスト(ul/ol/li)の使い分け術

順序のあるなしで使い分けるリストタグを完全マスター。単なる点(・)ではない、検索エンジン(SEO)に正しい情報を伝えるための意味のあるマークアップを学びます。

20 - 35 分

【最重要】画像表示の鍵!「パス(階層)」の正体

初心者が最も躓く「相対パス」を、地図の読み解きに例えて徹底解説。画像が表示されないトラブルを解決し、alt属性による正しい情報の補足方法まで伝授します。

35 - 50 分

実践ワーク:ビジュアル豊かな「メニュー紹介ページ」作成

実際に画像を配置し、リストと組み合わせてリッチなWebコンテンツを作成。20名規模のPL視点で「管理しやすいフォルダ整理術」も実演します。

50 - 60 分

質疑応答 & 最終回「サイト構造の完成」への道

パスの疑問や画像形式の相談に回答。次回の「フォーム・セクション編」で、いよいよWebサイトが完成へと向かう全体像を共有します。

第2回:リストと画像・情報の整理術

STEP 1:リストによる「情報の構造化」

メニューや手順、箇条書きを正しく作るul・ol・liタグの使い分けを学びます。単に点を出すだけでなく、検索エンジン(SEO)に「ここが情報のまとまりである」と正しく伝えるための、論理的なマークアップ手法を習得します。

STEP 2:画像表示と「相対パス」の完全攻略

Web制作最大の壁「パス」の概念をマスター。imgタグのsrc属性を使い、フォルダを跨いで画像を読み込むルールを徹底解説します。20名のPL経験に基づき、画像が表示されないトラブルをゼロにするプロの管理術を伝授します。

【技術解説】入門者が必ずハマる「画像のリンク切れ」の罠

Web制作の現場で最も多い初歩的なミスは、自分のパソコンでは見えているのに「サーバーに上げると画像が消える」という現象です。この原因は、画像への「道順(パス)」が正しく記述できていないことにあります。

// 初心者がやりがちなNG例(自分のPCでしか動かない)
<img src="C:\Users\Desktop\photo.jpg"> // 絶対パス(ローカル):公開すると必ず消える!
<img src="photo.jpg"> // ファイル名のみ:画像フォルダに入っていると読み込めない

// プロの書き方(どこでも動く「相対パス」とSEO対策)
<img src="images/photo.jpg" alt="セミナー風景"> // フォルダ名を指定し、alt属性で中身を説明
これが、ブラウザにもGoogleにも優しい「100点満点」の記述です。

このように、本セミナーでは単なるタグの暗記ではなく、「なぜそう書くのか?」というディレクトリ(階層)構造の本質を視覚的に解説します。このパスの概念を一度理解してしまえば、後のCSSやJavaScriptの読み込みで躓くことはもうありません。

※セミナー内では、複雑なパスの書き方を一目で判別できる「相対パス・クイックリファレンス」を配布します。

HTML入門セミナー(第2回)に関するよくある質問

はい、可能です。冒頭で第1回の簡単な復習(タグの書き方ルール)を行います。基本的なPC操作ができれば、今回のメインテーマである「画像の表示」や「リスト作成」からでも十分に学習を進めていただけます。

もちろんです。画像が表示されない原因の多くは「パス(階層)」の理解不足にあります。本セミナーでは、職業訓練の現場で培った「地図の読み解き」に例えた独自の解説法で、初心者の方が一生迷わないパスの概念を15分でスッキリ解決します。

はい。Webサイトで使うべき適切な画像形式や、サイトの表示速度を落とさないための「プロが意識する画像選び」についても触れます。これはSEO(検索順位)にも影響する重要な実務知識です。

実はリストタグは、ナビゲーションメニューなどの「サイト構造」を作る上で最も多用されるタグです。20名のPL経験者の視点から、Googleなどの検索エンジンが情報を正しく読み取れる「論理的なマークアップ」を指導します。この差が、将来の「SEOに強いエンジニア」への分かれ道になります。

いいえ、こちらで練習用の素材を用意しますので、手ぶら(PC一台)でご参加ください。もちろん、ご自身が使いたい画像がある場合は、それを使って「正しく表示されるか」をテストしていただくことも可能です。

次回(第3回)はいよいよ最終回です。お問い合わせページなどに使われる「フォーム」の作り方と、ページ全体を論理的に分割する「セクション」の概念を学びます。全3回を終える頃には、Web制作の基礎が一本の線で繋がり、自力でサイトを組み立てられるようになります。
【HTML入門】第2回:リストと画像!情報を整理して伝える「見せ方」の基本とパスの仕組み(60分セミナー・2026最新版)で学習しませんか?
【HTML入門】第2回:リストと画像!情報を整理して伝える「見せ方」の基本とパスの仕組み(60分セミナー・2026最新版)で学習しませんか?

開催日程を選択

1 件の予定
開催日 ID: 20

2026年07月14日(火) 20:00-21:00

定員:1名