目次
ホームページ作成の次なるステップへ
~中級講座:デザインと機能性を高めるコツ~
ホームページ作成の基礎を身につけた皆さん、次は一歩進んでデザインと機能性を高めるステップに進みましょう。この講座では、より魅力的で使いやすいウェブページを作るためのテクニックを学びます。
- ナビゲーションの作り方:訪問者がスムーズに情報へアクセスできるようにするコツ
- Googleフォントの指定方法:デザイン性を向上させるフォントの活用
- 隣接セレクタの活用:より細やかなデザイン調整を可能にするCSSテクニック
- footerの下部固定:ページのレイアウトを整える方法
練習するための準備
ホームページ作成のためのコード。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プロパティってどう読むんですか?」と質問されることがよくあります。特に、意外と特殊な読み方をするものや、日本語では馴染みの…
ホームページ中級講座 11ステップ
STEP
ホームページ中級講座 ナビゲーションの作成(HTML)
動画で学ぶWebデザイン教室 Fuku…


01 ホームページ中級講座 ナビゲーションの作成(HTML) | 動画で学ぶWebデザイン教室 Fukuokamiyako
今回は、HTMLを文章から正しくマークアップしてから、CSSで横並びのナビゲーションを作成していきます。まずは正しくマークアップできるか確認してみましょう。 下記の文章…
STEP
ホームページ中級講座 ナビゲーションの作成(CSS)
動画で学ぶWebデザイン教室 Fuku…


02ホームページ中級講座 ナビゲーションの作成(CSS) | 動画で学ぶWebデザイン教室 Fukuokamiyako
HTMLマークアップファイルの確認 今回は、下記のページで作成したHTMLを使います。 https://fukuokamiyako.com/post-1470/ デフォルトのスタイルシート HTMLをブラウザでプ…
STEP
ホームページ中級講座 Webフォントを指定してみよう
動画で学ぶWebデザイン教室 Fuku…


03ホームページ中級講座 Googleフォントを指定 | 動画で学ぶWebデザイン教室 Fukuokamiyako
今回は、Google Webフォント設定を行います。設定するファイルは、「02ホームページ中級講座 ナビゲーションの作成(CSS)」で作成したコードを使います。 Google のWebフォ…
STEP
ホームページ中級講座 display:flex のおさらい
動画で学ぶWebデザイン教室 Fuku…


04 ホームページ中級講座 display:flex のおさらい | 動画で学ぶWebデザイン教室 Fukuokamiyako
下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座 ナビゲーションの作成(HTML) 02ホームページ中級講座 ナビゲーションの作…
STEP
ホームページ中級講座 様々なセレクタ 隣接セレクタ
あわせて読みたい


05 ホームページ中級講座 様々なセレクタ::隣接セレクタ
前回の04ホームページ中級講座 display:flex のおさらいの続きになります。 HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> ...
STEP
ホームページ中級講座 便利なEmmet!
あわせて読みたい


06 ホームページ中級講座 便利なEmmet!
Emmetとは? Emmetは、HTMLやCSSのコーディングを効率化するためのツールです。コードのテンプレートを簡単に生成できる「ショートカット機能」があり、ほとんどのモダ...
STEP
ホームページ中級講座 CSSで作成するロゴ
あわせて読みたい


07ホームページ中級講座 CSSで作成するロゴとグラデーションを使ったナビゲーション
HTMLコード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ネットワークサービス 株式会社</title> <link rel="style...
STEP
ホームページ中級講座 floatを使った周り込み
あわせて読みたい


08 ホームページ中級講座 floatを使った周り込み
CSSの周り込みプロパティ「float」を使った例 前回「07 ホームページ中級講座」の続きとなります。 ここで使用するHTMLファイルとCSSファイルは下記のページを参照くだ...
STEP
ホームページ中級講座 footerを下部に固定
あわせて読みたい


09 ホームページ中級講座 footerを下部に固定
ページ一番下に常に配置するfooter要素の設定 前回の「08 ホームページ中級講座」のfloatを使った回り込みに続き、今回はページの一番下に常にfooter要素を固定する方法...
STEP
ホームページ中級講座 HTML編 フォトギャラリーを作る
あわせて読みたい


ホームページ中級講座 HTML編 フォトギャラリーを作る
今回は、Webデザインでよく使われるフォトギャラリーを作成します。写真とキャプションの組み合わせをカード形式で表示するデザインを、HTMLとCSSを使って実現していき...
STEP
ホームページ中級講座 Table要素を使って表組作成
あわせて読みたい


ホームページ中級講座 Table要素を使って表組作成
Table要素を使って表組み作成 ホームページ内で表組みを作成する際は、HTMLの<table>要素を使用します。かつては「テーブルレイアウト」と呼ばれる手法でWebページ全...
HTML要素 -よく使うタグ名と使う場所とコード確認-
HTML要素の基本を学ぼう
~よく使うタグ名・使い方・コード例~
HTML(HyperText Markup Language)は、ウェブページを構築するための基礎となる言語です。その中でも「タグ」と呼ばれる要素が重要な役割を果たします。タグを正しく使うことで、情報の構造や意味を明確にし、ウェブサイトの見た目や機能を整えることができます。
この章では、特によく使われるHTMLタグについて解説します。それぞれのタグがどのような場面で使われるのか、また実際のコードではどのように記述するのかを具体例を交えながら確認していきましょう。基本をしっかり押さえることで、より使いやすく、わかりやすいウェブページを作れるようになります!
動画で学ぶWebデザイン教室 Fuku…
HTML要素 -よく使うタグ名と使う場所とコード確認- | 動画で学ぶWebデザイン教室 Fukuokamiyako
HTML要素の基本を学ぼう HTML(HyperText Markup Language)は、ウェブページを構築するための基礎となる言語です。その中でも「タグ」と呼ばれる要素が重要な役割を果たし…