1/2

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "1/2"

Transcription

1 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 1 札幌学院大学社会情報学部 AO 入試課題用テキスト HTML の基礎知識 (4) 1 スタイル指定 1-1 段落を罫線 ( ボーダー ) で囲む 前回はスタイル指定を行なって段落に色をつけた 今度は罫線で囲んで見よう これまでと同様に 開始タグの中に罫線の指定を行なえばよい HTML 文書は次の通りである 下線部が罫線を引くためのスタイル指定である <h3> 段落を罫線で囲む </h3> <p style="margin-left:50px;width:400px;font-size:12pt;line-height:18pt; background-color:#ccffff; border-style:solid;border-width:thin;border-color:#99ccff">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学び コンピュータ上で作品を作ることを経験します </p> <p style="margin-left:70px;width:350px;font-size:12pt;line-height:20pt; background-color:#ccffcc; border-style:dashed;border-width:medium;border-color:#99ffcc"> 学んだ基礎知識を応用し その成果を公表するまでの ( 試行錯誤を含む ) 一連の過程を経験します ゼミナールで学んだことの集大成です </p>

2 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 2 罫線指定の個所を詳しく見てみよう 上記の HTML 文書では以下のようなプロパティが指定されている 以下では罫線を ボーダー と呼んでいる border-style で指定するボーダーの種類は以下のようなものがある 似たよう内容のものもあるので 実際に使って確かめてみよう ボーダーの種類 solid double dashed dotted outset ridge inset groove 内容実線二重線破線点線ボックス全体が出っ張って見える線でっぱりのある線ボックス全体がひっこんで見える線溝のある線 予め用意されているボーダーの太さは以下の 3 種類である ボーダーの太さの種類 thin medium thick 内容細い中くらい太い ボーダーの太さはピクセル数で指定することもできる 例えば border-width:10px とすれば 10 ピクセル分の幅になる ボーダーの色指定は文字などの場合と同じである スタイル指定における : と ; の役割の違いを再度確認 : : ( コロンと読む ) スタイル指定のプロパティとプロパティ値の間に書き 両者が 等しい という意味を持つ ; ( セミコロンと読む ) 複数のスタイル指定の間に書き 両者を 区切る という意味を持つ

3 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 3 ****************************************************************** 1-2 イメージ ( 画像 ) の配置 今度は文字だけでなく イメージも含めていろいろなスタイルを指定してみよう 前回までと同様の画像を使う まず 画像ファイルを表示するための基本的な HTML 文書を作っておく <img id="header1" src="kao1.jpg" width="108" height="122"/> <img id="header2" src="kao2.jpg" width="109" height="134"/> ブラウザ表示は以下のようになる この状態は 2 個の大きな文字が並んでいる と考えると理解しやすい ここで 2 つの <img> タグ間に 改行タグを入れてみよう

4 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 4 <img id="header1" src="kao1.jpg" width="108" height="122"/> <br /> <img id="header2" src="kao2.jpg" width="109" height="134"/> 結果は下図に示すように 1 番目の画像の直後で 改行 されたように画像が配置される ************************************************************ 1-3 イメージ ( 画像 ) に罫線 ( ボーダー ) を付ける 画像の周囲に罫線を引いて 枠のような表示を行なってみる HTML 文書は次の通り

5 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 5 <img id="header1" src="kao1.jpg" width="155" height="192" style="border-style:outset;border-width:10px;border-color:#ffcc99"/> <br /> <img id="header2" src="kao2.jpg" width="154" height="174" style="border-style:groove;border-width:10px;border-color:#ff99ff"/> 結果は以下のように 額に入れられた写真のような表示が得られた ********************************************** 1-4 イメージの間に段落 ( 文章 ) を配置 : 以下では 1 イメージ ( 画像 ) 2 段落 ( 文章 ) 3 イメージ ( 画像 ) 4 段落 ( 文章 ) の順に並べてみよう この順にタグを設定していけばよい <p>~</p> タグによって改行されるので <br /> タグを入れる必要はない

6 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 6 <img id="header1" src="kao1.jpg" width="108" height="122" style="border-style:outset;border-width:10px;border-color:#ffcc99"/> <p style="width:250px">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学び コンピュータ上で作品を作ることを経験します </p> <img id="header2" src="kao2.jpg" width="109" height="134" style="border-style:groove;border-width:10px;border-color:#ff99ff"/> <p style="width:250px"> 学んだ基礎知識を応用し その成果を公表するまでの ( 試行錯誤を含む ) 一連の過程を経験します ゼミナールで学んだことの集大成です </p> 表示結果は以下の通りである 文章は左詰めで 400 ピクセルの幅におさまるように配置されている

7 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 7 *******************************************:: 1-5 画像の周囲に余白を設定 : 画像がページの端や文字に近づきすぎないようにするために 画像の周りにマージン ( 余白 ) を設定する 最初の画像の周囲に 20 ピクセルのマージンを設定してみよう

8 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 8 <img id="header1" src="kao1.jpg" width="108" height="122" style="border-style:outset;border-width:10px;border-color:#ffcc99;margin:20px"/> <p style="width:250px">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学び コンピュータ上で作品を作ることを経験します </p> <img id="header2" src="kao2.jpg" width="109" height="134" style="border-style:groove;border-width:10px;border-color:#ff99ff"/> <p style="width:250px"> 学んだ基礎知識を応用し その成果を公表するまでの ( 試行錯誤を含む ) 一連の過程を経験します ゼミナールで学んだことの集大成です </p> 結果は以下の通りである 矢印で示された部分がマージンである ****************************************

9 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 画像の横に文章を配置する : 今度は文章を画像の右側に並べてみよう 画像を左側に寄せる場合には align= left を指定する 以下では 2 番目の画像にもマージンを設定している <img id="header1" src="kao1.jpg" width="108" height="122" align="left" style="border-style:outset;border-width:10px;border-color:#ffcc99;margin:20px"/> <p style="width:250px">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学び コンピュータ上で作品を作ることを経験します </p> <img id="header2" src="kao2.jpg" width="109" height="134" style="border-style:groove;border-width:10px;border-color:#ff99ff";margin:20px/> <p style="width:250px"> 学んだ基礎知識を応用し その成果を公表するまでの ( 試行錯誤を含む ) 一連の過程を経験します ゼミナールで学んだことの集大成です </p> 結果は以下の通りである ここで 2 番目の画像も最初の画像の右側に配置されてしまった

10 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 10 この状態を解除するには 最初の段落の終了タグの後で 段落の右寄せを解除 する指定をすればよい 具体的には改行タグの中で以下のような指定をする <br clear= left > <img id="header1" src="kao1.jpg" width="108" height="122" align="left" style="border-style:outset;border-width:10px;border-color:#ffcc99;margin:20px"/> <p style="width:250px">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学び コンピュータ上で作品を作ることを経験します </p> <br clear="left"/> <img id="header2" src="kao2.jpg" width="109" height="134" align="left" style="border-style:groove;border-width:10px;border-color:#ff99ff;margin:20px"/> <p style="width:250px"> 学んだ基礎知識を応用し その成果を公表するまでの ( 試行錯誤を含む ) 一連の過程を経験します ゼミナールで学んだことの集大成です </p>

11 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 11 この結果は以下の通りである 2 番目の画像についても同じような指定を行なって それぞれの画像の右側に段落が配置されるようにした ************************************************************** 1-7 横罫線の指定 横罫線は <hr> タグで指定する 以下の例で指定されているプロパティは 1 size : 線の太さをピクセル数で指定 2 width : 線の長さをピクセル数で指定 3 align : 線の位置を指定 align= left 左寄せ center 中央 right 右寄せ 4 color : 文字色の場合と同じ

12 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 12 <hr align="left" color="#00cccc" size="4" width="400"> <img id="header1" src="kao1.jpg" width="108" height="122" align="left" style="border-style:outset;border-width:10px;border-color:#ffcc99;margin:20px"/> <p style="width:250px">cg( コンピュータグラフィックス ) のモデリングや作図方法などに関する基礎知識 CG 制作やホームページ作りの基礎を学び コンピュータ上で作品を作ることを経験します </p> <br clear="left"/> <hr align="left" color="#00cccc" size="4" width="400"> <img id="header2" src="kao2.jpg" width="109" height="134" align="left" style="border-style:groove;border-width:10px;border-color:#ff99ff;margin:20px"/> <p style="width:250px"> 学んだ基礎知識を応用し その成果を公表するまでの ( 試行錯誤を含む ) 一連の過程を経験します ゼミナールで学んだことの集大成です </p> <br clear="left"/> <hr align="left" color="#00cccc" size="4" width="400">

13 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 13 *********************************** 演習課題 4: 上記の最後の例題を使って 自分の好きな写真と その説明を表示する HP を作成してみよう

1/2

1/2 札幌学院大学社会情報学部 AO 入試課題用テキスト (3) 1 札幌学院大学社会情報学部 AO 入試課題用テキスト HTML の基礎知識 (3) 1. スタイル指定 フォントの大きさや種類 行間 ページ上のレイアウトなどを文書の スタイル と呼び このスタイルを指定するためのデータを スタイルシート と呼ぶ 以下では CSS(Cascading Style Sheets) と呼ばれるスタイルシート言語を使用する

More information

1/2

1/2 札幌学院大学社会情報学部課題用テキスト (2) 1 札幌学院大学社会情報学部課題用テキスト HTML の基礎知識 (2) 1 画像の表示 HP に画像を表示させてみる まず HTML 文書と同じフォルダ内 に JPEG ファイル ( 拡張子.jpg ) を 1 個準備する ( 画像の作り方 サイズの調べ方はこのプリントの最後を参照 ) この画像を読みこんで表示するためのタグは以下の通りである 画像ファイル名と

More information

Web データ管理 HTML+CSS (3) (2 章 ) 2011/10/19( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/23

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

More information

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

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

More information

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

padding( パディング ) padding プロパティでボックスの内側の余白を指定します この部分の内側には背景 ( 背景色や背景画像 ) を表示できます border( ボーダー ) border プロパティでボックスの境界線を指定します ボーダーには色 太さ 線の種類を指定できます 画像で 1111 基本のボックス (margin, width, height, border, background) CSS3 アニメーション ( およびトランジション ) の基本はボックスです このボックスに色を付けたり ボックスにテキスト ( 文字 ) や画像を入れて ボックスを移動 回転 2D 変形 3D 変形してアニメーションを作ります では先ずボックスを作ってみましょう 基本的なボックスは下の四角形のようなものです

More information

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

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

More information

Web 設計入門

Web 設計入門 Web デザイン実践 #4-1 CSS(2) D.Mitsuhashi 1 HTML5 コンテンツモデル D.Mitsuhashi 2 コンテンツモデル HTML5 の要素は意味の上で 7 つのカテゴリに分けられる コンテンツモデルから 要素の中に何を含んでよいかが決定される 参考 W3C: HTML5 content models http://www.w3.org/tr/html5/dom.html#content-models

More information

Taro-ホームページB5.jtd

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

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

サンプル 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

<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

コンピュータ基礎実習 ( 上級 ) 第 13 週の例では <h1> タグが対象であることを意味します セレクタを変えることで見栄えを様々な対象に設定できます プロパティ (property) は設定する見栄え ( スタイル ) の種類のことです 値はプロパティに対する具体的な設定値です この例では文

コンピュータ基礎実習 ( 上級 ) 第 13 週の例では <h1> タグが対象であることを意味します セレクタを変えることで見栄えを様々な対象に設定できます プロパティ (property) は設定する見栄え ( スタイル ) の種類のことです 値はプロパティに対する具体的な設定値です この例では文 コンピュータ基礎実習 ( 上級 ) 第 13 週 コンピュータ基礎実習 ( 上級 ) 第 13 週スタイルシートの基礎今回の授業は スタイルシート (CSS) の使い方を解説します 1. CSS の基本 ( 教科書第 3 章 ) 1.1. CSS とは CSS は Cascading Style Sheets の略で ウェブページの見栄えを設定するための言語です CSS はウェブページにとって比較的新しい規格ですが

More information

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 The. H.30 情報研究会 1

合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 The. H.30 情報研究会 1 合宿事前講座 Web 開発の基本編その 2 情報研究会モブ 薗田海樹 2018 6.12 The. 1 前回の復習 n ブラウザ って何? n Web サイト のキホンを作ってみよう 2 ブラウザ とは?HTML とは?? n ブラウザとは? WEB ページを閲覧するためのソフトウェア p HTML というブラウザに言語を表示する言語によって表示されている n HTML とは? p Hyper Text

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

27短01研01斉藤.indd

27短01研01斉藤.indd WordPress を用いたホームページ作成 Making a homepage using the WordPress 斎藤敏之 Toshiyuki SAITOH キーワード 1. はじめに WordPress WordPress PC PC WordPress HTML CSS HTML CSS WordPress 2.HTMLとCSSの基礎 HTML CSS World Wide Web Consortium

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

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

Border Width と記述します id 属性 div3 の div 要素を記述し 中にテキストで Border Radius と記述します id 属性 div4 の div 要素を記述し 中に span 要素を1つ記述しその中にテキストで Border All<br />(Color,Widt 1338-1 ボーダーのアニメーション (1) border のアニメーションは web ページを作るときにボタンのアニメーションとして使えそ うです アニメーションで変化させることができる border 関係のプロパティ border-color animation で色を滑らかに変化させることができます border-width animation で幅を滑らかに変化させることができます border-radius

More information

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

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

More information

■新聞記事

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

More information

第6回 CSS入門(つづき)

第6回 CSS入門(つづき) Slide URL https://vu5.sfc.keio.ac.jp/slide/ Web 情報システム構成法第 6 回 CSS 入門 ( 続き ) 萩野達也 (hagino@sfc.keio.ac.jp) 1 CSS の役割 HTML に表現を与える 背景 色, 画像, 画像の繰り返し 文字 色, 種類, 太さ, 傾き, 大きさ 文書 整列 ( 左揃え, 中央揃え, 右揃え, 均等割り付け )

More information

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b

id, クラスで指定 (#id 名,.class 名 ) 4. 様々なセレクタ a,b :a と b を指定 a b :a の下の階層の b を指定 a>b :a の直下の b を指定 a+b :a の次の b を指定 ab :a かつ b を指定 5. 属性セレクタ a[b] :a タグ内で b CSS まとめ 1. CSS とは? ホームページを作る技術の一つで, 見た目の記述をするもの. W3C で作成されており,W3C のサイトで仕様を確認できる. 2. CSS が記述できる場所 1 style タグで記述 (html 内に記述 ) する. 2 style 属性で記述 (html 内に記述 ) する. 3 外部ファイルで記述する.( 一般的な方式であり, 以下, この方式の説 明 )

More information

2 目次 1. 基本操作 ウィジェットとは何か ウィジェットの目的と構成 ウィジェットの設置 ウィジェットのカスタマイズ ウィジェットコードの構成 ウィジェットの外観を変更する..

2 目次 1. 基本操作 ウィジェットとは何か ウィジェットの目的と構成 ウィジェットの設置 ウィジェットのカスタマイズ ウィジェットコードの構成 ウィジェットの外観を変更する.. Newdea Inc. プロジェクトセンター ユーザーガイド ウィジェット 2 目次 1. 基本操作... 3 1.1. ウィジェットとは何か... 3 1.2. ウィジェットの目的と構成... 3 1.3. ウィジェットの設置... 5 2. ウィジェットのカスタマイズ... 10 2.1. ウィジェットコードの構成... 10 2.2. ウィジェットの外観を変更する... 11 2.2.1. 個別のウィジェットの外観を変更する...

More information

文京女子大学外国語学部

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

More information

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

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

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

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

Webクリエイター能力認定試験<初級>公認テキスト&問題集 改訂版 補足資料

Webクリエイター能力認定試験<初級>公認テキスト&問題集 改訂版 補足資料 よくわかるマスター Web クリエイター能力認定試験 HTML4.01 対応 < 初級 > 公認テキスト & 問題集改訂版 補足資料 本資料には 次の補足説明を収録しています (1)Internet Explorer 8 で学習する場合の補足説明 (2) 受験者用 FD の記述に関する補足説明なお ご利用にあたって 本資料をご利用いただく前に を必ずご一読ください 本資料をご利用いただく前に テキスト名

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

トリガーをわかり易くする方法

トリガーをわかり易くする方法 1221 トリガーをわかり易くする方法 (cursor, border-radius) 例えばブラウザにつぎのような画面が表示されていたら あなたはこの手の画像を何だと 思いますか? ほとんどの方が ハンドサインじゃないの? か 右方向を示しているのでしょう? と思われたのではないでしょうか 実は 私は手の画像をクリックすると画像が transition で右方向へ移動するように css を記述してあったのですが

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

</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

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content:" 記号や文字 ";}

要素にフォーカスが当たったときは 例えば以下のように記述する input:focus{} 疑似要素 p:first-lin{ } 一行目だけ p:first-letter{} 最初の文字だけ要素の前や後に付け加えるには 以下のように記述する p:before{content: 記号や文字 ;} css とは web ページを構築する上で 主に見た目にかかわる部分を記述するものである 記述方法は html の に直接書く方法 のタグに一つ一つ書く方法と 別の ファイルとして書いておく方法がある 1つ目の方法は タグを に記述して起き その中に css で記述する 2つ目の方法は 例えば

More information

コンピュータ基礎実習 ( 上級 ) 第 12 週例では <h1> タグが対象であることを意味します セレクタを変えることで見栄えを様々な対象に設定できます プロパティ (property) は設定する見栄え ( スタイル ) の種類のことです 値はプロパティに対する具体的な設定値です この例では文字

コンピュータ基礎実習 ( 上級 ) 第 12 週例では <h1> タグが対象であることを意味します セレクタを変えることで見栄えを様々な対象に設定できます プロパティ (property) は設定する見栄え ( スタイル ) の種類のことです 値はプロパティに対する具体的な設定値です この例では文字 コンピュータ基礎実習 ( 上級 ) 第 12 週 コンピュータ基礎実習 ( 上級 ) 第 12 週スタイルシートの基礎今回の授業は スタイルシート (CSS) の使い方を解説します 1. CSS の基本 ( 教科書第 3 章 ) 1.1. CSS とは CSS は Cascading Style Sheets の略で ウェブページの見栄えを設定するための言語です CSS はウェブページにとって比較的新しい規格ですが

More information

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

transform: translatex(x 方向の移動距離 ) transform: translatey(y 方向の移動距離 ) transform: translate(x 方向の移動距離, Y 方向の移動距離 ) transform: translate 関数は 移動する位置ではなく 移動 1225-8 練習 8 Translate Balls(translateX, translatey, translate) transform プロパティの translate 関数を使用して 2 つのボールを斜めに転がすトランジシ ョンを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると 2 つのボールが斜 めに転がります 動きの仕組み このトランジションは

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

地域ポータルサイト「こむねっと ひろしま」

地域ポータルサイト「こむねっと ひろしま」 5.1. エディタとは? NetCommons の全モジュールで共通する編集画面です 5.2. 通常のエディタの使い方 (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17)(18) (19) (20) (21) (22) (23) (24) (1) 書式設定左から フォント サイズ スタイル を設定するためのプルダウンメニューです

More information

Color Change

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

More information

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

transform: skewx(x 軸の傾斜角度 ) transform: skewy(y 軸の傾斜角度 ) transform: skew(x 軸の傾斜角度, Y 軸の傾斜角度 ) skewx( ) は X 軸に沿って傾斜します skewy( ) は Y 軸に沿って傾斜します skew( ) は 1225-9 練習 9 Skew Wheel(skewX, skewy, skew) カラーホイールが斜めに回転するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると カラーホイールが 回転しながら斜めに傾いていきます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 カラーホイールの画像の傾き transform

More information

ホームページの作成

ホームページの作成 HTML5,CSS 資料 HTML5 HTML の文法 HTML(Hyper Text Markup Language) は, 文章の部分を Tag( タグ ) と呼ばれる命令で挟んでいく タグは ... 開始終了のように開始タグと終了タグ一対のペアになっている. タグは, 挟まれた部分がどのような情報であるかを示している 属性としてさらに細かい設定を開始タグの中に書き込むことができる

More information

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

Web10.pptx

Web10.pptx 情 報 処 理 技 法 (マルチメディア)I 1 第 10 回 CSS 基 礎 (2) 2 HTML5 コンテンツモデル 3 コンテンツモデル HTML5 のタグは 7つのカテゴリに 分 けられるコン テンツモデルを 採 用 している コンテンツモデルから 要 素 の 中 に 何 を 含 んでよい かが 決 定 される 参 考 W3C: HTML5 content models http://www.w3.org/tr/2011/wd-html5-20110525/content-models.html

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

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

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

More information

Jimdo はホームページ制作のプロも使用する では JimdoでHTMLやCSSなどのコードを利用できないか というと実はそうではありません あくまで万人が使えるような基本の操作を前提としつつ コードを書くエリアも整備されています Jimdoはホームページ制作のプロも使用するサービスです そういっ

Jimdo はホームページ制作のプロも使用する では JimdoでHTMLやCSSなどのコードを利用できないか というと実はそうではありません あくまで万人が使えるような基本の操作を前提としつつ コードを書くエリアも整備されています Jimdoはホームページ制作のプロも使用するサービスです そういっ ホームページのクオリティアップ術 : 制作編 ( 全 11 回 ) 第 9 回 :HTML と CSS に挑戦! 項目に背景色や枠線をつける方法 執筆 : 赤間公太郎 ( 株式会社マジカルリミックス ) " ホームページのクオリティアップ術 : 制作編 " のコラムを担当する マジカルリミックスの赤間です 全 11 回のこのコラム では ホームページづくりに役立つサービスやその利用方法をご紹介していきます

More information

0. 0. 0. 0. 0. 0. 07-. 07-. 08-. 08-. 09. 0. 8 0 9 8 7 -. 0 9 7 7 8 7 8 9 9 0 0 -. 8 9 7 7 8 9 -. 8 7 8 9 0 0 9 7 -. . 画像の回り込み 挿入した画像を右寄せにしたり 左寄せにしたりなどしてテキストを回り込ませることができます 画像の回り込み方法 右寄せ ボタンをクリックして画像を挿入してくださ

More information

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

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

More information

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され

画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility: visible; と指定してあるので裏側が表示されます 上の画像 ( 水色の外枠に紅葉 ) は backface-visibility: hidden; と指定してあるので裏側が表示され 1342-6 応用 1 Backface Image 画像の表と裏を回転させるアニメーション 1 サンプル CSS1 外側と内側が逆回転します 裏側も見えますよ! 仕組みの説明 下の画像 ( 黄緑色の外枠に白い桜 ) と上の画像 ( 水色の外枠に紅葉 ) を 左上端を合わせて同じ位置に重ねてあります 1 画像全体を左右反転させると 下の画像 ( 黄緑色の外枠に白い桜 ) は backface-visibility:

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

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

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box 1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました

More information

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp

1つ目は MASK という文字の下に楕円形のマスクイメージで その文字と楕円形の中に複数画像のスライドを表示するので id 属性 slide の div 要素の中に画像を5つ (images/dsc00203l.jpg images/dsc00027l.jpg images/dsc00092l.jp 1332 Masking の効果 -webkit-mask-box-image プロパティをアニメーションに利用してみましょう Masking は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Masking の仕様が Working Draft となっています 近い将来 webkit

More information

ブロックの 1 文字目のを変更する セレクタ : first-letter { 1 文字目のを指定するフォントや文字色 背景色 枠線などの ブロックの 1 文字目を字下げする text-indent: 字下げ幅段落の1 文字目の字下げ幅を指定する em( 標準 1em) px( ピクセル ) pt(

ブロックの 1 文字目のを変更する セレクタ : first-letter { 1 文字目のを指定するフォントや文字色 背景色 枠線などの ブロックの 1 文字目を字下げする text-indent: 字下げ幅段落の1 文字目の字下げ幅を指定する em( 標準 1em) px( ピクセル ) pt( 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) Web プログラミング 1 HTML+CSS (4) (2 章 ) 2013/5/15( 水 ) 演習名 使用するフォルダ 演習 1 Z: Webプログラミング1 20130515 演習

More information

広告掲載規定

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

More information

Microsoft PowerPoint - 08回目.pptx

Microsoft PowerPoint - 08回目.pptx 1 コンピュータリテラシーII ( 樋 口 担 当 ) 4 回 目 10/17 本 日 の 予 定 2 Webページの 作 成 ( 続 き) I.スタイルシート II.レイアウト III. 課 題 3 I.スタイルシート 1.スタイルシート 4 スタイルシート: 文 書 のスタイルの 設 定 が 書 かれているデータ CSS:スタイルシートの 書 き 方 ( 言 語 )の 一 つ Cascading

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

1

1 6. スタイルシートとは 6.1. デザインはスタイルシートで 1 学期は ホームページを作成するための HTML の基礎と コンテンツのパーツである画像を加工 作成する基本的な技術を学びました 次のステップとして ホームページに多くの色を統一的に付けたり レイアウト配置を細かく設定するための方法を学んでいきます HTML でも色やサイズを指定したりする方法を学びましたが ホームページの保守性などの面から

More information

Web 設計入門

Web 設計入門 情報処理技法 ( マルチメディアと表現 )I 第 12 回 CSS によるレイアウトデザイン (2) D.Mitsuhashi 1 クロスブラウジング D.Mitsuhashi 2 クロスブラウジング ブラウザや OS によって レンダリングには少なからず差異が存在する 同じソースで記述しても 表示が異なる場合がある なるべく 表示の差異を最小化し, 共通の視覚的デザインを提供すべき D.Mitsuhashi

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

Taro-02_Web_html自習テキストⅡ.

Taro-02_Web_html自習テキストⅡ. 平成 18 年度 学校 Web ページ作成研修講座 HTML の基礎 Ⅱ ~ メモ帳で Web ページを作ろう!!~ 今回の勉強内容 背景画像の挿入 / 画像の挿入 / BGM の設定 / メールリンクの設定 岩手県立総合教育センター 情報教育室 目 次 1 復習 1 2 背景画像の挿入 2 3 画像の挿入 4 4 BGM の挿入 5 5 メールリンクの設定 6 作業フォルダの準備 作成したファイルを保存するフォルダとして

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

( 注 )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

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

1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する) 1232 セレクタを使う (selector) CSS でスタイルを指定する時に セレクタ (selector) でスタイルを適用する対象を特定することができます セレクタには次のようなものがあります もうすでに使用してきた #box1 のような指定は id セレクタ と呼ばれるセレクタです また フォントの指定で使用してきた.font1 は class セレクタ と呼ばれるセレクタです セレクタ

More information

1 はじめに

1 はじめに 0 年度メディアプロジェクト演習 HTML 講座発展編 ~ CSS と Web アクセシビリティ 立命館大学情報理工学部メディア情報学科 進捗が遅れている場合に限り, テキスト中で 省略可 マークのついた節は省略してもよい. はじめに本演習ではこれまで, 様々なタグを用いた基礎的な Web ページの作成方法 レイアウト方法について学んできました. ここで, タグは本来,Web ページ上の文章構造を決定するために用いるものです.

More information

HTML発展編2

HTML発展編2 0 年度メディアプロジェクト演習 HTML 講座発展編 ~ CSS と Web アクセシビリティ 立命館大学情報理工学部メディア情報学科 進捗が遅れている場合に限り, テキスト中で 省略可 マークのついた節は省略してもよい. はじめに本演習ではこれまで, 様々なタグを用いた基礎的な Web ページの作成方法 レイアウト方法について学んできました. ここで, タグは本来, Web ページ上の文章構造を決定するために用いるものです.

More information

目次

目次 http://www0.info.kanagawa-u.ac.jp/~kaiya/wa/ dotcampus ショートコード 212834 ウェブアプリケーション 2017/9/28 海谷治彦 1 目次 Terapad をインストールしてください! ウェブページ表示のメカニズム ( 復習 ) HTML 主なタグの紹介 スタイルシート インライン指定のみ 2 UTF-8N が使えるエディタ Win でも

More information

JavaScript 演習 2 1

JavaScript 演習 2 1 JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript

More information

< F2D D834F834A E837D E6A7464>

< F2D D834F834A E837D E6A7464> e しずおかブログのカスタマイズ 1. トップページ冒頭の写真の貼り替え 2. タイトル ブログ説明の大きさ 色 配置の変更 3. 背景の変更 これらについて説明します テンプレートによって変更箇所 位置などは様々なので 今回はモデルテンプレートとして シンプルブルー ( 背景グラデーション ) のテンプレートにて 解説していきます シンプルブラウン ( 背景グラデーション ) ベージュ ( 背景グラデーション

More information

モバイルカスタマイズページ マニュアル 楽天トラベル株式会社モバイル事業部 2007 年 5 月 15 日 1

モバイルカスタマイズページ マニュアル 楽天トラベル株式会社モバイル事業部 2007 年 5 月 15 日 1 モバイルカスタマイズページ マニュアル 楽天トラベル株式会社モバイル事業部 2007 年 5 月 15 日 1 目次 モバイルカスタマイズページでできること P 3 ページの表示設定について P 4 基本情報ページの編集 P 5 カスタマイズページの作成 編集 P 9 ( フリーフォーマット版 (GOLD 版 ) の作成方法 P15 16) 作成したページの各種設定 ( ページの公開設定について P18

More information

Web

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

More information

CSSの基礎

CSSの基礎 Webページの 見 た 目 を 定 義 する 視 覚 のための 言 語 CSS ファイル 視 覚 表 現 関 連 付 ける HTML ファイル 論 理 構 造 CSSの 基 礎 CSSの 記 述 方 法 基 本 的 な 形 セレクタ{ プロパティ1: 値 ; プロパティ2: 値 ; セレクタの 種 類 タイプセレクタ CSSの 記 述 HTML CSSを 適 用 する 箇 所 CSSを 記 述 する

More information

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属 1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています

More information

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

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

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

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

<!DOCTYPE html> <html> <head> <title>clipanime1</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=clipanime1.css> </head> < 1331 Clipping の効果 clip プロパティをアニメーションに利用してみましょう 1 つの画像を 4 分割して別々に動かす サンプル CSS1 1 つの画像を 4 分割して それぞれの画像が違う動きをするアニメーションを作ります 4 分割した左上の画像は透明に近づけます 右上の画像は 3D 変形しながら移動します 左下の画像は回転しながら移動します 右下の画像は拡大しながら移動します ClipAnime1

More information

それぞれの要素がどのようなデザインで表示されるか確認しよう ファイル名 ex08-01.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> デフォルトスタイルシートの確認 </title> <link href="css

それぞれの要素がどのようなデザインで表示されるか確認しよう ファイル名 ex08-01.html <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title> デフォルトスタイルシートの確認 </title> <link href=css Web デザイン基礎授業ノート 8 < テーマ > HTML の役割 (3) 1 見出しと段落 (1) 要素 Web サイト全体の総合的な主題 ( テーマ タイトル ) 最重要人間にもコンピューターにも主題が伝わること ~ ページ内の情報に対する見出し階層構造にする ブロックレベルの性質前後で改行され 縦に積まれる (2)p

More information

競技課題|ホームページ

競技課題|ホームページ 平成 28 年度埼玉県障害者技能競技大会ホームページ競技課題 A 1 競技の概要 (1) 競技課題競技課題 Aは課題の傾向を示した公開課題であり 競技課題 Bは競技当日用である (2) 課題の概要 ネットワークセキュリティ のホームページとして スタイルシートと次のページを作成する ネットワークセキュリティ コンピュータウィルス 無線 LAN のセキュリティ ファイヤーウォール (3) 競技時間競技時間は

More information

Web概論

Web概論 HTML/CSS Chapter 04 スタイルシートを使う Copyright 2011 ZDRIVE, K.K. All rights reserved. 4.1 CSS の仕組みと書式 CSS とは Cascading Style Sheet の略 単に スタイルシート と呼ばれることもある HTML で作ったページにレイアウトや装飾などのデザインを施すための仕組み CSS を記述したファイルは.css

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

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

目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11 CSS について ( 概要 ) 作成日 : 2016/01/21 作成者 : 西村 はじめに この資料は HTML がある程度 ( 少しでも ) わかる人に CSS の仕組みを少しだけわかってもらえるように書いています この資料では 下記を説明します CSS とは何か CSS の基本の形 CSS の読み込み方 セレクタとは何か / 最低限覚えるとよいセレクタ プロパティと値 / 最低限覚えるとよいスタイル

More information

Sushi Web ページの編集 Card 1 of 10 3 パソコンの画面上で ブラウザとテキストエディタを横に並べます ブラウザ テキストエディタ 4 5 テキストエディタで 自分の自己紹介になるように変更します 変更したらテキストを保存します ( ファイル > 保存 ) 保存したら F5 を

Sushi Web ページの編集 Card 1 of 10 3 パソコンの画面上で ブラウザとテキストエディタを横に並べます ブラウザ テキストエディタ 4 5 テキストエディタで 自分の自己紹介になるように変更します 変更したらテキストを保存します ( ファイル > 保存 ) 保存したら F5 を はじめての Web サイト Sushi Web ページの編集 Card 1 of 10 1 これから新しい Web ページを作ります! 今回は本のリストを作りますが HTML を使えば何でも好きな Web ページが作れます! まず http://coderdojo-hiroshima.com/my-first-website-ja.zip から HTML のソースファイルをダウンロードします my-first-website

More information

スライド 1

スライド 1 操作マニュアル 1 ブログ作成 目次 はじめに ログイン方法 P2 コンテンツ一覧画面 P3 新しい記事を書く P4 本文入力エリアの説明 P5 画像をアップする P6.7 カテゴリ機能の説明 P8 リンクの貼り方 P9 動画の貼り方 P10 ブログの公開 P11 ブログの一覧画面 P12 2 フラッシュ フラッシュの編集 P13.14 3 その他 サイトの表示がおかしい P15 画像サイズについて

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

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

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

More information

観光情報論 第6講 (着地情報)トラベルキオスク & 画像を入れる

観光情報論 第6講 (着地情報)トラベルキオスク & 画像を入れる 観光情報論 6 月 10 日第 8 講画像挿入の応用 ( オリジナルの画像作成 ) Civic Pride:Bristol (Lecture) Civic Pride: Newcastle/Gateshead (Homework) オリジナルの絵やバナーを入れる メモ帳 ( 例 )

More information

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

<!DOCTYPE html> <html> <head> <title>spaceorbitanime</title> <meta charset=utf-8> <link rel=stylesheet type=text/css href=spaceorbitanime.css> 1346-5 応用 2 Space Trip 宇宙船が地球を周回するアニメーションと宇宙旅行へ出発するアニメーションを作ってみ ましょう 宇宙船が地球を周回するアニメーション サンプル CSS1 スペースシャトルは円軌道で USS エンタープライズ号は楕円軌道で地球を周回します SpaceOrbitAnime の説明 HTML の記述 (SpaceOrbitAnime.html) id 属性 stage

More information

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

コンピュータ中級B ~Javaプログラミング~  第3回 コンピュータと情報をやりとりするには? Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 1 コンピュータ 2C ~ マルチメディア ~ 第 3 回 Web ページを作成するには? ( スタイルシート ) 人間科学科コミュニケーション専攻 白銀純子 Copyright (C) Junko Shirogane,

More information

WWW(World Wide Web) 世界中に張り巡らされた クモの巣 という意味 CERN( 欧州合同原子核共同研究機関 ) の研究者が開発した ハイパーテキスト形式 ( HTML ) の分散情報システム WWW サーバーのアドレスを指定するのに URL(Uniform Resource Loc

WWW(World Wide Web) 世界中に張り巡らされた クモの巣 という意味 CERN( 欧州合同原子核共同研究機関 ) の研究者が開発した ハイパーテキスト形式 ( HTML ) の分散情報システム WWW サーバーのアドレスを指定するのに URL(Uniform Resource Loc インターネットの情報技術 HTML入門 Webページが表示される仕組み WWWServer WWWServer 2 必要なデータを送信 Client WWWServer 1 見たいWebページのURLを入力 URLをもとに ページを指定してデータ送 信を要求 3 目的のWebページを閲覧 Client WWW(World Wide Web) 世界中に張り巡らされた クモの巣 という意味 CERN(

More information

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

コンピュータ中級B ~Javaプログラミング~  第3回 コンピュータと情報をやりとりするには? Copyright (C) Junko Shirogane, Tokyo Woman's Christian University 2011, All rights reserved. 1 コンピュータ 2C ~ マルチメディア ~ 第 2 回 Web ページを作成するには? (HTML の基本 2) 人間科学科コミュニケーション専攻 白銀純子 Copyright (C) Junko Shirogane,

More information

画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/

画像 images/ SpaceShuttle.png を指定します <!DOCTYPE html> <html> <head> <title>circleanime1</title> <meta charset=utf-8> <link rel=stylesheet type=text/ 1324 画像を動かす ( 円 楕円 渦巻き運動 ) 画像を円運動 楕円運動 渦巻き運動をさせる方法です 3つの方法があります 1transform-origin プロパティで半径を作る 2 親要素ボックスの transform-origin を移動して回転させ 画像を子要素に指定する 3 大きさのない親要素ボックスを回転させ 画像を子要素に指定する 3の方法は 円運動の回転の中心点が分かり易いので

More information

PowerPoint プレゼンテーション

PowerPoint プレゼンテーション Seijo.Tokyo のコンテンツ作成 管理方法基本編 大江将史 初版 2017.7.3 2 版 2017.7.10 seijo.tokyo 1 コンテンツ作成 管理のイメージ コンテンツとは サイト上で作成する文章やイメージ リンクなどで構成されるもの 複数のコンテンツを組み合わせて seijo.tokyo という WEB サイト が作られている コンテンツは サイト上で ログイン をしなければ

More information

5 5. 書式の設定 書式設定は ホーム タブの フォント 配置 数値 の各グループのツールから設定することもできますが ここではツール及び各グループのダイアログボックスランチャーからの設定について説明いたします 5-1 セルの書式設定セルに対しての書式設定は 数値 グループのダイアログボックスランチャーをクリックすると表示される セルの書式設定 ダイアログボックスで行います フォント 配置 も同様のダイアログボックスが表示されます

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

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

Microsoft Word - 平成サロン09年2月21日一筆箋作成.doc

Microsoft Word - 平成サロン09年2月21日一筆箋作成.doc Word を起動します 平成サロン 09 年 2 月 21 日一筆箋作成 [ ページレイアウト ] タブをクリックし ページ設定 グループ右下にある [ ページ設定 ] をクリックします ページ設定 画面が表示されるので 文字数と行数 タブをクリックし 文字方向 欄の [ 縦書 き ] をクリックし オプションボタンをオンにします 作成した一筆箋を印刷後 切り分けやすいように枠と枠の間に余白を入れたい場合は

More information

1222-A Transform Function Order (trsn

1222-A Transform Function Order (trsn 1256 Reflect プロパティ (-webkit-box-reflect) -webkit-box-reflect プロパティを使用して反射画像を作ってみましょう webkit の仕様なので Safari Chrome で適用されますが それ以外のブラウザは未対応です (2015 年 11 月 25 日現在 ) -webkit-box-reflect プロパティは 画像が鏡に映って反転 ( 反射画像

More information