MENU
  • VS Code拡張機能と設定
    • VS Code 表示設定等
    • HTMLの整形
    • Live Serverの「Custom Browser」設定
    • 拡張機能「W3C Web Validator」をインストール
  • HTMLマークアップ
    • HTMLで使えるタグ
    • emmet使い方
    • HTMLの基本構造
    • 代表的なHTMLタグ
    • HTMLマークアップの進め方
    • PCとスマートフォンで画像を差し替え
  • CSS設定
    • CSSファイルをHTMLへ組み込む
    • クラス名をつけてスタイルを定義
    • 色の設定
    • サイズの設定
    • 文字のスタイル
    • 要素のスタイル
    • Webフォントの適用
    • ブレイクポイントを定義
    • 特定の要素を非表示
    • レスポンシブ設定例
    • ブラウザで表示確認
    • レイアウトを組む
  • リンクボタンとアニメーション
    • ボタンのマウスオーバー
    • リンクの疑似クラス
    • 2点間アニメーション
    • キーフレームの設定
    • アニメーションの設定
    • 要素の回転
    • 横に流れるテキスト
    • ボタンアニメーションジェネレーター
    • CSSだけでスクロール検知してアニメーション
    • JavaScriptで画面内へ入ったときに発火
    • ID位置への移動時にスムーススクロール
  • 機能の組み込み
    • CSSだけでスライドショー
    • 画像(キャプションつき)ポップアップ – Fancybox
    • 画像+HTMLのポップアップ – Fancybox
    • カルーセル – Swiper
    • Googleフォームをポップアップに埋め込む
  • サーバーへ公開
  • サイトマップ
Basics of HTML, CSS, and JavaScript 初心者向けの解説サイト
Basics of HTML, CSS, and JavaScript
  • VS Code拡張機能と設定
    • VS Code 表示設定等
    • HTMLの整形
    • Live Serverの「Custom Browser」設定
    • 拡張機能「W3C Web Validator」をインストール
  • HTMLマークアップ
    • HTMLで使えるタグ
    • emmet使い方
    • HTMLの基本構造
    • 代表的なHTMLタグ
    • HTMLマークアップの進め方
    • PCとスマートフォンで画像を差し替え
  • CSS設定
    • CSSファイルをHTMLへ組み込む
    • クラス名をつけてスタイルを定義
    • 色の設定
    • サイズの設定
    • 文字のスタイル
    • 要素のスタイル
    • Webフォントの適用
    • ブレイクポイントを定義
    • 特定の要素を非表示
    • レスポンシブ設定例
    • ブラウザで表示確認
    • レイアウトを組む
  • リンクボタンとアニメーション
    • ボタンのマウスオーバー
    • リンクの疑似クラス
    • 2点間アニメーション
    • キーフレームの設定
    • アニメーションの設定
    • 要素の回転
    • 横に流れるテキスト
    • ボタンアニメーションジェネレーター
    • CSSだけでスクロール検知してアニメーション
    • JavaScriptで画面内へ入ったときに発火
    • ID位置への移動時にスムーススクロール
  • 機能の組み込み
    • CSSだけでスライドショー
    • 画像(キャプションつき)ポップアップ – Fancybox
    • 画像+HTMLのポップアップ – Fancybox
    • カルーセル – Swiper
    • Googleフォームをポップアップに埋め込む
  • サーバーへ公開
  • サイトマップ
Basics of HTML, CSS, and JavaScript
  • VS Code拡張機能と設定
    • VS Code 表示設定等
    • HTMLの整形
    • Live Serverの「Custom Browser」設定
    • 拡張機能「W3C Web Validator」をインストール
  • HTMLマークアップ
    • HTMLで使えるタグ
    • emmet使い方
    • HTMLの基本構造
    • 代表的なHTMLタグ
    • HTMLマークアップの進め方
    • PCとスマートフォンで画像を差し替え
  • CSS設定
    • CSSファイルをHTMLへ組み込む
    • クラス名をつけてスタイルを定義
    • 色の設定
    • サイズの設定
    • 文字のスタイル
    • 要素のスタイル
    • Webフォントの適用
    • ブレイクポイントを定義
    • 特定の要素を非表示
    • レスポンシブ設定例
    • ブラウザで表示確認
    • レイアウトを組む
  • リンクボタンとアニメーション
    • ボタンのマウスオーバー
    • リンクの疑似クラス
    • 2点間アニメーション
    • キーフレームの設定
    • アニメーションの設定
    • 要素の回転
    • 横に流れるテキスト
    • ボタンアニメーションジェネレーター
    • CSSだけでスクロール検知してアニメーション
    • JavaScriptで画面内へ入ったときに発火
    • ID位置への移動時にスムーススクロール
  • 機能の組み込み
    • CSSだけでスライドショー
    • 画像(キャプションつき)ポップアップ – Fancybox
    • 画像+HTMLのポップアップ – Fancybox
    • カルーセル – Swiper
    • Googleフォームをポップアップに埋め込む
  • サーバーへ公開
  • サイトマップ
  1. ホーム
  2. VS Code

VS Code– category –

  • VS Code

    参考情報いろいろ

    HTMLの整形に関する設定は、以下を参照。https://learn.frog-eight.info/syntax-check/#index_id3 VS Codeの拡張機能 沢山ありますが、必要最低限のもの、あると便利なものを紹介します。 W3C Web Validator識別子 celianriboulet.webvalidatorHTMLの構文...
    2025年6月6日
  • VS Code

    2 構文チェックと整形

    正しい構文でHTMLを記載しないと、検索エンジンやブラウザがページを正しく解釈できないかもしれません。そのため、正しくHTMLが書けているか、チェックを行うことを推奨します。 検証サービスもあり、W3CのMarkup Validation Serviceが有名です。https://...
    2025年5月21日
  • VS Code

    1 VSCodeの使い方

    Webページを作るには、画像、エディタソフトウェア、ファイルをアップロードするためのFTPソフトウェア、などが必要です。 エディタソフトウェアとは、コンピューター上で各種ファイルを編集するためのソフトウェアの総称です。特に、テキストファイルを編...
    2025年5月21日
1

© Basics of HTML, CSS, and JavaScript.