パーミッションについて

サーバー上に配置するCGIやPHPなどのプログラムファイルは、HTMLとは違ってただ単にブラウザからURLを指定してアクセスしたのでは動きません。
理由は、これらのプログラムはサーバー側で動作するものなので、ブラウザには動かすことができないからです。
そのため、ウェブサーバーを介して動かします。
しかし、 HTMLのように不特定多数のユーザーがプログラムを実行できてしまってはセキュリティ上好ましくないので、サーバー上のファイルには1つ1つアクセス権を設定できるようになっています。
アクセス権は、誰にどんな操作を許可するかを定義するもので、パーミッション(permission)と呼びます。
permit(許可する)の名詞形がpermlsslonなので、そう呼んだと理解しておけばよいでしょう。

パーミッションの設定はサーバーの管理画面やFTPクライアントなどのソフトを使って設定します。
「誰」に相当するのが「オーナー、グループ、その他」で、「どんな操作」に相 当するのが「読み込み、書き込み、実行」です。
各操作の権限は数字で表され、実行が1、書き込みが2、読み込みが4と決まっています。
そして、許可する操作に対応する数字の合計を、オーナー、グループ、その他の順に並べた3桁で1つのファイルのパーミッションを表します。
たとえば、プログラムに付属するスタイルシート(.CSS)やJavaScript(.js)の場合、設置者自身はファイルを更新できるために書き込みの権限が必要ですが、その他のユーザーはブラウザを介したファイルの読み込みだけができれば用が足りるので、オーナーは「読み込み+書き込み=4+2=6」、グループとその他はそれぞれ「読み込み=4」となり、パーミッシヨンは644となります。

また、FTPクライアン卜などの画面では数字ではなくrwxなどのアルファベットで表示 される場合がありますが、これは3桁の数字でパーミッションを表すのと全く同じことです。
RはRead(読み込み)、wはWrite(書き込み)、XはExecute(実行)の意味だからです。
また、CGIはPerlと呼ばれるプログラム言語を使って記述されますが、HTMLやCSSで記述されたホームページを表示するためにブラウザが必要なのと同様に、Perlを動かすためにはサーバーに備わっている「Perlを動かすためのソフトウェア」が置いてある場所を示すパスをCGIファイルに記述して関連付けてあげる必要があります。
同様に、メール送信機能はサーバーに備わっている「Sendmail」というソフトウェアの場所を示すパスを記述する必要があります。

ホームページ作成の実務で気を付けるポイント

社外の制作業者やウェブデザイナーと一緒にホームページを作成していく場合は、ページの横幅や、画像や余白の大きさなど細かな部分のサイズまできっちりとワイヤーフレームに記載することがあります。
ワイヤーフレームは次の作業工程の「デザイン」をするための設計図になるからです。
ですから、ワイヤーフレームを作るのか作らないのか、作るのならどちらが作るのかという責任分担や、どこまで細かく作るのかを制作に関わる人たちの間でしっかり認識を合わせしておくようにしましょう。

一般に、ホームページのデザインを作るデザイナーや、 コーダー(HTMLやcssのコー ドを書く人)など、ホームページの作成に関わる人たちを取りまとめる役割をディレクションと呼び、ディレクションを担当する人をディレクターと呼びます。
ディレクターは楽団に たとえると指揮者です。
ワイヤーフレームはディレクターが作って、デザイナーに渡されることが多いです。
しかし、ホームページ作成の実務では、ディレクターが誰なのかが陵昧なまま制作を進めたために、制作工程の役割分担に認識の食い違いが生じてトラブルになる(責任転嫁やコスト超過)ことが珍しくありません。
ワイヤーフレーム(設計図)に記載すべきことが記載されていなかったために、次の工程を担当するデザイナーが独断で決めてしまい、その次の工 程を担当するコーダーがデザイン通りにHTMしを作り、最終的にできあがったホームペー ジを見たお客様が「思っていたものと違う」と言い、 ディレクターがデザイナーにやり直し(ダメ出し)を指示するという理不尽なことが起こります。
ホームページの制作を依頼した お客様には何の関係も芯いところで勝手にトラブルになってしまうのです。
筆者の経験上、複数人での分業に慣れていない人がディレクターを務める場合によく起こるようです。
ホームページ制作はもちろん、これからウェブ関係の仕事を目指しておられる方は、どこまでが自分の責任範囲なのか、関係者の間で認識合わせをすることを意識していきましょう。

サイト設計に使えるツール

Webサイトの構造設計を行う上で、特に気を配って進めたいのが想定ユーザーの設定だ。想定するユーザーによって、カテゴリの分類は変わってくるだろうし、それぞれの階層構成も変化する。適切なカテゴリ名も決めなくてはならないだろう。Webサイトで提供される情報を見に来るのはどんな人なのだろうか。そこを見極めたうえで、Webサイトの構造を設計したい。構造設計は打ち合わせを重ねながらすり合わせを行い、決定に至るまで様々な変更を受けつつ進められていく。。このため、構造設計の初期段階では柔軟に変更が可能な手法で設計図をつくるのが望ましい。具体的には設計初期段階では、紙で下書きをしながら 大まかな構成を検討していくやり方や、各カテゴリや情報のまとまりを カード形式で記入して、これを並べ替えながら構造を検討していくや り方がある。 また、 PCを作業ツールとして使う場合は、 「Microsoft Excel」や「Microsoft Visio」といったビジネスツールを使って図式化し、これをプリンタで出力しながら検討を進めていく手法もよく使われている。ビジネスソフトをツールに使うメリッ卜は、 Excel とVisio が備えているコネクタツールを使うことで、位置の変更や階層の変更が容易に行えるという点にある。また、汎用性が高いソフトでもあるので、連携がスムーズで修正もしやすい。 PCでサイト構造の設計図をつくること は、書類をつくるという目的もある。「Adobe Illustrator」等のドロー ソフトを使って、ビジュアル的にも美しいサイトマップを制作している 制作会社も多い。ドキュメントの制作は、一見 Webサイトの構造設 計と具体的に離れているようには見えても、実際制作チーム内ある いは Web担当者との情報共有、詳細部分を検討する“詰め”段階で は重要な役割をもっているのだ。また、最近ではサイト構造の作成に アウトラインプロセッサを使うケースもある。大規模な変更が容易で あるというメリッ卜がアウトラインプロセッサにはあるのだ。 ここで紹介した手法のどれがベストということはない。サイト全体 の設計を正しく行えて、情報を適切に整理していくことが可能で、自 分を含めた周囲の制作環境にマッチしたツールを使って作業を行う ことが大切だ。

画像デザインについて

形がもつシルエットの特徴は、見る人の心理に大きく影響しています。モチーフは閉じでも、それがどのように 画面の中で存在しているかで見え方は違ってくるのです。Web全体に使用するビジュアル選びやモチーフの配置を意識的に行えば、デザインの方向性もはっきりします。
形の特徴が人に与える印象にはさまざまなものがあります。また、よい印象の裏側には必ずデメリッ トがあるものです。

画像には 画面の奥ヘ溶け込んで見えやすいものと、手前に出てくるように目立って視線を集めやすいものがあります。人は画面の中の違いを自然に探し、形を区別して浮き上がらせて見ているのですこのときに目 に浮き上がって見える 「図」と、奥ヘ後退して見える「地」の関係は、デサインを勉強するうえでとても大切です。

複数のスタイルを設定するには?

「プロパティ:値」を「;」で区切る
セレクタを使ってスタイルを設定する場合、背 景色と文字色、文字の大きさと色など複数のス タイルを設定したいと きは「プロパティ:値」 の 組をセミコロ ン「;」で区切 って列挙します。「;」 の後で改行しでも効果は同じなので、見易さを考慮して改行して記述するとよいでし ょう。3 つ以上列挙する場 合も同様です。
②背景と文字色を指定する
下のソースでは背景色を指定するbackground-color プ口パティを 「blue」、文字色を指定するcolor プ口パティを 「white」に指定しています。 なお、列挙した末尾の「プロパティ:値」のあとの「;」は不要ですが、あとでスタイルを追加するときに付け忘れないように付けておいてもよ いでしょう。

<html>

<head>

<title>複数スタイルの設定</title>

<style type=”text/title>

<!–

h1{background-color:blue;

color:white;

}

–>

</style>

</head>

<body>

<h1>Cascading Style Sheets</h1>

</body>

</html>

スタイルを記述する場所は?

① style属性の値として記述する
「 プロパティ値」というスタイルの設定を記述 する方法は3とおりあります。HTML の知識が あれば、一番わかりやすいのは、スタイルを設 定したい要素に、 sty le 属性を設定する方法で、
「style=” プロパティ:値”」 のように 「”」または 「’」 を付けて記述します。
②headタグ内に記述する
1つの HTML 文書 内に共通するスタイルは、 head 部分に style タグを 用いて指定します。ま ず、 styleタグのtype属性に「”text/css”」を設定します。これはスタイルシ ー トの種類がcss であることを表しています。スタイ ル設定対 象を指定するものを「セレクタ」といいますが、 同ーのタグすべてにスタイルを設定したいとき は、タグ名をそのままセレクタとして用います。 たとえば、h1 タグにスタイルを設定したいときは「h1」を記述し、「{}」で囲んで「プロパティ:値」を記述します。なお、この記述方法を採ると、 css に対応していないブラ ウザではスタイ ル 指定の文字列がそのままブラウザに表示されて しまうので、それを 防ぐため にス タイル指定の部分を「<!-」 「ー>」でコメン卜化しておくのが 一般的です。
③拡張子「.css」のファイルを作成する
スタイルを設定するファイル(外部スタイルシート)を別途作成し、その設定情報を HTML 文書から呼び出すようにすることもできます。 この方法を採れば、複数の HTML 文書に共通の スタイルを設定することが容易にできるように なります。 外部スタイルシートファイルは、スタイル設定 情報を記述し、拡張子を 「.css」で保存します。

スタイルシートとは

HTMLでも色やサイスを指定したりする仕様もありますが、ホー ムページの保守性やアクセシビリティなどの面で弊 害も見られるようになってきたため、現在では構造の記述とスタイルを明確に区別することが推奨されています。ス タイルを定義するのがスタイルシートで、 CSS (Cascading Style Sheets )はその 1つですが、現時点で「スタイルシート」といえばほぼCSS のことを指すと考えてよいでしょう 。
CSS は「プロパティ」に「値」を指定することで使用できます。「プロパティ」とは「フォントの サイズ」「色」など、設定しようとする項目のことを指し、値とは「18 ポイント」「黄色」など具体的な設定値を示すものです00CSSではプロパティに値を設定するためにコロン 「:」 を 用います。「何を:どうする」というように覚えておくとよいでしょう 。
例えば、background-colorプロパティは背景色を設定するためのプロパティで、これに黄色を表す「yellow」を設定するには下のように記述します。[背景色を:黄色に」設定するわけです。
background-colocr:yellow