htmlスイスイ〜

基礎編 / 教科書表2

基礎編 - 目次
　

Contents - 1
　
　

予備知識 A - P.1 / 予備知識 B - P.2 / 予備知識 C - P.3 / HTMLとは - P.4 / 見出し / 段落 / コメント - P.6 / フォント - P.8 / 文字(テキスト) - P.10 / マーキー - P.12 / ボディ - P.14 / リスト - P.16 / テーブル - P.18 / ブロック・レベル・エレメント / インライン・エレメント - P.20 / URL / パス / リフレッシュ - P.22 / .html ファイルの作成 / 保存 - P.24

基礎編 - 1〜3 ページ

予備知識
A B C

■この教科書の使い方
■言語と文字コード

■改行の法則
　

A : この教科書の使い方 / 学習の手順　 → 　① 教科書を読む ( PDFファイルをダウンロードも可). 　→ 　② 動画を閲覧する・・・・・
B : 文字コードについて / 日頃, 私たちが使用しているPCやスマート・フォンなどはデジタル機器ですが, こういった器械は全てのデータを数値でしか扱えません.・・・・・
C : 改行の法則 / 改行コードが無視されることの説明・・・・・

基礎編 - 4 ページ

HTMLとは
　

「＜ ( 小なり ) の仕組み」
「HTMLの歴史」
「HTMLの標準ルール」
　

HTML ( エイチ・ティー・エム・エル / Hyper Text Markup Language) とは, ハイパーテキストを記述するためのマークアップ言語の1つで, 主に World Wide Web ( WWW )上でWEBサイト ( ホームページ )を作るために利用されています. ＜　＞のように括弧(かっこ)で括(くく)られた部分を「タグ ( tag ) 」と呼び,「開始タグ ( start tag ) 」と「終了タグ ( end tag ) 」で挟み込むことを「マークアップする」と言います. つまり,・・・・・

基礎編 - 6ページ

ヘディング /
パラグラフ&ブロッククォート /
コメント・アウト　

「ヘディングとは」
「パラグラフとは /
　ブロッククォートとは」
「コメント・アウトとは」

新聞や雑誌の場合, 「大見出し」とは記事の内容に対する標題のことになりますが, HTMLの＜タグ・ルール＞においての「大見出し」とはページのトップに大きく表示されるタイトル部分のことになります ( HTMLのソース・コードに記述する＜title＞はブラウザのタブ・バーに表示される文字列のことで, ページ内には表示されません).

基礎編 - 8ページ

フォント
attribute="value" / size / color / face

「フォント・サイズ」
「フォント・カラー」
「欧文フォント /
　和文フォント」
　

＜fontタグ＞には attribute="value" の情報が必要です. attribute とは「属性」 / value は「値」
■フォント・サイズは 1 〜7 までの7種類 ( 通常は3 ) が用意されています.

基礎編 - 10ページ

文字(テキスト)

「文字のスタイル」
「文字の装飾 / ルビ /
　スーパースクリプト・
　テキスト /
　サブスクリプト・テキスト
　の設定方法」
「プレ・フォーマッティド・
　テキスト」

説明の文章　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章

基礎編 - 12ページ

マーキー

「マーキーとは」
「マーキーの種類」
「マーキーのスピード」
　

基礎編 - 14ページ

ボディ

「ボディ・サイズ」
「ボディ・カラー」
「バックグラウンド /
　マージン /
　スクロール・バー」

基礎編 - 16ページ

リスト

「オーダード・リスト」
「アンオーダード・リスト」
「ディフィニション・
　リスト」

unordered list　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章　説明の文章

基礎編 - 18ページ

テーブル

「テーブルとは」
「テーブル・カラー /
　テーブル・ボーダー
　の指定方法」
「コルスパン /
　ロースパンの
　指定方法」

基礎編 - 20ページ

ブロック・レベル・エレメント / インライン・エレメント

「ブロック・レベル・
　エレメントとは」
「インライン・
　エレメントとは」
「エレメントの新しい定義」

基礎編 - 22ページ

URL /パス / リフレッシュ

「URLとは」
「絶対パスと相対パス」
「リフレッシュの設定方法」
　

absolute path / relative path

基礎編 - 24ページ

..htmlファイルの
作成 / 保存

「 .htmlファイルの作成」
「 .htmlファイルの保存」
「テンプレート・ファイル
　の活用方法」

基礎編 / 教科書表3

記号の読み方

@ / ! / " / # / $
% / & / ' - ) - ) - =

HTML 基本テンプレート / utf-8 / 基本.html

イラストレーター・ツール / Illustrator Tools Example / Float Layout / Flex Layout / justify-content:center / justify-content:space-between / Grid Layout / Table Layout / Position Layout / Responsive Position Layout

レスポンシブ・サイト例 / Responsive Wev Design / @media screen and (min-width:800px) / @media screen and (min-width:500px) and (max-width:799px) / @media screen and (max-width:499px)

レスポンシブ・サイト例 / Responsive Wev Design / Figma Animation 〜767/768〜991/992〜

Figma Particle / Snippet / パーティクル / スニペット例 / Sound

レスポンシブ / ウインドウ・サイズ検証 / Responsive Width Check / 〜499/500〜799/800〜

Particle Sample - 1 / パーティクル例 / サンプル-1

Particle Sample - 2 / パーティクル例 / サンプル-2

Particle Sample - 3 / パーティクル例 / サンプル-3

Particle Sample - 4 / パーティクル例 / サンプル-4

@media Query Example / メディア・クエリー例 / @media screen and (max-width:499px) / @media screen and (min-width:500px) and (max-width:799px) / @media screen and (min-width:800px) / 〜499/500〜799/800〜

レスポンシブ・ページその1 / トップにメニュー・ボタンの準備

レスポンシブ・ページその2 / トップにメニュー・ボタンを設置

レスポンシブ・ページその3 / 全体のレイアウト作業を進める

メディア・クエリー / Responsive Web Design / Media Query

メディア・クエリー / Responsive Web Design / Media Query

レスポンシブ・メニューのボタン / ボタンでページ内リンクへ移動

メディア・クエリー / トップの画像入れ替え

レスポンシブ検証用 / 練習 - 1

Result_V / ソースを読む練習

レスポンシブ検証用 / Responsive Design

レスポンシブの実験 / メディアクエリー

Illustrator Tools

iPhone 対応 MP3 再生 / .play() メソッド

カフェ・エンカウンター / 楽譜一覧 / カプセル楽譜・ガチャ / コーヒー・メニュー / ケーキ・メニュー

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

HTML の基本 / ああああああああああ / HTML ( エイチ・ティー・エム・エル / Hyper Text Markup Language) とは

button onclick="ぼたん()" / 文字 / jquery-3.6.0.min.js

Search 機能 / サイト内: ワード検索 / 元素記号一覧表

button onclick="くりっく()" / function くりっく()

1996年のブラウザ / Custom-Tag / カスタム・タグにCSSを / Cascading Style Sheets がリリース / ありえないタグ

nav ul と nav>ul の違いについて / CSS 子要素に指定する

Cascading とは / Cascading Style Sheets について

meta タグの役割 / meta のいろいろな情報

HTML / CSS / WebSite h2_中見出し

HTML 歴史 / 概要 / レスポンシブ / リスト / STUDY_html_001_A.htmll

Block-Level Elements / Inline Elements / ブロック・レベル・エレメンツ / インライン・エレメンツ

Directory Structure / Folder Structure / フォルダー階層と相対パス

フォルダー階層と相対パス / 練習 - 1 の答え

VS Code を使用するメリット / デメリット

HTML の構造 / DOM (Document Object Model)

メールとFTPの比較

Music History / 現代音楽 (1945 〜 2024) / 近代音楽 (1900 〜 1945)

WordPress フォルダー階層

サーバー保護 / FTP (ftp://)

WordPress ボタン設置 / サーバー保護 / index.html の利点

HTML カレンダー / .エブリディ.サンディ / input type="date"

フラッシュ / コピー / Click Copy & Paste

HTML Tag Double Checker / ファイルをドロップしてください / HTMLタグ W チェッカー

Directory を読む練習 / 絶対パス / 相対パス / Directory 研究 / file:///Volumes/自分の名前/Desktop/フォルダーA/ 1e90ff/

PHP / 画像ファイルをボタンで生成 / jpg ファイルを100個生成 / ダウンロード

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

iPhone の外観 / iPhone レイアウト

iPhone の外観 / ヘディング-1 / iPhone レイアウト

iPhone の外観 / メニューのボタン / iPhone レイアウト

Search 機能 / iPhone レイアウト

衛星の軌道 / 宇宙_CSS

ボタン・クリック / ○○○.txt の文字を表示 / 隠す

Grid レイアウト / JavaScript / 将棋盤

CSS アニメーション / トランジション

Decimal and Hexadecimal CodeTable / Dark Cyan / Dark Brown / Color Code の覚え方 / デシマルとヘキサデシマルの表 / Dec Hex / 0=00 H 〜 255=ff H

CSS 子セレクター / div div{color:red;}

サンプル集囲み枠 / 罫線 / CSS を指定する方法 / CSS 素材集

サンプル集 Hover / Transition / CSS サンプル集 / CSS を指定する方法

画像サンプル集 / Illustrator / Tools / 画像ファイルについて

CSS を指定する方法 / スライダー・サンプル / Slide_Swipe_Card

ポジション / マスキング / position / relative / absolute

Hover / Transition / Animation

バウンス / Z-index の実験 / スタッキング・コンテキスト / copy

RGB Hex Code/ RGBA Hex Color について / rgba(255,0,128,0.33)

アニメーション・ロゴ / STUDY HTML CSS JavaScript

ボタンで方向を選択 / Hover Animation の方向選択:上から下に /

JavaScript でレイアウト / Mode / Chord Scale 中心音とモードの組み合わせ / C Ionian / ピアノ・キーボード

チャーチ・モードの分類 / モードの種類と中心音 / Church Mode リスト / Relative Tone / Center Tone

コード・トーンの配置 / ① 〜 ⑯ の数字をクリックしてください

音程を見つける問題 / Voicing 内に含まれている全ての音程

id とパスワード必要 / Funk Transcribe / Mode 判定-問題 / funk / music

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

Coming Soon

JavaScript による Jigsaw Puzzle / ジグソー・パズル

button onclick="ぼたん()"ボタン / 予約語の実験 / display:none;

ありえない X Y Z / カスタム・タグ

Fireworks / jQuery で花火を

ボタン button / 日本語英語 / 注意 "GET" はローカルでは動かない

jQuery / Slick / スライド /

線を繋ぐクイズ / 脳トレ - 1/ A と A / B と B / C と C

ボタンで mp4 プレイ / ストップ

ボタンで mp4 プレイ / thumbnail / スタートストップ

ボタンで mp4 プレイ / 複数のビデオ再生 / モーダル・ウインドウではない

ボタンで txt を取得 / JavaScript / 文字列を表示 / ファイル選択

The Symmetry Ver.1.4 / シンメトリーと文字数をチェックするアプリ / 回文

RGB 色当てゲーム / 作り方と解説 / 16進数 color code

getElementsByTagName のサンプル - 1

getElementsByTagName / げっとたいとる / ファイル名を取得する

Illustrator Tool 当てゲーム - 1

ランダムで #color code を選ぶ Math.floor(Math.random()*文字

▲

PHP / 予定を編集できるカレンダー / Calender - 1

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

PHP /

Figma_Strings_01

Strings Figma

Ravel String Quartet 2nd Movement / ボタン-1 〜ボタン-12

Strings Figma score

Figma アニメーション

Ravel_String_Quartet_2nd_movement

Ravel_String_Quartet_2nd_movement

mp3 プレイ・ボタン / 再生 / ポーズ / 停止 / スタート

スコアからピアノ譜へ / スコア・ダウンロード

E7 Spanish / スパニッシュのサウンド / Ravel_2nd_001

Ravel_2nd_002.mp3

All The Things You Are 練習

Sample Sound

二択クイズ / 連続10回

Sample Sound

応用編 / 教科書表2

応用編 - 目次

Contents - 2
　
　
　

予備知識 D - P.1 / 予備知識 E - P.2 / 予備知識 F - P.3 / ヘッダ - P.4 / ボディ内の構造 - P.6 / ボディ内の領域 - P.8 / フレーム / インライン・フレーム / オブジェクト - P.10 / カラー・モデル - P.12 / イメージ・ファイル & クリッカブル・マップ / キャンバス / SVGファイル - P.14 / ビデオ・ファイル / オーディオ・ファイル / トラック - P.16 / アンカー(リンク) / メール / ダウンロード - P.18 / フォーム / インプット / アウトプット - P.20 / 必要な知識 - P.22 / 必要なツール - P.24