備忘録的プログラミングリファレンス

備忘録的プログラミングリファレンス

 Webサイトを作成するためのHTML、CSS、Web API(DOM)、JavaScriptの各リファレンスとSQLなどについて説明しています。

 このサイトは備忘録的なプログラミング用のリファレンスです。プログラミングの合間にみることを前提に詳細な説明は省いています。

web プログラミングリファレンス

 Webサイトを作成するためのHTML、CSS、Web API(DOM)、JavaScriptについての備忘録的なリファレンスです。

 Webページを作成するにはHTMLを知ることから始まります。HTML だけでは、テキスト、画像や動画といったコンテンツを羅列することしかできません。
 HTML について知りたい方は、HTML 入門 <!DOCTYPE>、<html>、<head>、<body>を参照してみてください。

 レイアウト、色や罫線などHTMLページに装飾を加えるには、CSSを使う必要があります。

 HTMLはソースをテキストで作成します。一方、ブラウザはそのHTMLテキストをDOM(Document Object Model)として読み込み、テキストをオブジェクトデータ化します。 このDOM使ってJavaScriptなどでHTMLページを操作します。DOMは現在、Web APIの一部となっています。

Tips
HTML
CSS
DOM( JavaScript )
JavaScript
SQL

 Webページの制作にはHTMLといったところから始まるのですが、ページレイアウト、色、罫線などのフォームを作成しようとするとCSS。、アニメーション、動画、アンケートなどを作成しようとするとDOMJavaScriptといった知識が必要になります。
 データベースや非同期通信、メールを利用しようとすると、SQL、API、CGI、サーバー、webサーバー、データベースサーバー、メールサーバー、C言語、Python、PHPまたはPerlといったサーバーサイド処理のプログラミング言語とさらに知識が必要です。
 さらに商用に耐えるサイトを作るには、コンテンツやページのデザイン力も大切です。
 全てを憶え切るのは不可能です。特定の分野に特化するか、インターネットで知識が転がっていますのでリファレンスや検索を活用しながら制作するのがよいかと思います。

 現在のサイト制作は、サイトのプロデュース、デザイン、記事作成、コーディング、サイト設計、サーバー管理、それらのマネージメントと分業で行われているケースが多いです。
 一般的に、それら全般をウェブデザインと呼んでいるようです。ウェブデザインとして組織的に目標を達成するためのKPI(Key Performance Indicator)KGI(Key Goal Indicator)といった指標を言及しているほどです。
 このサイトでは、主にコーディングに必要なリファレンスを扱っています。

その他

 多くの参考書やテキストには"HTML tag"、"tag element"、"element"といった英語表記が「HTML要素」や単に「要素」と表記されていることが多いです。さらには、「タグ」、「タグエレメント」、「エレメント」といったりします。
 英語では、"Document"以下は"element"で統一されているので混乱し難いのですが日本語にすると複数の表記があるために混乱し易いです。このサイトでは、「要素」という表記は避けています。

 HTMLは2021年度からWHATWG(Web Hypertext Application Technology Working Group)などの機関によってHTMLの仕様が勧告されています。今も、HTML5、HTML4以前により作成されたページが存在しています。

 備忘録のためにSQL、Linux、Webサーバー、CGIについてなども書いていくつもりです。その他、XML,XSLについては書きかけです。

HTTP、HTTPS

 HTTP、HTTPSとは、通信プロトコルのひとつで、主にWebサーバーとWebブラウザとの相互通信に利用されます。 通信プロトコルには、データの並べ方とデータのやり取りの方法の規約が定められています。

 HTTPSは、SSL、TLSといった暗号通信手段を用いたHTTPです。HTTP over SSL/TLSといった方が正確なようです。

 HTTP、HTTPSプロトコルは、HTMLやXMLといったテキストや、画像、音声や映像と言ったバイナリデータを扱う手段を提供しています。
 WebサーバーとWebブラウザとがやりとりするHTMLテキストや画像、音声には、データ型を識別するためのMIME、リクエストなのかレスポンスなのか、GET、POSTといったメソッド、Cookieといったデータが付加されています。
 この付加されるデータをHTTPヘッダーといいます。HTMLテキスト、画像や音声などを含めたHTTP全体はHTTPメッセージといい、ステータス、ヘッダーフィールド、ボディで構成されます。HTMLテキスト、画像や音声などはボディ部分になります。
 HTTPヘッダーはCGIやデータアップロード部分の作成、Socket通信を行わない限りあまり目にすることはないでしょう。例えば以下はHTTPリクエストヘッダーの例です。 CGIやサーバーサイドプログラムでは知っているべき知識になります。

HTTPリクエストヘッダーの例
GET / HTTP/2
Host: www.smpl-rfrns.net
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:84.0) Gecko/20100101 Firefox/84.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Language: ja,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate, br
...

 なぜHTTP、HTTPSプロトコルがあるのかというと、データは基本的に0と1の羅列です。データの並び方を約束しないと離れた場所で勝手に作ったアプリケーション同士でデータを扱うことができません。
 データのやり取りを約束したものがプロトコルで、以下のように分かれています。

通信プロトコルの階層
物理層 <ー> データリンク層 <ー> ネットワーク層 <ー> トランスポート層 <ー> セッション層 <ー> プレゼンテーション層 <ー> アプリケーション層

 通信プロトコル最下層は物理層のプロトコルで、LANケーブル、光回線やモデムやDSUのことをいいます。 この階層においてのデータは0と1を示す電気信号を送る手段です。この段階では何らかの0と1が並んだデータを送り合っているという状態です。 0と1の電気信号を、アプリケーション間で解釈し合えるデータ形式とその手段には上記のようなプロトコルがあるのです。

 WebサーバーとWebブラウザとのやりとりに使われているHTTP、HTTPSプロトコルはセッション層のプロトコルです。 その下の階層トランスポート層TCP/IP、UDPプロトコルは、HTTP、HTTPSプロトコルが利用するプロトコルで、サーバー構築やメンテナンスにおいて出てきます。

話題別

cookieについて

ふりがな、ルビ文字について

Google Search Console httpからhttpsへ

robots.txt について

SEO 対策について

サイト内検索

iframeをjavascriptから操作する

要素を編集可能に

タグエレメントを編集可能にするには

<div contenteditable='true'>編集可能にする</div>

モバイル ユーザビリティについて

 Exampleのレスポンシブ web デザインについてを参照してください

注意点

以下の注意点があります。

・W3Cなどの機関によってHTMLの仕様が勧告されていますが、必ずしもその通りの説明であるという保証はありません。各自のブラウザでの動作を確認して下さい。

・このサイトではHTML要素はあえてHTMLエレメントと呼んでいます。要素の言葉を使うと意味の分別が分かりにくくなるのと、英語ではHTML Element、単にElementなどと呼びますので慣れる意味を含めて、HTMLエレメントと呼びます。

・HTMLテキストにページを性格付けるようなタグ、<HTML>、<HEAD>、<BODY>では定義すると記述します。

・<P>、<BR>といったHTMLテキストに改行やヘッダー、リンクを加えるようなタグには編集すると記述します。

・<BLOCKQUOTE>、<DEL>、<INS>などのような暗黙の内にテキストに意味を持たせるタグには明示すると記述します。

・HTMLテキストに機能を追加するようなタグ、<FORM>、<TABLE>、<MAP>、<OBJECT>では作成できますと記述します。

・このサイトの例は、javascriptによって実際に作成できるようにしています。

このページはwebページを開発しながら参照することを前提に作成していますので詳細な説明をしていない部分が多いです。