ホームページ制作復習アーカイブ | 小田聖夏-鹿児島Webデザイナー｜Web系エンジニア |フロントエンドエンジニア

●トップ > ホームページ制作復習

ホームページ制作復習

①WEB基礎知識

2018-11-12

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ファイル記述の順番

2018-11-13

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>

③文字コード

2018-11-15

パソコンとサーバー間で起こっている現象

エディタソフト→	コンピューター内部→	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を利用	１つの文字コードで世界中の文字が表現できることを目的として定められた国際標準規格

⑥データベース

2018-11-15

データベースとは

情報の蓄積・利用を簡単にする技術
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について

2018-11-15

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スクリプト

2018-11-15

サーバーとの情報のやりとりはできないため、情報をサーバー上に保管したりは出来ない。

CGI	サーバー
Java Script	クライアントサイト・・・jQueryはライブラリの一種。 Java Scriptはwebブラウザというソフトウェアに対して動作する
Perl
PHP	サーバー
Action Script	クライアントサイド
JAVA	・アプレット技術/クライアントサイド・サーブレット技術/サーバー
Ajax(エイジャックス)	サーバー＋クライアントサイド
Ruby on Rails(ルビー・オン・レイルズ)	PHPに次いで、近年人気のあるサーバーサイドスクリプト。クックパッドなどのサイトにも活用

メモ

スクリプト/小規模（プログラム）・・・さまざまなソフトウェアに対して動作する小さなプログラム

プログラム言語について

2018-11-20

【C】もっとも古い言語。多くの言語がC言語をベースに作られている。
【Ctt】C言語をさらに拡張した言語。
【Java】C/Cttをベースにして、SunMicrosystemsによって開発された。Androidなどに用いられる。
【C#】Microsoft社がJavaなどをベースに独自に開発した言語。
【Objective】Apple社がC言語を独自に拡張した言語。iPhoneやiPadアプリ開発に用いられる。