HEAVEN INSITE's Blog

　今月で10周年のクソサイトの作成が役に立った。

３日目：西田洋平先生「情報発信とホームページ作成」

HTML
ハイパー・テキスト・マークアップ・ラングエージ。
Webページの構造をタグで印付けるための言語。
チカッパブログの文法とかぶってバグってしまうため、ここには正確に表示できず。
半角の＜＞はヤバい。

＜html＞　～　＜/html＞
ここからここまでがhtmlファイルであることを示す。

＜head＞　～　＜/head＞
ここからここまでがブラウザでは表示されないサイトの設定を示す。文字コードなど。

＜body＞　～　＜/body＞
ここからここまでがブラウザで表示される部分。

＜p＞　～　＜/p＞
ここからがここまでが本文。改行したい場合は複数作る。

画像の表示
恐竜ギャラリーでお世話になった文法。
＜img src=”./画像のファイル名（○○.pngなど）”alt=”画像の説明（画像が表示されない場合に変わりに表示される文字列）”＞

他サイトへのリンク
＜a href=”リンクしたいサイト○○のURL”＞サイト○○へ＜/a＞
hrefはハイパーレファレンスの略。
aタグで挟まれた文字列をクリックすると、リンクに飛ぶようになっている。

CSS
カスケーディング・スタイル・シーツ。
滝の流れ（カスケード）のようなスタイルシート。
Webページのデザインを記述する。太字、色、空白など。
文法はHTMLとかなり異なり（タグの記述が山括弧ではなく中括弧など）関連性はない。
基本的な文法は以下のようになる。

h1 {color: blue; }
セレクタ　{プロパティ: 値; }

セレクタ：どこに（h1の部分の）
プロパティ：なにを（色を）
値：設定（青）

・埋め込み式：HTMLのhead要素に＜style＞タグを作って記述。
・インライン方式：HTMLのbody要素内の個別のタグに対して記述。
・外部リンク方式：HTMLファイルとは別にCSSファイルを作り、HTMLファイルからそのファイルを参照できるようにhead要素にリンクを記述する。

フォントを変更
h1{font-family:”フォント名”;}

serif：明朝体
sans-serif：ゴシック体
cursive：手書き風のフォント
fantasy：装飾的なフォント
monospace：等幅フォント

フォントの色の変更
h1{color: red;}
p{color: #00FF00}

色についてはRGBそれぞれ16進数の00～FF（16×16＝256）の256段階で表す。

フォントのサイズの変更
h1{font-size: 120%;}
h2{font-size: 20px;}

パーセントでもピクセル数（画素数）でも変更できる。

他にも
em：ブラウザで設定しているフォントサイズの高さを基準の１とする単位。
ex：ブラウザで設定しているフォントサイズの小文字の高さを１とする単位。
smaller：デフォルトの1.2倍小さくする。
larger：デフォルトの1.2倍大きくする。
などがある。

Webサーバ
ウェブサービスを提供するコンピュータ。クライアント（ウェブブラウザ）からの要求を受け付けてデータを送る。
HTMLファイル、CSSファイル、画像ファイルなどを配置しておく。

Librahack事件
Librahack氏が愛知県の図書館のシステムが使いづらいので、自分用に改善したWebアプリケーション（クローラ）を作って、その日の新着図書情報を得ようとした（この行為自体は合法）。
すると、図書館のウェブサーバの背後にあるデータベースサーバの設定に不具合があり（業者の不手際。１時間で400リクエストまでと信じられないくらい脆弱だった）、アクセスがパンクしてしまった。
これを受けて図書館が警察や業者に相談。外部からのクラッキング攻撃だと判断され、業者が個人情報を提供、図書館が被害届を出して捜査が開始、IPアドレスを下にLibrahack氏の家を特定され、偽計業務妨害で逮捕されてしまった。
警察の勇み足をごまかすために未必の故意ということにされたが、図書館を攻撃しようとした強い悪意はないので起訴猶予処分になった。
とばっちりを受ける形となったLibrahack氏と、本来責任を負うべき業者以外コンピュータに詳しい人がいなかったことによる悲劇。

CMS
コンテンツ・マネジメント・システム
ウェブコンテンツを一元的に管理することのできるシステム。
手軽にサイトやブログが作れる。国立情報学研究所のNetCommonsなどでは、そこでアンケート調査やレポート提出、アマゾンのリンクなどもできる。

Webユーザビリティ
ユーズとアビリティ（可能）を足した造語。快適に利用できること。
Webページのわかりやすさ、操作のしやすさなど。

図書館サイトのユーザビリティの評価基準
・OPAC検索ボックスの位置（トップページにあるのがよい）
・更新情報やカレンダーの掲載
・サイト名とロゴをすべてのページに配置し、トップページへのリンクとする。
・メニューの位置を全ページで固定。
・パンくずリスト（ヘンゼルとグレーテルに因んでこう言う）でサイト内での現在地を示す。（例：トップページ＞図書館を利用する＞サービス案内）

Webアクセシビリティ
高齢者や障害者など、どんなユーザにも配慮してコンテンツにアクセスできること。

具体例
・画像などの非テキストコンテンツには、その内容を示す代替（alt属性）テキストを付加する。
・ハイパーリンクの箇所だけでリンク先の内容が推測できるようにする（例：「こちらへ」ではなく「お申し込みはこちらへ」までリンクにする）。
・見栄えのためなどで語の途中でスペースを入れない（例：経　済　だと　けいすみ　になってしまう）。
・レイアウトはCSSで設定。
・各種のガイドライン（JIS8341など。ちなみに8341は「やさしい」の語呂合わせ）に準拠す