2012年05月18日
情報科学類 コンピュータリテラシ
筑波大学 システム情報系 情報工学域
新城 靖
<yas@cs.tsukuba.ac.jp>
このページは、次の URL にあります。
http://www.coins.tsukuba.ac.jp/~yas/coins/literacy-2012/2012-05-18
あるいは、次のページから手繰っていくこともできます。
http://www.coins.tsukuba.ac.jp/~yas/
http://www.cs.tsukuba.ac.jp/~yas/
- Unix Super Text 上巻「第27章 World Wide Web」
- 次回 5月22日火曜日 は、
講義室 3A308 に集合。
- Webで提出したレポートが「再提出」になっているものは、「OK」になる
まで何度でも再提出すること。締め切りは、学期末だが、あまり溜めない方が
よい。分からないことは、ＴＡや教員に聞くこと。
- 次の課題を締め切りに間に合うように提出ことを優先しなさい。再提出の
ものを出すよりも。
HTML は、「本来は」、文書の構造を記述する。
HTML で記述できる文書の構造:
- ヘッダ（文書の題目）
- 見出し、章立ての木構造
- 段落
- 箇条書
- 表
HTML では、文書の構造を記述することができるが、「表示の方法」
を記述することは、本来はでない。
ワープロは、紙に印刷した時の、このような表示の方法を設定す
るためのプログラムである。
表示の方法:
- 文字フォントの種類、大きさ、色
- 行間
- 左詰め、中央寄せ、右詰め
- 肩付き、下付き
表示の方法を記述するには、スタイルシートを用いる。
- Cascading Style Sheets (CSS)
- eXtensible Stylesheet Language (XSL, XML用)
- その他
XML は、タグが定義できるマークアップ言語（＜−＞HTMLはタグが固定）。プ
ログラム間でデータの交換に用いる。
H1の見出しを青くする。
<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp">
<TITLE>スタイルシートの例題:タグへの設定</TITLE>
<STYLE TYPE="text/css"><!--
H1 { color: blue; }
--></STYLE>
</HEAD>
<BODY>
<H1>青いH1の見出し</H1>
<H2>普通のH2の見出し</H2>
</BODY>
[表示例]
段落書式
- 行揃え。text-align:, text-justify:
- 表示範囲。height:, width:, overflow:, text-overflow:,
- 余白。 margin:, margin-left:, margin-right:, margin-top:, margin-bottom:
- 表示位置。position:, top:, bottom:, left:,
- 境界。border-style:, border-width:, border-color:, padding:
文字書式
- 色。color:, background-color:
- フォント。font: font-family:
- 大きさ。 font-size:
- その他。font-style:, font-weight:, text-decoration:
箇条書き
- 印の形状。list-style-type:, list-style-image:
- 印の位置。list-style-position:
イメージ
- 枠線。border-style
- テキストとの位置。float:, clear:, vertical-align:, margin-right:
- ズーム。zoom:
- 背景。background-image:, background-repeat:, background-position:
その他:
- カーソルの形状。 cursor:
- 表示(非表示)。visibility:, display:
- 内容の自動挿入。content:
(1) HTML のヘッダ
<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<STYLE TYPE="text/css"><!--
(ここにスタイルシートを書く)
--></STYLE>
</HEAD>
(2) 別のファイル
「スタイルシートのURL」は、filename.css のようなファイル名が多い。
<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<LINK rel="stylesheet" type="text/css" href="スタイルシートのURL">
</HEAD>
<HTML>
<HEAD>
<TITLE>タイトルです。</TITLE>
<STYLE TYPE="text/css"><!--
@import url(スタイルシートのURL);
(別ファイルに加えてここにもスタイルシートを書くことができる)
--></STYLE>
</HEAD>
(3) HTML のタグの属性
<P STYLE="color:blue">文。文。文。</P>
複数のスタイルは、混ぜられる（カスケード）。
対立する定義は、後から出てきた方が有効になる。
コメントとは、ある
コンピュータ言語の中に記述する、人間が読むために書かれた部分。
CSS では、/* と */ で括った部分がコメントとなる。
この表記法法は、Ｃ言語やＪａｖａ言語と似ている。
（他の言語では、この表記法は使えないことがある。）
コメントは、デバッグ時など一時的に
コンピュータ言語の機能を無効にしたい時にも使える。
次のような規則の並び
セレクタ { 宣言; }
セレクタ, セレクタ, ..., セレクタ { 宣言;宣言;宣言; }
１つひとつの宣言は、次の形式。
プロパティ:式
「式」には、数、文字列、%、単位つきの長さ、URL などが書ける。
- HTML の要素(タグ)ごと。<H1>,<H2>,<H3>,<P>,<BODY>など
- クラス(class)ごと。クラスとは、似たような要素の集まり。
同じクラスの要素は、似たような書式になる。
文書全体で複数現れる。
- ID(identifier)ごと。文書全体で１回だけ現れる。
クラスは、
<DIV>タグや<SPAN>タグとともに利用
されることがある。
<HTML>
<HEAD>
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=iso-2022-jp">
<TITLE>スタイルシートの例題:クラスの利用</TITLE>
<STYLE TYPE="text/css"><!--
.important { color:red; } /* class="important" と指定したものだけ */
--></STYLE>
</HEAD>
<BODY>
<H1>普通のH1の見出し</H1>
<P>
普通のパラグラフ
</P>
<P class="important">
重要なパラグラフ
</P>
<H2>普通のH2見出し</H2>
<H2 class="important">重要な普通のH2見出し</H2>
<P>
普通の言葉。<SPAN class="important">重要な言葉。</SPAN>普通の言葉。
</P>
</BODY>
[表示例]
- HTML で全部の表示したい内容を記述する。
- スタイルシートを埋め込み、見栄えを調整する。
スタイルシートをうまく活用すると、見た目を一度に調整できる。
- 同じスタイルシートを複数のページで読み込んで使う。
- 同じページ内でも class をうまく活用する。
いちいち <font> で指定すると、変更したくなった時には、
全部変えなければならない。
<span class="classname">のように、クラスを使ってマークして
おけば、１個所クラスの設定を変更するだけで全部統一的に変る。
(同様に、ワード・プロセッサでも、スタイルをうまく活用したい。)
注意点
- ブラウザによって対応していない場合がある。
- 対応していても、動作が異なる場合がある。バグも多い。
複数のブラウザ（違うバージョンも含む）で表示を確認したい。
その他、次のページが参考になる。
スタイルシートを使わずに、
<TABLE> タグ
を使って配置する方法がある。
The Unix Super Text 12.4.3項 参照, The Unix Super Text 12.4.5項 参照
手引き 3.2.7項 参照。
Emacs のキーボードの操作だけで、編集中のファイルの一部をコピー＆ペース
トを行うことができる。
- コピーしたい部分の先頭にカーソルを移動する。
-
C-SPC または C-@ でマークを設定する。マークは画面に
は表示されない。マークが設定されると、一番下の行に「Mark set」と表示さ
れる。
- カーソルを、コピーしたい部分の末尾に移動する。
-
M-w または Esc w でコピーする。
- カーソルを、ペーストしたい部分に移動する。
-
C-y でペーストする。
ヒント
- 上の 4. で、
M-w の代わりに C-w を使うと、コピーでは
なくカットになる。カットされた内容も、消えたわけでなく、 C-y で
ペーストできる。
- コピー、または、カットしたものは、何度でも
C-y でペーストで
きる。
- カットされた内容をペーストしなければ、(大きな領域の)削除として使える。
- マークを付けた位置とカーソルの位置は、上下逆でも良い。
-
C-x C-x で、カーソルの位置とマークの位置を入れ替えることが
できる。
The Unix Super Text 12.1.2項 参照。
Emacs のバッファは、ハードウェアのメモリを抽象化したもの。ファイルの内
容を読み込み、編集できる。保存しなければ、失われる。
Emacs でウィンドウとは、バッファの一部を表示する画面。
The Unix Super Text 12.1.2項 参照。
図? Emacsのウィンドウとバッファとファイルの関係
- ファイルを編集する時には、バッファを作成し、ファイルの内容をバッファに読み込む
C-x C-f。
- 大きなバッファは、一部だけがウィンドウに表示される。
- バッファとしては存在するが、ウィンドウとしては表示されないバッファもある。
- ウィンドウを分割することができる。
C-x 2、C-x 3
- 複数のウィンドウをいくつかを畳んで見えなくすることができる。
C-x 1、C-x 0
- 1 つのバッファの一部を、複数のウィンドウで表示することができる。
- 表示されているバッファを切り替えることができる。
C-x b
- バッファの一覧を表示することができる。
C-x C-b
- help 機能では、画面がウィンドウに分割されることがある。
- 1つの大きなファイルを編集する時、ファイルの先頭と末尾を同時に画面
に表示する。
- 2つのファイルの内容を同時に表示して比較する。
- 2つのファイルの間で、コピー＆ペーストを行う。
（レポートの一部を再利用する。）
実習時間中には、
以下の課題をできるだけ多く行いなさい。全部を行う必要はない。
Firefox で複数のページを同時に表示するには、ウィンドウが便利である。た
とえば、講義のページを表示しながら、自分が作成中のページを表示する時に、
この機能を使うと便利である。このことを確認しなさい。
- 「ファイル」メニューから「新規ウィンドウ」を選ぶ
Firefox で複数のページを同時に（切り替えながら）表示するには、タブが便
利である。このことを確認しなさい。
- 「ファイル」メニューから「新規タブ」を選ぶ
- タブを切り替えるには、ウィンドウの上部にあるタブのタイトルの部分を
クリックする。
自分がよく見る WWW ページについて、スタイルシートが使われているかを観察
しなさい。
Firefoxブラウザを操作して、元の HTML (ソース)を表示させなさい。
- 観察したいページを開く。
-
ページのソースを表示する。
- 「表示」メニューから「ページのソース」を選ぶ。
- HTML の記述の上部の <head> の中に<style>や
<link rel="stylesheet" ..>の記述がないかを調べる。
学類コンピューティング環境
のページ で利用されているスタイルシートを表示しなさい。そして、どのよ
うな機能が利用されているかを調べなさい。
-
http://www.coins.tsukuba.ac.jp/ce/,学類コンピューティング環境
のページ を開く
-
ページのソースを表示する。
- <head>にある <link rel="stylesheet"...>
の href を得る。
これは、
相対形式
になっている。
(
"skin/pukiwiki_gs2.css.php?charset=Shift_JIS&gs2color="
)
- これに、元のページの URL を合わせて、
絶対形式
に変換する。
http://www.coins.tsukuba.ac.jp/ce/に
"skin/pukiwiki_gs2.css.php?charset=Shift_JIS&gs2color="
を合わせて
http://www.coins.tsukuba.ac.jp/ce/skin/pukiwiki_gs2.css.php?charset=Shift_JIS&gs2color=
となる。
- こうして得られた URL を、Web ブラウザのURL が表示されている所(ロケー
ション・バー) に打ち込み、リターンキー(エンターキー)を押す。
Emacs で、次のキー操作の動作を調べなさい。
| キー | 説明 |
|---|
| C-SPC または C-@ | コピーする領域の先頭を決める（マークを設定する） |
| C-w | マークした部分とカーソルの間の領域をカットする |
| Esc w または M-w | マークした部分とカーソルの間の領域をコピーする |
| C-y | コピー、または、カットしたものをペーストする |
The Unix Super Text 12.4.3項 参照, The Unix Super Text 12.4.5項 参照
手引き 3.2.7項 参照。
Emacs で、キー操作よるコピー＆ペーストの練習をしなさい。
- 内容を壊してもよいテキストファイルを作成する。
たとえば、以前に提出したレポートを、cp コマンドでコピーする。
- Emacs を実行する。
- C-x C-f で、1.のファイルを開く。
- コピーしたい部分の先頭にカーソルを移動する。
カーソル移動キーC-f,C-b,C-n,C-pの他に、
文字単位の移動の他に、ページ単位の移動
C-v,M-v,Esc v, インクリメンタルサーチ C-s も有用である。
-
C-SPC または C-@ で、マークを設定する。
もし、C-SPC がうまく動かない時には、
MacOSX Spotlight のショートカット・キーの設定を解除する。
- カーソルを、コピーしたい部分の末尾に移動する。
-
M-w または Esc w でコピーする。
- カーソルを、ペーストしたい部分に移動する。
-
C-y でペーストする。
同様に、次の操作を確認しなさい。
-
M-w の代わりに C-w を使うと、コピーでは
なくカットになる。
- カットされた内容をペーストしなければ、(大きな領域の)削除として使える。
- コピー、または、カットしたものは、何度でも
C-y でペーストで
きる。
- マークを付けた位置とカーソルの位置は、上下逆でも良い。
-
C-x C-x で、カーソルの位置とマークの位置を入れ替えることが
できる。
Emacs で、次のキー操作の動作を調べなさい。
| C-x 2 | ウインドウを2つに分割（現在のバッファを複数ウインドウで表示） |
| C-x 1 | ウインドウを1つにする（他のウインドウを閉じる） |
| C-x 0 | 現在のウインドウを閉じる |
| C-x o | 他の(other)ウインドウにカーソルを移動。 |
| C-x C-b | バッファのリストを表示 |
| C-x b | 別のバッファを表示する |
Emacs のウインドウを開く機能(C-x 2)は、1画面に入らないような大
きなファイルを部分的に表示する時に有用である。このことを確認しなさい。
- Emacs を実行する。
- C-x C-f で、ファイルを開く
- カーソル移動のキーで、表示したい部分を表示する。
文字単位の移動の他に、ページ単位の移動、インクリメンタルサーチも有用である。
- C-x 2 で、ウインドウを2つに分割する。
- C-x o で、カーソルをもう１つのウインドウに移動
- カーソル移動のキーで、別の表示したい部分を表示する。
- 以後、C-x o で、カーソル行き来しながら編集を進める。
よく使われる操作は、１つのファイルから別のファイルへの
コピー＆ペーストやカット＆ペースト。片方のバッファで
コピー、または、カットして、別のバッファへ移動してペーストする。
- C-x C-s で、ファイルを保存
- C-x C-c で、Emacs を終了する
次の手順で、Emacs で複数のファイルを同時に編集してみなさい。
- Emacs を実行する。
- C-x C-f で、ファイルを開く
- C-x 2 で、ウインドウを2つに分割する。
- C-x o で、カーソルをもう１つのウインドウに移動
- C-x C-f で、ファイルを開く
- 以後、C-x o で、カーソル行き来しながら編集を進める。
よく使われる操作は、１つのファイルから別のファイルへの
コピー＆ペーストやカット＆ペースト。片方のバッファで
コピー、または、カットして、別のバッファへ移動してペーストする。
- C-x C-s で、ファイルを保存
- C-x o で、カーソルをもう１つのウインドウに移動
- C-x C-s で、ファイルを保存
- C-x C-c で、Emacs を終了する
次の手順で、Emacs で複数のファイルを同時に編集してみなさい。
- Emacs を実行する。
- C-x C-f で、ファイルを開く
- C-x C-f で、ファイルを開く
- 以後、C-x b で、バッファを切り替える。
補完機能が使える。タブキーを押すと、バッファの一覧が表示される。
- 以後、
C-x b で、バッファを切り替えながら編集を進める。
よく使われる操作は、１つのファイルから別のファイルへの
コピー＆ペーストやカット＆ペースト。片方のバッファで
コピー、または、カットして、別のバッファへ移動してペーストする。
- C-x C-s で、ファイルを保存
- C-x b で、カーソルをもう１つのウインドウに移動
- C-x C-s で、ファイルを保存
- C-x C-c で、Emacs を終了する
以下の問題、および、回答をテキスト・ファイルに記述し、
レポート提出ページから提出しなさい。
(1) HTML と CSS で次のような条件を満たす WWW ページを作成しなさい。
- 課題8(1)の条件を
すべて満たす。（同じページを、提出してもよい。）
- ２つ以上のタグのスタイルを変更する。そのうち１つ以上は、class を使う。
- 同じ class のスタイルを、２個所以上で利用する。
２カ所としては、１つのHTML文書の内部でもよく、また複数の HTML 文書に
またがっていてもよい。
作成した WWW ページの URL (http:// から始まるもの)をレポートに含めなさい。
なお、この提出する WWW ページは、
ホーム・ページでな
くともよい。
(2) The Unix Super Text の次の部分を読みなさい。
そして、項目についてついて調べて、簡単に説明しなさい。
- 盗聴
- なりすまし
- 共通鍵暗号方式
- 公開鍵暗号方式
- 電子署名
- メッセージ要約関数（メッセージダイジェスト関数）
- ssh コマンド
(3) The Unix Super Text の次の部分を読みなさい。
そして、項目についてついて調べて、簡単に説明しなさい。
- PID
- ps l (BSD系)
- Ctrl+C キー (Control キー + c キー)
- kill コマンド
(4) [加点] (1) で、このページの説明の範囲を超えたスタイルシートの機能を
利用しなさい。そして、その機能の説明、どこに利用しているか、および、そ
の機能の有用性を書きなさい。
(
CSSの利用例
や、
その他のCSSの利用例
で紹介されているものを利用してもよい。
)
(5) [加点] CSS にはブラウザによる互換性の問題があり、様々な種類のブラウ
ザで見た時にまったく異なる表示になってしまうことがある。様々な種類のブ
ラウザで表示が似ていると期待されるCSSの機能を 10-15 行でまとめなさい。
また、表示が大きく異なってしまうような CSS の機能としては何があるか、
3-5 行でまとめなさい。「表示が大きく異なる」ようなCSS の機能を用いた
WWW ページを 1 つ作成し、その URL、および、表示に用いるべきブラウザの種
類をレポートに含めなさい。
Last updated: 2012/05/17 14:46:52
Yasushi Shinjo / <yas@cs.tsukuba.ac.jp>