ホームページ制作復習
①WEB基礎知識
Linux
コンピューターのOSはMacかWindows
サーバーコンピューターOS（基本ソフト）はオープンソースで開発された無料のLinux
サーバーを構築するにはLinuxOS上に必要なソフトをウエアをインストールする。
・ページを表示するための「Webサーバー」代表的なものは「Apache」
・データを管理するための「データベース」
・それらをコントロールするための「言語」
・メールサーバー
一般的にはこのような「Linux」にいろいろなものがインストールされた状態を一言で「サーバー」と呼んでいます。
「Apache」はクライアント（URL）からリクエストが来た時に、それにしたがってwebページを返す（表示する）のが仕事です。
このURLに書かれた文字列こそがApacheに対する命令になっているのだと覚えておく。
ブラウザとレンダリングエンジン
レンダリングエンジンによって、HTMLやCSSの解釈が異なる部分があるため、表示の結果が少しずつ異なる。
・Microsoft Internet Explorer→Trident
・Fire Fox →Gecko→ Servo?
・Google Chrome →Blink(基本的にwebkitに似た動き)→Webkit
・Safari →Webkit
・Opera →Blink→Webkit
IE10より
・Edge
http://www
【html】はプロコトル（規格）
これはwebブラウザがHTTPというプロコトルに従って通信していることを示しています。
【www】はworld wide web
【FTP】はFile Transfer Protocol
【SMTP】はSimple Mail Transfer Protocol
HTML
webブラウザに対する指示
HTML・・・大文字・小文字問わない。 「P H1」
XHTML・・・小文字で記述することが定義されている。「ｐ h1」
緩いルールのまま改定を重ねたHTML。もう一度ルールをしっかり定め直そうという動きによって策定されたのがXHTML
突然厳しいルールで作り変えるのは難しいと、利用されないのを予想して、段階をふむために3つの種類が準備された
・strict/ルールに忠実に
・Transition/HTMLの緩いルールが残った状態でもOK
・Frameset/XHTMLでは廃止された「フレーム」という要素を利用する
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML５
HTML５はHTML４の後継バージョンであるため、タグの記述ルールなどは厳格ではない。
たとえば、閉じタグを省略したり、単独タグにスラッシュが不要だったりなど、XHTMLで定義されていたルールは撤廃されている。
しかし、HTML５であってもXHTMLで定められたルールに沿って記述することが好ましい。
これを「XHTMLに準拠したHTML５」or「XHTML５」とよばれることもある。
②HTMLファイル記述の順番
head内
※タイトルの前に文字コード設定
・CSSの↓にjavascript
CSSもjavascriptも、後に書いた方が上書きするカタチになる。
①meta要素（文字コードの設定のみ）
②title
③meta要素
④link要素
⑤rel属性
・stylesheet
・shortcut icon
・canonical
・alternate
などなど
⑥script要素
⑦style要素
⑧object
➈その他
<!DOCTYPE html> <html lang="ja"> <head> <meta chareset="UTF=8"> <title>～</title> <linl rel="stylesheet・・・> </head> <body> </body> </html>
③文字コード
パソコンとサーバー間で起こっている現象
| エディタソフト→ | コンピューター内部→ | webブラウザ |
|---|---|---|
| A B C | 65 66 67 | A B C |
コード
ASCIIコード→JISコードに問題があると考えられた技術者などの手によって、改良が加えられた文字コード
shiftJisのWebページをEUCコード環境で閲覧しようとすると文字化けする。
| ASCIIコード（アスキーコード） | 英数字 | |
|---|---|---|
| JISコード | 日本語 | |
| JISコード→「shiftコード」 | 日本語 | マイクロソフトがかかわっていたため、Windowsで採用 |
| JISコード→「EUCコード」 | 日本語 | UNIXなどの1部のOSで採用 |
| UTF8（ユニコード） | ※特別な理由がない場合はUTF8を利用 | １つの文字コードで世界中の文字が表現できることを目的として定められた国際標準規格 |
⑥データベース
データベースとは
情報の蓄積・利用を簡単にする技術
webスクリプトと合わせて、使われることが多いのが「データベース」と呼ばれるシステムです。
DBは大量のデータを効率よく管理するための専用システムです。
DBの種類
| Oracle Database(オラクルデータベース) | 大規模なシステムを構築する場合に利用←高い！ |
|---|---|
| Microsoft SQL Server(シークェル/エスキューエル) | 主にWinndows Serverで構築された業務システムなどに利用される |
| MySQL(マイシークェル/マイエスキューエル) | オープンソースとして開発された。多くのレンタルサーバーが標準で対応。 |
| Postgre SQL(ポストグレスキューエル) | MySQLのライバルともいえるオープンソースDB |
| SQLite | 非常にコンパクトなDB。スマートフォンなどに内蔵されている。MySQLなどのように強力なことはできない。 |
オープンソースとは
スクリプトの内容（ソース）を公開しているアプリケーションのこと。
WordpressやEC-cubeなど。
通常は隠された状態で販売されており、解読および改造することは禁止されています。
WordPressとは
CMS（コンテンツ管理システム）とよばれるシステムの一種で、webサイトやプログラムなどを運営することができます。
サーバーサイドスクリプトで動作するCMSでは、Webサイトのコンテンツを保持・管理するために「データベース」が利用されるという仕組みになっている。
④CSSについて
CSS記載方法
| インラインCSS | 各タグ内で指定するCSS。 ※緊急的な対処とし、基本的には利用しない |
|---|---|
| 埋込スタイルシート | head内に＜style＞～＜/style＞を記述する。 ※例外的にそのwebページでだけ利用するようなスタイル |
| 外部スタイルシート | head内の記述が増えるため、外部ファイルとして別に管理する。 ※基本的なスタイルの記述 |
CSSの優先順位
HTML記載の上から順に読み込むため、下に行けば行くほど優先順位度は高くなる
・外部ファイルCSS→head内CSS→インラインCSS
書き方にも左右される
（弱）h2＜body h2（強）
メモ
idで命名したタグは1ページにつき、1回の使用可
classで命名したタグは何回でもOK
命名の仕方は「＃mainText」よりは「＃main-Text」が現在は一般的
⑤動かすWebスクリプト
サーバーとの情報のやりとりはできないため、情報をサーバー上に保管したりは出来ない。
| CGI | サーバー |
|---|---|
| Java Script | クライアントサイト・・・jQueryはライブラリの一種。 Java Scriptはwebブラウザというソフトウェアに対して動作する |
| Perl | |
| PHP | サーバー |
| Action Script | クライアントサイド |
| JAVA | ・アプレット技術/クライアントサイド ・サーブレット技術/サーバー |
| Ajax(エイジャックス) | サーバー＋クライアントサイド |
| Ruby on Rails(ルビー・オン・レイルズ) | PHPに次いで、近年人気のあるサーバーサイドスクリプト。 クックパッドなどのサイトにも活用 |
メモ
スクリプト/小規模（プログラム）・・・さまざまなソフトウェアに対して動作する小さなプログラム
プログラム言語について
【C】もっとも古い言語。多くの言語がC言語をベースに作られている。
【Ctt】C言語をさらに拡張した言語。
【Java】C/Cttをベースにして、SunMicrosystemsによって開発された。Androidなどに用いられる。
【C#】Microsoft社がJavaなどをベースに独自に開発した言語。
【Objective】Apple社がC言語を独自に拡張した言語。iPhoneやiPadアプリ開発に用いられる。
画像ファイルについて
BMP・・・無圧縮
TIFF・・・無圧縮
png gif・・・可逆圧縮（イラスト向き）
jpeg・・・不可逆圧縮/元に戻らない（写真向き）
jpeg
ロゴやアイコン・イラストには向かない。
保存しなおすたびに、画質も劣化。
輪郭がかすれたり、色むらもおきやすい