2011 年度卒業論文 セミナーウェブの実装 文学部人間関係学科 4 年 A クラス学籍番号 08500016 髙崎陽菜 1
目次 1. はじめに 2.CSS と HTML の役割分担 2-1 HTMLの構造 2-2 HTMLタグとは 2-3 CSSとは 2-3-1 セレクタとは 3. 関連技術 4. ウェブの仕組み 5. まとめ 2
1. はじめに今までの Web では卒業研究の発表や卒業論文の閲覧ができる場所 ゼミを紹介する場所などがなかったため セミナー Web を作ることで少しでも便利になるようにゼミのスケジュール 掲示板 ブログも付け加え 更にゼミ内のコミュニケーションを向上する為にもセミナー Web を作る 現在 インターネットを利用している人は日本国内だけでも約 9,408 万人に上ると総務省が発表した 今やインターネット利用者は人口の約 80% にも拡大し 日本人の約 5 人に 4 人はインターネットを利用する時代となった そして 1 日のインターネット使用頻度は 新聞や折込みチラシを読む時間より長いというデータもでている また 自宅にいながらにして享受できるサービス消費は今後も高まると予想され ホームページを制作するということは 企業やお店にとって 新たな顧客獲得や商品 サービスの販売を増やすことを可能にし ビジネスチャンスにもつながるということとなり その必要性は高まってきている 図 1 インターネット利用者数 今回は http://www.w-frontier.com/software/download.html からをダウンロードして これを使いホームページを作っていく 3
2.CSS と HTML の役割分担私たちは文章を書く時 まず初めに 見出し を書きその後にそれについて書かれた 段落 を書くといった方法で書いている その時 見出しと段落を少し離して書き他の人が見ても分かりやすくデザインしている しかし コンピュータはそう簡単に識別できるものではない そこで それぞれの構成要素を その役割を表す目印を付けて示す HTML は文書の構造を示すもの ( 例えば この文章は見出し ) といったもののことで CSS は文書とは別に 文章の表現ルールを設定する仕組み ( 例えば 見出しのサイズを大きくする ) などといった 見栄えを設定するものがある 2-1 HTML の構造 HTML とは Hyper Text Markup Language の略で Web ページを作るときに使う記述言語のこと インターネット上で公開されているウェブページのほとんどは HTML で作成されている HTML は head 要素と body 要素で構成される head 要素には head とは文書自身に関する情報を納めた部分で 普通の文書でいえば表紙のようなものに相当する body が文書の本文になる これらを HTML で記述すると 図 2 HTML 図 2のようになる ( タイトルも文章も書いていない状態) 4
2-2 HTML タグとは HTML タグとは <>の記号に挟まれた特定の文字列 要素 をいう ページを作成するにはタグを文章の中に追加していくだけで出来上がる 基本的にタグは対になっており 開始タグ< 要素名 >と終了タグ< / + 要素名 >で記述する しかし いくつかの例外があり 終了タグを付けないものもある 例外 : <br> 改行 <hr> 水平線など 表 1 主なタグ一覧 html br h1~h6 head div ul title address li body meta ol p img strong span a th,td <HTML タグの使用例 > 5
図 3 HTML タグの表示見本 2-3 CSS CSS とは (Cascading Style Sheet) の略で 見栄えを記述する専用の言語のこと HTML だけではデザインが限られてくるので CSS を使い もっといい見栄えにする 例えば ウェブページがスクリーンに表示される際の色 サイズ レイアウトなどの表示スタイルや プリンタなどの機器で印刷 出力される際の出力スタイル 音声で読み上げられる際の再生スタイルなど ウェブページをどのようなスタイルで表示 出力 再生するかについて指定することができる CSS スタイルを指定する際には どの部分に対してどのスタイルをどのように適用するかを指定する それぞれの名称は セレクタ { プロパティ名 : 値 :} となる 2-3-1 セレクタとはセレクタとは書式の中タイルを適用する対象を示す部分のことを言う < 例 1> 基本の形 p { Color : red } セレクタプロパティ値 文字色を設定する color プロパティに red を指定して そのスタイルを p 要素に適用させる 6
セレクタに設定 ( フォントのサイズなど ) をすると画面に反映されるようになる セレクタには 全称セレクタ タイプセレクタ 子孫セレクタ 子供セレクタ クラスセレクタ IDセレクタなどたくさんの種類がある その中の IDセレクタとクラスセレクタを簡単に紹介する < 例 2> IDセレクタは その要素の中で 指定したID 属性の名前を持つものに対してスタイ ルを適用させる ここでは sample を使って説明する CSS に書く例 要素名 #sample { color : red ; } HTML に書く例 <h1 id = " sample " > ここに書く文字は赤になる </h1> <p id = " sample " > ここに書く文字は赤になる </p> <div id = " sample " > ここに書く文字は赤になる </div> CSS <style type="text/css"> 1h1#sample{ color: #FF0000; } HTML <body> 1<h1 id="sample"> ここに書く文字は赤になる </h1> 図 4 例 2 の表示 1CSS 内のh1 の sample という id に <body> 内のh1が赤色になるように指定すると body 内で sample を使うと <h1>~</h1> で囲まれている文字が赤色で表示される 7
< 例 3> クラスセレクタは その要素の中で 指定したクラス属性の値を持つ要素に対してスタイルを適用させる 同じ要素の種類であっても役割の異なる要素群に それぞれ異なったスタイルを適用できるようになる 文脈に応じて同じ要素の種類でも違ったデザインを施す場合に使う CSS に書く例要素名.sample { color : #33FF33 ; } HTML に書く例 <p class = " sample " > ここに書く文字は緑になる </p> CSS <style type="text/css"> 2p.sample{ color: #33FF33; } HTML <body> <p> 何か文章を書く </p> 2<p class="sample"> ここに書く文字は緑になる </p> 図 4-1 例 3の表示 2CSS 内のpの sample という class に緑のカラーを指定すると <p> の sample class で囲まれた文字が緑色に表示される 8
スタイルシートの種類にはさまざまなものがあり スタイルシートでフォントや余白を下の表のようにそれぞれ細かく指定することができる フォント フォントカラ フォント フォントサイズ フォントの太さ 斜体文字小型英文字行間隔 テキスト テキストの水平位置 単語禁則処理 行末の禁則処理 空白などの扱い 縦方向の位置 隠し文字 余白 余白 間隔 境界線 リスト リストのスタイル マークの位置 リストに画像を利用 レイアウト 回り込み 回り込み解除 配置のスタイル レイヤー順番 上下からの位置 内容領域の指定 背景 背景色 背景画像の指定 背景画像の並べ方 スクロール時の動作 背景の位置画面表示方法領域超過時 フィルタ半透明処理 フィルタ処理 特殊 スクロールバー カーソル スタイルシートの優先度 9
スタイルシートの編集は下の図を使い フォントのサイズや余白をセッティングしていく 図 5 スタイルシート編集 10
スタイルシートを使い 文字の大きさ 色を設定した 例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title> 文字の大きさや色 </title> <style type="text/css"> h1{ font-size:1.5em; color:#66aa66} </style> </head> <body> <h1> 文字の大きさ 色 </h1> 図 6 文字のスタイルの変更 11
配置 例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/tr/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title> 配置 </title> <style type="text/css"> h1{ font-size: 1.5em; color: #66AA66; text-align: center; } h2{ font-size:1em; color: #000000; } </style> </head> <body> <h1> 配置 </h1> <h2> 活水女子大学の画像 </h2> <hr wirth="50%"> <div style="text-align:left;"> <img src="../img01.jpg" border="0" alt="img01.jpg(17940 byte)" width="220" height="164"> </div> <div style="text-align:center;"> <img src="../img02.jpg" border="0" alt="img02.jpg(16019 byte)" width="220" height="164"> </div> <div style="text-align:right;"> <img src="../img03.jpg" border="0" alt="img03.jpg(16632 byte)" width="220" height="164"> </div> </body> </html> 12
<di にす iv する <d にす sty と画 div する yle 画像 st ると ="t が右 tyle 画像 tex 右に e=" 像が左 t-a くる "tex 左に ali る xt- にく gn: -al る :ri ign 図 ght n:l 7 t;" eft 1 配 > t;" 13 配置 > の種 <d にす種類 iv する類 st ると画 tyle 画像 e=" 像が真 tex 真ん xt- ん中 -ali にく ign くる n:center;">
3. 関連技術カウンター 1http://www.ac-counter.com/ からホームページに合うカウンターを見つける 2 カウンターの表示形式を選択し カウンター作成を押す 14
3 表示形式を決め作られたものを HTML に貼り付ける YESTERDAY の欄を削除し alt:~の名前を変えた 図 8 ソース 15
カレンダー :Google カレンダーにいき 1 他のカレンダーの覧から授業 カレンダー設定を押す 図 9 カレンダーの設定 2 色やサイズをカスタマイズします をクリックし 図 10 カレンダーのカスタマイズ 16
3 に囲まれているコードを HTML に貼り付ける 図 11 カレンダーの挿入 4 3 を実際に HTML に貼り付けたソース <iframe src="https://www.google.com/calendar/embed?src=0dtdbbhnu26eahpqcr2n suf0bc%40group.calendar.google.com&ctz=asia/tokyo" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe> 5 4 を <a> を使い リンクにして <img> でプリントスクリーンした画像を表示した <div id="karenda"> 授業 <p> <a href="https://www.google.com/calendar/embed?src=91vj1gs9ofs7vkcd27t 2mn3i9c%40group.calendar.google.com&ctz=Asia/Tokyo" style="border: 0" width="800" height="600" frameborder="0"><img src="img/ カレンダー画像.jpg" border="0" alt=" ここをクリック " width="550" height="350"> </p> </div> 17
図 12 ez-html に貼り付け 18
図 13 ホームページにカレンダーが表示される 19
4 W 蓄ネいがサそブソアチの we れを. ウ WWW 蓄積ネッいろいがどのサーバそのパブサーアパフアは桁チ用ののアパウ eb れたデを解釈ウェェブ W にしてトないろのよバーパソーバパットは桁違のソパッェブサーデー釈しェブブサによておなどろあようー ) ソコバーッチは II 違いソフッチブサーバータしてブササーよるおきどのあるうな 固コンーとチは IS いでフトチ用サーバータをて ーバーバーる情報 W ネッウェ役割固定ンはしては多といでといが多ソフバーーは配信文書バーーと報送 Web ットェブ割を定グウェて利くのいういう多種フトーの h 信す書やーにとは送信 b ブトワブサを持ローェブ利用の共うウうほ種類トウの働 htm するや画についは 信機ブラワーサーバ持つーバブサ用す共有ェブほど類公ウェ働き ml 文る働画像いて WW 機能をラウクをバーソフバルーバるたレンブサアパ公開さアを文書きをを配て WW を持ザなを通ーのフトル IP バーためンタサーパッされを使書やをす配置 W シ持っなど通じの中トウ P アーとめのタルーバッチれて使用や画する置しシスったどのて で一ェアアドとしソフルサーソチがておする画像な た状ステソフのク こ一番アかドレて機フトーバソフ多くり るこなど htm 状態テムフトライこれ番多かとスを機能トウバーフトくな アことどを ml 態で 2 におトウイアれら図多く使といをも能すウェー トをなっアパとがを保文書で表示 20 おいウェアアンの情 14 使わうともつする ア ウ出しってパッでき存し書自示しいてアのント情報 4 われと つパ 言ェブしているチをきるして自体してて情のこソフ報をれて単独ソコ言いブサている を使る てお体はテてく情報送ことフトを送信ている独でコンい換サーるが人使用おき テキれる送信 H トウ信するので動ンで換えーバーが 人気の用して キスる 信を HTM ェアするのは動作アパるとーでレンのアてい訪問ストを行 ML アのる役は A 作するパッとアで使ンタアパいる問者デー行う L 文の要割を Apa るウッチアパ使用タルパッるウ者のータコン文書や要求を果 ach ウェチを立パッチされルサーチにェブの要求タがンピや画に応果た he でェブサ立ちチはれてーバにはブサ求にが ピュ画像応じたす であサーち上はパていバーは サーに応ブュー像なじて あるーバ上げパソいるーに多ーバ応じラウタ どの イ アバーげておコン マおけくのーはて ウザまの情インアパー (W おくンをマイけるのアは 保ザがまた情報ンタパッ WW くとをウイクるシアパ多保存 ht た 報をターッチ WW と ウェクロシェパッ多く存さ tml
5. まとめ今まで Web では卒業研究の発表や卒業論文の閲覧ができる場所 ゼミを紹介する場所がなかったため 少しでもゼミに役に立つようなホームページを作りたいと思い実際に作ってみた ホームページを今まで作ったことがなく 初めは良く分からないことだらけで戸惑うことが多かったがやっていくうちに少しずつ感じがつかめてきた ここではごく一部しか紹介していないが まだまだいろいろな機能がある 今後は このホームページを後輩達が使い 不便な所やまだ使っていない機能を入れたりし皆が使いやすくするためどんどん進化させてくれるとうれしい 参考文献 URL HTML/XHTML& スタイルシートレッスンブック エビスコムソシム株式会社 2007 年 2011 年 12 月 14 日確認 HTML&XHTML&CSS 辞典 大藤幹株式会社秀和システム 2009 年 2011 年 12 月 14 日確認 ソフトウェア http://www.w-frontier.com/_software.html 2011 年 12 月 14 日確認 ホームページの必要性 http://www.esmilesys.co.jp/necessity.html 2011 年 12 月 14 日確認 CSS とは? CSS の基本 http://www.htmq.com/csskihon/001.shtml 2011 年 12 月 14 日確認 フリー素材 Blue-green http://bluegreen.jp/sozai/bg/line/index.html 2011 年 12 月 14 日確認 無料ホームページテンプレートの素材屋 http://hp-sozai.net/ 2011 年 12 月 14 日確認 テーブルの作成/HTML 基本講座 http://www.scollabo.com/banban/lectur/ht11.html 2011 年 12 月 14 日確認 無料アクセスカウンター http://www.ac-counter.com/ 2011 年 12 月 14 日確認 Google https://www.google.com/ 2011 年 12 月 14 日確認 CSS Happy Life ZERO http://zero.css-happylife.com/selectors/id_selectors.shtml 2011 年 12 月 14 日確認 21