<4D F736F F D208AAE90AC94C B2985F814095B68FCD2E646F6378>

Size: px

Start display at page:

Download "<4D F736F F D208AAE90AC94C B2985F814095B68FCD2E646F6378>"

ぜんすけけいれい
6 years ago
Views:

1 2011 年度卒業論文セミナーウェブの実装文学部人間関係学科 4 年 A クラス学籍番号髙崎陽菜 1

2 目次 1. はじめに 2.CSS と HTML の役割分担 2-1 HTMLの構造 2-2 HTMLタグとは 2-3 CSSとはセレクタとは 3. 関連技術 4. ウェブの仕組み 5. まとめ 2

1. はじめに今までの Web では卒業研究の発表や卒業論文の閲覧ができる場所ゼミを紹介する場所などがなかったためセミナー Web を作ることで少しでも便利になるようにゼミのスケジュール掲示板ブログも付け加え更にゼミ内のコミュニケーションを向上する為にもセミナー Web を作る現在インターネットを利用している人は日本国内だけでも約 9,408 万人に上ると総務省が発表した

3 1. はじめに今までの Web では卒業研究の発表や卒業論文の閲覧ができる場所ゼミを紹介する場所などがなかったためセミナー Web を作ることで少しでも便利になるようにゼミのスケジュール掲示板ブログも付け加え更にゼミ内のコミュニケーションを向上する為にもセミナー Web を作る現在インターネットを利用している人は日本国内だけでも約 9,408 万人に上ると総務省が発表した今やインターネット利用者は人口の約 80% にも拡大し日本人の約 5 人に 4 人はインターネットを利用する時代となったそして 1 日のインターネット使用頻度は新聞や折込みチラシを読む時間より長いというデータもでているまた自宅にいながらにして享受できるサービス消費は今後も高まると予想されホームページを制作するということは企業やお店にとって新たな顧客獲得や商品サービスの販売を増やすことを可能にしビジネスチャンスにもつながるということとなりその必要性は高まってきている図 1 インターネット利用者数今回はからをダウンロードしてこれを使いホームページを作っていく 3

4 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

5 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

6 図 3 HTML タグの表示見本 2-3 CSS CSS とは (Cascading Style Sheet) の略で見栄えを記述する専用の言語のこと HTML だけではデザインが限られてくるので CSS を使いもっといい見栄えにする例えばウェブページがスクリーンに表示される際の色サイズレイアウトなどの表示スタイルやプリンタなどの機器で印刷出力される際の出力スタイル音声で読み上げられる際の再生スタイルなどウェブページをどのようなスタイルで表示出力再生するかについて指定することができる CSS スタイルを指定する際にはどの部分に対してどのスタイルをどのように適用するかを指定するそれぞれの名称はセレクタ { プロパティ名 : 値 :} となるセレクタとはセレクタとは書式の中タイルを適用する対象を示す部分のことを言う < 例 1> 基本の形 p { Color : red } セレクタプロパティ値文字色を設定する color プロパティに red を指定してそのスタイルを p 要素に適用させる 6

7 セレクタに設定 ( フォントのサイズなど ) をすると画面に反映されるようになるセレクタには全称セレクタタイプセレクタ子孫セレクタ子供セレクタクラスセレクタ 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 に書く例要素名.

8 < 例 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 スタイルシートの種類にはさまざまなものがありスタイルシートでフォントや余白を下の表のようにそれぞれ細かく指定することができるフォントフォントカラフォントフォントサイズフォントの太さ斜体文字小型英文字行間隔テキストテキストの水平位置単語禁則処理行末の禁則処理空白などの扱い縦方向の位置隠し文字余白余白間隔境界線リストリストのスタイルマークの位置リストに画像を利用レイアウト回り込み回り込み解除配置のスタイルレイヤー順番上下からの位置内容領域の指定背景背景色背景画像の指定背景画像の並べ方スクロール時の動作背景の位置画面表示方法領域超過時フィルタ半透明処理フィルタ処理特殊スクロールバーカーソルスタイルシートの優先度 9

10 スタイルシートの編集は下の図を使いフォントのサイズや余白をセッティングしていく図 5 スタイルシート編集 10

$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.$

11 スタイルシートを使い文字の大きさ色を設定した例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <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

12 配置例 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <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

13 <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;">

14 3. 関連技術カウンター 1http:// からホームページに合うカウンターを見つける 2 カウンターの表示形式を選択しカウンター作成を押す 14

15 3 表示形式を決め作られたものを HTML に貼り付ける YESTERDAY の欄を削除し alt:~の名前を変えた図 8 ソース 15

16 カレンダー :Google カレンダーにいき 1 他のカレンダーの覧から授業カレンダー設定を押す図 9 カレンダーの設定 2 色やサイズをカスタマイズしますをクリックし図 10 カレンダーのカスタマイズ 16

3 に囲まれているコードを HTML に貼り付ける図 11 カレンダーの挿入 4 3 を実際に HTML に貼り付けたソース <iframe src="https://www.google.

17 3 に囲まれているコードを HTML に貼り付ける図 11 カレンダーの挿入 4 3 を実際に HTML に貼り付けたソース <iframe src=" 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=" 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

18 図 12 ez-html に貼り付け 18

19 図 13 ホームページにカレンダーが表示される 19

20 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

21 5. まとめ今まで Web では卒業研究の発表や卒業論文の閲覧ができる場所ゼミを紹介する場所がなかったため少しでもゼミに役に立つようなホームページを作りたいと思い実際に作ってみたホームページを今まで作ったことがなく初めは良く分からないことだらけで戸惑うことが多かったがやっていくうちに少しずつ感じがつかめてきたここではごく一部しか紹介していないがまだまだいろいろな機能がある今後はこのホームページを後輩達が使い不便な所やまだ使っていない機能を入れたりし皆が使いやすくするためどんどん進化させてくれるとうれしい参考文献 URL HTML/XHTML& スタイルシートレッスンブックエビスコムソシム株式会社 2007 年 2011 年 12 月 14 日確認 HTML&XHTML&CSS 辞典大藤幹株式会社秀和システム 2009 年 2011 年 12 月 14 日確認ソフトウェア年 12 月 14 日確認ホームページの必要性年 12 月 14 日確認 CSS とは? CSS の基本年 12 月 14 日確認フリー素材 Blue-green 年 12 月 14 日確認無料ホームページテンプレートの素材屋年 12 月 14 日確認テーブルの作成/HTML 基本講座年 12 月 14 日確認無料アクセスカウンター年 12 月 14 日確認 Google 年 12 月 14 日確認 CSS Happy Life ZERO 年 12 月 14 日確認 21

Microsoft PowerPoint - ＣＳＳ（Cascading Style Sheets）の基本.pptx

Microsoft PowerPoint - ＣＳＳ（Cascading Style Sheets）の基本.pptx CSS(Cascading Style Sheets) の基本 1. CSSの基本的な考え方は HTMLの構造を表す要素 ( タグ ) に対しスタイルを定義するというもの 2. CSSではセレクタプロパティ値の3つを組み合わせてスタイルを設定する 3. セレクタは ,, や要素などコンテンツ内のどの要素にスタイルを適用するかを指定する 4. セレクタの次の