コンピュータ中級B ～Javaプログラミング～第3回コンピュータと情報をやりとりするには?

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 5 インライン要素 (1) ブロック要素の中に書きブロック要素の内容を装飾したり追加的な意味を与えるためのタグ強調, 改行, リンク, etc. この種類のタグは前後に改行はなしインライン要素 ( 強調 ) インライン要素 ( リンク )

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 8 図や絵を入れるには?( タグ ) 図や絵を入れるタグタグ名 : <img /> 文章を囲む必要のないタグ引数その 1: src 値その 1: 貼り付ける画像のファイル名引数その 2: alt 値その 2: 画像ファイルの内容の説明何らかの事情で画像が表示されなかったときなどに代わりに表示される言葉 <img src="xxxx" alt="yyyy" /> 画像の内容説明貼り付ける画像のファイルのありか

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 12 色の設定図を描くには?(3) ツールバーの選択ツールを選択し描いた図形を選択図形の線の色の設定はスタイルウィンドウのラインと図形ボタンを押して設定図形の塗りつぶしはスタイルウィンドウのフィルボタンラインと図形線の色の設定フィル塗りつぶしの色の設定

図をファイルに保存図を描くには?(4) メニューバーのファイル書き出しをクリックし拡張子として.png をつけてファイル名を入力ファイル名は必ず半角英数でスペースを入れずにつけることファイル形式の欄が PNG 形式になっていることを確認場所の欄で HTML ファイルと同じフォルダを選択 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 13

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 16 CSS Cascading Style Sheet の略主に HTML 文書で利用するスタイルシートの規格最近の推奨本来の目的 HTMLファイル : 文書の構造 ( 見出し, 段落, 表などの情報 ) を書くもの現在 HTML の文法上の規則として見栄えに関するタグを排除する方向見栄え ( 色や文字の形大きさなど ) の情報は? スタイルシートに書くべき

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 17 スタイルシートを使うと...(1) 複数の Web ページで簡単に見栄えを統一可能もしスタイルシートがなければ... 1 つ 1 つの HTML ファイルで見栄えの情報を指定 HTML ファイルが多くなると面倒見栄えを変えたいときスタイルシートは 1 つ作ればよい全ての HTML ファイルを変更スタイルシートだけ変更すればよい

スタイルシートを使うと...(2) スタイルシートでしかない細かいデザインが可能様々な種類のコンピュータにも対応可能小さな画面や性能の低いコンピュータ正しい文法でタグを書いておくとそれなりに Web ページが表示される文法を守っていないときちんと表示されないことも視覚などの障害を持つ人が利用するコンピュータ正しい文法でタグを書いておくと画面の情報を伝える補助ツールはきちんと情報を伝えてくれる文法を守っていないと補助ツールがきちんと情報を伝えられず Web ページを使う人が混乱することも Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 18

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 19 内部スタイルシートスタイルシートの使い方 HTML ファイル中にスタイルシートを記述外部スタイルシートスタイルシートの利点があまり生かせない HTML ファイルとは別のファイルにスタイルシートを記述し HTML ファイルにはスタイルシートのファイル名のみを書く <head> ~ </head> の間に書き込む <link rel="stylesheet" href="css ファイル名 " type="text/css" /> スペースを入れる位置を間違えないこと ( 入れ忘れないこと )

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 20 スタイルシートの書き方 ( 基本 ) テキストエディタ (Jeditなど) で書く拡張子.css のファイル拡張子.css をつけるのを忘れないことセレクタ { プロパティ : 値 ; セレクタ : スタイルシートを適用する対象例えばタグ名などプロパティ : そのタグの何を設定するか例えば文字の色や大きさ背景色など値 : プロパティに設定するもの例えば文字の色の名前や大きさの数など { の後の改行やプロパティの前のスペースはあってもなくてもよいプロパティの後の文字は : ( コロン ) 値の後の文字は ; ( セミコロン )

セレクタの書き方 ( その 1 例 -) HTML 文書 <h1> サンプル </h1> <p> コンピュータの授業 </p> CSSファイル h1 { border: solid 6px #009900; color: #000099; p { color: #ffff00; background-color: #000000; ブラウザでの表示 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 22

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 23 セレクタの書き方 ( その 2) タグ名. 分類名で指定 p.comment { プロパティ : 値 ;... strong.more { プロパティ : 値 ;... CSS で指定されたタグのうち class という属性で. 以下の名前が指定されているもののみに適用 class: タグを分類しその分類名つけるための属性 1 つの HTML 文書中で複数のタグに対して同じ名前をつけてもかまわない < タグ名 class=" 分類名 ">~</ タグ名 > のように使う ( 大文字と小文字が区別される ) どのタグでも利用できる

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 24 セレクタの書き方 ( その 2 例 -) HTML 文書 <p> コンピュータの授業 </p> <p class="comment"> コンピュータの授業 </p> <p> <strong> コンピュータの授業 </strong> </p> <p> <strong class="comment"> コンピュータの授業 </strong> </p> CSSファイル p.comment { color: #0000ff; strong.comment { color: #ff0000; background-color: #ffcccc; ブラウザでの表示

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, 2010, All rights reserved. 25 セレクタの書き方 ( その 2 例 (1)-) HTML 文書 <p> コンピュータの授業 </p> <p class="comment"> コンピュータの授業 </p> <p> <strong> コンピュータの授業 </strong> </p> <p> <strong class="comment"> コンピュータの授業 </strong> </p> CSSファイル p.comment { color: #0000ff; strong.comment { color: #ff0000; background-color: #ffcccc; HTML ファイルとスタイルシートで一致している必要! ブラウザでの表示

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 26 セレクタの書き方 ( その 3 例 -) タグ名. 分類名のタグ名は省略可能省略した場合は任意のタグで class=" 分類名 " をつけることで利用可能 HTML 文書 <p class="color1"> サンプル </p> <p> コンピュータの授業 <strong class="color1">~スタイルシート~</strong> </p> CSSファイル.color1 { color: #ff0000; ブラウザでの表示

セレクタの名前の注意 1つのCSSファイルの中に同じ名前のセレクタがあってはならない 1 つのファイルの中に同じ名前のセレクタは作らないこと h1 { background-color: #ff0000; color: #ffffff;. h1 { border-color: #0000ff; border-style: solid; border-width: 5px; Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 27

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 28 プロパティと値 1 つのセレクタの中にプロパティと値のセットはいくつ書いても OK h1 { background-color: #ff0000; color: #ffffff; border-color: #0000ff; border-style: solid; border-width: 5px; text-align: center; 背景色の設定文字の色の設定枠線の色の設定枠線のスタイルの設定枠線の太さの設定中央揃えの設定

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 29 やってみよう!( 手順 1) スタイルシートのファイルを作る (Jedit で作る ) 拡張子.css ファイルの名前は半角英数でつけることファイルの名前にスペースを入れないこと HTMLファイルと同じ場所に保存 Jedit の内容は何もなくて良いのでそのまま保存

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 30 HTML ファイルの中でやってみよう!( 手順 2) <head> ~ </head> に <link rel="stylesheet" href="css ファイル名 " type="text/css" /> を書く ( スペースの場所に注意 ) CSS ファイル名の部分はスタイルシートのファイル名を拡張子つきで書く

color 文字の色プロパティ - 色と背景 (1)- 値として色の名前を指定 CSS ファイル body { color: black; background-color: skyblue; h1 { color: white; background-color: navy; p { color: yellow; background-color: black; background-color 文字の背景色値として色の名前を指定 HTML ファイル <h1> サンプル </h1> <p> コンピュータの授業 </p> Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 31

background-image タグの背景画像プロパティ - 色と背景 (2)- 値として url(" 画像のファイル名 ") を指定 background-repeat タグの背景画像を繰り返して並べるか並べないか値として以下のいずれかを指定する repeat: 縦横に並べる repeat-x: 横方向のみ並べる repeat-y: 縦方向のみ並べる no-repeat: 並べない Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 32

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 33 プロパティ - 色と背景 (3)- CSS ファイル body { background-image: url("image.png"); background-repeat: repeat; HTML ファイル <h1> サンプル </h1> <p> コンピュータの授業 </p>

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, 2010, All rights reserved. 34 プロパティ - リンク - a:link { color: orange; a:active { color: red; a:visited { color: green; a:hover { color: white; background-color: red; セレクタの意味 a:link: まだ訪れたことのないページへのリンクに対する設定 a:active: リンク上でマウスボタンを押したときの設定 a:visited: 過去に訪れたことのあるページへのリンクに対する設定 a:hover: リンク上にマウスカーソルを置いたときの設定 color 以外に background-color なども設定可能

font-size プロパティ - 文字の形大きさ (1)- 文字の大きさを指定値として通常の大きさからどれだけ大きいか / 小さいかを % で書く ( 通常の大きさは 100%) HTML ファイル <p class="small"> コンピュータ </p> <p class="middle"> コンピュータ </p> <p class="large"> コンピュータ </p> CSS ファイル p.small{ font-size: 80%; p.middle { font-size: 100%; p.large { font-size: 150%; Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 35

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 36 プロパティ - 文字の形大きさ (2)- font-weight 文字の太さを指定値として 100, 200, 300, 400, 500, 600, 700, 800, 900 のどれかを指定 ( 通常は 400) HTML ファイル <p class="thin"> コンピュータ </p> <p class="mid"> コンピュータ </p> <p class="thick"> コンピュータ </p> CSS ファイル p.thin{ font-weight: 200; p.mid { font-weight: 400; p.thick { font-weight: 600;

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 37 プロパティ - 文字の形大きさ (3)- font-style 文字を斜体にするかどうかを指定値として normal italic oblique のどれかを指定 ( 通常は normal) HTML ファイル <p class="normal"> コンピュータ </p> <p class="italic"> コンピュータ </p> <p class="oblique"> コンピュータ </p> CSS ファイル p.normal{ font-style: normal; p.italic { font-style: italic; p.oblique { font-style: oblique;

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 38 text-align プロパティ - 文章 (1)- 文章の行をどの位置に揃えるかを指定値として left ( 左揃え ) center ( 中央揃え ) right ( 右揃え ) justify ( 両端揃え ) のどれかを指定 HTML ファイル <p class="left"> コンピュータ </p> <p class="center"> コンピュータ </p> <p class="right"> コンピュータ </p> CSS ファイル p.left{ text-align: left; p.center { text-align: center; p.right { text-align: right;

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 39 text-decoration プロパティ - 文章 (2)- 文字に下線上線取り消し線を付けたり点滅させるかどうかを指定値として underline ( 下線 ) overline ( 上線 ) line-through ( 取り消し線 ) のどれかを指定 HTML ファイル <p class="under"> コンピュータ </p> <p class="over"> コンピュータ </p> <p class="through"> コンピュータ </p> CSS ファイル p.under { text-decoration: underline; p.over { text-decoration: overline; p.through { text-decoration: line-through

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 40 プロパティ - 枠をつける (1)- border-color: 枠の色を指定 ( 値は色の名前 ) border-width: 枠の太さを指定値は単位を px ( ピクセル ) または em ( 文字数 ) として数値で指定 border-style: 枠線の形式を指定値は none hidden solid double groove ridge inset outset dashed dotted のどれかを指定

プロパティ - 枠をつける (2)- CSS ファイル p.solid { border-style: solid; border-width: 3px; border-color: red; p.dotted { border-style: dotted; border-width: 1em; border-color: green; p.double { border-style: double; border-width: 5px; border-color: blue; HTML ファイル <p class="solid"> コンピュータ </p> <p class="dotted"> コンピュータ </p> <p class="double"> コンピュータ </p> Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 41

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 42 プロパティ - 枠をつける (3)- border-***-style border-***-width border-***-color でもっと細かく枠をつけることも可能 *** の部分には以下のいずれかが入る top : 枠の上側の線の設定 bottom : 枠の下側の線の設定 left : 枠の左側の線の設定 right : 枠の右側の線の設定

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 43 CSS ファイル p.solid { border-left-style: solid; border-left-width: 10px; border-left-color: red; p.dashed { border-bottom-style: dashed; border-bottom-width: 5px; border-bottom-color: green; p.double { border-top-style: double; border-top-width: 5px; border-top-color: blue; border-bottom-style: dotted; border-bottom-width: 8px; border-bottom-color: purple; プロパティ - 枠をつける (4)- HTML ファイル <p class="solid"> コンピュータ </p> <p class="dashed"> コンピュータ </p> <p class="double"> コンピュータ </p>

float プロパティ - 表示と配置 (1)- 文章の位置と図や別の文章の位置 ( 回り込み ) を調整ページ内にメニューを作るときなどに利用値は以下のどれかを指定 left : 図を左側に配置し文章を図の右側に配置 right : 図を右側に配置し文章を図の左側に配置 none : 図の左右に文章は配置せず上か下かに配置 clear float で設定した回り込みを解除値は float で設定したものを指定または both で left も right も解除 Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 44

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 45 HTML ファイルプロパティ - 表示と配置 (2)- <div class="menu"> <h1> メニュー </h1> <ul> <li><a href="intro.html"> はじめに </a></li> <li><a href="html.html">html の書き方 </a></li> <li><a href="stylesheet.html"> スタイルシートの書き方 <a></li> </ul> </div> <div class="contents"> <h1> はじめに </h1> <p> 本日は HTML の書き方の基本ですタグを使って書きます </p> </div> <div class="footer"> <hr /> <p>copyright information</p> </div> CSS ファイル div.menu { float: left; width: 20%; div.contents { float: right; width: 80%; div.footer { clear: both;

list-style-type プロパティ - 箇条書き (1)- 箇条書きの項目の印 ( マーカー ) の設定値は以下のどれかを指定 ( ただしこれは一部のみ ) none : マーカーを表示しない disc : マーカーを塗りつぶされた丸にする square : マーカーを四角形にする upper-roman : マーカーをローマ数字の大文字にする decimal : マーカーを算用数字にする lower-latin, lower-alpha : マーカーをアルファベットの小文字にする他にもいろいろあるので調べて使ってみよう Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 46

プロパティ - 箇条書き (2)- CSS ファイル ul.alpha { list-style-type: lower-alpha; ul.square { list-style-type: square; HTML ファイル <ul class="alpha"> <li> 項目 1</li> <li> 項目 2</li> <li> 項目 3</li> </ul> <ul class="square"> <li> 項目 1</li> <li> 項目 2</li> <li> 項目 3</li> </ul> Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 47

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 48 list-style-image プロパティ - 箇条書き (3)- 箇条書きの項目の印 ( マーカー ) に画像を使う値は url(" 画像ファイル名 ") で指定 CSS ファイル ul.image { list-style-image: url("item.png"); HTML ファイル <ul class="image"> <li> 項目 1</li> <li> 項目 2</li> <li> 項目 3</li> </ul>

border-collapse プロパティ - 表 (1)- テーブルのセル (1 つ 1 つのマス ) の表示形式を設定値は以下のどれかを指定 collapse : セルとセルの境界線を境界上に重ねて表示 separate : セルとセルの境界線を別々に表示 border-width や border-style border-color も一緒に指定することも可能ただし表の外側の枠のみに適用 1 つ 1 つのセルに適用したい場合は <th> や <td> のタグにもそれぞれスタイルシートを適用するように書く Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 49

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 50 CSS ファイル.tbsample1 { border-collapse: collapse; border-width: 3px; border-style: solid; border-color: black; th { border-width: 3px; border-style: solid; border-color: black; td { border-width: 3px; border-style: solid; border-color: black; プロパティ - 表 (2)- HTML ファイル <table class="tbsample1"> <tr><th> コンピュータ IIC</th> <th> コンピュータ IIC</th> <th> コンピュータ IIC</th> </tr> <tr><td> 表のサンプル </td> <td> 表のサンプル </td> <td> 表のサンプル </td> </tr> </table> 上側 : collapse, 下側 : separate

Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 51 プロパティ - 表 (3)- CSS ファイル.tbsample { border-collapse: separate; border-width: 8px; border-style: dotted; border-color: red;.cellsample { border-width: 3px; border-style: dashed; border-color: blue; HTML ファイル <table class="tbsample"> <tr><th class="cellsample"> コンピュータ IIC</th> <th class="cellsample"> コンピュータ IIC</th> <th class="cellsample"> コンピュータ IIC</th> </tr> <tr><td class="cellsample"> 表のサンプル </td> <td class="cellsample"> 表のサンプル </td> <td class="cellsample"> 表のサンプル </td> </tr> </table>

コンピュータ中級B ～Javaプログラミング～ 第3回 コンピュータと情報をやりとりするには?

コンピュータ中級B ～Javaプログラミング～第3回コンピュータと情報をやりとりするには?