目次
ホームページ作成の第一歩！
インターネット上で情報を発信したり、自分だけの空間を作ったりする「ホームページ」。その作成は、決して難しいものではありません。基本をしっかり押さえれば、誰でもオリジナルのウェブページを作ることができます。
ホームページ基礎講座では、まずテキストファイルを使って簡単なマークアップを行い、HTMLの基礎を学んでいきます。そして、CSS（外部スタイルシート）を活用して、デザインに幅を持たせる方法を紹介します。
「ゼロから学ぶ」初心者に優しい内容となっていますので、パソコンが得意でない方でも安心して進められます。さあ、一緒にホームページ作成の世界へ一歩踏み出してみましょう！
練習するための準備
ホームページ作成のためのコード。HTML/CSSを練習するためには、エディタが必要です。動画の中では、ブラケッツを使っていますが、サポートが終了しているので、途中からビジュアルスタジオコードを使っています。そのVisual Studio Codeのインストールも確認しておきましょう。
動画で学ぶWebデザイン教室 Fuku…
Visual Studio Codeのインストールとセットアップ | 動画で学ぶWebデザイン教室 Fukuokamiyako
Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用できま…
動画で学ぶWebデザイン教室 Fuku…
意外と読めない・・・HTML/CSSのコードの読み方 | 動画で学ぶWebデザイン教室 Fukuokamiyako
生徒さんによく質問されるHTMLやCSSの読み方をまとめてみました。意外と特殊な読み方をするHTML要素や属性、そしてCSSのプロパティや値があります。「え？こんな読み方？」…
ホームページ基礎講座 10ステップ
STEP
はじめてのホームページ基礎講座(HTMLとCSS)
動画で学ぶWebデザイン教室 Fuku…
はじめてのホームページ基礎講座(HTMLとCSS) | 動画で学ぶWebデザイン教室 Fukuokamiyako
初心者の方むけのホームページ作成講座 はじめてのホームページ基礎講座では、HTMLを、Adobe Brackets を使って文章にマークアップをおこなう手順を行います。 Adobe社が開…
STEP
はじめてのホームページ HTMLとCSS
動画で学ぶWebデザイン教室 Fuku…
02 はじめてのホームページ HTMLとCSS | 動画で学ぶWebデザイン教室 Fukuokamiyako
01のはじめてのホームページHTMLとCSS編では、エディタに文字にマークアップ言語であるHTMLを設定しました。タイトルにはタイトル要素のh1を、文章には段落要素の
をマー…
STEP
はじめてのホームページ HTMLとCSS
動画で学ぶWebデザイン教室 Fuku…
03 はじめてのホームページ HTMLとCSS | 動画で学ぶWebデザイン教室 Fukuokamiyako
前回は、HTMLにCSSを追加するところまで行いました。(02はじめてのホームページ) 今回は、画像を設置してみます。 今回使うHTMLコードの確認 前回同様、03のフォルダを作成…
STEP
はじめてのホームページ HTMLとCSS
動画で学ぶWebデザイン教室 Fuku…
04 はじめてのホームページ HTMLとCSS | 動画で学ぶWebデザイン教室 Fukuokamiyako
前回の０３はじめてのホームページではimg要素を使って、画像の設置を行いました。 今回はHTMLコードでマークアップされたファイルに、CSSを使って背景色の設定や、線を用…
STEP
はじめてのホームページ HTMLとCSS
動画で学ぶWebデザイン教室 Fuku…
05 はじめてのホームページ HTMLとCSS | 動画で学ぶWebデザイン教室 Fukuokamiyako
前回の０４はじめてのホームページでは、cssのプロパティを使って、要素に背景色などの色指定などを行いました。今回は、htmlにあるマークアップの中でもグループを分ける…
STEP
ホームページ基礎講座 CSSで横幅のwidthと線指定
動画で学ぶWebデザイン教室 Fuku…
06 ホームページ基礎講座 CSSで横幅のwidthと線指定 | 動画で学ぶWebデザイン教室 Fukuokamiyako
前回の０５はじめてのホームページでは、section要素などを指定する練習を行いました。 今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定す…
STEP
ホームページ基礎講座 HTML 箇条書き ul > li ol > li
動画で学ぶWebデザイン教室 Fuku…
07 ホームページ基礎講座 HTML 箇条書き ul > li ol > li | 動画で学ぶWebデザイン教室 Fukuokamiyako
07ホームページ基礎講座では、Webサイトの中で使う箇条書き要素について、HTMLのマークアップ練習を行います。箇条書き要素は、Webサイトでは多くの場所で目次として扱われ…
STEP
ホームページ基礎講座 CSSのwidthとmargin
動画で学ぶWebデザイン教室 Fuku…
08 ホームページ基礎講座 CSSのwidthとmargin | 動画で学ぶWebデザイン教室 Fukuokamiyako
前回０７ホームページの基礎で作成したHTMLのマークアップファイルを使って、CSSを書いていきます。 今回のCSSは、線（borderプロパティ）を中心としたデザインを設定しな…
STEP
ホームページ基礎講座 HTML編 header footer
動画で学ぶWebデザイン教室 Fuku…
09 ホームページ基礎講座 HTML編 header footer | 動画で学ぶWebデザイン教室 Fukuokamiyako
header要素 とfooter要素の追加 今回のマークアップはarticle要素と、section要素の他に、Webサイトの上部ヘッダーに設定するheader要素。下部フッターに設定するfooter要…
STEP
ホームページ基礎講座 外部スタイルシートとグラデーションCSS
動画で学ぶWebデザイン教室 Fuku…
10 ホームページ基礎講座 外部スタイルシートとグラデーションCSS | 動画で学ぶWebデザイン教室 Fukuok…
今回は10のフォルダを作成し、その中にindex.htmlファイルを作成します。そのファイルを開いてHTMLコードをコピーして貼り付けておきましょう。
STEP
ホームページ基礎講座 box-shadow
動画で学ぶWebデザイン教室 Fuku…
11 ホームページ基礎講座 box-shadow | 動画で学ぶWebデザイン教室 Fukuokamiyako
今回使うHTML/CSSファイルの準備 今回は11のフォルダを作成し、その中にindex.htmlのHTMLファイルと外部スタイルシート「style.css」ファイルを作成します。index.htmlファ…
HTML要素 -よく使うタグ名と使う場所とコード確認-
HTML要素の基本を学ぼう
～よく使うタグ名・使い方・コード例～
HTML（HyperText Markup Language）は、ウェブページを構築するための基礎となる言語です。その中でも「タグ」と呼ばれる要素が重要な役割を果たします。タグを正しく使うことで、情報の構造や意味を明確にし、ウェブサイトの見た目や機能を整えることができます。
この章では、特によく使われるHTMLタグについて解説します。それぞれのタグがどのような場面で使われるのか、また実際のコードではどのように記述するのかを具体例を交えながら確認していきましょう。基本をしっかり押さえることで、より使いやすく、わかりやすいウェブページを作れるようになります！
動画で学ぶWebデザイン教室 Fuku…
HTML要素 -よく使うタグ名と使う場所とコード確認- | 動画で学ぶWebデザイン教室 Fukuokamiyako
HTML要素の基本を学ぼう HTML（HyperText Markup Language）は、ウェブページを構築するための基礎となる言語です。その中でも「タグ」と呼ばれる要素が重要な役割を果たし…
