目次
ホームページ作成の第一歩！
インターネット上で情報を発信したり、自分だけの空間を作ったりする「ホームページ」。その作成は、決して難しいものではありません。基本をしっかり押さえれば、誰でもオリジナルのウェブページを作ることができます。
ホームページ基礎講座では、まずテキストファイルを使って簡単なマークアップを行い、HTMLの基礎を学んでいきます。そして、CSS（外部スタイルシート）を活用して、デザインに幅を持たせる方法を紹介します。
「ゼロから学ぶ」初心者に優しい内容となっていますので、パソコンが得意でない方でも安心して進められます。さあ、一緒にホームページ作成の世界へ一歩踏み出してみましょう！
練習するための準備
ホームページ作成のためのコード。HTML/CSSを練習するためには、エディタが必要です。動画の中では、ブラケッツを使っていますが、サポートが終了しているので、途中からビジュアルスタジオコードを使っています。そのVisual Studio Codeのインストールも確認しておきましょう。
動画で学ぶWebデザイン教室 Fuku…
Visual Studio Codeのインストールとセットアップ | 動画で学ぶWebデザイン教室 Fukuokamiyako
Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用できま…
動画で学ぶWebデザイン教室 Fuku…
意外と読めない・・・HTML/CSS/JavaScript/PHP/Wordpressのコードの読み方 | 動画で学ぶWebデザイン教室 …
授業で生徒さんから「このHTML要素やCSSプロパティってどう読むんですか？」と質問されることがよくあります。特に、意外と特殊な読み方をするものや、日本語では馴染みの…
ホームページ基礎講座 10ステップ
STEP
はじめてのホームページ基礎講 HTML作成準備
動画で学ぶWebデザイン教室 Fuku…
はじめてのホームページ基礎講座(HTMLとCSS) | 動画で学ぶWebデザイン教室 Fukuokamiyako
初心者の方むけのホームページ作成講座 インターネットが生活の一部となった今、ホームページは情報を発信したり、自分やビジネスをアピールしたりするための強力なツール…
STEP
はじめてのホームページ HTMLとCSS
動画で学ぶWebデザイン教室 Fuku…
はじめてのホームページ HTMLとCSS | 動画で学ぶWebデザイン教室 Fukuokamiyako
01のはじめてのホームページHTMLとCSS編では、エディタに文字にマークアップ言語であるHTMLを設定しました。タイトルにはタイトル要素のh1を、文章には段落要素の
をマー…
STEP
はじめてのホームページ 画像をHTMLで配置とCSS
動画で学ぶWebデザイン教室 Fuku…
03 はじめてのホームページ 画像をHTMLで配置とCSS | 動画で学ぶWebデザイン教室 Fukuokamiyako
画像をHTMLで配置する方法 3回目の講座では、画像の配置について学びます。HTMLでは、画像は埋め込むのではなく、リンクとして表示されます。そのため、画像ファイルをHTML…
STEP
はじめてのホームページ HTMLとclassの使い方
動画で学ぶWebデザイン教室 Fuku…
04 はじめてのホームページ HTMLとclassの使い方 | 動画で学ぶWebデザイン教室 Fukuokamiyako
今回はHTMLコードでマークアップされたファイルに、CSSを使って背景色の設定や、線を用いた枠の設置、行内での中央揃えなどを行います。ただし、同じ要素であるp要素に別々…
STEP
はじめてのホームページ 意味合いを持った要素 セマンティクス要素の設定
動画で学ぶWebデザイン教室 Fuku…
はじめてのホームページ 意味合いを持った要素 セマンティクス要素の設定 | 動画で学ぶWebデザイン教室 …
今回は、HTML5のセマンティクスを活用した学習になります。これらのコードを正しく使うことで、文書構造をわかりやすく整理し、ユーザーと検索エンジンの両方にとって利便…
STEP
ホームページ基礎講座 CSSで横幅のwidthと線指定
動画で学ぶWebデザイン教室 Fuku…
06 ホームページ基礎講座 CSSで横幅のwidthと線指定 | 動画で学ぶWebデザイン教室 Fukuokamiyako
今回は、その指定したsection要素にCSSの横幅指定のプロパティwidthや、線を指定するborderプロパティを使用してCSSのデザイン設定を行います。 HTMLとCSSコードを入力して…
STEP
ホームページ基礎講座 HTML 箇条書き ul > li ol > li
動画で学ぶWebデザイン教室 Fuku…
07 ホームページ基礎講座 HTML 箇条書き ul > li ol > li | 動画で学ぶWebデザイン教室 Fukuokamiyako
今回は、Webサイトの中で使う箇条書き要素について、HTMLのマークアップとCSSの練習を行います。箇条書き要素は、Webサイトでは多くの場所で目次として扱われ、グローバル…
STEP
ホームページ基礎講座 CSSのwidthとmargin
動画で学ぶWebデザイン教室 Fuku…
08 ホームページ基礎講座 CSSのwidthとmargin | 動画で学ぶWebデザイン教室 Fukuokamiyako
今回はwidthを指定した際のmarginを使った中央の設定と、widthと同時に記述する際のborderとpaddingを入れるとwidthが大きくなることをしっかりと確認していきます。 HTML/…
STEP
ホームページ基礎講座 article要素の使いどころ
動画で学ぶWebデザイン教室 Fuku…
ホームページ基礎講座 誰もが迷うarticle要素の使いどころ | 動画で学ぶWebデザイン教室 Fukuokamiyako
Webページを作成する際、マークアップは見た目を整えるだけでなく、ページの意味や構造を明確にする重要な作業です。その中でも、header, main, footer, article, section,…
STEP
ホームページ基礎講座 外部スタイルシートとグラデーションCSS
動画で学ぶWebデザイン教室 Fuku…
ホームページ基礎講座 外部スタイルシートとグラデーションCSS | 動画で学ぶWebデザイン教室 Fukuokamiy…
今回からいよいよ、CSSを外部に分けて書く、「外部スタイルシート」を使います。外部スタイルシートを設定する場合、外部ファイル（例: styles.css）を作成し、それをHTML…
STEP
ホームページ基礎講座 border-radius/box-shadow
動画で学ぶWebデザイン教室 Fuku…
11 ホームページ基礎講座 box-shadow | 動画で学ぶWebデザイン教室 Fukuokamiyako
今回使うHTML/CSSファイルの準備 下記のコードをコピーもしくは模写して練習を開始しましょう。いくつか追加要素である、aria-labelledbyとidがあります。これは、ウェブア…
HTML要素 -よく使うタグ名と使う場所とコード確認-
HTML要素の基本を学ぼう
～よく使うタグ名・使い方・コード例～
HTML（HyperText Markup Language）は、ウェブページを構築するための基礎となる言語です。その中でも「タグ」と呼ばれる要素が重要な役割を果たします。タグを正しく使うことで、情報の構造や意味を明確にし、ウェブサイトの見た目や機能を整えることができます。
この章では、特によく使われるHTMLタグについて解説します。それぞれのタグがどのような場面で使われるのか、また実際のコードではどのように記述するのかを具体例を交えながら確認していきましょう。基本をしっかり押さえることで、より使いやすく、わかりやすいウェブページを作れるようになります！
動画で学ぶWebデザイン教室 Fuku…
HTML要素 -よく使うタグ名と使う場所とコード確認- | 動画で学ぶWebデザイン教室 Fukuokamiyako
HTML要素の基本を学ぼう HTML（HyperText Markup Language）は、ウェブページを構築するための基礎となる言語です。その中でも「タグ」と呼ばれる要素が重要な役割を果たし…
