起業日記　(HTML)　１

WEB制作の1段階

Webの基本

参考書籍（Webクリエイターボックス　Mana様）

SBクリエイティブ様

CatGPT様

このページでは、重要と思う項目をメモしながら、進んで行きたいと思います。

１００００文字ごとにページを変えて行きたいと思います。

日付の後ろに勉強時間（分単位）を記入して行きます。目安は２００時間（１２０００分）です。

2024.01.11（０）

今日から勉強しようと思いパソコンと本を開いたが、仕事の疲れが出て断念、週末からする事に変更します。

2024.01.12（１０）

始めに本を開く前に、HTMLとCSSの意味を調べて見ます。

HTML(CatGPTより）

HTMLは「HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）」の略で、ウェブページを作成するための標準的なマークアップ言語です。HTMLはテキストベースの文書を構造化し、コンテンツに意味を与えるために使用されます。主に以下のような役割があります：

1. 構造化されたコンテンツ: HTMLは要素（elements）を使用して、文書内の異なる部分や要素を定義します。例えば、見出し、段落、リストなどが含まれます。
2. ハイパーテキストのリンク: ハイパーテキストリンクを作成することができ、異なるページやリソースにユーザーを導くことができます。
3. マークアップ: タグを使用して、テキストを強調表示、リスト化、画像の挿入など、様々なスタイルで表示できるようにします。

基本的に、HTMLはウェブページの基本的な構造を定義するための言語であり、CSS（Cascading Style Sheets）やJavaScriptと組み合わせて、見た目や動作を制御することが一般的です。

CSS(CatGPTより）

CSS（Cascading Style Sheets）は、HTML文書やXML文書などのマークアップ言語で書かれた要素のスタイルやレイアウトを指定するためのスタイルシート言語です。主な目的は、ウェブページや文書の外観やデザインを制御することです。

具体的には、CSSは以下の機能を提供します：

1. スタイルの指定: CSSを使用すると、テキストの色、フォント、サイズ、背景色などのスタイルを指定できます。これにより、ウェブページの見た目を簡単に変更できます。
2. レイアウトの制御: CSSは要素の配置やサイズ、余白などのレイアウトを制御するための機能も提供します。これにより、ページの構造を柔軟に調整できます。
3. 複数のスタイルの継承と優先順位: “Cascading”（カスケーディング）という言葉が示すように、CSSはスタイルの継承と優先順位を持っています。これにより、異なるスタイルを一つの文書に適用し、必要に応じて優先順位を調整できます。
4. リスポンシブデザイン: CSSはメディアクエリなどを使用して、異なるデバイスや画面サイズに対応したレスポンシブなデザインを構築するのに役立ちます。

総じて、CSSはHTMLが文書の構造を定義するのに対して、外観やスタイルを指定するための言語として使用されます。 HTMLとCSSを組み合わせることで、ウェブページを見栄え良く、使いやすくすることが可能です。

2024.01.13（１８０）

本題に入る前に、基本を調べます。

視覚的に訴える事がデザインです。何を正しく伝えるかが重要、外観の綺麗さではない。センスとは誰でも身に付く知識と考える。

コーポレートサイト

企業の公式サイト、概要や商品紹介、求人、企業を発信します。

プロモーションサイト

特定の告知に使う、情報の範囲を狭めてターゲットを絞り期間限定です。

ポートフォリオサイト

デザイナーやアーティストが自分の作品や制作実績を記載する、自分を売り込んだり作品の発表の場にも活用している。

ショッピングサイト（ECサイト、オンラインストアーサイト）

インターネット上で商品を販売する（Amazonなど）買い物かご、決済画面などがあり、いかに買って貰えるか工夫している。

メディアサイト（ブログなど）

ニュースや読み物サイトで特化した情報を発信している。

SNS　ソーシャル　ネットワーキング、サービス（インスタグラムやエックス等）

ユーザーとリアルタイムでコミュニケーションが出来　拡散しやすい。短文、画像、動画。

ユーザビリティ

一言で言うと、使いやすさユーザーの立場に立って制作する事が大切です。色、アピールするもの、レイアウト、読み易い文章にする（結論を先、専門用語を出来るだけ使わない、短い文章で簡潔に）、操作性（クリック、動作速度、配色等）

Webのしくみ

インターネット

世界中のコンピューターで情報交換が出来る仕組み

Web（ワールドワイドウェブ）とは

インターネットを利用してサイトから発信したり閲覧したりする為に出来た仕組みを言う。

閲覧で必要なものはサーバー（ファイルを保存する）とクライアント（サーバーから情報を受取、自分たち）

URL(Web上の住所）

例

https(プロトコル）://white4646.com（ドメイン名）/wp-admin（フォルダー名）/index（ファイル名）.html（ファイル拡張子）

プロトコル　

1. HTTP (Hypertext Transfer Protocol):
   • 意味: ハイパーテキスト転送プロトコル。主にウェブブラウザとウェブサーバー間で文書やデータを転送するために使用されます。通常、ウェブページのアクセスに使用されます。
   • 例: http://www.example.com
2. HTTPS (Hypertext Transfer Protocol Secure):
   • 意味: HTTPのセキュア版。データの転送が暗号化されており、通信のセキュリティが向上しています。安全なウェブサイトへのアクセスに使用されます。
   • 例: https://www.example.com
3. FTP (File Transfer Protocol):
   • 意味: ファイル転送プロトコル。ファイルをサーバーとクライアント間で転送するためのプロトコルです。主にファイルのアップロードやダウンロードに使用されます。
   • 例: ftp://ftp.example.com
4. SMTP (Simple Mail Transfer Protocol):
   • 意味: シンプルメール転送プロトコル。電子メールの送信に使用されるプロトコルです。メールサーバー間でメールを送信するために利用されます。
   • 例: smtp://mail.example.com
5. TELNET:
   • 意味: テレネットワーク。リモートコンピュータに対してテキストベースの接続を提供するプロトコルです。セキュアでないため、一般的にはあまり使用されません。
   • 例: telnet://host.example.com

これらのプロトコルは、それぞれ異なる目的で使用され、ウェブ上のさまざまなリソースにアクセスするために利用されます。

ドメイン名

ドメイン名は、インターネット上のコンピューターやリソースを識別するための人間が理解しやすい名前です。これは、IPアドレス（数値で表されるコンピューターの識別子）を対応付け、覚えやすくするために使用されます。例えば、www.example.com というドメイン名の場合：

• www: 通常、ウェブサイトを指すサブドメイン。Webのコンテンツにアクセスするために使用されます。
• example: ドメインの名前部分。組織や個人、サービスなどを一意に識別します。
• com: トップレベルドメイン（TLD）と呼ばれ、通常は組織の種類や国を示します。”com” は商用組織を示しますが、他にも “org”（非営利組織）や “net”（ネットワーク関連）などがあります。

簡単に言えば、ドメイン名はインターネット上の場所を示す名前で、それがわかりやすい形で構成されています。ユーザーが記憶しやすく、ウェブブラウザなどで入力しやすいように工夫されています。例えば、IPアドレス（例: 192.168.0.1）よりも、www.example.com のようなドメイン名を覚える方が直感的で便利です。

フォルダー名（ディレクトリー）

1. 整理と構造化: ディレクトリは、ファイルや他のディレクトリを整理し、階層的な構造で管理するための手段です。これにより、情報を整理しやすくなります。
2. パス: ファイルやディレクトリにアクセスするためには、パスが使用されます。パスは、ルートディレクトリから対象のファイルやディレクトリまでの経路を指定します。例えば、/users/john/documentsは”john”ユーザーの”documents”ディレクトリへの絶対パスです。
3. 階層構造: ディレクトリは通常、階層構造で表現されます。これは、親ディレクトリが子ディレクトリやファイルを持つ形です。これにより、複数の階層でファイルを組織化できます。
4. 作業ディレクトリ: コンピュータ上で作業する際、現在の位置やディレクトリがあります。これを作業ディレクトリと呼び、相対パスがこのディレクトリを基準に指定されます。

簡単に言えば、ディレクトリはファイルを整理し、階層構造で管理するための仕組みであり、パスを使用してその中のファイルやサブディレクトリにアクセスします。

ファイル名

ファイル名は、コンピューターシステム上のファイルを識別するための名前です。ファイル名は通常、そのファイルの中身や用途を表現するもので、ユーザーが理解しやすくなるように命名されます。以下は、ファイル名の基本的な概念についての簡単な説明です：

1. ユニークな識別子: ファイル名は、コンピューターシステム内で一意である必要があります。同じディレクトリ内で重複しないようにユニークに設定されます。
2. 拡張子: ファイル名には通常、ファイルの種類や形式を示す拡張子が含まれます。例えば、”document.txt”の場合、”.txt”はテキストファイルであることを示しています。
3. 有効な文字: ファイル名には、特定の文字や記号が使えない場合があります。これは、ファイルシステムやオペレーティングシステムにより異なります。一般的には、英数字や一部の記号が使われます。
4. 命名規則: ファイル名は通常、その中身や目的を理解しやすくするために意味のある名前で命名されます。例えば、”vacation_photo.jpg”といった具体的な名前が使われることがあります。
5. 制限事項: 一部のファイルシステムでは、ファイル名の長さや使用できる文字に制限がある場合があります。これには注意が必要です。

簡単に言えば、ファイル名はコンピューターシステム上でファイルを特定するための名前であり、一意で理解しやすいものに設定されます。

ファイル拡張子

ファイル拡張子は、ファイルの種類や形式を示すためにファイル名の末尾に付けられる文字列です。通常、ピリオド（ドット）の後に続く拡張子は、そのファイルがどのアプリケーションで開かれるべきか、またはどの種類のデータを含んでいるかを示します。以下は、ファイル拡張子の基本的な意味のいくつかです：

1. .txt (テキスト): プレーンテキストファイル。通常、単なるテキスト情報が含まれます。例えば、メモやソースコードなど。
2. .doc, .docx (Microsoft Word ドキュメント): Microsoft Wordで作成された文書ファイル。テキスト、画像、スタイルなどが含まれることがあります。
3. .pdf (Portable Document Format): Adobe Acrobatで表示される文書フォーマット。異なるプラットフォームやデバイスで一貫した表示が可能です。
4. .jpg, .png (画像ファイル): 画像データを含むファイル。JPEGやPNGは異なる画像形式です。
5. .mp3 (音楽ファイル): 音楽データを含むファイル。MP3は圧縮された音楽フォーマットの一例です。
6. .avi, .mp4 (動画ファイル): 動画データを含むファイル。AVIやMP4は異なる動画形式です。
7. .html (HyperText Markup Language): ウェブページを構築するためのHTMLファイル。ブラウザで表示されるウェブコンテンツの基本形式です。
8. .exe (実行可能ファイル): コンピュータープログラムやアプリケーションの実行可能なバイナリファイル。

これらは一部の一般的な拡張子の例ですが、実際にはさまざまな拡張子があります。拡張子はファイルの種類を判断する手段となり、それに基づいて適切なプログラムが関連付けられることがあります。

デバイスの種類

iosデバイス（Appleが開発したiPhone等）、Androidデバイス（Googleが開発）、モバイルデバイス、スマートデバイス、ウェアラブルデバイス（身につけられるデバイス）,Iot(アイオーティー）物に付けるインターネット。

USBデバイス（世界中で普及している接続規格）、ストレージデバイス（SDメモリー、ハードデスク等の保存する機器）オーデオデバイス（音声入力したり、出力する為の機器）

ブラウザー

閲覧するにはブラウザーと言うソフトウェアが必要です。コード（アルファベットや記号）で書かれている為、ブラウザー無しでは見れません。

ブラウザーの主な物は、グーグル　クローム、サファリ、マイクロソフト　エッジなど。サイトを作る前に標準ブラウザーを決めて置く。

制作の流れ

１　企画を立てる

作ろうとするWebサイトの目的やコンテンツを考えターゲートユーザーがどのようにサイトを使うか　まとめる。メインゴール（商品の売り上げを伸ばす、仕事の依頼を受ける等）を達成するためのザブゴール（商品を知ってもらう、会社を知ってもらう等）具体的に数字で分かる目標を決める。

ターゲートユーザーを決める

目標を達成する為の核となるユーザーを具体化する。（職業、年齢層、年齢等）狭めてペルソナ層に絞るのも良い。

２　サイトマップ制作

必要なページを抜き出し、つながりや重要度の構成を図にする事を言う。

関連するページを１つのグループとして分けるこのグループが階層です。３階層以内がオススメです。優先順位の高いページは目立つようにする。サイトマップ作成ツール（Cacooが良いです。）

３　ワイヤーフレーム制作

ページの構成の次に全ページのレイアウトを考えます。この骨組みをワイヤーフレームと言います。サイトマップは全体に対して、ここでは１つのページをテキストやラインやボックスのみで作成します。

コンテツの優先順位を付ける、優先ほど上部に配置してスペースも取るファーストビューに入れる、伝えたい物をハッキリ　アピールする。

視線は上から下、左から右に移動する従って、上で左が重要です。

ブラウザー上のワイヤーフレームツール（Cacoo,Moqups,Wireframe.cc等）

2024.01.14　(１２０）

前回の続きから

４　デザイン（デザインカンプ）

ワイヤーフレームの次はグラフィックツールを使って作成する。画像配置、配色、書体を考えながら作る。

５　ファイルを用意する

デザインが終了したら稼働するWebサイト制作をする。必要な物がHTML,CSS,画像ファイル（ファイル名は必ず半角英数字にする。日本語名のファイル等は表示されない場合が出て来る。

HTMLで文章や画像を記述します。ページごとにHTMLが必要で、ファイル拡張子は（.html)です。

CSSで装飾は全て記述します。ファイル拡張子は（.css)です。

拡張子の主なの物

1. .html – HyperText Markup Language
   • ウェブページの構造とコンテンツを定義するための言語です。
2. .css – Cascading Style Sheets
   • ウェブページのスタイルやレイアウトを定義するためのスタイルシートです。
3. .js – JavaScript
   • ウェブページ上で動的なコンテンツやインタラクティブな機能を実現するためのプログラミング言語です。
4. .jpg, .jpeg – Joint Photographic Experts Group
   • 静止画像のファイル形式で、写真やイラストなどに使用されます。
5. .png – Portable Network Graphics
   • 透過や高品質な圧縮が可能な静止画像のファイル形式です。
6. .gif – Graphics Interchange Format
   • 簡単なアニメーションや透過が可能な静止画像のファイル形式です。
7. .svg – Scalable Vector Graphics
   • ベクトル形式の画像で、サイズが拡大しても画質が劣化しない特徴があります。
8. .pdf – Portable Document Format
   • 文書の電子的な表示を可能にするフォーマットです。
9. .php – Hypertext Preprocessor
   • サーバーサイドで実行されるプログラミング言語で、動的なウェブページの作成に使用されます。
10. .sql – Structured Query Language
    • データベースに対するクエリを実行するための言語です。

これらは一般的な拡張子ですが、Web制作では他にも様々な拡張子が使用されることがあります。

画像ファイルを用意する。

Webで使える画像の種類は、JPG,PNG,GIF,SVGなどです。

	画像の種類	内容
１	JPG	データーが軽く、写真やグラデーションなど色数の多いものに適している。
２	PNG	データーが軽く、イラストやロゴなど色数の少ないものに適している。
３	GIF	色数が少ないので、簡単なイラストに適している。
４	SVG	画質が劣化しない高解像度ディスプレイに適している。

６　Web上に公開する

アップロード（Webサーバーにファイルを転送する。）

サーバーと契約する（コノハウイング、さくらインターネット、Xサーバー等）

ドメインを取得する（名前.com,ムームードメイン、コノハウイング等）

URLを入力してWebサイトを見てみましょう。

参考ギャラリーサイト

海外製も色々有りますが、有料になると大変なので日本のサイトを案内致します。

I/O 3000 | Webデザインギャラリー

I/O 3000は、Webデザインに関わる人のためのWebデザインギャラリーサイトです。国内外を問わず、Web制作の参考となるサイトをセレクトしています。

io3000.com

制作準備

無料のテキストエディター（Visual Studio Code)が１番オススメです。

Download Visual Studio Code - Mac, Linux, Windows

Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio C...

code.visualstudio.com

拡張機能→japaneseと入力後→Install→再起動

次に全てのブラウザー（Safari,fox,Edge,Explorer,Chrome)をインストールして置く、私はGoogle Chromeで進めます。

デザインカンプ（グラフィックツール）描画アプリで作成

メイン　グラフィックツール

Adobe XD	プロトタイプが作成できるが他のアプリの併用が必要、ただし無料である。
Adobe Photoshop	昔から制作業界で使われていた、月1,000円前後～
Adobe Illustrator	ロゴ、アイコンなどに最適、月2,500円前後～
Sketch	マックのみに対応、年15,000円前後～

サブ　グラフィックツール

Affinity Designer	イラスト描画ツール。
Affinity Photo	画像の補正や加工がワンタッチで出来る。
Pixelmator	本格的な画像編集が低価格で出来る。
GIMP	修正や加工が無料で使える。
Fire Alpaca	無料でイラストや漫画が出来る。

VSCode以外のテキストエディター

Atom,Dreamweaver,Novo,SublimeTextなどがあります。

2024.02.04 (120)

頻度の高いHTMLタグの一覧

重要タグ一覧
タグ	用途	備考
html	HTML文書だと表す。HTMLの基点となる要素	head内
head	HTML文書のヘッダー部分、ブラウザには表示されない、説明文、CSSへのリンク、ページタイトルを記述	head内
meta	言語や説明文、ページ情報を記述	head内
title	ページタイトル、タブやブックマーク時にページタイトルとして表示される	head内
link	参照する外部ファイル、主にCSSファイルを読み込む時に使う	head内
body	HTML文書のコンテンツ部分、この中の物がブラウザーに表示される。	head内
h1～ｈ6	見出しを表示、数字の順に記述する	コンテンツ内
p	文章の段落	コンテンツ内
img	画像を表示、src属性で表示させたい画像を指定する	コンテンツ内
a	リンクを貼る、リンクの先はhref属性で指定	コンテンツ内
ul	番号の無い箇条書きリスト	コンテンツ内
ol	番号のある箇条書きリスト	コンテンツ内
li	リストの各項目	コンテンツ内
br	改行	コンテンツ内
strong	強い重要性要素、太文字で表示	コンテンツ内
blockquote	引用文	コンテンツ内
small	著作権、法的表記	コンテンツ内
span	意味の持たないインライン要素、CSSで一部分のみ装飾する時に使う。	コンテンツ内
audio	音声データを埋め込む為に使う	コンテンツ内
video	動画データを埋め込む為に使う	コンテンツ内
script	スクリプトデータを埋め込んだり、参照する（JavaScriptのコードを使う）	コンテンツ内
table	表を示すタグ、表全体を囲む	表
tr	表の１行を囲む	表
th	表の見出しセルを作成する	表
td	表のデータとなるセルを作成する	表
form	フォームを作成する	フォーム
<input type=”text”>	１行テキスト入力欄	フォーム
<input type=”radio”>	ラジオボタン、１つだけ選択可能	フォーム
<input type=”checkbox”>	チェックボックス、複数選択可能	フォーム
<input type=”submit”>	送信ボタン	フォーム
select	セレクトボックス	フォーム
option	セレクトボックスの選択項目を作成	フォーム
textarea	複数行テキスト入力欄	フォーム
label	フォームのラベル、フォームのパーツと項目の名前を関連付けられる。	フォーム
header	ページの上部にある要素、ロゴ、タイトル、メニューを囲む	ブロック要素
nav	メインのナビゲーションメニュー	ブロック要素
article	独立したページとして成り立つような内容を囲む	ブロック要素
section	１つのテーマを持ったグループ	ブロック要素
main	ページのコンテンツ部分	ブロック要素
aside	本文ではない補足情報、メインコンテンツとは関連性の低い情報に使う	ブロック要素
footer	ページの下部にある要素,コピーライトやSNSリンクである	ブロック要素
div	意味の持たない、ブロック要素	ブロック要素