目次
ホームページ作成の次なるステップへ
~中級講座:デザインと機能性を高めるコツ~
ホームページ作成の基礎を身につけた皆さん、次は一歩進んでデザインと機能性を高めるステップに進みましょう。この講座では、より魅力的で使いやすいウェブページを作るためのテクニックを学びます。
- ナビゲーションの作り方:訪問者がスムーズに情報へアクセスできるようにするコツ
- Googleフォントの指定方法:デザイン性を向上させるフォントの活用
- 隣接セレクタの活用:より細やかなデザイン調整を可能にするCSSテクニック
- footerの下部固定:ページのレイアウトを整える方法
練習するための準備
ホームページ作成のためのコード。HTML/CSSを練習するためには、エディタが必要です。動画の中では、ブラケッツを使っていますが、サポートが終了しているので、途中からビジュアルスタジオコードを使っています。そのVisual Studio Codeのインストールも確認しておきましょう。
Visual Studio Codeのインストールとセットアップ | 動画で学ぶWebデザイン教室 Fukuokamiyako
Visual Studio Codeは、マイクロソフトが開発した無料のオープンソースのテキストエディターです。多くのプログラミング言語に対応し、Windows、macOS、Linuxで利用できま…
意外と読めない・・・HTML/CSSのコードの読み方 | 動画で学ぶWebデザイン教室 Fukuokamiyako
生徒さんによく質問されるHTMLやCSSの読み方をまとめてみました。意外と特殊な読み方をするHTML要素や属性、そしてCSSのプロパティや値があります。「え?こんな読み方?」…
ホームページ中級講座 11ステップ
STEP
ホームページ中級講座 ナビゲーションの作成(HTML)
01 ホームページ中級講座 ナビゲーションの作成(HTML) | 動画で学ぶWebデザイン教室 Fukuokamiyako
ホームページ中級講座1回目では、下記の完成形をめざしてHTML/CSSを1回目と2回目で記述していきます。 ホームページ初級講座で使っていたフォルダは閉じて、新たにホー…
STEP
ホームページ中級講座 ナビゲーションの作成(CSS)
02ホームページ中級講座 ナビゲーションの作成(CSS) | 動画で学ぶWebデザイン教室 Fukuokamiyako
前回01 ホームページ中級講座 ナビゲーションの作成(HTML)作成したHTMLファイルにCSSを記述しデザインを適応させていききます。 HTMLマークアップファイル マークアップさ…
STEP
ホームページ中級講座 Webフォントを指定してみよう
03ホームページ中級講座 googleフォントを指定 | 動画で学ぶWebデザイン教室 Fukuokamiyako
前回はホームページのヘッダー内に設置する「グローバルナビゲーション」のCSS設定「02ホームページ中級講座 ナビゲーションの作成(CSS)」を行なってきました。 前回の続き…
STEP
ホームページ中級講座 display:flex のおさらい
04 ホームページ中級講座 display:flex のおさらい | 動画で学ぶWebデザイン教室 Fukuokamiyako
下記の講座で、ナビゲーションについてのコード練習を行ってきました。 01 ホームページ中級講座 ナビゲーションの作成(HTML) 02ホームページ中級講座 ナビゲーションの作…
STEP
ホームページ中級講座 様々なセレクタ 隣接セレクタ
05 ホームページ中級講座 様々なセレクタ::隣接セレクタ | 動画で学ぶWebデザイン教室 Fukuokamiyako
前回の04ホームページ中級講座 display:flex のおさらいの続きになります。 05のフォルダを作成し、inde.htmlに下記コードを貼り付けます。style.cssはファイル作成のみ行…
STEP
ホームページ中級講座 便利なEmmet!
06 ホームページ中級講座 便利なEmmet! | 動画で学ぶWebデザイン教室 Fukuokamiyako
16ホームページ中級以降は、少し懐かしさもある下記のようなホームページのコードを模写しながら練習していきましょう。 パソコン画像とグラフ画像ファイルは別途準備くだ…
STEP
ホームページ中級講座 CSSで作成するロゴ
07ホームページ中級講座 CSSで作成するロゴ | 動画で学ぶWebデザイン教室 Fukuokamiyako
前回の06 ホームページ中級講座 便利なEmmet!で作成したHTMLのマークアップファイルを使います。 ここから学習する場合は、フォルダは07を作成して、下記のHTMLファイルを…
STEP
ホームページ中級講座 floatを使った周り込み
08 ホームページ中級講座 floatを使った周り込み | 動画で学ぶWebデザイン教室 Fukuokamiyako
前回「07 ホームページ中級講座」の続きとなります。 HTMLとCSSは前回のファイルを引き続き使いますので用意しておきましょう。 ここでは、cssの周り込みのプロパティ「flo…
STEP
ホームページ中級講座 footerを下部に固定
09 ホームページ中級講座 footerを下部に固定 | 動画で学ぶWebデザイン教室 Fukuokamiyako
前回の08ホームページ中級講座 flat を使った回り込みの続きになります。 今回は、ページ一番下に常に配置するfooter要素を、一番最下部に固定する状態を作ります。 最近の…
STEP
ホームページ中級講座 HTML編 フォトギャラリーを作る
20 ホームページ中級講座 HTML編 フォトギャラリーを作る | 動画で学ぶWebデザイン教室 Fukuokamiyako
今回はよく使うフォトギャラリーを作っていきましょう〜写真とキャプションの組み合わせのカード形のデザインです。
STEP
ホームページ中級講座 Table要素を使って表組作成
ホームページ中級講座 Table要素を使って表組作成 | 動画で学ぶWebデザイン教室 Fukuokamiyako
ホームページ内で表組みを作成する場合はtable要素を使います。ひと昔前までは、テーブルレイアウトというのを使ってレイアウトを作成している時代がありましたが、今のTab…
HTML要素 -よく使うタグ名と使う場所とコード確認-
HTML要素の基本を学ぼう
~よく使うタグ名・使い方・コード例~
HTML(HyperText Markup Language)は、ウェブページを構築するための基礎となる言語です。その中でも「タグ」と呼ばれる要素が重要な役割を果たします。タグを正しく使うことで、情報の構造や意味を明確にし、ウェブサイトの見た目や機能を整えることができます。
この章では、特によく使われるHTMLタグについて解説します。それぞれのタグがどのような場面で使われるのか、また実際のコードではどのように記述するのかを具体例を交えながら確認していきましょう。基本をしっかり押さえることで、より使いやすく、わかりやすいウェブページを作れるようになります!
HTML要素 -よく使うタグ名と使う場所とコード確認- | 動画で学ぶWebデザイン教室 Fukuokamiyako
HTML要素の基本を学ぼう HTML(HyperText Markup Language)は、ウェブページを構築するための基礎となる言語です。その中でも「タグ」と呼ばれる要素が重要な役割を果たし…