<4D F736F F D DEC837D836A B2D48508DEC90AC2D322E646F63>

Size: px
Start display at page:

Download "<4D F736F F D DEC837D836A B2D48508DEC90AC2D322E646F63>"

Transcription

1 ホームページ作成の練習マニュアルー 2 ( 雛形と Frontpage 利用 ) 作成 修正 本マニュアルでは ホームページを作成するに当たって 1. 雛形を購入し Frontpage で修正してホームページを作成する方法 について記述する ( 練習対象とするホームページ ) ( )

2 Ⅰ. 雛形を購入し Frontpage で修正してホームページを作成する方法 1. 初めに この練習は ある見栄えの良い H/P を作成する為の練習であり 先に FTP による H/P のアップロードと公開の練習をして 後で本練習を行ってもかまいません 今 ご覧のホームページ ( 以下 H/P) は 雛形を購入し Frontpage で修正してホームページを作成しています 現在 タブを使用した H/P は一般的であるが 最初から作成するのはかなりの手間隙が掛かかります すなわち タブを使用した H/P を最初から作成するには 単に HTML の知識だけでなく JavaScript の知識も要求されます 従って 基礎的な H/P を作成する為の HTML 言語だけでなく JavaScript の技術も習得する必要があり かなりの時間が掛かります そこで 予め Tab の付いたホームページの雛形を購入し それを元に Frontpage で修正してホームページを作成する方法を取れば良いのです この方法を取れば Tab の付いた望みの H/P(JavaScript 付 ) の作成時間を大幅に減らす事が出来ます 以下 この方法について 具体的に記述ます なお 以下の記述では ホームページ作成の練習 (1) を十分にマスターした事を前提に記述をしています 本記述の分からない所は ホームページ作成の練習 (1) を再度見て下さい 2. 事前準備 1.Tab 等の付いたホームページの雛形の購入好みの H/P のイメージに一番近い雛形をネット等で調べて購入します 本練習では Tab 等の付いている本 H/P の雛形を使用します 1/12

3 2.Frontpage のマクロの修正練習 ホームページ作成の練習 (1) の 2-2-c に記述しましたが Frontpage で H/P のマクロ (HTML 言語 ) の修正の必要が生じるので 市販の HTML 言語の解説書で十分にスキルを付けておく必要があります 3.JavaScript の簡単な知識の習得 本練習では Tab 等の付いた H/P を作成するので JavaScript の付いた雛形を修正して使用します 従って JavaScript の簡単な知識の習得が要求されます 予め JavaScript の簡単な解説書を購入しておく事をお勧めします 3. 雛形を購入し Frontpage で修正してホームページを作成する方法 1. 添付の PDF ファイル ホームページ作成の練習 (2) の作成手順 a. システム開発の Tab(link04.htm) の内容の作成 Tab で移動する H/P は複数在りますが 修正の難易度の低い Tab から説明をしていきます まずは 最も修正が易しい システム開発の Tab の内容の作成の説明から行います 2/12

4 前頁の画面の HTML は以下の通りです (Frontpage の HTMLTab を参照 :link04.htm) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>itの匠を創る麻生工房 </title> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> </head> <body style="background-color: rgb(182, 204, 157); background-image: url('img%20waku%20back01.gif')" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <table width="822" border="0" cellspacing="0" cellpadding="0"> <tbody> <td colspan="2" width="818"><img src="img/titlebar2.gif" width="839" height="75" alt=" タイトルバー " usemap="#map" border="0"> <!-- タイトル画像 --> <td rowspan="2" width="103" valign="top"><img src="img/waku/leftbar.gif" width="103" height="448" alt=" イメージフォト "> <td width="713" height="21" valign="top"> <table border="0" cellspacing="0" cellpadding="0" style="height: 46px" width="733"> <tbody> <td norap="" width="731" height="21" valign="top"> <a href="link01.htm"><img src="img/btn01.gif" width="78" height="21" border="0" alt=" ごあいさつ "></a> <a href="link02.htm"><img src="img/btn02.gif" width="78" height="21" border="0" alt=" 小中高大学生へのIT 教育 "></a> <a href="link03.htm"><img src="img/btn03.gif" width="78" height="21" border="0" alt=" 社会人への ITサポート "></a> <a href="link04.htm"><img src="img/btn04.gif" width="78" height="21" border="0" alt=" システム開発 "></a> <a href="link05.htm"><img src="img/btn05.gif" width="92" height="21" border="0" alt=" コンサルティング "></a> <a href="link06.htm"><img src="img/btn06.gif" width="96" height="21" border="0" alt="cgについて "></a> <a href="link07.htm"><img src="img/btn07.gif" width="96" height="21" border="0" alt=" ドラクエ1 3/12

5 0オンライン "></a> <a href="link08.htm"><img src="img/btn08.gif" width="96" height="21" border="0" alt=" 身近な芸術家の支援 "></a> </tbody> </table> <td width="1"><br> <td width="713" valign="top"> <div style="text-align: center;"> </div> <table border="0" cellspacing="0" cellpadding="10" style="height: 369px" width="734"> <tbody> <td style="text-align: center; vertical-align: middle" width="189"><img src="img/system.gif" title="" alt=" システム開発 " style="width: 180px; height: 229px;"><br> <td style="vertical-align: top" width="501"><font size="3" color="#333333"> <span style="color: rgb(0, 0, 0);"> 豊富なシステム開発のノウハウを使って 基本構想 基本設計 </span> </font> <p><font size="3" color="#333333"> <span style="color: rgb(0, 0, 0);">( 以上外部設計 ) 詳細設計 プログラム開発( 以上内部設計 ) と </span></font> </p> <p> <span style="color: rgb(0, 0, 0);"> お客様の承認を得ながら段階を追って開発を進めるノウハウを </span></p> <p> <span style="color: rgb(0, 0, 0);"> 提供します </span> <span style="color: rgb(0, 0, 0);"> </span></p> <p> <span style="color: rgb(0, 0, 0);"> なお データベースを使用するC/Sシステムは得意な分野です </span></p> <p> <span style="color: rgb(0, 0, 0);"> 特に外部設計が得意であり業務経験が豊富で <span style="font-weight: bold;"> 安価 </span> に設計が </span></p> 4/12

6 <span style="color: rgb(0, 0, 0)"><p> 出来る様になるノウハウを提供します </span><font size="3" color="#333333"><span style="color: rgb(0, 0, 0);"> </span></font> </p> <td style="vertical-align: top" width="690" colspan="2"> <p align="center"><br> <font color="#000080"> 上記ノウハウに関する無料のPDFファイルのダウンロード </font><br><font color="#ff0000"><b> ダウンロード用ボタン ( 現在準備中 : )</b></font></p> <tr align="center"> <td style="text-align: center; vertical-align: middle" rowspan="1" colspan="2" width="712"><span class="copy-r">copyright 1994~2015 麻生工房 - All Rights Reserved.</span> </tbody> </table> </tbody> </table> <map name="map"> <area shape="rect" coords="681, 46, 736, 71" href="index.htm"> </map> </body> </html> このページの画面 (link04.htm) は Tab の部分と内容説明等の部分で構成されており 元の雛形の表の列や行を Frontpage を利用して 結合したり分割したりして 自分のイメージに合った画面にしています ここで使用している雛形は Tab 付きの雛形であり 文字 ( ごあいさつ IT 教育 ( 小学生 ~)) の付いた Tab は Photpshop 等のグラフィック ソフトを使用して作成しています すなわち まず Tab の形状 ( 青色の長方形 ) をした gif ファイルを Photpshop 等のグラフィック ソフトを使用して作成し この gif ファイルに Photpshop 等で文字 ( ごあいさつ IT 教育 ( 小学生 ~)) を付けています 5/12

7 Tab の文字 ( ごあいさつ IT 教育 ( 小学生 ~)) の作り方の詳細は Photpshop 等のグラフィック ソフトの説明書を見て下さい また この HTML 文の内容については 市販の HTML の解説書を熟読して理解をして下さい b. 社会人へのサポートの Tab(link03.htm) の内容の作成 このページの画面も Tab の部分と内容説明等の部分で構成されており 内容説明の部分は上記の如く 3 列 1 行と 1 列 1 行の表で構成されています また 表中の 営業支援システム 1 等の文字をピックすると PDF で出来たマニュアルのダウンロード を行える画面 (link03-1.htm) に行けます これは 営業支援システム 1 の文字に PDF で出来たマニュアルのダウンロードを行える画面 のリンクを埋め込んである為です このやり方は 市販の HTML の解説書を読んで理解をして下さい 6/12

8 なお この部分の HTML 文は以下の通りです <td width="733" valign="top" height="371"> <div style="text-align: center;"> </div> <table border="1" cellspacing="0" cellpadding="10" height="283" width="716"> <tbody> <td style="text-align: center; vertical-align: middle" height="55" width="66"> 画像 <p> 準備中 </p> <td style="vertical-align: top" height="55" width="160"><p align="center"><a href="link03-1.htm"> 営業支援システム1</a> </p> <p align="center">( 名刺管理 & 営業 ) </p> <td style="vertical-align: top" height="55" width="422"> 名刺の自動入力による顧客管理と入力したデータを <p> 利用した顧客へ提案書 商品購入のお勧めのメール送付 </p> <td style="text-align: center" height="31" width="66"> <td style="vertical-align: top" height="31" width="160"> <p align="center"><a href="link03-2.htm"> 営業支援システム </a><a href="link03-2.htm">2</a></p> <p align="center">( 提案書作成 & 営業 )</p> <td style="vertical-align: top" height="31" width="422"> 顧客名データから顧客名が宛名に入った提案書を <p> 作成し 顧客名付きの提案書を各顧客へメール送付 </p> <td style="text-align: center; vertical-align: middle" height="30" width="66"> <td style="vertical-align: top" height="30" width="160"> <p align="center"><a href="link03-3a.htm"> 営業支援システム3</a></p> <p align="center">( 見積書作成 & 営業 )</p> <td style="vertical-align: top" height="30" width="422"> Excel を使用した見積書や請求書の作成と 7/12

9 見積書や <p> 請求書を各顧客へメール送付 <tr align="center"> <td style="vertical-align: top" colspan="3" height="79" width="692"> <p align="center"><span class="copy-r"> <font color="#ff0000"><b> 上記システムに関して 営業支援システム2 については 無料の </b></font><br><br> <font color="#ff0000"><b>pdf ファイルのダウンロードは現在準備中 </b></font> </a></font></b><br> <b><font color="#ff0000"></font><font color="#000080"><a href="link03b.htm"> 次頁 <br> Copyright 1994~2014 麻生工房 - All Rights Reserved.</span></p> 繰り返しますが 市販の HTML 言語の解説書で この部分の HTML 文の理解を深めて下さい c. 社会人へのサポートの Tab の内容の作成 8/12

10 この画面では JavaScript が使用されており JavaScript 文は以下の通りです この JavaScript 文の内容については 市販の JavaScript の解説書を読んで理解をして下さい <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <script language="javascript"> <!-- function MM_swapImgRestore() { //v3.0 var i,x,a=document.mm_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.osrc;i++) x.src=x.osrc; } function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.mm_p) d.mm_p=new Array(); var i,j=d.mm_p.length,a=mm_preloadimages.arguments; for(i=0; i<a.length; i++) if (a[i].indexof("#")!=0){ d.mm_p[j]=new Image; d.mm_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v3.0 var p,i,x; if(!d) d=document; if((p=n.indexof("?"))>0&&parent.frames.length) { 9/12

11 d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=mm_findobj(n,d.layers[i].document); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=mm_swapimage.arguments; document.mm_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=mm_findobj(a[i]))!=null){document.mm_sr[j++]=x; if(!x.osrc) x.osrc=x.src; x.src=a[i+2];} } //--> </script> 黄緑色のボタンについては 上記の Tab の内 よく使うボタンをここに配置しました 黄緑色のボタンの作成方法についても Tab の作成方法と同様です ( 注 1) Frontpage の詳しい操作説明については Frontpage の操作マニュアルを参照して下さい Photoshop 等のグラフィック ソフトの詳しい操作説明については グラフィック ソフト の操作マニュアルを参照して下さい ( 注 2) Frontpage は マイクロソフト株式会社の製品です Photoshop は アドビ社の製品であり 家電量販店で購入頂けます 購入する時は お使いになるパソコンに対応しているかどうかを 必ず確認して下さい 10/12

12 付 録 Frontpage の Editer( 標準 Tab) での作成上の注意点 1. 注意点その 1 標準 Tab で作成すると 改行すると 1 行空いてしまう 上記画面の HTML 文 ( 表 グラフ 図の挿入 資料作の成 )<br> ホームページの作成練習 <br> ( FrontPage 利用 雛形利用での作成 )</p> <p> ホームページ公開の練習 </p> <p> ( FTP ソフト使用 )<br> OS の再インストール <br> ( インストール用 Disk の利用 )</p> <p> <b> 中級 </b> プログラム開発初級 <br> 11/12

13 Frontpage の Editer(HTML Tab) での修正 改行しても 1 行空かない様に修正した 上記画面の HTML 文 ( 修正後 ) プレゼンテーション用ソフトの練習 <br> ( 表 グラフ 図の挿入 資料作の成 )<br> ホームページの作成練習 <br> ( FrontPage 利用 雛形利用での作成 )<br> ホームページ公開の練習 <br> ( FTPソフト使用 )<br> OSの再インストール <br> ( インストール用 Disk の利用 )</p> 12/12

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.

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. http://www1.iwate-ed.jp/ 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.d 5.4.e 5.5.a 5.5.b 5.5.c

More information

(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ

(3) 本文を書く 実際にページを開いたときに表示される本文を書いてみましょう から の間に書きます <html > <head > <title > 武のホームページ </title > </head > </html > (4) ページを保存する ここで一度ページを保存してみましょう テキストエ 1. はじめの準備 (1) フォルダの作成 ホームページ作成の基礎 これから作るホームページのデータを ホームページ用 として保存 ( 保管 ) するフォルダを作成します ホームページで使う作成したファイル画像 写真 音楽などファイルは すべて同じフォルダに保存します デスクトップやマイドキュメントの中 ( 任意 ) で 右クリック 新規作成 (N) フォルダ (F) で新しいフォルダができます (

More information

フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ

フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボックス名 : t1 関数名 : MM() test-a.htm function MM(){ a=document.f1.t1.value;

More information

websample 1 2 websample index.html

websample 1 2 websample index.html Web HTML Web 1 2 3 4 5 6 7 1 2 3 4 5 6 websample 1 2 websample index.html -1-1 HTML index.html html head /head body /body /html body table border="1" /table /body table border="" /table table /table table

More information

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

インターネット社会の発展 インターネット入門 第 8 回 Web ページの作成法 総合情報学部情報科学科榊原道夫, 河野敏行, 大西荘一 目次 1. Web ページの作成 2. タグによる作成手順 3. HTML の基本 4. 作ってみよう 5. スタイルシートの利用 Web ページの作成 作成に必要なアプリケーション HTML エディター 専用ソフト テキストエディター 画像編集ソフト コンテンツ作成ソフト Flash ファイル転送ソフト

More information

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

6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML 6 2 s µ µµµ µµµµ µ µ h µs µ µµµµ µ µ µ s mµµµµµ µµµ µµ µ u m µmµµµµµ µµ µ µ µ µ µ µ µ µ s 1 6 3 1.1 HTML Web HTML(Hyper Text Markup Language)

More information

Web

Web Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................

More information

SGML HTML XML Markup Language Web HTML HTML SGML Standard Generalized Markup Language Markup Language DTD Document Type Definition XML SGML Markup Language HTML XML HTML XML JavaScript JAVA CGI HTML Web

More information

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

<4D F736F F D A957A A A8FEE95F18F88979D DEC90AC E646F63> 情報処理 C (P.1) 情報処理 C (2011 年度 ) ホームページの作成 http://open.shonan.bunkyo.ac.jp/~ohtan/ テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合

More information

6 2 1

6 2 1 6 1 6 (1) (2) HTML (3) 1 Web HTML 1 Web 1 Web Web 6 2 1 6 3 1.1 HTML(XHTML) Web HTML(Hyper Text Markup Language) ( ) html htm HTML XHTML(XHTML 1.0 Transitional)

More information

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

2 / 16 HTML=HyperText Markup Language( ハイパーテキストマークアップランゲージ ) ブラウザ (Chrome) での表示 ソースの表示 ( メモ帳 /TeraPad) HTML <========= =========> 1 / 16 第 11 回セミナー / 全 12 (2014/8/28) HP の基本的構造の理解とページ構成の工夫 これだけはマスターしておきたい HTML 厳選タグ迷子を生まないためのリンクの配置 ( 読ませる工夫 ) Web 作成の基本ツール Web ブラウザ Chrome FireFox Opera (Internet Explorer) Chrome Firefox Opera https://www.google.com/intl/ja/chrome/browser/features.html

More information

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

World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML Web 工学博士大堀隆文 博士 ( 工学 ) 木下正博 共著 World Wide Web =WWW Web ipad Web Web HTML hyper text markup language CSS cascading style sheet Web Web HTML CSS HTML ii HTML CSS CSS HTML HTML HTML HTML Eclipse Eclipse Eclipse

More information

データ解析

データ解析 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) 奈良産業大学情報学部 情報教育基礎研修会 ( 平成 16 年 8 月 4 日 ) HTML 言語によるウェブページの制作 日時 会場 平成 16 年 8 月 4 日 ( 水 )9 時 10 分 ~ 15 時 40 分 奈良産業大学 10 号館 3 階 1032 教室 日程 時間内容場所 9:10 ~ 9:20 日程説明 1033 教室 9:30

More information

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

~/WWW-local/compIID (WWW IID ) $ mkdir WWW-local $ cd WWW-local $ mkdir compiid 3. Emacs index.html n (a) $ cd ~/WWW/compIID 10 10 10.1 1. 2. 3. HTML(HyperText Markup Language) Web [ ][ ] HTML Web HTML HTML Web HTML ~b08a001/www/ ( ) ~b08a001/www-local/ ( ) html ( ) 10.2 WWW WWW-local b08a001 ~b08a001/www/ ~b08a001/www-local/

More information

[ ][ ] HTML [ ] HTML HTML

[ ][ ] HTML [ ] HTML HTML COPYRIGHT 2009 MAGREX, ALL RIGHTS RESERVED. [ ][ ] HTML [ ] HTML HTML [ ][ ] / / / [ ][ ] HTML HTML URL URL [ ][ ] Cellpadding Cellspacing ID ID URL [ ][ ] ID ID URL [ ][ ] ID ID URL [ ][ ] [ ][ ] [ ]

More information

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18

Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18 Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 1/18 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111221

More information

Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21

Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21 Web データ管理 JavaScript (1) (4 章 ) 2011/12/7( 水 ) 1/21 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111207 演習

More information

Microsoft Word - 操作マニュアル-Excel-2.doc

Microsoft Word - 操作マニュアル-Excel-2.doc Excel プログラム開発の練習マニュアルー 1 ( 関数の学習 ) 作成 2015.01.31 修正 2015.02.04 本マニュアルでは Excel のプログラム開発を行なうに当たって まずは Excel の関数に関する学習 について記述する Ⅰ.Excel の関数に関する学習 1. 初めに Excel は単なる表計算のソフトと思っている方も多いと思います しかし Excel には 一般的に使用する

More information

■新聞記事

■新聞記事 情報処理 C (P.1) 情報処理 C ホームページ作成入門 テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合 ) [ スタート ]-[ プログラム ]-[ テキストエディタ ]-[TeraPad] をクリック

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション 3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,

More information

Moshimo Challenge Report

Moshimo Challenge Report このコーナーは HTML CSS のことならなんでもおまかせの マリー と うさぎ界 No.1 とも言われているデザイナー ナムー が WEB ページ作成の コツを解説していきます 少し技術的な内容も含まれていますが 分からない ことは積極的に調べて 1 つ 1 つスキルアップをしていきましょうね! マリー HTML CSS のプロフェッショナル うさぎだけど好きなブラウザは Fire Fox ナムー

More information

ホームページ制作 基礎編 (HTML5 CSS3 コーディング )

ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8

More information

Microsoft Word - FWTEC0003.doc

Microsoft Word - FWTEC0003.doc IBM FormWave for WebSphere 公開技術文書 #FWTEC0003 Windows の更新プログラム (KB912945) におけ る FormWave への影響とその回避方法 最終更新日 :2006/04/03 Copyright International Business Machines Corporation 2006. All rights reserved. FormWave

More information

ターゲティングメール 制作マニュアル

ターゲティングメール 制作マニュアル 日経 ID ターゲティングメール (HTML 版 ) 制作ガイドライン 2018 年 1 月 [0213] 日本経済新聞社デジタル事業広告 ID ユニット - 1 - 目次 基本編 1. レスポンシブデザイン対応 HTMLメールについて- p3 2. HTMLメールの基本ルールについて p4 3. 制作見本 -1 p5 4. 制作見本 -2 p6 5. 制作見本 -3 p7 6. 入稿時の注意 p8

More information

ÉvÉçPM_02

ÉvÉçPM_02 2 JavaScript 2JavaScript JavaScript 2-11hello1.html hello

More information

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

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

More information

立ち読みページ

立ち読みページ 6 6 46. 47. 48. 49. 50. 51. 52. 53. 146 148 150 152 154 158 160 162 6 46 Web ( ) table tr td th >> HTML

More information

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

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

More information

css.pdf

css.pdf 1 2 Web (2) HTML ( ) HTML CSS CSS = Cascading Stye Sheet (CSS) W3C (Word Wide Web Consortium, Web ) 2006-2018 Harumi Murakami and Kota Abe HTML&CSS 3 1990 Web HTML Web 1993 Web , , HTML HTML&CSS

More information

Word によるホームページ勉強会第 10 日目フレームページの製作 Ⅰ.menu.html の製作 改定三宅節雄 1. Word を起動し 表示 印刷レイアウトを選択します ページレイアウト ページ設定の をクリックし フォントの設定からフォントサイズは 12p とします 2

Word によるホームページ勉強会第 10 日目フレームページの製作 Ⅰ.menu.html の製作 改定三宅節雄 1. Word を起動し 表示 印刷レイアウトを選択します ページレイアウト ページ設定の をクリックし フォントの設定からフォントサイズは 12p とします 2 Word によるホームページ勉強会第 10 日目フレームページの製作 Ⅰ.menu.html の製作 2014-08-12 改定三宅節雄 1. Word を起動し 表示 印刷レイアウトを選択します ページレイアウト ページ設定の をクリックし フォントの設定からフォントサイズは 12p とします 2.1 行目は MENU: と記入して 或いはワードアートで目次などと書いて改行 10 行 1 列の表を作成します

More information

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/

Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/ Web プログラミング 1 JavaScript (3) (4 章 ) 2013/7/3( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4)

More information

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

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

More information

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ

( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くこ 1330-2 Radial Gradation のアニメーション (2) 背景 (background) を円形グラデーション (Radial Gradation) のアニメーションにして みましょう radial-gradient と repeating-radial-gradient の仕様は 別本 Transition を使いこな す編 の 1238-1 円形グラデーション Radial Gradation

More information

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2

JavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 JavaScript (2) 1 JavaScript 1.! 1. 2. 3. DOM 4. 2. 3. Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 (1) var a; a = 8; a = 3 + 4; a = 8 3; a = 8 * 2; a = 8 / 2; a = 8 % 3; 1 a++; ++a; (++

More information

インターネットマガジン1996年12月号―INTERNET magazine No.23

インターネットマガジン1996年12月号―INTERNET magazine No.23 26 INTERNET magazine 1996/12 HTML S jhttp://www.microsoft.com/truetype/css/gall ery/spec2.htm S jhttp://www.hidaho.com/c/ S jhttp://www.microsoft.com/ie/most/howto/lay out/winston/wclub.htm

More information

Oracle HTML DBのテンプレート・カスタマイズ

Oracle HTML DBのテンプレート・カスタマイズ Oracle HTML DB 2003 10 Oracle HTML DB... 3... 3... 5... 5 1:... 6 2:... 6 3: 2... 7... 8... 8... 8 CSS JavaScript... 10 HTML DB... 11... 11 Oracle HTML DB 2 Oracle Corporation Customizing Templates in

More information

Webデザイン論

Webデザイン論 2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の提出物 今回の実習課題を制作し Web サーバにアップロードせよ 宛先 : dan@cc.matsuyama-u.ac.jp 件名 : Web デザイン #17_ 課題 本文 :

More information

ch31.dvi

ch31.dvi 1 1 1.1 1.1.1 ( ) ( 1.1 ): [ ] [ ] CPU[ + ] [ ] CPU( ) ( 1 2 1 1.1: ( 1.1 ): ( ) [ ] ( )[ ] + ( ) (+ ) ( ) ( ) 1.1. 3 1.2: ( ) ( ) ( 1.2) 4 1 1.3: 120m/ (432km/h) 0.5 2m/ 1 ( 1 ) ( ) ( ) ( 1.3) 1.1. 5

More information

Microsoft Word - manual.doc

Microsoft Word - manual.doc ヒットメール Ver 1.0 お試し版 URL http://www.sysco-net.com/hitmail/ ライセンス キー販売サイト URL http://www.vector.co.jp/ 価格 1,000 円 ( パソコン1 台当たり ) 本ソフトを動かすには 次のソフトが必要です 1 Microsoft Windows 2000 or XP 2 Microsoft Outlook 2000

More information

追加する方法は以下の 2 つです 書き出し後にヘッダーを追加する (1 冊だけヘッダーを適用する場合に向く ) 書き出し形式を追加する ( 何冊も同じヘッダーを適用する場合に向く ) 注意 HTML の知識が必要です ロゴスウェアでは HTML の書き方についてのサポートはお受けしておりませんのでご

追加する方法は以下の 2 つです 書き出し後にヘッダーを追加する (1 冊だけヘッダーを適用する場合に向く ) 書き出し形式を追加する ( 何冊も同じヘッダーを適用する場合に向く ) 注意 HTML の知識が必要です ロゴスウェアでは HTML の書き方についてのサポートはお受けしておりませんのでご [ Tips ] FLIPPER U HTML でヘッダーを追加する方法 文書番号第 6 版対象製品対象ユーザー : 12 製 -FL030290-06 : 2016 年 4 月 25 日 : FLIPPER U 4.3.0 以降 : FLIPPER U をご利用中の方 概要 ロゴを配置した HTML を iframe でデジタルブックと組み合わせることで オリジナルロゴ入りのデザインに見せることができます

More information

untitled

untitled FONT FACE=" " /FONT hp11.html FONT FACE=" " /FONT FONT FACE=" " HTML HP10.html HTML HTML HTML html head title /title font face=" " size="5" /fontbr font face=" " size="5" /fontbr font size="5" /fontbr

More information

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と

JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と JavaScript カスタマイズ入門 kintone university アプリデザイナープラス JavaScript カスタマイズ入門編演習問題回答 演習問題 第 2 章サンプルで試そう 1 cybozu.com developer network の サンプルで試そう ( 以下 サンプル と略 ) にある ガントチャートプラグイン を 下記の手順で利用してみましょう ガントチャートプラグイン

More information

( )

( ) 2016 13H018 1 1 2 2 3 4 3.1............................................... 4 3.2 ( ).................................... 5 4 6 4.1........................................ 6 4.2..................... 6 5

More information

ターゲティングメール 制作マニュアル

ターゲティングメール 制作マニュアル 日経 ID ターゲティングメール (HTML 版 ) 制作ガイドライン 2019 年 4 月 日本経済新聞社デジタル事業メディアビジネスユニット - 1 - 目次 基本編 1. レスポンシブデザイン対応 HTMLメールについて- p3 2. HTMLメールの基本ルールについて p4 3. 制作見本 -1 p5 4. 制作見本 -2 p6 5. 制作見本 -3 p7 6. 入稿時の注意 p8 7. 査閲確認

More information

PowerPoint Presentation

PowerPoint Presentation HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam

More information

Color Change

Color Change 1229 Text の 3D トランジション (rotatex, rotatey) テキストが 3D で変形するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると テキストが 3D で 変化するトランジションが動きます プロパティ transform: rotatex( ) rotatey( ) 要素を 3D 回転するときに指定します

More information

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

</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig 1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーション サンプル CSS1 CSS3 で 3D の Cube を描いて回転させてみましょう 3DCubeAnime1 の説明 HTML の記述 (3DCubeAnime1.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し

More information

目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18 インポート時の制限事項...19 リ

目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18 インポート時の制限事項...19 リ [SP 改 ] フォームレイアウトデザイナー FOR SHAREPOINT 2013 ユーザーマニュアル 1.0 版 2014 年 04 月 11 日 株式会社アンク 目次 概要... 2 フォームレイアウトデザイナー機能の設定... 3 設定したフォームレイアウトデザイナーの確認...14 その他スタイルの設定...15 フォームレイアウトデザイナーをエクスポート...17 フォームレイアウトデザイナーをインポート...18

More information

教材ドットコムオリジナル教材

教材ドットコムオリジナル教材 問題 次の画面写真を参考にソースを組みなさい 画像素材は次のサイトにある http://www.kyouzai.com/kenshu/index.htm トップ 大学 専門学校授業 10 月 31 日画像素材 ファイル名 :index.htm( フレーム定義ファイル ) menu.htm( 左フレーム表示 メニューページ ) top.htm( 右フレーム表示 似顔絵イラスト表示ページ ) touroku.htm(

More information

1 JIS X 8341-3:2016 WCAG2.0 http://waic.jp/docs/wcag2/understanding.html WCAG2.0 http://waic.jp/docs/wcag2/techs.html 2 ... 1... 3... 6 1.1... 6 1.2... 7... 8 1.1.1... 8 1.2.1... 13 1.2.2... 14 1.2.3...

More information

触覚マウスライブラリを使った 触覚付き Web ページの作り方 ver 富士ゼロックス株式会社 -1-

触覚マウスライブラリを使った 触覚付き Web ページの作り方 ver 富士ゼロックス株式会社 -1- 触覚マウスライブラリを使った 触覚付き Web ページの作り方 ver. 2.0 2001.08.17 富士ゼロックス株式会社 -1- 1 画像全体に触覚テクスチャをつける 画像全体に触覚テクスチャを貼り付けた HTML ファイルのソースを次に示します 画像全体に触覚テクスチャをつける

More information

広告掲載規定

広告掲載規定 itsmf Japan ウェブサイト広告掲載要項バージョン 1.5 2014 年 10 月 9 日 特定非営利活動法人 itsmf Japan 1. 広告の掲載箇所と方法 広告の表示箇所 広告の表示箇所は次のとおりです 1 アピールコーナー itsmf Japan ウェブサイトの右側に位置するアピールコーナーの下部に 会社ロゴ を表示します 会社ロゴ がない場合は 会社名を表示します 2 ITIL

More information

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

Microsoft Word - 教材WebページのHTML5及びCSS3の解説 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 6 3 Contents の解説 3.1 IE9 の画面 教材 Web ページの HTML5 及び CSS3 の解説.docx Page 7 3.2 画面構成 3.3 HTML5(menu.html)

More information

untitled

untitled Ajax Web Ajax http://www.openspc2.org/javascript/ajax/ajax_stu dy/index.html Life is beautiful Ajax http://satoshi.blogs.com/life/2005/06/ajax.html Ajax Ajax Asynchronous JavaScript + XML JavaScript XML

More information

Microsoft PowerPoint - 04WWWとHTML.pptx

Microsoft PowerPoint - 04WWWとHTML.pptx 船舶海洋情報学 九州大学工学府海洋システム工学専攻講義資料担当 : 木村 04. WWW と HTML WWW(World Wide Web) インターネットの情報をハイパーテキスト形式で参照できる情報提供システム HTML などのコンテンツを HTTP プロトコルで転送 インターネット クライアント PC WWW の情報を画面に表示するクライアントソフトウエア :WEB ブラウザ Internet

More information

インターネットマガジン1999年7月号―INTERNET magazine No.54

インターネットマガジン1999年7月号―INTERNET magazine No.54 A MagnaviIp9907Htmltips +CD-ROM 3 3 A N S W E R HTML TIPS&TRICKS A N S W E R function Init() { block.style.setexpression("left",

More information

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

overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ 1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き

More information

CONTENTS 0 /JSP 13 0.1 Web 14 1 HTML Web 21 1.1 Web HTML 22 1.2 HTML 27 1.3 Web 33 1.4 HTML 43 1.5 46 1.6 47 1.7 48 2 Web 51 2.1 Web 52 2.2 Web 54 2.3 Web 59 2.4 65 2.5 68 2.6 75 2.7 76 2.8 77 3 81 3.1

More information

Word によるホームページ勉強会第 3 日目 Word でトップページを作成 2A 那須シニアネット三宅節雄事前準備 ピクセルの写真を 4 枚 の写真またはイラストを 2 枚 準備 (JTrim か縮小専用で この付近のサイズに加工しておく ) 勉強会にて実施

Word によるホームページ勉強会第 3 日目 Word でトップページを作成 2A 那須シニアネット三宅節雄事前準備 ピクセルの写真を 4 枚 の写真またはイラストを 2 枚 準備 (JTrim か縮小専用で この付近のサイズに加工しておく ) 勉強会にて実施 Word によるホームページ勉強会第 3 日目 Word でトップページを作成 2A 那須シニアネット三宅節雄事前準備 1.350 263 ピクセルの写真を 4 枚 200 150 の写真またはイラストを 2 枚 準備 (JTrim か縮小専用で この付近のサイズに加工しておく ) 勉強会にて実施 1. 予め自分の PC に My-HP というフォルダーを作っておきます 2.Word を起動します

More information

3 CSS について Cascading Style Sheets(CSS カスケーディング スタイル シート カスケード スタイル シート) とは HTML や XML の要素をどのように修飾 ( 表示 ) するかを指示する W3C による仕様の一つ 文書の構造と体裁を分離させるという理念を実現す

3 CSS について Cascading Style Sheets(CSS カスケーディング スタイル シート カスケード スタイル シート) とは HTML や XML の要素をどのように修飾 ( 表示 ) するかを指示する W3C による仕様の一つ 文書の構造と体裁を分離させるという理念を実現す HTML/CSS 1 HTML について Hyper Text Markup Language( ハイパーテキストマークアップランゲージ ) 略記 略称:HTML( エイチティーエムエル ) とは ウェブ上のドキュメントを記述するためのマークアップ言語である Web 作成基本プログラミング用語であり C 言語のようなプログラミングとは違い 文章の中に記述することでさまざまな機能を記述設定することができる

More information

インターネットマガジン1998年1月号―INTERNET magazine No.36

インターネットマガジン1998年1月号―INTERNET magazine No.36 3.0 3.0 A N S W E R1 function forelayer() { ocument.layers["back"].moveabove(ocument.layers["fore"]);} function backlayer() { ocument.layers["back"].movebelow(ocument.layers["fore"]);}

More information

ISコースプロジェクト実習 前期(第1回 ガイダンス)

ISコースプロジェクト実習 前期(第1回 ガイダンス) プロジェクト実習 IS2 前期 ( 第 1 回 ) 使用教室 :5-102,8-203,8-303,8-305,4-205 担当教員 : 熊谷和志, 早川吉弘 資料サイト : 熊谷研究室授業資料 (http://ckuma.html.xdomain.jp/class/) 1. 授業を進める上で 授業概要 1 学年の コンピュータリテラシ, 総合工学基礎実験 を踏まえ, 数週間から数ヶ月の中長期にわたり,

More information

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

サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out 1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation

More information

Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5

Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5 Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4)

More information

< F2D834A E F CC8A >

< F2D834A E F CC8A > 1. カスタムプラグインとは 2. ブログパーツの活用 3. お店の地図などを表示 4. 常時告知したい内容の表示 5. ちょっと装飾 カスタムプラグインを活用して ブログのカスタム化をしてみましょう 1. カスタムプラグインとは ブログ環境設定内にあるカスタムプラグインの登録の箇所で指示する ブログの表示設定を入力したりします カスタムプラグインはブログパーツ アフィリエイトのソースなど いつでも表示させて起きたい画像や文をいれて表示させることが出来る機能です

More information

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

サンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り 1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します

More information

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit

背景の線形グラデーションをアニメーションのように見せる方法は 前章の #div4 ボックスと同じ方法です ( 注 )Safari (webkit 系ブラウザ ) と Chrome(Webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit 1329-2 Linear Gradation のアニメーション (2) 背景 (background) を線形グラデーション (Linear Gradation) のアニメーションにして みましょう W3C 仕様では background-image プロパティは transition プロパティでのトランジションや animation プロパティでのアニメーションができないようになっています linear-gradient(

More information

文京女子大学外国語学部

文京女子大学外国語学部 6. テーブル 6-1 テーブルとはテーブルとは表のことです ホームページ上で表を作成するには テーブル作成用に用意された数種のタグを使用します なお HTML 文書を書くためのエディタでは 通常 単純な罫線すら引けないことに注意してください 文字の羅列よりも表にまとめた方がわかりやすく レイアウトとしても優れていることは 皆さんもよく経験するところだと思います ですからテーブルは 表形式のデータ表示に有効であるとともに

More information

情報C 4月スクーリング プリント

情報C 4月スクーリング プリント 情報の科学スクーリングプリント (e-typing 結果推移報告 Web ページ作成 ) 1/9 情報の科学スクーリングプリント (e-typing 結果推移報告 Web ページ作成 ) スクーリング日 ( ) 生徒番号 ( ) 氏名 ( ) 学習 目標 1. HTML を使って Web ページを作成できる 2. e-typing 結果の推移をわかりやすく伝えることができる 3. 著作権や肖像権に配慮することができる

More information

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17

HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML

More information

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

子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top 1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます

More information

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="titleanime01.css"> </hea

<!DOCTYPE html> <html> <head> <title>titleanime01</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=titleanime01.css> </hea 1335 見出し ( タイトル ) のアニメーション 見出しのアニメーションを作ってみましょう ( 注 )Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color のプロパティで描くことができますが

More information

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

サンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT 1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値

More information

スタイルシートでデザインを整えよう

スタイルシートでデザインを整えよう スタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので 表示はブラウザ次第であることを強調してきました あるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると 他の環境では意味が通じにくい 相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなく スタイルシートという別の機能をもちいます

More information

Web プログラミング 1 HTML+CSS (6) (2 章 ) 2013/5/29( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用

Web プログラミング 1 HTML+CSS (6) (2 章 ) 2013/5/29( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用 Web プログラミング 1 HTML+CSS (6) (2 章 ) 2013/5/29( 水 ) 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web プログラミング 1 20130529

More information

【お試し版】Web制作者のためのCSS設計の教科書(非売品)

【お試し版】Web制作者のためのCSS設計の教科書(非売品) UI Frontrend JS Girls html5j HTML5 CSS3 iphone Twitter : http://twitter.com/hiloki : http://inkdesign.jp GitHub : https://github.com/hiloki/ URL http://www.impressjapan.jp/books/1113101128 Web 10 IT UI

More information

Microsoft Word - 表計算ソフトの練習.doc

Microsoft Word - 表計算ソフトの練習.doc 表計算ソフトの練習マニュアル ( Excel ) 作成 2014.04.30 修正 2015.02.07 当該マニュアルでは Excel について 以下の項目の練習を行なう 表計算機能の練習 グラフ作成機能の練習 図 ( システム図 ) 作成の練習 表計算ソフトの練習マニュアル (1) ( 表計算機能の練習 ) 1. 表計算作成用ソフト (Excel) を起動する 2. 添付の PDF ファイルを参考に減価償却表を作成する

More information

Web データ管理 HTML+CSS (6) (2 章 ) 2011/11/9( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21

Web データ管理 HTML+CSS (6) (2 章 ) 2011/11/9( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/21 Web データ管理 HTML+CSS (6) (2 章 ) 2011/11/9( 水 ) 1/21 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111109 演習

More information

ヤフオク出品統一方法 人が購入するには理由 訳が必要 理由が決める それを必要とするキワードである 平成 28 年 9 月 15 日 株式会社関谷のヤフオクの利用の仕方は 1. ヤフオクを販売の導線とする ヤフオクからショピングへ導く 出品商品ページ ( タグ ) を下記のように作り 同じプレートを

ヤフオク出品統一方法 人が購入するには理由 訳が必要 理由が決める それを必要とするキワードである 平成 28 年 9 月 15 日 株式会社関谷のヤフオクの利用の仕方は 1. ヤフオクを販売の導線とする ヤフオクからショピングへ導く 出品商品ページ ( タグ ) を下記のように作り 同じプレートを ヤフオク出品統一方法 人が購入するには理由 訳が必要 理由が決める それを必要とするキワードである 平成 28 年 9 月 15 日 株式会社関谷のヤフオクの利用の仕方は 1. ヤフオクを販売の導線とする ヤフオクからショピングへ導く 出品商品ページ ( タグ ) を下記のように作り 同じプレートを使用すること 1メイン ユーロパワーバッテリー新品 プロが選んだ 厳しい世界ディラーに認められた長寿命メンテナンスフリーバッテリー

More information

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

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

More information

インターネットマガジン2003年11月号―INTERNET magazine No.106

インターネットマガジン2003年11月号―INTERNET magazine No.106 M o v a b l e T y p e text/template & css design : visual design : layout adjustment : http://www.b-architects.com/ http://internet.impress.co.jp/im/200311mt/ 98 +++ internet magazine 2003.11 +++ 1 Part.1

More information

情報C 4月スクーリング プリント

情報C 4月スクーリング プリント 情報の科学スクーリングプリント (e-typing 結果推移報告 Web ページ作成 ) 1/6 情報の科学スクーリングプリント (e-typing 結果推移報告 Web ページ作成 ) スクーリング日 ( ) 生徒番号 ( ) 氏名 ( ) 学習 目標 1. HTML を使って Web ページを作成できる 2. e-typing 結果の推移をわかりやすく伝えることができる 3. 著作権や肖像権に配慮することができる

More information

1. はじめにこのドキュメントは IBMi 上のデータを HTML のテーブルで表示するためのカスタマイズ方法について説明するものです この手法を用いることで スムーズなスクロールによる照会画面 (HTML のテーブル ) を 5250 画面に挿 することが出来ます ( 下図参照 ) なお このドキ

1. はじめにこのドキュメントは IBMi 上のデータを HTML のテーブルで表示するためのカスタマイズ方法について説明するものです この手法を用いることで スムーズなスクロールによる照会画面 (HTML のテーブル ) を 5250 画面に挿 することが出来ます ( 下図参照 ) なお このドキ 目次 1. はじめに... 2 2. カスタマイズ方法... 4 2.1. 静的テーブルを使ったカスタマイズ方法... 4 2.2. 動的テーブルを使ったカスタマイズ方法... 6 2.3. 動的テーブルを使ったカスタマイズ方法 ( あいまい検索の実装 )... 8 2.4. ヘッダーを固定したスクロール テーブルのカスタマイズ方法... 12 2.5. テーブル内のデータを axes カスタマイズ画面で使用する方法...

More information

untitled

untitled 2007 IT G Google Map API WEB2.0 2007 8 23 GoogleMapAPI GoogleMapAPI Google Web URL XHTML JavaScript GoogleMAP LHACA FFFTP TeraPad Haruhiro Unno Japan Electronics College 1 GoogleMapAPI Web Google GMail

More information

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

ように記述をします div1 要素 span 要素 2 個 div3 要素 span 要素 4 個 div5 要素 span 要素 1 個 div7 要素 span 要素 2 個 div2 要素 span 要素 1 個 div4 要素 span 要素 2 個 div6 要素 span 要素 2 個 1238-2 円形グラデーションのトランジション ラディアルグラデーションのトランジション W3C 仕様では background-image プロパティは transition プロパティでのトランジションや後で アニメーション編 に出てくる animation プロパティでのアニメーションができないようになっています ラディアルグラデーションの radial-gradient( ) 関数と repeating-radial-gradient(

More information

CONTENTS Copyright 2017 NEC Solution Innovators, Ltd All rights reserved 0. 通訳案内士登録情報検索サービスを利用するまえに 1 利用環境 2 ブラウザの設定 3 プラグイン 4 操作上の制限 5 ウェブ操作マニ

CONTENTS Copyright 2017 NEC Solution Innovators, Ltd All rights reserved 0. 通訳案内士登録情報検索サービスを利用するまえに 1 利用環境 2 ブラウザの設定 3 プラグイン 4 操作上の制限 5 ウェブ操作マニ ウェブ操作マニュアル サービス利用申請編 2017 年 3 月 21 日作成 < エージェントご担当者様向け > 1 CONTENTS Copyright 2017 NEC Solution Innovators, Ltd. 2017. All rights reserved 0. 通訳案内士登録情報検索サービスを利用するまえに 1 利用環境 2 ブラウザの設定 3 プラグイン 4 操作上の制限 5

More information

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

ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必 1252-1 ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています サンプル CSS1 形と色が変化するリンクボタン

More information

第21章 表計算

第21章 表計算 第 3 部 第 3 章 Web サイトの作成 3.3.1 WEB ページ作成ソフト Dreamweaver の基本操作 Web ページは HTML CSS という言語で作成されており これらは一般的なテキストエディタで作成できるのが特徴ですが その入 力 編集は時に煩雑なものです そこで それらの入力 編集作業など Web ページの作成を補助するソフトウェアである Dreamweaver の使い方について解説していきます

More information

豊中第 5 団ベンチャー隊 HP 作成プロジェクト報告書 ~ 広げよう 5 団の輪 ~ その 1 豊中第 5 団ベンチャースカウト隊 1 野村一樹

豊中第 5 団ベンチャー隊 HP 作成プロジェクト報告書 ~ 広げよう 5 団の輪 ~ その 1 豊中第 5 団ベンチャースカウト隊 1 野村一樹 豊中第 5 団ベンチャー隊 HP 作成プロジェクト報告書 ~ 広げよう 5 団の輪 ~ その 1 豊中第 5 団ベンチャースカウト隊 1 野村一樹 目次 1 概要 (p,3) 2 改善会議内容 (p,4) 3 HP 製作にあたって (p,5) (1)TOP ページについて (p,5) (2)HTML 言語について (p,8) (3)Blog について (p,9) (4)Album について (p,11)

More information

インターネットマガジン1999年11月号―INTERNET magazine No.58

インターネットマガジン1999年11月号―INTERNET magazine No.58 +CD-ROM A N S W E R function mysearch (num, text) { ocument.forms[num].elements[0].value=text; ocument.forms[num].submit();

More information

スライド タイトルなし

スライド タイトルなし 御中 ドキュメント種 : お得意様名 : システム名 : デモ説明資料資料 EditionFlex DEMO 第一版平成 22 年 11 月第二版平成 22 年 12 月 11 日 15 日 Page - 1 1 DEMO1 Edition Flex エディター ( 編集画面 ) の呼出 DEMO1 では RESOLOGIC の Web サーバー上のデモメニューから まったく別のクラウド上にある Flex

More information

Taro-ホームページB5.jtd

Taro-ホームページB5.jtd 4 タグの基本 (Ⅳ) 画像 基本 19 1 画像を入れる 2 画像の大きさを指定する 3 画像に枠を付ける 4

More information

スライド 1

スライド 1 授業用ファイルのコピー 授業で使用するソフト ホームページビルダー (Ver10 以上 ) みなさんのパソコンに教材をコピーしてください ホームページ講座受講者教材データ USB メモリーで フォルダーごとデスクトップか C ドライブへ Windows10 でファイル名変換 画像リサイズなどが可能なフリーソフトの一例 リサイズ超簡単!Pro をインストールしてください ( 任意ですのでデモを見ていただくだけでも結構です

More information

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf

leaf2-h leaf2-v leaf2 images/leaf2.png leaf3-h leaf3-v leaf3 images/leaf3.png leaf4-h leaf4-v leaf4 images/leaf4.png leaf5-h leaf5-v leaf5 images/leaf 1346-6 応用 2 Falling Leaves 落ち葉が舞い散る様子をアニメーションにしてみましょう できるだけリアルに再現して みます さらに秋のイメージアニメーションを作ってみましょう 落ち葉が舞い散るアニメーション サンプル CSS1 紅葉 ( もみじ ) 銀杏 ( いちょう ) 栗の葉がひらひら舞いながら落ちてきます FallingLeavesAnime の説明 HTML の記述 (FallingLeavesAnime.html)

More information

[ ]スマートセミナーバージョンアップリリースノート

[ ]スマートセミナーバージョンアップリリースノート スマートセミナー 2.0 バージョンアップリリースノート 株式会社シャノン 2010/7/27 1 Copyright SHANON Co., Ltd. All Rights Reserved. 1. はじめに...3 本リリースノートについて... 3 追加 修正される機能とユーザーへの影響について... 3 2. 今回追加された新機能のご紹介...4 HTML エディタの機能改善... 4 アンケートのラジオボタン

More information

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

07_経営論集2010 小松先生.indd 19 1 2009 105 123 Web Web Web Web World Wide Web WWW OS 1990 WWW Web HTML CSS JavaScript Web 1 WWW 2 Web Web 3 Web 4 HTML5 5 Web Web 3 1970 WWW HTML Web WWW WWW WWW WWW WWW 105 Web WWW 2 Web 1 1 NTT NTT

More information