ホームページ中級講座

目次

ホームページ作成の次なるステップへ

~中級講座:デザインと機能性を高めるコツ~

ホームページ作成の基礎を身につけた皆さん、次は一歩進んでデザインと機能性を高めるステップに進みましょう。この講座では、より魅力的で使いやすいウェブページを作るためのテクニックを学びます。

  • ナビゲーションの作り方:訪問者がスムーズに情報へアクセスできるようにするコツ
  • Googleフォントの指定方法:デザイン性を向上させるフォントの活用
  • 隣接セレクタの活用:より細やかなデザイン調整を可能にするCSSテクニック
  • footerの下部固定:ページのレイアウトを整える方法

練習するための準備

ホームページ作成のためのコード。HTML/CSSを練習するためには、エディタが必要です。動画の中では、ブラケッツを使っていますが、サポートが終了しているので、途中からビジュアルスタジオコードを使っています。そのVisual Studio Codeのインストールも確認しておきましょう。

ホームページ中級講座 11ステップ

STEP
ホームページ中級講座 ナビゲーションの作成(HTML)
STEP
ホームページ中級講座 ナビゲーションの作成(CSS)
STEP
ホームページ中級講座 Webフォントを指定してみよう
STEP
ホームページ中級講座 display:flex のおさらい

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タグについて解説します。それぞれのタグがどのような場面で使われるのか、また実際のコードではどのように記述するのかを具体例を交えながら確認していきましょう。基本をしっかり押さえることで、より使いやすく、わかりやすいウェブページを作れるようになります!

目次