情報基礎 講義メモ(第11回)

今日学ぶことの概要

• CSSを用いたWebページ作成
• 先週の演習（Excelなど)の説明　(今日の11:50までに仕上げる)
• Powerpointの説明
• 先週の演習(Powerpoint)の説明　(来週の11:50までに仕上げる)
• 今週の演習(CSSを用いたWebページ作成)の説明　(再来週の11:50までに仕上げる)

今日の内容

CSSを用いたWebページ作成

• 村上先生のプレゼンテーション資料
  • 　スライド　f-1　からf-34　まで

課題ファイルへのアクセスの確保、Windowsファイルのディレクトリの位置関係 (省略)

• 以前の講義メモを参照されたい。

先週の演習（Excelなど)の説明　 (今日の11:50までに仕上げる。前回と同じ)

先週の課題の概要

先週の課題は、次のようなものである。手書きの計算で求めてもよいし、Excelの表で計算してもよい。Excelの表で計算し、それを提出した場合、[A]のステップについては、100点満点で5点程度、[B]のステップについては、10点程度加点する。この加点は、この課題の評価についてのみであり、前期を通しての評価についてではない。課題の評価は、他の数個の課題と平均されるから、この課題で15点の加点があったとしても、前期を通しての評価においては、せいぜい2点から3点程度となる。

Excelを用いて計算した場合、Excelの計算結果を、HTMLファイルに自動的に読み込むのは、この「情報基礎」のレベルではできないので、[A]の結果を[B]に読み込むとき、そして、[B]の結果をHTMLファイルの形で示すとき、それぞれ入力し直すことになる。

[A]のステップを手で計算し、[B]のステップをExcelで計算したり、あるいは[A]のステップをExcelで計算し、[B]のステップを手で計算したりしてもよい。

(途中、大幅に省略する。詳細については、前回の講義メモを参照されたい)

作業のおおまかな手順

• 手作業で計算してもExcelの助けを借りてもいいので、学籍番号→読み替えた16進数→10進数　を実行する。
• ダウンロードした　student_id.html　( kadai.html からきちんとリンクが張られていればファイル名を変更してよい) に結果を表の形で入れる。
  
• Excelを用いた場合、完成したExcelファイル、すなわち、alpha_hexa.xls　、hexa_decimal.xls ( student_id.html からきちんとリンクが張られていればファイル名を変更してよい)を、「My document」→「適当に名称を定めたディレクトリ」　から、public_html に、あるいは、public_html の中に設けたディレクトリ　に、必ずオリジナルをMy documentの中に残して、コピーする。コピーの仕方については、後述■■■を参照されたい。
  .
  student_id.html　の該当のセルをクリックすれば、そこにたどりつくように、student_id.html　の中身を書き換える。
  • HTMLファイル(たとえば、student_id.html )が kadai.html と同格(兄弟関係)に存在する場合、kadai.html　の中のリンクを、下記●●●のように記述して設定する。
    .
    
  • kadai.html　と同格のディレクトリ(たとえば、conversion　)を作って、HTMLファイルをその中( kadai.html から見ると　甥/姪　の関係)に保存する場合、リンクを、下記◆◆◆のように記述して設定する。
    .
    
  • ●●●　<a href="student_id.html">student_id.html</a>　←学籍番号読み替え、10進変換の課題<br>
  • ◆◆◆　<a href="conversion/student_id.html">conversion/student_id.html</a>　←学籍番号読み替え、10進変換の課題<br>

.pptファイル作成の課題について

課題の満たすべき要件

• Microsoft Powerpointを用いて、末記の条件に合う.pptファイルを来週のこの時間の昼11:50までに完成させる。それをpublic_htmlの元において、ウェブブラウザで見える状態にする。
  
• 締め切りより遅くなった場合
• 完成すれば、評点は下がるが、評価はする。
• 間に合わなかった者は、完成した時点で　kiyoshi@gscc.osaka-cu.ac.jp　と　k-nakano@ ex.media.osaka-cu.ac.jp　に完成したことを通知するメールを出すこと。遅れれば遅れるほど、評点は悪くなる。
  
• 次のような合計6枚のスライドからなること。1枚目には、タイトル(適当につける)と、自分の学籍番号、氏名を、書き込む。
  
• 以下、同一の業界について分析、記述していくこと。業界内の企業の位置づけを2次元平面に配して示したスライドが1枚あること。
• 親子構造の入っている語句や文章(業界の加速要因、減速要因)の入ったスライドが1枚あること。
  
• 論理関係(業界の加速要因、減速要因など)を説明した図の入ったスライドが1枚あること。
  
• 業界内の1社あるいは数社の売上高(連結があれば連結)か営業損益あるいは経常損益(連結があれば連結)のここ3年以上の推移を示す表が入ったスライドが1枚あること。
  
• 業界内の1社あるいは数社の売上高(連結があれば連結)か営業損益あるいは経常損益(連結があれば連結)のここ3年以上の推移を示すグラフが入ったスライドが1枚あること。
  

PowerPointの実習

実習の前に　(前回とほぼ同じ)

• 実習材料のコピー
  • Windowsのマイドキュメントの中に、新しいディレクトリを作って、「kadai_ppt」　などと名付けてほしい。　ファイル　→　新規作成(W)　【新規作成に　新規作成(N)[上の方]　と　新規作成(W)[中央　やや下]　の2つがあるので注意】
    
  • もととなるPowerpointファイル「sample02.ppt」を、今作った「kadai_ppt」に保存する。
    
    • student_id.html (kadai.html からリンクさえ張ってあれば名称変更は自由)　を皆さんのコンピュータ領域の　public_html　に保存する　＝http://www.media.osaka-cu.ac.jp/~kiyoshi/info_edu/2007_first_half/sample01.ppt など
      • http://www.media.osaka-cu.ac.jp/~kiyoshi/
      • →掲載されている講義資料
      • →情報基礎(情報処理I)　講義資料
      • →2007年前期
      • その他関連資料
        • 10.PowerPointの演習の材料
          • Powerpointのサンプルファイル1 (sample01.ppt)
          • Powerpointのサンプルファイル2 (sample02.ppt)

PowerPointの実習(1)

• さきほどダウンロードした、sample02.pptのスライドを手本に、皆さんの選んだ業界における成長促進要因、成長阻害要因の命題のツリー構造を、仕上げてみよう。
• fig_smp1.pptの1枚目の検討項目(「規制緩和の影響」、「グローバル化の影響」など)は、そのまま流用してよい。

図形作成機能のデモ

• 画面下辺に図形作成関連のメニュー
  • 線分、矢印線、長方形、楕円、横書きテキスト、縦書きテキスト
  • ペンキ缶＝塗りつぶしの色、筆＝筆の色、線の太さ、線の種類、矢印の向き
    
  • 図形の調整
    • グループ化
      • グループ化とグループ化解除
    • 順序＝図形の重なりの制御
    • 配置、整列＝特定の線に図形の位置をそろえる、均等配置する
    • 回転、鏡像反転
  • オートシェイプ→基本図形

PowerPointの実習(2)　(一部、前回と重複)

• 要因分析や企業分類の図の作成
  • 要因分析や企業分類の図を作ってみる。選んだ業界の成長に関する成長促進要因、成長阻害要因の連関などを図示する。
    
• Googleによる企業や業界の売上高などの検索
  • Googleなどの検索エンジンで、企業や業界の売上高などを探す。表があれば、メモ帳かExcelに、コピーする(Excelにコピーするときには、ウェブの中の表の飾りが一緒にコピーされることがあるので注意)。売上高などが、文章中の数値だった場合には、Excelなどに再入力する。
    
• PowerPointの表作成機能
  • PowerPoint自体が表作成機能を備えている。
    ファイル→新しいスライド　　右側の「新しいスライドのレイアウト」で一番下から2行目の、4Ｘ4の表らしきものが書かれているレイアウトを選ぶ。　スライドの中央をダブルクリックし、列数と行数を適当に入れる。
    列や行が足りなくなったときには、分割して列や行を増やすことができる。多かったときには、となりあったセルを合体させていくことで、列や行を減らすことができる。列や行を減らす目的でなくても、セルの合体は使える。
    
• Excelの表のコピー
  • Excelで作った表のうち、コピーしたい領域を選び、ctrl + c で覚え、Powerpointの新規スライドで、図表をコピーするためのスライドを選び、ctrl + v で貼り付ける。
• Excelのグラフのコピー
  • Excelで作ったグラフのうち、コピーしたいものを選び、ctrl + c で覚え、Powerpointの新規スライドで、図表をコピーするためのスライドを選び、ctrl + v で貼り付ける。

表を備えたスライドの作成

• 課題の遂行においては、Excelからコピーしても、Powerpoint自体の表作成機能を用いて表を作成してもどちらでもよい。Excelの操作に慣れている場合、Excelで作って、Powerpointにコピーする方が多分、楽である。
• Powerpoint自体の表作成機能を用いて表を作る方法
  • 手順は、以下のとおり。
    
    • 何行何列の表になるかをあらかじめ見積もっておく。
    • 挿入　(Alt + I)　→　新しいスライド (あるいは　Ctrl + M)
    • 右側の「スライドレイアウトの適用」で、下から2段目の左側、4列Ｘ4行の表の入ったアイ コンをクリック
      
    • 出現したスライドの中央のアイコンをクリック　→　何列　何行　の数値を入力
    • それぞれのセルに文字や数値を入れていく。
      
    • 表の作成時には、関連のメニューアイコンが、バーに登場するのでそれも用いる。セルの結合や分割、行や列の挿入や削除、セルの中の位置指定(上、中央、下)、セル内縦書き、列や行の幅や高さ揃え−などである。
      
• Excelで表を作って、それをコピーする方法
• 手順は、以下のとおり。
  
  • あらかじめExcelで表を作る。コピーしたい部分の左上のセルをクリック。shiftを押しな がら、コピーしたい部分の右下のセルをクリック。Ctrl + c でその個所を覚える。
    
  • Powerpointにうつり、挿入　(Alt + I)　→　新しいスライド (あるいは　Ctrl + M)
  • 右側の「スライドレイアウトの適用」で、一番上の段の右側、タイトル枠以外真っ白のレイアウトをクリック
    
  • スライドの白い(何もない)個所をクリックし、Ctrl + v (Excelで記憶させておいた表が、Powerpointの表機能のもとで、コピーされる)

グラフを備えたスライドの作成

• あらかじめExcelで表を作り、それをもとにExcelでグラフを作り、それをPowerpointにコ ピーするのが便利である。
• 白いスライドにグラフをコピーする場合
• 手順は、以下のとおり。
  
  • あらかじめExcelで表を作り、それをもとにグラフを作り、Excelのワークシートに配置する。コピーしたいグラフ部分の枠をクリック。Ctrl + c でそのグラフを覚える。
    
  • Powerpointにうつり、挿入　(Alt + I)　→　新しいスライド (あるいは　Ctrl + M)
  • 右側の「スライドレイアウトの適用」で、一番上の段の右側、タイトル枠以外真っ白のレイアウトをクリック
    
  • スライドの白い(何もない)個所をクリックし、Ctrl + v (Excelで記憶させておいたグラフが、Powerpointの表＋グラフ機能のもとで、コピーされる)
  • グラフの枠の外をクリックする　(グラフのみが表示されているように見える)。
  • グラフの枠の中をダブルクリックする。枠の下に、「graph1」、「sheet1」、「sheet2」などと付けられたタブがついているのが見える。これにより、グラフの背後にあるデータを、(Excelに戻ることなく)Powerpointの中で修正して、グラフを修正することができる。
    
• コピー用のアイコンが用意されているスライドの場合(お勧めできない)
• 手順は、以下のとおり。
  
  • あらかじめExcelで表を作り、それをもとにグラフを作り、Excelのワークシートに配置する。コピーしたいグラフ部分の枠をクリック。Ctrl + c でそのグラフを覚える。
    
  • Powerpointにうつり、挿入　(Alt + I)　→　新しいスライド (あるいは　Ctrl + M)
  • 右側の「スライドレイアウトの適用」で、上から5段目、左側の、表、イラスト、グラフ、図が長方形の枠の中に示されたレイアウトを選択する。
    
  • スライドの中央のアイコンの中に、さらに6つのサブのアイコンが入っている。

  • 左上：表の挿入　　　　中央上：グラフの挿入　　　　　　　右上：クリップアート
    の挿入
    左下：図の挿入　　　　中央下：組織図または図表の挿入　　右下：Mediaクリップの挿入
    

    
  • このうち、グラフを意味するデザイン(上の図の中央上に相当)の個所をクリックする。クリックした途端に、Excelで記憶させたものとはまったく別のグラフが表示される)。グラフ本体と別に、データを格納する表が現れる。
  • この場合、表の中身を入力し直せば、求める数値に基づいたグラフに直すことができる。

CSSを用いたWebページ作成の実習(再来週締め切り)

村上先生および中野の作ったサンプルのダウンロード

図のように、ディレクトリを作っておく。「css_sample」、「css_material」、「css_practice」のディレクトリ名は、実は、何でもよい。その中の「css」と「images」 のディレクトリ名は、このとおりにした方が楽である(実際には、「css」も「images」もきちんと名称を指定するのなら、どんな名称でもよい)。

http://www.media.osaka-cu.ac.jp/~kiyoshi/info_edu/2007_first_half/index.html　の中の、「11.CSSによるWebページの作成　関連サンプルファイル 」の下の各行において、右クリックしては、対象を「ファイルに保存」で、以下のように保存していく。

• 村上先生のサンプルファイル
  • http://www.ex.media.osaka-cu.ac.jp/~harumi/mihon/index.html　→　css_sample　の中に
  • profile.html　→　css_sample　の中に
    
  • http://www.ex.media.osaka-cu.ac.jp/~harumi/mihon/hobby.html　→　css_sample　の中に
  • http://www.ex.media.osaka-cu.ac.jp/~harumi/mihon/css/index.css　→　css_sample/css　の中に
    
  • http://www.ex.media.osaka-cu.ac.jp/~harumi/mihon/images/photo.gif　→　css_sample/images　の中に
    
• 中野のサンプルファイル
  • http://www.ex.media.osaka-cu.ac.jp/~k-nakano/css_material/index.html 　→　css_material　の中に
  • http://www.ex.media.osaka-cu.ac.jp/~k-nakano/css_material/features.html 　→　css_material　の中に
    
  • http://www.ex.media.osaka-cu.ac.jp/~k-nakano/css_material/access_to_documents.html 　→　css_material　の中に
  • http://www.ex.media.osaka-cu.ac.jp/~k-nakano/css_material/gscc_logo.gif 　→　css_material　の中に
    
  • http://www.ex.media.osaka-cu.ac.jp/~k-nakano/css_material/yoko_05_spring.pdf
    

CSSの役割

たとえば、村上先生のサンプルファイルをダウンロードしたあと、「css」のディレクトリ名称を変えると、index.css が探せなくなって、レイアウトが変わる。

再来週までの課題

• 再来週の11:50までに下記の作業を実施する。 この情報基礎の中で作った自分のウェブページ群を、css_practice　(kadai.htmlからリンクを張る。リンクが張ってあれば、実は、どんな名前でもいい)　の中にそのままコピーする。その後、css　の中に　村上先生のサンプルを真似て　index.css を作り、村上先生のサンプルを真似て、各HTMLファイルが　index.css に従ってレイアウトされるように、index.css を参照する記述を各HTMLファイルに入れる。
  
• このようにして、レイアウトが、index.cssに従ってなされるようにする。
• 自分のウェブページ群を触る　(実は、コピーしてから書き換えるので、オリジナルはそのままだが)　のが嫌な場合、前記　で、css_material　にダウンロードしたファイル群を、そのまま、css_practice にコピーする。その後、css　の中に　村上先生のサンプルを真似て　index.css を作り、村上先生のサンプルを真似て、各HTMLファイルが　index.css に従ってレイアウトされるように、index.css を参照する記述を各HTMLファイルに入れる。
  
• 中野のサンプルでいうと、まず、HTMLファイルの中に、span や　div　の定義があれば、それを　index.css に移動する。それから、HTMLファイルの中に、などによる文字サイズの変更や、文字の色の変更があったときには、次のようにして、それを　　index.css による指示に移行する。
  行を変えずに行の中で、文字サイズや文字の色を変えている場合には、span　というタイプ、文字サイズや文字の色を変えているのが、行単位である場合には、div というタイプで、新しいスタイル　chuui とか　osusume といった指示のタイプを作る。文字のサイズや色を変更していた部分を　<div class="osusume">　と　</div>　で挟む。
  

以上

(第10回)←　↑(この期の目次)　→(第12回)

---

(c) Kiyoshi_NAKANO, OSAKA_CU, Osaka_fu, JAPAN 2003_2007