ホームページの作成

Size: px
Start display at page:

Download "ホームページの作成"

Transcription

1 HTML5,CSS 資料 HTML5 HTML の文法 HTML(Hyper Text Markup Language) は, 文章の部分を Tag( タグ ) と呼ばれる命令で挟んでいく タグは <hoge>...</hoge> 開始終了のように開始タグと終了タグ一対のペアになっている. タグは, 挟まれた部分がどのような情報であるかを示している 属性としてさらに細かい設定を開始タグの中に書き込むことができる <hoge attribute = "value"> 属性は一つのタグに複数指定することができる. その場合は, 新たな属性との境目に半角のスペースを入れる 開始 終了タグの入れ子構造は決して崩してはならない HTML ファイルの作成 (1) エディタ (TeraPad) を起動する (2) ファイルに名前をつけて保存する ( ア ) ファイル形式 :HTML ( イ ) 文字コード :UTF8, ( ウ ) 改行コード :LF にする (3) 1 行目に <!DOCTYPE html> (4) 2 行目に <html>, 最終行には </html> (5) 3 行目に <head>, 4 行目に </head> ヘッダ情報は <head> </head> の中に加えていく (6) ヘッダ情報に以下の二行を記述する <meta charset= UTF-8 > 文字コードの指定 <title> タイトル </title> 文章のタイトルの指定 (7) </head> の下に <body></body> を加える 1

2 <!DOCTYPE html> <html> <head> <meta charset= UTF-8 > <title> タイトル </title> </head> <body> </body></html> ( 例 ) 本文の記述 1: ヘッダーとフッター, 構造をあらわすタグサイト上部をヘッダー, 下部をフッターと呼ぶ ヘッダーには, サイトがどこに属しているのかをわかるようにタイトルをつける フッターにはコピーライトをつける <header> <h1> タイトル </h1> </header> <footer> (c) Copyright 2014 hogehoge </footer> 構造をあらわすタグ ariticle aside figcaption figure header footer hgroup mark nav section time 記事の部分関連リンク figure 部分の脚柱画像や映像の範囲指定文書のヘッダー部分文書のフッター部分, 作者情報, コピーライトを記載見出しタグをグルーピングする文字列の中のハイライトナビゲーション文章のそれぞれの要素を囲む文字列が時間や日付の場合 本文の記述 2: 見出しと本文本文は <body> タグで囲まれた部分, 上図 ( 例 ) の の部分に書く. ここでいう本文とは, 主にテキスト ( 文字 ) と画像 動画などからなりたっている 以下, 使用することができるタグのうち最も基本的なものについて解説する 2

3 (1) 段落 <p> </p> 文章の本文には一段落ごとに <p> というタグをつける. このタグで囲まれ たものがひとつの段落である. (2) タイトル <h1> </h1> / ~ / <h6> </h6> 見出しを設定すると, その部分は大きくあるいは太字で表示される. 見出しは <h1>~<h6> まであり,<h1> が一番大きな見出しである. (3) 同一コンテンツのマークアップ <article> </article> 同じ内容に属する部分を囲むことでマークアップする タイトルのタグ h1~h6 はマークアップされた内部ごとに 1 から始めることができる その他のタグ (1) テーマやコンテンツの区切り 区切り線 <hr> 単独で用いられて, 終了タグを持たない CSS で, 長さ, 太さ, 水平方向の位置, 陰の有無を指定できる 長さ width: 50%> : 画面の 50% の長さ 太さ height: 5> :5 ピクセルの長さ align: center 中央に表示,left 左寄せで表示,right 右寄せで表示 (2) ハイパーリンクを張る <a href= > </a> ハイパーリンクを張ることによって, 文書と文書, あるいはウェブサイトとウェブサイトを結びつけることができる 引用符で囲まれた箇所には, インターネット上の URL やファイル名を入れる 属性で target = _blank と記述しておくと, リンク先が別のウィンドウで開く (_self / _parent / _top / ウィンドウ名 ) (3) 画像を挿入する <img src = hoge.jpg width = "360" height = "220" alt = " 風景 > img タグは開始タグ単独で用いられる width 属性で画像の幅,height 属性で画像の高さを指定できる. 別に指定しなくてもよいが, その場合, あらかじめ画像の大きさを調整しておく必要がある. 数値はピクセル (px) 単位で指定する.1px は約 0.3mm である. 幅と高さを両方指定すると, 元の画像の縦横の比率が変わる可能性があるので, 通常はどちらか一方だけを指定する. alt 属性では, 画像ファイルについての説明を記述しておく. 例えば, 川の写真を入れてあるならば, alt = 川の写真 とでもいれておけ 3

4 ばよい. コンテンツの意味が重複しないように注意する これは必須 項目ではないが, ブラウザのテキスト読み上げ機能や画像の読み込 みがなされなかった場合にユーザーのアクセシビリティがよくなる これ以外に, 文章の部分に構造上の意味づけを行うためのタグが色々と用意されている. いろいろな構造に関するタグ (1) 強調 <em> </em> と, さらに強い強調 <strong> </strong> 強調された文字列はブラウザではイタリックやボールドで表示されるが, 実際にどのように表示されるかは, ブラウザによる. (2) 定義 <dfn> </dfn> (3) 引用 <q> </q>, 長い引用 <blockquote> </blockquote> (4) 引用元, 引用した作品名 <cite> </cite> (5) 署名 連絡先 <address> </address> (6) メイルの送信 :<a href="mailto:( メールアドレス )"> </a> (7) コメントアウト <!- - コメント - -> コメントを記述する. このタグ内部のコメントは, ブラウザでは表示されない. (4) <div> </div> と <span> </span> このタグは単にテキストを領域指定するために用いる. 具体的な使い方は CSS の項を参照せよ. 箇条書き箇条書きを表すときには, 番号付きの箇条書きと番号を振らない箇条書きの 2 種類がある. (1) 番号付き箇条書き <ol> <li>hogehoge</li> <li>hogehoge</li> </ol> (2) 番号無し箇条書き <ul> <li>hogehoge</li> <li>hogehoge</li> </ul> 文章のタイトル ( ヘッダ ) と末尾 ( フッタ ) と自己完結したセクション (1) <header> </header> (2) <footer> </booter> 4

5 (3) <article> </article> 表の作成とその応用ウェブサイトにおいて表を作るには <table> </table> というタグを用いる. ウェブサイトにおける表組みの重要性は, 1. 表を出力する 2. ウェブサイトのレイアウトを制御するという二点にある. 表組のためのタグの使い方 <table border> <tr> </tr> <tr> </tr> </table> <td>(1, 1)</td> <td>(2, 1)</td> <td>(3, 1)</td> <td> (1, 2)</td> <td>(2, 2)</td> <td>(3, 2)</td> </table> <table> </table>: テーブルであることを示す <tr> </tr>: テーブル内の行であることを示す <td> <td>: 行のなかでの区切りセルを示す リンク タグと属性 タグのなかには, 属性を使って値を指定するものがある. <tag attribute="value"> </tag> <hr>( 水平線を引く ) align="center/left/right" ( 水平線の位置を指定 ) noshade [ 影のない水平線を表示 ] 5

6 width="number" [ ピクセル単位かページ幅に対する割合 (%) で指定 ] <a> </a> [ アンカー ] href="url" (url のサイトにリンクを張る ) name="text" ( ドキュメントの一部に名前を付ける ) target="name_blank/self/_parent/_top" (href と共に用いる ターゲットのページが表示されるウィンドウやフレームを指定する ) <figure> </figure> [ 画像 動画の範囲指定 ] <img> src="url" ( 画像ファイルの指定 ) alt=" 画像の説明 " ( 画像の説明 ) height(width)= number ( 画像の高さと幅を数値で指定, 単位はピクセルか %) hspace= number ( 画像の左右の余白を指定, 単位はピクセル.) <table> </table> ( 表組み ) align="left/right/center" ( テーブルの配置を左寄せ / 中央揃え / 右寄せのいずれで指定する ) background="url" ( 背景に用いる画像の url を指定する ) border="x" ( 枠線の幅 ) cellpadding="x" ( セルの罫線の内側から内容までのスペースをピクセル単位で指定する ) cellspacing="x" ( セル間のスペースをピクセル単位で指定する ) vspace="x" ( テーブルの上下の空白をピクセル単位で指定する ) hspace="x" ( テーブルの左右の空白をピクセル単位で指定する ) <tr> </tr> ( テーブルの行の区切り ) align="left/right/center" bgcolor="#rrggbb/colorname" valign="top/middle/bottom/baseline" <td> </td>[<th> </th>] ( 行をセルに区切る ) colspan="number" ( 複数のセルを横方向に結合する ) rowspan= number ( 複数のセルを縦方向に結合する ) height(width)="x / Y%" ( セルの高さ ) 6

7 CSS 現在のウェブサイト作成は, まず HTML によってサイトの構造を記述し, レイアウトは CSS(Cascading Style Sheet) でデザインするというのが主流となりつつある. 本来,HTML はネットワーク上のさまざまな環境下で情報を共有するために開発されたものであり, そして OS( オペレーティング システム ) などが異なる環境下では, 表示のされ方も異なることが考えられる. したがって,HTML ではウェブサイトの見た目を規定するような要素は使わないようにし, 文書の構造を定義することのみに用いよう, という最近の傾向は HTML の本来の精神にかなっているといえる. しかし近年, ウェブサイトは以前にもまして見た目やレイアウトが重視されるようになってきた. これはサイトの見た目が, そのサイトのアクセス数などに大きな影響を与える以上, 当然のことであろう. そこで, レイアウト情報は CSS(Cascading Style Sheet) というスタイル ファイルによって規定することになった.CSS を利用することで, 従来では不可能であったより細かな調整が可能になったが, 他方, 未だ CSS に対応していないブラウザでは, 不可解なバグを発生させることがありうる. CSS の書式 CSS は, 要素 (selector) に対して 属性 と 値 という 2 つの要素を組み合わせる. この場合の 要素 (selector) とは,1 単独のタグであったり,2 複数タグをまとめたものであったり,3 任意のウェブサイトの要素である. そして, その文法は どの要素に対して 何を : どうする という順番で記述していく. 複数の 何を : どうする を指定したい場合は, それぞれをセミコロンで区切って記述する. ただし, 改行は任意に行ってかまわない. 要素 { 属性 1: 値 ; 属性 2: 値 ;} また,CSS では /* */ がコメントとなる. CSS の記述の仕方は 3 種類ある. 1. タグに属性として記述する : <h1 style= fontsize:+2; color:red > 2. ページのヘッダ部分 ボディ部分に記述する : <head> <style type= text/css ><!-- h1 {font-size:+2; color:red;} h2 {color:blue;} --></style> </head> 3. CSS ファイルに記述する ヘッダ部分に <link rel= stylesheet href= /hoge.css > と書き込む 7

8 hoge.css というファイルをつくり そこでスタイルを指定する. <div> と <span> <div>, <span> というタグは単に 範囲を指定する という機能のみを担っている.<div> はブロック単位での指定に用いて,<span> はその前後で改行されない場合に用いる. これらは様々な用途に用いることができるが, その主な使用法の一つが CSS を用いてスタイルを指定するときの, スタイルの適用先を規定するということである. 具体的には次のような手順を踏むことになる. 1. タグに class 属性を指定して, クラスに分類する例 ):<div class= hoge1 > </div> 2. クラスに対してスタイルを指定する例 ):.hoge1 { 属性 : 値 :} div.hoge1 { 属性 : 値 ;} 但し,class 属性は上記以外のタグにも用いることができる. スタイルシートの記述例 a) 色, フォント, 配置の指定 body {color:#666666; ( 文字の色を # に ) background-color:#ffffee;} ( 背景色を #ffffee に ) h1 {font-size:40px; ( フォントサイズを 40px) font-family: Comic Sans MS ; ( フォントを指定 ) color:#666633; text-align:center; ( テキストを中央揃え ) font-weight:normal/bold/bolder/lighter/100~900; ( テキストの太さ ) font-style:normal/italic/oblique;} ( 普通 / イタリック / 斜体にする ) b) テキストの配置, 余白の設定 <div>, <p>, <h1> などに適用 p{ text-indent:20pt; ( テキストの段落の最初の一文字をインデント ) line-height:1.5; ( テキストの高さ, 行間を指定する ) margin-top:30pt; ( 上部余白の設定 ) margin-bottom:30pt; ( 下部余白の設定 ) margin-left:30pt; ( 左部余白の設定 ) margina-right:30pt; ( 右部余白の設定 ) } 8

9 c) 水平線, 表の設定 hr {height:4px; ( 水平線の高さの指定 ) background-color:#33cc65;} ( 背景色の設定 ) table {width:90%; ( 表の幅をウィンドウの 90% に ) height:115px;} ( 表の高さを指定 ) td {padding:10px; ( セルの上下左右を 10 ピクセル余白をとる ) text-align:left;} ( セルのテキストを左寄せ ) 画像とテキストのそろえ方を指定する CSS の値 (<div>, <p>, <h1>, <span>, <img> <li> など ) vertical-align: 値 ; 値 :baseline( イメージの下辺をテキストのベースラインにそろえる, top ( イメージの上辺を行の上にそろえる ), middle( イメージの中央を行の中央にそろえる ), bottom( イメージの下辺を行の下にそろえる ), 数値 ( ベースラインからの位置を数値で指定 ), 割合 ( ベースラインからの位置を割合で決定 ), float:left/right/none; ( コンテンツの回り込みを指定 ) clear: 値 ; ( コンテンツの回り込みを解除 ) 部分的にコンテンツの回り込みをしたくない場合にはこれを使う. 画像, コンテンツの周りに余白を入れる margin-top: 値 ; margin-right: 値 ; margin-bottom: 値 ; margin-left: 値 ; 値 = 数値 ( 単位 :cm, mm, in, pt, pc, px, em, ex) 割合 ( 単位 :%) 画像の表示位置 <figure> text-align:center; 背景と罫線のデザインをする CSS(<div>, <p> <h1>, <span> <img> <b> 背景色 background-color: 値 ; 背景色の境界線の角を丸くする border-radius: 10px; 背景色の境界線に影をつける 9

10 box-shadow: 1px 1px 3px #aaaaaa; コンテンツと背景の間の余白 padding: 値 ; 数値と割合 背景画像を表示する (<div> <p> <h1> <body> <span> <img> <b> ) background-image:url; 背景に画像を表示させる.url では画像ファイルを指定する. 背景画像をスクロールしないようにする background-attachment:scroll/fixed; 背景画像を繰り返して表示しない backgroudn-repeat:repeat/norepeat/repeat-x,repeat-y; repeat 縦横に繰り返し no-repeat 繰り返して表示しない repeat-x 横にだけ繰り返し repeat-y 縦にだけ繰り返し 背景画像の表示位置を指定 background-position: 値値横方向と縦方向それぞれ数値, 割合,left, center, right のいずれかで指定する. 罫線の種類 border-style: 値 dotted 点線 dashed 波線 solid 実践 double 二重線 groove 立体枠 罫線の太さ border-width: 値 ; thin, medium, thick, 数値 罫線の色 border-color: 値 ; 10

11 テーブルとフォームのデザインをする CSS 罫線のスタイルを指定 border: 値値値罫線の種類, 太さ, 色の順で指定する 空セルの罫線を表示 table{empty-cells:show/hide;} セルとセルの間隔を調節 table{border-spacing: 値 / 割合 ;} テーブルやセルの大きさの指定 table {table-layout:fied; width: 値 ; ( 数値か割合 ) height: 値 ; ( 数値か割合 ) } 11

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

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

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

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 設計入門

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

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

■新聞記事

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

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

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

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

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

1/2

1/2 札幌学院大学社会情報学部 AO 入試課題用テキスト (4) 1 札幌学院大学社会情報学部 AO 入試課題用テキスト HTML の基礎知識 (4) 1 スタイル指定 1-1 段落を罫線 ( ボーダー ) で囲む 前回はスタイル指定を行なって段落に色をつけた 今度は罫線で囲んで見よう これまでと同様に 開始タグの中に罫線の指定を行なえばよい HTML 文書は次の通りである 下線部が罫線を引くためのスタイル指定である

More information

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

Web情報システム 第1章~第5章 Web 情報システム マルチメディア情報通信ソフトウェア 第 1 章 ~ 第 4 章 1 Web 情報システム マルチメディア情報の流通 Web 情報システム概論 デジタルメディアの特徴 デジタルメディアの記述 HTML (Hyper Text Markup Language) CSS (Cascading style sheet) デジタルメディアの制御 JavaScript コンピュータとネットワークの基礎

More information

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

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

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

Web

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

More information

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

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

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

Web 設計入門

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

More information

Taro-ホームページB5.jtd

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

More information

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

Microsoft PowerPoint - css-3days 互換モード 情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 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

ホームページの作成

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

More information

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

Microsoft PowerPoint - css-3days.ppt [互換モード] 情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 HTML,

More information

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

Microsoft PowerPoint - css-3days 互換モード 情報基礎 CSS を用いた Web ページ作成 CSS とは Cascading Style Sheet の省略表記 シーエスエスと読む Web ページのレイアウト ( 視覚的構造 ) を定義する スタイルシート の規格の一つ Web の標準化団体である W3C(World Wide Web Consortium) によって標準化 W3C で推奨される考え方 論理構造 : マークアップ言語 HTML,

More information

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

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

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

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

第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

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima

EC 千葉のホームページで使用している CSS CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body { background-ima 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 CSSスタイルシート ( 外部記載 ) /* == 標示枠背景に壁紙設置 ( 全画面共通 )======= */ body background-image: url("../images/wallpaper1.gif"); /* == 記事記入枠 container ( 全画面共通 )=========

More information

競技課題|ホームページ

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

More information

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

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

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

目次 概要... 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

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

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

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

extChatText.pdf

extChatText.pdf 拡張機能ユニット チャット風テキストユニット マニュアル シフトテック株式会社 発行 :2018/12/19 チャット風テキストユニット マニュアル - 1 概要 チャットのような会話形式でテキストを表示するユニットです ール ー ア ン ンテ ー 特徴 アイコン用画像 + 名前 + 吹き出し付テキストで構成されたユニットです 表示位置を左右に出し分けることで チャットのような会話形式でテキストを表示できます

More information

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

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

More information

extCountdown.pdf

extCountdown.pdf 拡張機能ユニット カウントダウンユニット マニュアルシフトテック株式会社 発行 :2018/11/21 改定 :2018/12/13 カウントダウンユニット マニュアル - 1 概要 指定された日時までカウントダウンを行うユニットです ール ー ア ン ンテ ー 特徴 指定した日時までカウントダウンし 終了後は自動で停止します 任意の URL を設定すると カウント終了後にページにアクセスがあった場合

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

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

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

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

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

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

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

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

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

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation

IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 2014 IBM Corporation IBM Business Process Manager CSS による Coach レイアウト制御ガイド WebSphere 目次 1. はじめに ( 資料の目的 ) 2. Coach View 構造の基本 2.1 CSS の基礎 2.2 Coach における CSS 記述場所 2.3 標準 Coach View 構造の基本 2.4 Coach における CSS セレクター指定の基本 3. 実践

More information

1

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

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

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

ブロックの 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

[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01

[ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01 [ 学習動画 ] 一覧 学習の閲覧や質問の際にご利用ください 閲覧が終了した動画をチェックして 学習の進行状況を確認しましょう! 閲覧チェック Dreamweaver/HTML5/CSS3 講座 HTML/CSS リファレンス 動画タイトル 時間 ( 計 10 時 57 分 ) Chapter01 オリエンテーション 約 40 分 01_ 学習の進め方 02_ リファレンスの紹介 約 09 分 03_

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

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

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

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

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

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

地域ポータルサイト「こむねっと ひろしま」 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

文京女子大学外国語学部

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

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

動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます 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

オリエンテーション

オリエンテーション 課題 14 ホームページを作る ( 発展 ) top 目次 1. 画像ファイルを縮小して表示する教材 A01,A02... 1 2. 文字の書式を設定する ( フォント, サイズ, 行間 ) 教材 A03... 3 3. 文章表示の横幅を指定する, テキストを右寄せにする教材 A04... 5 4. 見出しに背景色を付けて白抜きで表示する教材 A05... 7 5. ページの背景色を設定する教材 A06...

More information

スライド 1

スライド 1 第 5 章ワープロ A(Word2010/2007 共通 ) ( 解答と解説 ) 5A-1. 文書の編集 1 スタイルの設定 ( ア )= く スタイルとは さまざまな書式を組み合わせて名前を付けて登録したものです あらかじめ用意してあるもの以外に新規に登録することもできます ここでは 後で使う目次の項目として 3 箇所に 見出し 1 を設定します 2 段落 ダイアログボックス インデントと行間隔

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

<48746D6C8AEE91628D758DC02E786C73>

<48746D6C8AEE91628D758DC02E786C73> HTML 基礎講座 目次 1.HTML 紹介 1-1 HTMLとは 1-2 HTMLの基本的な構成 1-3 HTMLのソースの表示方法 2.HTMLタグ紹介 2-1 リンクする 2-2 改行 水平罫線 2-3 段落 2-4 見出し ~, ~ 2-5 画像 2-6 テーブル 2-7 フォーム 2009.10.16

More information

スライド 1

スライド 1 第 8 講観光情報論 2009 年 6 月 16 日 Style Sheet (CSS) 宮国薫子 1 CSS とは (Cascading Style Sheets) 本来 ホームページにデザインを加える機能のすべて 教科書で言う スタイルシート とは CSS のことを指す CSS を使うと Page 106 にあるようにホームページの体裁が変わる 2 まず Region_page.h tml を開く

More information

【インターネットビルダー2】投稿マニュアル

【インターネットビルダー2】投稿マニュアル インターネットビルダー 2 投稿マニュアル 第 1 版 株式会社サイネックス 1 / 34 Copyright 2016 SCINEX CO.,LTD. All Rights Reserved. 目次 表紙... 1 目次... 2 Ⅰ. 管理画面へのログインについて... 3 1-1. 管理画面にログインする... 3 Ⅱ. 最新ニュース について... 4 2-1. 最新ニュース を新規追加するには...

More information

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

経営論集2011_07_小松先生.indd 20 1 2010 103 125 HTML+CSS HTML CSS CMS Web CMS CMS CMS CMS DreamWeaver Web Web CMS Web Web CSS Web Eclipse HTML CSS Web Web HTML CSS Web HTML CSS Web HTML CSS Web 1 Web Web HTML Web 103 HTML+CSS Web HTML

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

<4D F736F F D E835A A C98AD682B782E98E77906A89FC92F994C52E646F63>

<4D F736F F D E835A A C98AD682B782E98E77906A89FC92F994C52E646F63> 1. はじめに 1 1-1. ガイドラインを策定するにあたって 1 1-1-1. ウェブアクセシビリティとは 1 1-1-2. ウェブアクセシビリティが求められている背景 1 1-1-3. 高齢者 障害者の閲覧時の利用特性 2 1-1-4. 視覚障害者への対応 2 1-1-5. ウェブアクセシビリティの JIS 規格化 3 1-1-6. ガイドラインの重要性 3 1-2. ガイドラインの適用範囲 4

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

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

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

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

More information

<h1> 番号なし箇条書きの例 </h1> <ul> <li> 最初の項目 <li>2 番目の項目 <li> 最後の項目 </ul> 図 2 番号付き箇条書きの HTML 文書例 項目の先頭には, 自動的に のような黒丸記号が表示される これ以外の記号を用いる には, 表 2

<h1> 番号なし箇条書きの例 </h1> <ul> <li> 最初の項目 <li>2 番目の項目 <li> 最後の項目 </ul> 図 2 番号付き箇条書きの HTML 文書例 項目の先頭には, 自動的に のような黒丸記号が表示される これ以外の記号を用いる には, 表 2 情報コミュニケーション入門 b HTML による Web ページ作成の練習 : 応用編 この応用練習は, 余力のある人だけ取り組めばよい ただし, 最終頁は全員確認してお くこと 効果的な表現のための工夫一般に, 文章のみの Web ページは単調になりやすいため, 適宜小見出しを入れたり, 箇条書きや図表を駆使して, 印象的なデザインを工夫する 基本的な表現方法は HTML 辞書などに頼らなくても利用できるようにマスターしておいたほうがよい

More information

Network Computing の基礎

Network Computing の基礎 CSS Cascading Style Sheets Cascading = Style Sheets = CSS WEB HTML CSS 2 HTML h1 p CSS 3 CSS CSS HTML sample1.html CSS HTML sample2.html CSS CSS sample2.css CSS

More information

12-0-Webページ画面構成の技法.doc

12-0-Webページ画面構成の技法.doc Web ページ画面構成の技法 1. 配置の制御基本的なタグの使い方については はじめての HTML などを通して学習した ここでは もう少し凝った画面構成を行うための基礎技法について解説する 文字や図などを 画面上の任意の位置に配置するためには タグを用いた表組みを行うとよい タグは表を作成するためのタグであるが 枠線を非表示にすることにより配置の制御に使用することができる

More information

Color Change

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

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

大メニューをマウスカーソルで 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 はじめに

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

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

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

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

Web05

Web05 情報処理技法 ( マルチメディアと表現 )I 第 4 回 構造化 書 HTML(2) D.Mitsuhashi 1 字化けのしくみ D.Mitsuhashi 2 字コード 字コード コンピュータ上では, 字は数値として扱われる 数値と 字との対応規則を 字コードという アルファベットと数字をあらわすには, 2 進数で 8 桁 (8bit = 1byte) あれば りる ASCII コード 1byte

More information

数のディジタル化

数のディジタル化 第 3 章コミュニケーションとネットワークを探索する 4 節コミュニケーションとネットワークの活用 4 節コミュニケーションとネットワークの活用 3 コミュニケーションツールの活用 第 3 章 4 節コミュニケーションとネットワークの活用 コミュニケーションツールの活用 本日の内容 第 3 章コミュニケーションとネットワークを探索する 4 節コミュニケーションとネットワークの活用 3. コミュニケーションツールの活用

More information

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

Microsoft PowerPoint - homepage1910.ppt  -  互換モード 情報基礎 Web ページ作成 コンピュータとネットワーク コンピュータ ネットワーク ネットワークとネットワーク インターネット インターネット インターネット : 元々は ネットワークとネットワークを接続したもの 狭義には IP 接続された世界規模のコンピュータネットワーク 歴史 1960 年代後半 ARPAnet (Advanced Research Project Agency): 米国防総省による軍事研究支援用実験ネットワーク

More information

< F2D D834F834A E837D E6A7464>

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

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 PowerPoint - makeweb2017.ppt [互換モード]

Microsoft PowerPoint - makeweb2017.ppt [互換モード] Web ページ制作の流れ ページ全体の構成 プランニング 線形構造 公開する情報と目的の設定 資料 情報の収集 ページのデザイン ページ全体の構成 各ページのデザイン スタイル 階層構造 素材の制作 画像の製作 グラフ構造 オーサリング HTML ファイル スタイルシートの記述 動作確認 評価 修正 各ページのデザイン スタイル 視覚的統一性 共通の画像 ( 写真 イラスト ) を利用する アイコンを共通のものにする

More information

PowerPoint プレゼンテーション

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

More information

HTML発展編2

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

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

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

基礎情報処理Ⅱ/情報システム入門B 第9回

基礎情報処理Ⅱ/情報システム入門B 第9回 情報システム入門 B 第 6 回 担当教員 : 三笠俊哉 1 サーバ 送り手 サーバ 2 コンピュータネットワークとは? 伝送路 端末 ネットワークカード交換機交換機 ネットワークカード 端末 伝送路 交換機 回線終端装置 ( モデム ) 端末 ( コンピュータ ) 有機的な情報の交換 機能の分担 協調動作 3 通信とプロトコル コンピュータ間でデータをやりとりする際の様々な決まりごと ( 例. TCP/IP,HTTP,POP,...

More information

ホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア 現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2 種類がある 2. テキストエディタ : テキストファイルと呼ばれる 文

ホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア 現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2 種類がある 2. テキストエディタ : テキストファイルと呼ばれる 文 ホームページ作成 1. HTML 言語によるホームページ作 成 2. ホームページ作成ソフト IBM : ホー ムページビルダー Microsoft FrontPage 1 ホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア 現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2

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

MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div

MovingTextsAnime1 の説明 HTML の記述 (MovingTextsAnime1.html) id 属性 stage の div 要素 ( アニメーションが動くステージ ) を作り その中にボックスやテキストを記述します id 属性 div1 のdiv 要素から id 属性 div 1334 テキストのアニメーション animation プロパティを使ってテキストに係わるプロパティのアニメーションを作ってみ ましょう ( 注 )Safari(webkit 系ブラウザ ) と Chrome(webkit にも対応 ) は テキストの輪郭や色を -webkit-text-stroke-width -webkit-text-stroke-color -webkit-text-fill-color

More information

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

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

More information

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

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

More information