! "#$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ

Similar documents
6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1

6 2 1

6 2 1

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID

untitled

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML

Web

27短01研01斉藤.indd


JIS Web Web JIS JIS 5.1.a 5.1.b 5.2.a 5.2.b 5.2.c 5.2.d 5.2.e 5.2.f 5.2.g 5.3.a 5.3.b 5.3.c 5.3.d 5.3.e 5.3.f 5.3.g 5.3.h 5.3.i 5.4.a 5.4.b 5.4.c 5.4.

HTML HTML HTML

経営論集2011_07_小松先生.indd

untitled

Network Computing の基礎

SVG資料第6回目(その3) SVGとHTMLの間でデータを交換する

■新聞記事


css.pdf

( ) g 900,000 2,000,000 5,000,000 2,200,000 1,000,000 1,500, ,000 2,500,000 1,000, , , , , , ,000 2,000,000

( ) 1,771,139 54, , ,185, , , , ,000, , , , , ,000 1,000, , , ,000


r6.dvi

07_経営論集2010 小松先生.indd

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63>

2 2 1 (LOOKUP ) VLOOKUP(HLOOKUP) JR () 1 2 (S101.xlsx() 1 3 (1) C2) (2) (C3) (3) 2 (C4,C5) (4) (C6,C7) 1.1 (C6) C5 4 C6 C

CSS

立ち読みページ

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top

Microsoft Word - ’V‘é−gŁš.doc

pdf

目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11


( š ) œ 525, , , , ,000 85, , ,810 70,294 4,542,050 18,804,052 () 178,710 1,385, , ,792 72,547 80,366

PowerPoint Presentation

PowerPoint プレゼンテーション

Microsoft Word - −C−…−gŁš.doc

untitled

年刊EDP 2003

2 / 16 HTML=HyperText Markup Language( ハイパーテキストマークアップランゲージ ) ブラウザ (Chrome) での表示 ソースの表示 ( メモ帳 /TeraPad) HTML <========= =========>

r6.dvi

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig

š ( š ) (6) 11,310, (3) 34,146, (2) 3,284, (1) 1,583, (1) 6,924, (1) 1,549, (3) 15,2

1

Taro-CSS.jtd

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out

HTML文書の作成

目論見書

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ

websample 1 2 websample index.html

( )

ohp.mgp

š ( š ) ,400, , ,893, ,743, ,893, ,893, ,658,475 35,884,803 2,167,037 7,189,060 55,417,575 81,08


untitled

CSS CSS


Webデザイン論

首都圏チェーンストアチラシ出稿状況調査 リニューアル 2014 年 6 Sample 月版版

š ( š ) 7,930,123,759 7,783,750, ,887, ,887 3,800,369 2,504,646,039 i 200,000,000 1,697,600, ,316.63fl 306,200,

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個

ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web

m_sotsuron

Microsoft Word - 教材WebページのHTML5及びCSS3の解説

官報(号外第196号)

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り

インターネット社会の発展

Microsoft PowerPoint - homepage1910.ppt - 互換モード


Microsoft PowerPoint - css-3days 互換モード

XXXXXX XXXXXXXXXXXXXXXX

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で

Microsoft PowerPoint - css-3days 互換モード

演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習 1 演習 2 Z: Web データ管

johokiso-webpage-large

Microsoft PowerPoint - CSS(Cascading Style Sheets)の基本.pptx

< F31332D8B638E FDA8DD E F1292E6A>

Color Change

Ÿ ( ) ,166,466 18,586,390 85,580,076 88,457,360 (31) 1,750,000 83,830,000 5,000,000 78,830, ,388,808 24,568, ,480 6,507,1

untitled

有価証券報告書

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は

untitled

ƒsnsªf$o;ª ±Ž vf$o; Uûâ éf$o;ê &fgxo2nvô¾c"gõ /R=o^Ô¾C"GÕ ±Ž v Ô)"GÕâésâf$o; évâöá:o2øüîãá ãòá ùô f$ o;ê u%,âô G Ô Õ HÎ ÔµnZÕ Ñì ÔD[n Õ bg(fååøô Õ½ Š3

Ÿ ( ) Ÿ 7,488,161,218 7,396,414,506 91,708,605 38,107 4,376,047 2,037,557,517 1,000,000 i 200,000,000 1,697,600, ,316.63fl 306,200,000 14

HTML5 CSS

eil _4.ppt

1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する)

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT

ÊÈÌÊ fêôöôï Ö É É ~ Œ ~ Œ ÈÍÉÆÍ s Ê É Â Ê ÉÉÆÍÇÉ Ê Ê É Ê ÈÍv ÈÍ É ÈÍ Â ÇÍ vèé Ê Ê É ÈÉËÈÆ ÊÌÉ Ê~Æ Ê Ê ÈÍfÆ Ê ÊÉÆÉÊ Ê Ê ÈÍ Ê ÈÉËÈÆ

Web情報システム 第1章~第5章

ch31.dvi

š ( š ) ,148,770 3,147,082 1, ,260 1,688 1,688 10,850 10, , ,

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動

Ÿ ( Ÿ ) Ÿ šœš 100,000 10,000,000 10,000,000 3,250,000 1,000,000 24,350,000 5,000,000 2,500,000 1,200,000 1,000,000 2,960,000 7,000,000 1,500,000 2,200

untitled

untitled

Microsoft PowerPoint - css-3days.ppt [互換モード]

Transcription:

6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML

! "#$%&'()*+,-. /0123456789:;<=>?@ABCDEFGHIJKLMNOPQR STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕ Ö ØÙ ÚÛÜÝÞßàáâãäå æçèéêëìíîïðñòóôõö øùúûüýþÿd,c* Z e f[g ab Y hijkl!m"#n$%op&q'()r+-.s/t012 3uvwx4y5z{67 89:; <=>? @AB}C~D ƒ EFGHˆI ŠJKLM NOP QRSTUVWX \]^_`Œ Ž š œ žÿ 6 2 1

6 3 1.1 HTML Web HTML(Hyper Text Markup Language) ( ) html htm HTML HTML5 <!doctype html> <html> <head> <meta charset="utf-8"> <title>takahagi </title> <!-- <link rel="stylesheet" href="sample.css"> --> </head> <body> <h1>takahagi </h1> <hr>

<h2> </h2> <p>2008 4 20 </p> <p> </p> <p> </p> <h2> </h2> <p>2010 8 </p> <h3> </h3> <p>4 </p> <ul> <li> <li> <li> <li> </ul> <h3> </h3> <p> </p> <p> </p> <h3> </h3> <p> </p> <p> </p> <hr> 6 4

<table style="margin-left:auto; margin-right:auto;"> <caption> </caption> <tr> <th> </th> <th> </th> <th> </th> <th> </th> </tr> <tr> <th>2012</th> <td>128</td> <td>23</td> <td>38</td> </tr> <tr> <th>2013</th> <td>158</td> <td>43</td> <td>52</td> </tr> <tr> <th>2014</th> <td>98</td> <td>18</td> <td>25</td> </tr> </table> <hr> 6 5 <div style="text-align:center;"> <img src="im_explicit_k.png" alt=" " style="width:500px;"><br> <caption> </caption> </div> <p> <a href="http://www.senshu-u.ac.jp/" > </a> </p> <p> )</p> <p> thc0456@senshu-u.jp</p> </body> </html>

6 6 1 HTML 1 HTML <h1> Markup Language HTML 1 <p> </p> 1 HTML <> <aaaa> </aaaa> aaaa <aaaa> </aaaa> <p>... </p> ( ) <h1>... </h1> 1 Web HTML (L) (V) 1 1 (L) (V) EUC-JP SHIFT-JIS utf-8 1 <!DOCTYPE html> 4 <meta charset= UTF-8 > <html> </html> web

6 7 1.2 Web Web ( ) Web Web Web web 13

6 8 2 Web ( ) 2.1 2.1.1 ( ) Web Web webfiles (1) (2) (3) webfiles

2.2 6 9 Web (index.html( ) index.html, sample.css im explicit k.png IE index.htm l ( 2.3 index.html Web Mery *1 Mery webfiles index.html Web <a> ( / ) ) *1 Mery PC Mery

6 10 HTML ( Enter ) 1 < > & 3 2.4 Web IE ) <title>takahagi </title> <title> </title> <title> </title> Ctrl + z Undo) 2.5 2.4 2.5.1 (Heading) <h1> </h1>

<h1> </h1> 1 <h2> </h2> 2 <h6> </h6> 6 6 11 <h1> </h1> <h2> </h2> h 2.5.2 (Paragraph) <p> </p> 1 </p> <p> <p> </p> <br> <br> <p> <p>,</p> 2.6 <hr>

2.7 6 12 Web Web Web 10.3 ) Q12 Q12 ) <a href="http://www.senshu-u.ac.jp/" > </a> http://www.senshu-u.ac.jp/ URL a anchor Web (1) <a href= ></a> (2) Web (3) URL( http://www.senshu-u.ac.jp/libif/isc.html Ctrl C ( (4) HTML (Mery) (5) Ctrl + V ( (6) <a href= http://www...jp > </a> 2.8 a (Anchor) </a> href a (attribute) a (href) = ( ( Shift + 2 ) href URL

3 6 13 index.html (1) a b webfiles c index.html UTF-8(BOM ) (S) (2) a b c webfiles d index.html OK 3.1 (Mery) index.html F5 UTF-8 UTF-8(BOM )

6 14 4 HTML 4.1 HTML HTML HTML 2 HTML HTML 2

6 15 1 HTML & & > > < < " c 5 html HTML 5.1 < > < > 1 5.2 HTML <! >

<!-- --> 6 16 5.3 <ol> <li> </li> <li> 2 </li> <li> </li> </ol> <ul> <li> </li> <li> 2 </li> <li> </li> </ul>

6 17 5.4 <table> <table> <tr> </tr>: <th> </th>: <td> </td>: 2 2012 128 23 38 2013 158 43 52 2014 98 18 25 2 style= margin-left:auto; margin-right:auto; <caption> <table style="margin-left:auto; margin-right:auto;"> <caption> </caption> <tr> <th> </th> <th> </th> <th> </th> <th> </th> </tr> <tr> <th>2012</th> <td>128</td> <td>23</td> <td>38</td> </tr> <tr> <th>2013</th> <td>158</td> <td>43</td> <td>52</td> </tr> <tr> <th>2014</th> <td>98</td> <td>18</td> <td>25</td> </tr> </table>

6 18 6 6.1 Web 3 GIF 256 (GIF ) gif PNG GIF GIF GIF JPEG GIF 100% jpg

6.2 6 19 SmartArt (1) (2) (3) SmartArt (4) SmartArt :Web:SmartArt Excel (1) Excel (2) (3) :Web:Excel png webfiles Web (1) (2) (3) webfiles :Web: png

6.3 (mp4 6 20 (mp4 (1) (2) (3) (4) MPEG4- (*.mp4). webfiles html <video width="500" height="450" controls> <source src="videofile.mp4" type="video/mp4"> </video>

6 21 6.4 GET webfiles 6.5 <img> im explicit k.png <div style="text-align:center;"> <img src="im_explicit_k.png" alt=" " style="width:500px;"><br> <caption> </caption> </div> src= FTP Windows UNIX(Linux) OS UNIX alt=

6 22 <div style= text-align:center; > <div> style= text-align:center; style= width:500px;

6 23 7 (CSS) Web CSS Cascading Style Sheets) 7.1 index.html 6 8 <!-- <link rel="stylesheet" href="sample.css" type="text/css" /> --> <!-- --> ( F5 sample.css (<body>) <h1> 7.2 <body> sample.css body{ background-color: lightyellow; }

6 24 3 aqua gray navy silver black green olive teal blue lime purple white fuchsia maroon red yellow body body background-color : lightyellow ; 3 #ffffe0 # 16 6 body{ background-color: #ffffe0; } lightyellow body{ background-image: url("abc.gif") }

6 25 7.3 ( ) <h1>( 1) h1 { font-size: 2em; color: navy; background-color: lightpink; padding: 1em ; text-align:center; } font-size: 2em; em 2em 2 ( ) color: navy; background-color: lightpink; <h1> padding: 1em ; <h1> margin: text-align:center; text-align left right justify <h2>

6 26 7.4 ( ) #emp { font-size: 1.2em; color: red; } emp ID HTML <span id="emp"> </span>. <span> <div> <div> #torikesi { text-decoration:line-through; } <span id="torikesi"> </span>. text-decoration underline overline emp (underline) torikesi

6 27 7.5 ( ) table{ border-collapse: collapse; } th{ border: thin solid black; padding: 0.25em 0.5em 0.25em 0.5em ; text-align: center; background-color: #b0eeb0; } td{ border: thin solid black; padding: 0.25em 0.5em 0.25em 0.5em ; text-align: right; } border-collapse: collapse; collapse border: thin solid black; thin( solid black padding: 0.25em 0.5em 0.25em 0.5em ;

6 28 8 8.1 URL? 8.1.1 Google Google( ) Senshu University http://www.google.co.jp/search?q=senshu+university ( ) http://www.google.co.jp/search URL? q= + Google http://www.google.co.jp/search?q= Google ( ) URL UTF-8 16 URL UTF-8 URL %E5%B0%82%E4%BF%AE%E5%A4%A7%E5%AD%A6

http://www.google.co.jp/search?q=%e5%b0%82%e4%bf%ae%e5%a4%a7%e5%ad%a6 <a href="http://www.google.co.jp/search?q=%e5%a4%a9%e6%b0%97%20%e7%99%bb%e6%88%b8"> </a> 6 29 8.1.2 ( ) 35.696816,139.754014 weathernews http://weathernews.jp/pinpoint/cgi/search_result.fcgi?service=2&lat=35.696816&lon=139.754014 ( ) 8.1.3 ( ) Google Map Google Map 35.617256,139.564551 10 ) 8.1.4 ( ) Google Map 35.617605,139.564819 http://maps.google.co.jp/maps?ll=35.617605,139.564819

6 30 8.2 ( ) 8.2.1 (Google Map )( ) Google Map HTML 8.2.2 ( ) Weather Hacks HTML 8.3 Google chart tools Google chart tools JavaScript II: 3

6 31 3 Google chart tools

6 32 (1) 3 ( ) <head> (2) 3 <div id= piechart style= width: 1000px; height: 600px; ></div> (3) 3 Google chart tools 8.4 Goole Spreadsheet Goole Drive Google Document (Spreadsheet) Google Spreadsheets(how to use Google Charts with Google Spreadsheets.) Gmail Goolge Spredsheets Gmail Gmail Goolge Spredsheets

6 33 (1) Gmail (2) Spredsheet :Web:Google Spredsheet 1 (3) (2) Gmail URL a [ ] b [ ] [ ] c html (4) html (5) html :Web:Google Spredsheet 2 (6) Spredsheet [ ]

6 34 9 PDF HTML PDF (1) (2) (3) PDF (4) webfiles ( takahagi.pdf ) PDF (1) (2) Office PDF( XPS) (3) webfiles ( takahagi.pdf ) PDF HTML PDF <p> <a href="takahagi.pdf"> II </a>

6 35 10 Web 10.1 HTML 1 1 Web Web HTML (Mery) HTML (index.html) <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="sample.css"> </head> <body> </body> </html>

6 36 10.2 8 +.html : page2.html syumi.html (1) (2) webfiles (3) Unicode(UTF-8) 10.3 <body> </body> HTML index.html <a href="index.html">takahagi </a> 2.7 http://...

6 37 index.html Web 2 (Mery) index.html <a href="page2.html"> </a> 11 HTML ( ) HTML Web HTML XML HTML Micorosoft Word [ ] [web (*.htm;*.html)] 12 Wiki HTML HTML Blog Wiki Blog Wiki

6 38 13 Web FTP Web (Web ) 4 ) 4 Web

13.0.1 FTP (1) Winscp (2) Winscp 5 (3) ikuta1 (S) (4) OK (5) 5 6 39 5 FFFTP

6 40 6 13.1 edwww 6 edwww edwww (1) F7 ( ) (2) edwww OK (3) 6 edwww

13.2 edwww 6 41 edwww OK (1) 6 edwww (2) 0755 0755 13.3 FTP webfiles edwww (1) 6 webfiles webfiles index.html (2) 6 edwww (1) 7. (2) html,jpg,gif

6 42 7 13.4 FTP index.html) (1) index.html (2) (3) 644 (4) 644

13.5 Web 6 43 http://edwww.isc.senshu-u.ac.jp/ c1001234/index.html c1001234 Web ID index.html index.htm index.html Server Not Found URL File Not Found URL index.html URL http://edwww.isc.senshu-u.ac.jp/ c1001234/ (c1001234 ID) index.html Winscp Forbidden HTML HTML HTML

6 44 13.6 edwww edwww public html Web