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 ページ

基礎編 - レッスン1
HTMLとは
 

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



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


  
       

基礎編 - 6ページ

基礎編 - レッスン2
ヘディング /
パラグラフ&ブロッククォート /
コメント・アウト 

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

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


  
       

基礎編 - 8ページ

基礎編レッスン3
フォント
attribute="value" / size / color / face

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

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


  
       

基礎編 - 10ページ

文字(テキスト)
文字(テキスト)

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

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


  
       

基礎編 - 12ページ

マーキー
マーキー

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

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


  
       

基礎編 - 14ページ

ボディ
ボディ

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

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


  
       

基礎編 - 16ページ

リスト
リスト

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

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


  
       

基礎編 - 18ページ

テーブル title=
テーブル

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

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


  
       

基礎編 - 20ページ

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

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

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


  
       

基礎編 - 22ページ

リンク
URL /パス / リフレッシュ

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

absolute path / relative path


  
       

基礎編 - 24ページ

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

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

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


  
       

基礎編 / 教科書 表3

記号の読み方
記号の読み方

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

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


 
       

cording_001 HTML 基本 テンプレート / utf-8 / 基本.html
cording_002 イラストレーター・ツール / Illustrator Tools Example / Float Layout / Flex Layout / justify-content:center / justify-content:space-between / Grid Layout / Table Layout / Position Layout / Responsive Position Layout
cording_003 レスポンシブ・サイト例 / 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)
cording_004 レスポンシブ・サイト例 / Responsive Wev Design / Figma Animation 〜767/768〜991/992〜
cording_005 Figma Particle / Snippet / パーティクル / スニペット 例 / Sound
cording_006 レスポンシブ / ウインドウ・サイズ検証 / Responsive Width Check / 〜499/500〜799/800〜
cording_007 Particle Sample - 1 / パーティクル例 / サンプル-1
cording_008 Particle Sample - 2 / パーティクル例 / サンプル-2
cording_009 Particle Sample - 3 / パーティクル例 / サンプル-3
cording_010 Particle Sample - 4 / パーティクル例 / サンプル-4
cording_011 @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〜
cording_012 レスポンシブ・ページ その1 / トップにメニュー・ボタンの準備
cording_013 レスポンシブ・ページ その2 / トップにメニュー・ボタンを設置
cording_014 レスポンシブ・ページ その3 / 全体のレイアウト作業を進める
cording_015 メディア・クエリー / Responsive Web Design / Media Query
cording_016 メディア・クエリー / Responsive Web Design / Media Query
cording_017 レスポンシブ・メニューのボタン / ボタンでページ内リンクへ移動
cording_018 メディア・クエリー / トップの画像入れ替え
cording_019 レスポンシブ検証用 / 練習 - 1
cording_020 Result_V / ソースを読む練習
cording_021 レスポンシブ検証用 / Responsive Design
cording_023 レスポンシブの実験 / メディアクエリー
cording_023 Illustrator Tools
cording_024 iPhone 対応 MP3 再生 / .play() メソッド
cording_025 Coming Soon
cording_026 Coming Soon
cording_027 Coming Soon
cording_028 Coming Soon
cording_029 Coming Soon
cording_030 Coming Soon
cording_031 Coming Soon
cording_032 Coming Soon
cording_033 Coming Soon
cording_034 Coming Soon
cording_035 Coming Soon
cording_036 Coming Soon
cording_036 Coming Soon

 

cording_037 HTML の基本
cording_038 button onclick="ぼたん()"
cording_039 Search 機能 / サイト内: ワード検索
cording_040 button onclick="くりっく()" / function くりっく()
cording_041 1996年のブラウザ / Custom-Tag / カスタム・タグにCSSを
cording_042 nav ul と nav>ul の違いについて / CSS 子要素に指定する
cording_043 Cascading とは / Cascading Style Sheets について
cording_044 meta タグの役割 / meta のいろいろな情報
cording_045 HTML / CSS / WebSite h2_中見出し
cording_046 HTML 歴史 / 概要 / レスポンシブ / リスト
cording_047 Block-Level Elements / Inline Elements / ブロック・レベル・エレメンツ / インライン・エレメンツ
cording_048 Directory Structure / Folder Structure / フォルダー階層と相対パス
cording_049 フォルダー階層と相対パス / 練習 - 1 の 答え
cording_050 VS Code を使用するメリット / デメリット
cording_051 HTML の構造 / DOM (Document Object Model)
cording_052 メールとFTPの比較
cording_053 Music History
cording_054 WordPress フォルダー階層
cording_055 サーバー保護 / FTP (ftp://)
cording_056 WordPress ボタン設置
cording_057 HTML カレンダー
cording_058 フラッシュ / コピー / Click Copy & Paste
cording_059 HTML Tag Double Checker / ファイルをドロップしてください
cording_060 Coming Soon
cording_061 Coming Soon
cording_062 Coming Soon
cording_063 Coming Soon
cording_064 Coming Soon
cording_065 Coming Soon
cording_066 Coming Soon
cording_067 Coming Soon
cording_068 Coming Soon
cording_069 Coming Soon
cording_070 Coming Soon
cording_071 Coming Soon
cording_072 Coming Soon

 

cording_073 iPhone の外観 / iPhone レイアウト
cording_074 iPhone の外観 / ヘディング-1 / iPhone レイアウト
cording_075 iPhone の外観 / メニューのボタン / iPhone レイアウト
cording_076 Search 機能 / iPhone レイアウト
cording_077 衛星の軌道 / 宇宙_CSS
cording_078 ボタン・クリック / ○○○.txt の文字を表示 / 隠す
cording_079 Grid レイアウト / JavaScript / 将棋盤
cording_080 CSS アニメーション / トランジション
cording_081 Decimal and Hexadecimal CodeTable / Dark Cyan / Dark Brown / Color Code の覚え方
cording_082 CSS 子セレクター
cording_083 サンプル集 囲み枠 / 罫線
cording_084 サンプル集 Hover / Transition
cording_085 サンプル集 Illustrator / Tools
cording_086 スライダー・サンプル / Slide_Swipe_Card
cording_087 ポジション / マスキング / position / relative / absolute
cording_088 Hover / Transition / Animation
cording_089 Z-index の実験 / スタッキング・コンテキスト
cording_090 RGB Hex Code/ RGBA Hex Color について
cording_091 アニメーション・ロゴ / STUDY HTML CSS JavaScript
cording_092 Coming Soon
cording_093 Coming Soon
cording_094 Coming Soon
cording_095 Coming Soon
cording_096 Coming Soon
cording_097 Coming Soon
cording_098 Coming Soon
cording_099 Coming Soon
cording_100 Coming Soon
cording_101 Coming Soon
cording_102 Coming Soon
cording_103 Coming Soon
cording_104 Coming Soon
cording_105 Coming Soon
cording_106 Coming Soon
cording_107 Coming Soon
cording_108 Coming Soon

 

cording_109 JavaScript による Jigsaw Puzzle
cording_110 button onclick="ぼたん()"ボタン / 予約語の実験
cording_111 ありえない X Y Z / カスタム・タグ
cording_112 Fireworks / jQuery で花火を

 

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

 

応用編 / 教科書 表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


  
       

応用編 - 1〜3 ページ

応用編 - 予備知識 D, E, F
予備知識 D E F

D, E, F

「HTMLの基本書式/
 作業の流れ」
「ページ内に設置する要素」
「トップ・ページ /
 サブ・ページ」

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


  
       

応用編 - 4ページ

ヘッダの書き方
ヘッダ

「ヘッダとは」
「ヘッダ内に記述する内容」
「検索エンジンと
 SEOについて」
 

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


  
       

応用編 - 6ページ

ボディ内のレイアウト
ボディ内の構造

「ナビゲーション」
「セクション/アーティクル/
 アサイド / アドレス」
「ディビション」

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


  
       

応用編 - 8ページ

フッターの書き方
ボディ内の領域

「ヘッダー / フッター」
「サイド・バー」
「カラム」
 

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


  
       

応用編 - 10ページ

フレーム
フレーム / インライン・フレーム / オブジェクト

「フレームとは」
「インライン・フレーム
 とは」
「オブジェクトとは」

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


  
       

応用編 - 12ページ

RGB カラー / RGBA カラー
カラー・モデル

「RGBカラー・モデル」
「アルファ・チャンネル /
 RBGAカラー・モデル」
「カラー・チャートの覚え方」

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


  
       

応用編 - 14ページ

画像ファイル
イメージ・ファイル & クリッカブル・マップ / キャンバス / SVGファイル

「イメージ・ファイルとは /
 クリッカブル・マップ
 とは」
「キャンバスとは」
「SVGファイルとは」

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


  
       

応用編 - 16ページ

ビデオ・ファイル / オーディオ・ファイル / トラック
ビデオ・ファイル / オーディオ・ファイル / トラック

「ビデオ・ファイルとは」
「オーディオ・ファイル
 とは」
「トラックとは」
 

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


  
       

応用編 - 18ページ

ダウンロード
アンカー(リンク) / メール / ダウンロード

「アンカー(リンク)とは」
「メールとは」
「ダウンロードとは」
 

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


  
       

応用編 - 20ページ

フォーム
フォーム / インプット&アウトプット / メーター&プログレス

「フォームとは」
「インプットとは /
 アウトプットとは」
「メーターとは /
 プログレスとは」

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


  
       

応用編 - 22ページ

必要な知識
必要な知識

「 CSS 」
「 JavaScript 」
「サーバー」
 

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


  
       

応用編 - 24ページ

必要なツール
必要なツール

「テキスト・エディター /
 FTPソフト」
「 Adobe Illustrator 」
「 Adobe Photoshop 」

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


  
       

応用編 / 教科書 表3

画像編集ソフト / デザイン・ソフト
タグの読み方と
必要性のチェック


 
 

 

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


 
       

Attribute についての詳しい情報は Reference を参考にしてください.

HTMLについて理解出来たら, 次はCSSのレッスンです → GO!

 

アップロードハウス

東京都中野区中野5-30-12-102

TEL: 03-3319-0065

ホームページ https://アップロードハウス.com/

メール mail@html-suisui.com

Copyright music school uproadhouse