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



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

CSS


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

Web

PowerPoint プレゼンテーション


27短01研01斉藤.indd

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

about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理

Web

Microsoft PowerPoint - CSSガイドライン_ ppt [互換モード]

Homepage HTML+CSS Flash JavaScript Homepage Homepage Homepage Homepage Web HTML Hyper Text Markup Language XHTML XHTML HTML5 CSS Cascading Style Sheet

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

あいち電子自治体ガイドライン(第1章)

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


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

untitled

HTML5 CSS

pdf

CSSの基礎

HTML5&CSS3 レッスンブック

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


6 2 1

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

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

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

Taro-CSS.jtd

CSS CSS

CSS3

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

第6回 CSS入門(つづき)


インターネットマガジン2004年3月号―INTERNET magazine No.110

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.

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

HTML文書の作成

Java

Webデザイン論


PowerPoint Presentation

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

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

年刊EDP 2003

0序文‐1章.indd

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

立ち読みページ

メニューのトランジション 1 (text-overflow) トランジションを利用して 面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょう ここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J

css.pdf

_勉強会_丸山さつき_v3

ohp.mgp

m_sotsuron

Color Change

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

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

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

目 次 1.CSSとは? 予 備 知 識 2.common.css 3.calendar.css 4.archive_layout.css 5.left_layout.css 6.right_layout.css 7.three_layout.css

ホームページ制作スターターズ

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

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



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

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

1

untitled

Web 設計入門

文 書 構 造 とスタイル

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

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

Network Computing の基礎

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


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

HTML HTML HTML

textbook.indd

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

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

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

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

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

( )

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

第3学年    学習指導案

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

1222-A Transform Function Order (trsn

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

アクセシビリティガイドライン骨子

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

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

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

() < > </ > / HTML SGML HTML 1.1 DTD DTD ( DTD (prolog) )SGML 1. DTD ( ) 2. DTD <!-- DTD-- > <!ELEMENT MAIL - - ((TO,FROM)?,DATE?,BODY) > <!ELEMENT TO

オリエンテーション

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

コンピュータサイエンス 1. ウェブの基本

第3回HP講習会資料ver1.2( )

1

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

Transcription:

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 HTML 1 HTML Web Web UTF-8 1 Unicode Windows JIS JIS HTML UTF-8 Unicode HTML xml xml IE6 text-align: center IE Web 1 XP xml UTF-8 HTML5 HTML XHTML1.0 HTML4.01 xml XHTML XHTML SGML HTML XML SGML XML 2 XHTML XML HTML XML XML HTML HTML < > </ > < =" "> < /> 104

20 1 < ></ > 3 HTML <!-- --> CSS /* */ HTML HTML div div div DreamWeaver XHTML XHTML1.1 Web MIME application/xhtml+xml IE XHTML1.0 XHTML1.0 STRICT DTD <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict. dtd"> HTML STRICT <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> TRANSITIONAL html head title body p h1 h6 a ul li dl dt dd img div span table tr td html head body 3 html title title title SEO p XHTML body div p div 105

HTML+CSS h1 h6 SEO a a HTML Hyper Text Markup Language HTML HTML ul li CSS dl dt dd img HTML img CSS background div HTML CSS p p div 4 span div CSS table tr td div p CSS table table table table 106

20 1 CSS Web Web DTP Web DTP DTP CSS CSS 1996 5 2000 CMS CSS Yahoo! 2008 1 CSS 1 CSS XHTML1.0 Transitional HTML 2 CSS CSS HTML CSS CSS HTML HTML HTML Wikipedia Wikipedia GFDL GNU Free Documentation License GFDL Web meta body HTML 2 HTML CSS HTML Web HTML 107

HTML+CSS XHTML http://heaven7.sakura.ne.jp/reference/xhtml_ref/xhtmltmp.html XML DOCTYPE XHTML 1.0 Strict Unicode UTF-8 CSS HTML title p HTML HTML UTF-8 HTML http://openlab.ring.gr.jp/k16/htmllint/htmllint.html DATA HTML 1 h1 h3 p div 1 HTML 2 3 Another HTML-lint 13 Web W3C W3C HTML Validation Service DTD Another HTML-lint DTD 2 HTML 4 100 XHTML xml 108

20 1 http://heaven7.sakura.ne.jp/reference/xhtml_ref/xhtmltmp.html 109

HTML+CSS http://openlab.ring.gr.jp/k16/htmllint/htmllint.html CSS HTML CSS : HTML CSS CSS HTML 5 110

20 1 HTML CSS CSS HTML CSS CSS HTML link CSS @import CSS HTML HTML CSS HTML border background CSS HTML 6 CSS HTML,,, { } 7 : ; HTML CSS 5 111

HTML+CSS HTML CSS2.1 12 ID 6 HTML HTML * HTML 8 ID HTML ID. HTML ID #ID ID HTML ID ID HTML : link visited hover active focus 5 a a a:link a:visited a:hover a:active 4 112

20 1 CSS CSS margin border border-left border-right border-top border-bottom padding width height position left right top bottom overflow float clear display background color line-height list-style text-align vertical-align font-size font-weight font-family 9 CSS CSS CSS CSS 10 0 line-height px em % 1px 1 border width 1em CSS html m body HTML width height padding border margin 6 p CSS position float position static position relative 113

HTML+CSS 7 p 6 CSS 1em 1em 2em 1em position float position fixed top left 114

20 1 position absolute position static 11 12 top left position fixed absolute 13 float none float width 8 CSS HTML width 9 10 width height html height height auto 115

HTML+CSS 116

20 1 9 height height 117

HTML+CSS 11 height 0 CSS CSS overflow:hidden; CSS float:left; clearfix CSS <div style="clear: both"></div> overflow hidden IE6 IE6 zoom:1; 14 :after IE6 zoom:1; 15 div style HTML Another HTML-lint 1 118

20 1 13 clear:both; IE6 WindowsXP 2014 Google Web IE6 WindowsXP IE6 IE6 5 119

HTML+CSS 14 margin-top float position:absolute; top:10em; left:1em; float float 2 3 HTML 1 2 3 CSS div a background list-style display CSS 3 6 background1 120

20 1 2 15 CSS 1 CSS HTML XHTML 1.0 Transitional XHTML 4.01 Transitional CSS table td width Strict 2 16 valign="top" table border="1" td border="0" 121

HTML+CSS CSS HTML div id 17 CSS 2 HTML 122

20 1 <div id="footer"> </div> div id="sub" div CSS #sub{clear:both;} 16 CSS 18 W3C Web 123

HTML+CSS http://jigsaw.w3.org/css-validator/validator.html.ja Web Web Web CGI Java ASP PHP HTML CSS HTML CSS HTML CSS Web WWW 20 Web Web Web HTML CSS ICT HTML CSS HTML 1 CSS 2 4 CSS 3 5 2 8 12 3 7 DreamWeaver 7 CSS HTML+CSS CSS 124

20 1 1 Google 2 XHTML XML HTML 3 4 div p p 5 6 7 8 0 * {margin:0;} 9 font font 10 HTML px 11 positioned box 12 13 14 zoom IE 15 zoom _ IE 16 clear 1 2009 Web 19 1 125