(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= UTF-8 > UTF
|
|
- ふさこ みのしま
- 5 years ago
- Views:
Transcription
1 HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title></title> // JavaScript <!-- --> sample0.html (*.*) UTF-8 ( sample0.html ) 1
2 (1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= UTF-8 > UTF-8 shift jis UTF-8 (7) <title> </title> ( ) (8) JavaScript ( ) // // (9) <!-- --> 2
3 2 sample0.html sample1.html <title> sample1.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title>html </title> // JavaScript <font color="red"> <!-- --> <h1 align="center"> HTML</h1> <!-- <h1> <h6> --> </font> <font color="purple" align="left"> <h2> </h2> </font> <font color="blue"> <h3> </h3> </font> <font color="green"> <p> </p> <p> </p> <p> </p> </font> sample1.html 3
4 (1) <font> red( ), orange( ), yellow( ), green( ), blue( ), indigo( ), purple( ), black( ), gray( ), white( ) R( ) G( ) B( ) 1 =8 2 8 = 256 red "#ff0000" (2) align( ) left, center right (3) (paragraph) <p> </p> (font) font face = fantasy : cursive : HG : serif : sans-serif : monospace : PC 3.2 HTML (1) red ff0000 (2) bgcolor= bg background( ) (3) <ul> </ul> ul unorderd list( ) <ls> (4) ( ) 4
5 sample1-1.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title>html </title> <body bgcolor="skyblue"> <font color="red"> <h1>html </h1> <h2> </h2> </font> <ul> <li> <font color="red"> (red)</font> <li> <font color="orange"> (orange)</font> <li> <font color="yellow"> (yellow)</font> <li> <font color="green"> (green)</font> <li> <font color="blue"> (blue)</font> <li> <font color="indigo"> (indigo)</font> <li> <font color="purple"> (purple)</font> </ul> <h2> </h2> <ul> <li> <font color="black"> (black)</font> <li> <font color="gray"> (gray)</font> <li> <font color="darkgray"> (darkgray)</font> <!-- --> <li> <font color="lightgray"> (lightgray)</font> <li> <font color="white"><span style="backgroung-color:black"> (white)</span></font> </ul> sample1-1.html 5
6 4 css HTML HTML CSS Cascading Style Sheet CSS css { : ; : ;. ( ) absolute relative red 4.1 sample1.html css <img src=" " alt=" " height="200"> img image( ) JPG, alternet( ) GIF alt 6
7 <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title>html </title> <style> body{ position:relative; h1{ color : red; text-align : center; h2{ color: purple; text-algn: left; h3{ color: blue; div{ color: green; div2{ position:absolute; left: 850px; top: 50px; </style> <h1> HTML</h1> <h2> </h2> <h3> </h3> 7
8 <div> <p> </p> <p> </p> <p> </p> </div> <div2> <img src="sosekipr.jpg" alt=" " height="200"> </div2> sample1-2.html 8
9 4.2 css body sample1-3.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title> </title> <style> body{ background-size: cover; // </style> // JavaScript <body background="back1_4.jpg"> <!-- (back1_4.jpg) --> <center> <h1> </h1> </center> sample1-3.html 9
10 5 youtube <a href=" URL"> </a> <a href=" </a> YouTube 1. YouTube Crtl C 1. YouTube 2. [ ] 3. [ ] 4. HTML 5. sample2.html 10
11 sample2.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title></title> // JavaScript <center> <font face="fantasy"> <h1> The fundamental things apply as time goes by. </h1> </font> <font face="hg "> <h2> </h2> </font> <a href=" <font face="serif"><h1> </h1></font></a> </font> <iframe width="336" height="252" src=" frameborder="0" allowfullscreen></iframe> </center> sample2.html src=" src=" 11
12 ?rel=0 &autoplay=1 6 (form) <input> sample3-1.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title></title> // JavaScript <form name="f1"> <input type="text" size="30"> <!-- --> <input type="button" name="btn" value=" "> </form> sample3-1.html JavaScript 12
13 7 JavaScript (1) sample3-1.html web JavaScript Web (sample3-2.html) sample3-2.html <html> <title> </title> function onclick(){ var str1=document.getelementbyid("txt").value; var str2=document.getelementbyid("display"); str2.innerhtml= +str1+ ; <form name="f1"> <input type="text" size="30" id="txt"> <input type="button" name="button" value=" " onclick="onclick()"> <p id="display"></p> </form> (1) <p id= display ></p> (2) txt, display (id) <input type= text size= 30 id= txt > <p id= display ></p> (3) onclick JavaScript onclick() <input type= button name= button value= onclick= onclick() > 13
14 (4) (value) str1 var str1=document.getelementbyid( txt ).value; (5) <p id= display ></p> str2 var str2=document.getelementbyid( display ); str2 (6) str2 +str1+ str2.innerhtml= +str1+ ; sample3-2.html 14
15 8 JavaScript (2) sample3-2.html script if(str1) str2.innerhtml= +str1+ ; else str2.innerhtml = ; sample3-3.html <html> <title> (2)</title> function onclick(){ var str1=document.getelementbyid("txt").value; var str2=document.getelementbyid("display"); if(str1) str2.innerhtml= +str1+ ; else str2.innerhtml = ; <form name="f1"> <input type="text" size="30" id="txt"> <input type="button" name="button" value=" " onclick="onclick()"> <p id="display"></p> </form> sample3-3.html 15
16 9 (sample3f.html) <html> <title> </title> <style> div1{ position:relative; left: 300px top: 0px; </style> document.write( ); function onclick(){ var str1=document.getelementbyid("txt").value; var str2=document.getelementbyid("display"); if(str1){ str2.innerhtml= <h3> + <font face="cursive">the answer, my friend, is blowing in the wind. + The answer is blowing in the wind. </font></h3> + <center><iframe width="420" height="315" + src=" + frameborder="0" allowfullscreen></iframe></center> ; else{ str2.innerhtml = <font color="red"><b> </b></font> ; <div1> <center> <h2><font face="serif"> </font></h2> <form name="f1"> <textarea type="text" rows="5" cols="60" id="txt" ></textarea> 16
17 <input type="button" name="button" value=" " onclick="onclick()"> <p id="display"></p> </form> </center> </div1> sample3f.html <!doctype html> <html lang="ja"> <meta charset="utf-8"> <title> </title> <style> body{ padding: 20px; margin-left: -200px; writing-mode: tb-rl; //IE writing-mode: vertical-rl; font-family: HGP ; h1{ font-size: 30px; h2{ font-size: 26px; color: black; 17
18 div{ color: darkblue; font-size: 24px; div2{ position:relative; left: 830px; top: 270px; </style> <h1><ruby> <rt> </h1> <h2> <ruby> <rt> </rt></ruby></h2> <div> <p><ruby> <rt> </rt></ruby> <ruby> <rt> </rt></ruby> <ruby> <rt> </rt></ruby> </p> <p><ruby> <rt> </rt></ruby> <ruby> <rt> </rt></ruby> </p> <p> <ruby> <rt> </rt></ruby> </p> <p><ruby> <rt> </rt></ruby> </p> <p> <ruby> <rt> </rt></ruby> <ruby> <rt> </rt></ruby> </p> <p><ruby> <rt> </rt></ruby> <ruby> <rt> </rt></ruby> </p> <p><ruby> <rt> </rt></ruby> <ruby> <rt> </rt></ruby> <ruby> <rt> </rt></ruby> <ruby> <rt> </rt></ruby> </p> <p> <ruby> <rt> </rt></ruby> </p> <p> <ruby> <rt> </rt></ruby> </p> <p> </p> <p> <ruby> <rt> </rt></ruby> <ruby> <rt> </rt></ruby> </p> <p><ruby> <rt> </rt></ruby> <ruby> <rt> </rt></ruby> </p> <p><ruby> <rt> </rt></ruby> <ruby> <rt> </rt></ruby> </p> <p> <ruby> <rt> </rt></ruby> </p> 18
19 </div> <div2 class="box"> <img src="3ninkichi3.jpg" alt=" " width="500"> </div2> sample4.html 19
20 10 YouTube AodaiPV-ver01.mp4 <A href= AodaiPV-ver01.mp4 > </A> sample5-1.html <!doctype html> <html lang="ja"> <meta charset="utf-8"> <title> </title> <style> body{ padding: 50px; margin: </style> <center> </center> 30px; <h1> </h1> <h3> 2014 </h3> <A href="aodaipv-ver01.mp4"> </A> <A href="aodaipv-ver02.1.mp4" > </A> sample5-1.html 20
21 10.2 <iframe> 3.2 YouTube iframe inline frame (frame) (frame) <iframe src= AodaiPV-ver01.mp4 width= 690 height= 419 ></iframe> sample5-2.html <!doctype html> <html lang="ja"> <meta charset="utf-8"> <title> </title> <style> body{ padding: 50px; margin: 30px; </style> <center> <h1> </h1> <h3> 2014 </h3> <iframe src="aodaipv-ver01.mp4" width="690" height="419"></iframe> </center> sample5-2.html inline frame JavaScript 1 2 onclick() 21
22 <!DOCTYPE html> <html lang="ja"> <mata charset="utf-8"> <title> </title> <style> body{ padding: 50px; margin : 30px; top: 0px; </style> var str1; function onclick(){ var image=document.getelementbyid( image ); var btn = document.getelementbyid( btn ); if(str1){ image.src= AodaiPV-ver01.mp4 ; btn.innerhtml=" 2 "; str1=""; else{ image.src= AodaiPV-ver02.1.mp4 ; btn.innerhtml=" 1 "; str1="1"; <center> <h1> </h1> <h3> 2014 </h3> <p> <iframe id="image" width="600" height="390" src="aodaipv-ver01.mp4" frameborder="0" allowfullscreen></iframe> </p> </center> <center> <button id="btn" onclick="onclick()"> 2 </button> </center> 22
23 sample5-3.html 23
24 YouTube 4 Sukiyaki <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title> </title> <style> </style> onload= function(){ var b=document.getelementsbytagname( button ); str0 = " str1 = " str2 = " str3 = " str4 = " image.src=str0+"&autoplay=0" ; b[0].style.color= red ; b[0].onclick = function(){ for(var i=0; i<5; i++) b[i].style.color= black ; b[0].style.color= red ; image.src=str0 ; b[1].onclick = function(){ for(var i=0; i<5; i++) b[i].style.color= black ; b[1].style.color= red ; image.src= str1 ; b[2].onclick = function(){ for(var i=0; i<5; i++) 24
25 b[i].style.color= black ; b[2].style.color= red ; image.src= str2; b[3].onclick = function(){ for(var i=0; i<5; i++) b[i].style.color= black ; b[3].style.color= red ; image.src= str3; b[4].onclick = function(){ for(var i=0; i<5; i++) b[i].style.color= black ; b[4].style.color= red ; image.src= str4; ; <center> <h1>sukiyaki </h1> <button id="btn0" > Kyu Sakamoto </button> <button id="btn1" >Hikaru Nishida</button> <button id="btn2" > 4P.M. </button> <button id="btn3" >A Taste of Honey</button> <button id="btn4" >Kenny Ball and His Jazzmen</button> <p> <iframe id="image" width="600" height="390" </iframe> </p> </center> sample5-4.html 25
26 10.5 YouTube Loop <!DOCTYPE html> <html lang="ja"> <meta charset="shift_jis"> <title> </title> <center> <h1> YouTube Loop </h1> <h2> The Circle Game </h2> <iframe width="420" height="315" src=" frameborder="0" allowfullscreen> </iframe> sample5-5.html 26
27 sound1.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title> </title> <style> body{ padding: 30px; margin-left: 100px; font-size : 20px; </style> <h1><p> </p></h1> <h2><p> </p></h2> 440 <audio src="sin.wav" controls></audio> <audio src="beat.wav" controls></audio> (440 ) <audio src="timbre.wav" controls></audio> sound1.html 27
28 11.2 ( ) saound2.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title>sound</title> <style> body{ padding: 30px; margin-left: 100px; font-size : 20px; </style> <h1> <p> ( )</p> </h1> sin2.wav <audio src="sin2.wav" autoplay> </audio> sound2.html 28
29 11.3 sound3.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title>sound</title> <style> body{ padding: 30px; margin-left: 100px; font-size : 18px; </style> <h2> <p> ( )</p> </h2> siren.wav <audio source src="siren.wav" autoplay loop> </audio> sound3.html 29
30 11.4 JavaScript sound4.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title> sound</title> <style> body{ padding: 30px; margin-left: 200px; font-size : 60px; color : red; </style> onload=function(){ ; var aud = document.getelementbyid("aaa"); aud.play(); <p> JavaScript 1</p> <p>! </p> <audio id="aaa" src="beep.wav"></audio> sound4.html 30
31 11.5 sound5.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title> sound</title> var aud = document.getelementsbytagname("audio"); onload=function(){ aud[0].play(); var dt = aud[0].duration; var n = (dt+0.5)*1000; settimeout( aud[1].play(), n); ; <h1> <p>javascript 2</p> </h1> <h2> <p> </p> </h2> <audio id="aaa" src="doremi.wav"></audio> <audio id="abc" src="doshira.wav"></audio> sound5.html 31
32 sound6.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title> sound</title> var aud = document.getelementsbytagname("audio"); onload=function(){ var dt0 = aud[0].duration; var dt1 = aud[1].duration; var n0 = (dt0+0.1)*1000; var n1 = (dt1+0.1)*1000; ; for(var i=0; i<10; i++){ settimeout( aud[0].play(), i*n0+i*n1); settimeout( aud[1].play(), (i+1)*n0+i*n1); <h1> <p>javascript 3</p> </h1> <h2> <p> 2 </p> </h2> <audio id="aaa" src="doremi.wav"></audio> <audio id="abc" src="doshira.wav"></audio> sound6.html 32
33 loop <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title> sound</title> var aud = document.getelementsbytagname("audio"); var dt0; var dt1; var n0; var n1; function test(){ settimeout( aud[1].play(), (i+1)*n0+i*n1); i++; ; onload=function(){ dt0 = aud[0].duration; dt1 = aud[1].duration; n0 = (dt0+0.1)*1000; n1 = (dt1+0.1)*1000; dd = Math.min(n0, n1); ddd = dd/100; i=0; aud[0].play(); setinterval( test(), ddd); setinterval( aud[0].play(), n0+n1); ; <h1> <p>javascript 4</p> </h1> <h2> 33
34 <p> 2 loop </p> </h2> <audio id="aaa" src="doremi.wav"></audio> <audio id="abc" src="doshiras.wav"></audio> </audio> sound7.html 34
35 12 YouTube OFF 12.1 YouTube <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title> sound</title> onload= function(){ var sl=document.getelementbyid( sel1 ); var im=document.getelementbyid( image ); sl.onchange = function(){ var selecteditem = this.options[this.selectedindex]; if(selecteditem.value == 0){ im.width= 600 ; im.height= 390 ; else if(selecteditem.value == 1){ im.width= 0 ; im.height= 0 ; var b=document.getelementbyid( btn ); b.onclick = function(){ image.src=" ; ; <center> <h1> <p>youtube OFF </p> </h1> (ON/OFF) <select id="sel1"> 35
36 <option value="0">on</option> <option value="1" >OFF</option> </select> <button id="btn" >Rock n Roll Music Chuck Berry </button> <p> <iframe id="image" width="640" height="360" src=" frameborder="0" allowfullscreen></iframe> </p> </center> sound8.html 36
37 12.2 YouTube <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title> </title> <style> </style> onload= function(){ var sl=document.getelementbyid( sel1 ); var im=document.getelementbyid( image ); str0 = " str1 = " ; str2 = " ; str3 = " ; str4 = " ; image.src=str0+"&autoplay=0" ; sl.onchange = function(){ var selecteditem = this.options[this.selectedindex]; if(selecteditem.value == 0){ im.width= 600 ; im.height= 390 ; else if(selecteditem.value == 1){ im.width= 0 ; im.height= 0 ; console.log( selecteditem.value ); var b=document.getelementsbytagname( button ); b[0].style.color= red ; b[0].onclick = function(){ for(var i=0; i<5; i++) b[i].style.color= black ; 37
38 b[0].style.color= red ; image.src=str0+"&autoplay=1" ; b[1].onclick = function(){ for(var i=0; i<5; i++) b[i].style.color= black ; b[1].style.color= red ; image.src=str1; b[2].onclick = function(){ for(var i=0; i<5; i++) b[i].style.color= black ; b[2].style.color= red ; image.src= str2; b[3].onclick = function(){ for(var i=0; i<5; i++) b[i].style.color= black ; b[3].style.color= red ; image.src= str3; b[4].onclick = function(){ for(var i=0; i<4; i++) b[i].style.color= black ; b[4].style.color= red ; image.src= str4; ; <center> <h1> <p>youtube OFF 2</p> </h1> <h2> </h2> (ON/OFF) <select id="sel1"> 38
39 <option value="0">on</option> <option value="1" >OFF</option> </select> <button id="btn0" >Singin In The Rain Gene Kelly </button> <button id="btn1" >Rhythm Of The Rain Cascades </button> <button id="btn2" >Rain Drops Keep Falling On My Head B.J. Thomas </button> <button id="btn3" >Have You Ever Seen The Rain? John Fogerty </button> <button id="btn4" >L a Pioggia Gigliola Cinquetti</button> <p> <iframe id="image" width="600" height="390" </iframe> </p> </center> sound9.html 39
40 12.3 YouTube JavaScript, YouTube api(application programming interface), jquery HTML JavaScript HTML (sound10.html) sound10.html <!DOCTYPE html> <html> <script src="sample3.js"> <script src="jquery min.js"> <BR> <center> <h1> <p> YouTube </p> </h1> <h2> Jazz </h2> <select id="sel1"> <option value= 0 >Take Five</option> <option value= 1 >Take The A Train</option> <option value= 2 >In The Mood</option> </select> <button id="play"> </button> <button id="pause"> </button> <button id="stop"> </button> <div id="sample1"></div> <div id="sample2"></div> <div id="sample3"></div> </center> sound10.html 40
41 js (sample3.js) // IFrame Player API var tag = document.createelement( script ); tag.src = " var firstscripttag = document.getelementsbytagname( script )[0]; firstscripttag.parentnode.insertbefore(tag, firstscripttag); function onyoutubeiframeapiready() { ytplayer1 = new YT.Player( sample1, // { width: 0, // height: 0, // videoid: Tn3acz2KI9M ); ytplayer2 = new YT.Player( sample2, { width: 0, height: 0, videoid: KV8Hj_E8LJc ); ytplayer3 = new YT.Player( sample3, // { width: 0, height: 0, videoid: omjz73gfpaq ); ; onload = function(){ var sl=document.getelementbyid( sel1 ); $( #play ).click(function() { ytplayer1.playvideo(); 41
42 ); $( #pause ).click(function() { ytplayer1.pausevideo(); ); $( #stop ).click(function() { ytplayer1.pausevideo().seekto(0); ); sl.onchange = function(){ var selecteditem = this.options[this.selectedindex]; if(selecteditem.value == 0){ $( #play ).click(function() { ytplayer2.pausevideo(); ytplayer3.pausevideo(); ytplayer1.playvideo(); ); $( #pause ).click(function() { ytplayer1.pausevideo(); ); $( #stop ).click(function() { ytplayer1.pausevideo().seekto(0); ); else if(selecteditem.value == 1){ $( #play ).click(function() { ytplayer1.pausevideo(); ytplayer3.pausevideo(); ytplayer2.playvideo(); ); $( #pause ).click(function() { ytplayer2.pausevideo(); ); $( #stop ).click(function() { ytplayer2.pausevideo().seekto(0); ); else if(selecteditem.value == 2){ $( #play ).click(function() { ytplayer1.pausevideo(); ytplayer2.pausevideo(); ytplayer3.playvideo(); 42
43 ; ); $( #pause ).click(function() { ytplayer3.pausevideo(); ); $( #stop ).click(function() { ytplayer3.pausevideo().seekto(0); ); 43
44 13 HTML JavaScript 13.1 option, switch HTML (sample6.html) <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title> </title> <style> </style> <script src="sample6.js" > <!-- JavaScript (sample6.js) --> <center> <h1> <p> </p> </h1> <h2> </h2> <select id="sel1"> <option value= 0 >Stat 110 Harvard - Let s Get Started (Statistics Song)</option> <option value= 1 >Lecture 1: Probability and Counting </option> <option value= 2 >Lecture 2: Story Proofs, Axioms of Probability </option> <option value= 3 >Lecture 3: Birthday Problem, Properties of Probability </option> <option value= 4 >Lecture 4: Conditional Probability</option> <option value= 5 >Lecture 5: Conditioning Continued, Law of Total Probability </option> <option value= 6 >Lecture 6: Monty Hall, Simpson s Paradox </option> <option value= 7 >Lecture 7: Gambler s Ruin and Random Variables </option> <option value= 8 >Lecture 8: Random Variables and Their Distributions </option> <option value= 9 >Lecture 9: Expectation, Indicator Random Variables, Linearity </option> <option value= 10 >Lecture 10: Expectation Continued </option> <option value= 11 >Lecture 11: The Poisson distribution </option> <option value= 12 >Lecture 12: Discrete vs. Continuous, the Uniform </option> <option value= 13 >Lecture 13: Normal distribution </option> <option value= 14 >Lecture 14: Location, Scale, and LOTUS </option> <option value= 15 >Lecture 15: Midterm Review </option> 44
45 <option value= 16 >Lecture 16: Exponential Distribution </option> <option value= 17 >Lecture 17: Moment Generating Functions </option> <option value= 18 >Lecture 18: MGFs Continued </option> <option value= 19 >Lecture 19: Joint, Conditional, and Marginal Distributions </option> <option value= 20 >Lecture 20: Multinomial and Cauchy </option> <option value= 21 >Lecture 21: Covariance and Correlation </option> <option value= 22 >Lecture 22: Transformations and Convolutions </option> <option value= 23 >Lecture 23: Beta distribution </option> <option value= 24 >Lecture 24: Gamma distribution and Poisson process </option> <option value= 25 >Lecture 25: Order Statistics and Conditional Expectation </option> <option value= 26 >Lecture 26: Conditional Expectation Continued </option> <option value= 27 >Lecture 27: Conditional Expectation given an R.V.</option> <option value= 28 >Lecture 28: Inequalities </option>> <option value= 29 >Lecture 29: Law of Large Numbers and Central Limit Theorem </option> <option value= 30 >Lecture 30: Chi-Square, Student-t, Multivariate Normal </option> <option value= 31 >Lecture 31: Markov Chains</option> <option value= 32 >Lecture 32: Markov Chains Continued </option> <option value= 33 >Lecture 33: Markov Chains Continued Further </option> <option value= 34 >Lecture 34: A Look Ahead </option> <option value= 35 >Joseph Blitzstein: "The Soul of Statistics" </option> </select> <p> <iframe id="image" width="600" height="390" src=" frameborder="0" allowfullscreen></iframe> </p> </center> sample6.html 45
46 js (sample6.js) onload= function(){ var sl=document.getelementbyid( sel1 ); var image=document.getelementbyid( image ); sl.onchange = function(){ var selecteditem = this.options[this.selectedindex]; switch (selecteditem.value){ case 0 : image.src=" ; break; case 1 : image.src=" ; break; case 2 : image.src=" ; break; case 3 : image.src=" ; break; case 4 : image.src=" ; break; case 5 : image.src=" ; break; case 6 : image.src=" ; break; case 7 : image.src=" ; break; case 8 : image.src=" ; break; case 9 : image.src=" ; break; case 10 :image.src=" ; break; case 11 :image.src=" ; break; case 12 :image.src=" ; break; case 13 :image.src=" ; break; case 14 :image.src=" ; break; case 15 :image.src=" ; break; case 16 :image.src=" ; break; case 17 :image.src=" ; break; case 18 :image.src=" ; break; case 19 :image.src=" ; break; case 20 :image.src=" ; break; case 21 :image.src=" ; break; case 22 :image.src=" ; break; case 23 :image.src=" ; break; case 24 :image.src=" ; break; case 25 :image.src=" ; break; case 26 :image.src=" ; break; case 27 :image.src=" ; break; case 28 :image.src=" ; break; case 29 :image.src=" ; break; case 30 :image.src=" ; break; 46
47 ; case 31 :image.src=" ; break; case 32 :image.src=" ; break; case 33 :image.src=" ; break; case 34 :image.src=" ; break; case 35 :image.src=" ; break; 47
48 14 YouTube playlist sample7.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title></title> // JavaScript <center> <h1> <p>youtube playlist </p> </h1> <h2> Waterloo Road, Les Champs-Elysees, </h2> <iframe width="769" height="432" src=" frameborder="0" allowfullscreen></iframe> </center> sample7.html 48
49 15 YouTube sample8.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title> sample8 </title> onload= function(){ ; var b=document.getelementsbytagname( button ); b[0].style.color= red ; b[0].onclick = function(){ for(var i=0; i<2; i++) b[i].style.color= black ; b[0].style.color= red ; image.src=" ; b[1].onclick = function(){ for(var i=0; i<2; i++) b[i].style.color= black ; b[1].style.color= red ; image.src=" ; <center> <h1>youtube </h1> <h2> Gone with the Wind - End Scene </h2> <button id="btn0" > </button> <button id="btn1" > </button> <p> <iframe id="image" width="600" height="390" src=" frameborder="0" allowfullscreen></iframe> </p> </center> 49
50 sample8.html 16 YouTube sample9.html <html> <title>sample9</title> function onclick(){ image.src=" <center> <h1> YouTube </h1> <A href="#" onclick="onclick()"> <h2> Wir müssen wissen, wir werden wissen. <h2></a> <p> <h3> <p> David Hilbert( ) </h3> <iframe id="image" width="0" height="0" src="" frameborder="0" allowfullscreen> </iframe> <p> <p> ( )Hilbert </center> sample9.html 50
51 17 YouTube BGM sample10.html <html> <title>sample10</title> <center> <h1>youtube BGM </h1> <BR> <h3> Moon River, Charade, and My Fair Lady Overture </h3> <center> <iframe width="1" height="1" src=" frameborder="0" allowfullscreen> </iframe> sample10.html 51
(1) <html>,,,,, <> ( ) (/ ) (2) <!DOCTYPE html> HTML5 (3) <html> HTML (4) <html lang= ja > html (ja) (5) JavaScript CSS (6) <meta charset= shift jis >
HTML HTML HyperText Markup Language (Markup Language) (< > ) 1 sample0.html ( ) html sample0.html // JavaScript
More information~/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 information6 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 informationuntitled
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 information6 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 informationuntitled
2005 HP -1-2005 8 29 30 HP 1 ( ) 1. Web 2. HTML HTML 1 PDF HTML 1 Web HTML http://www.media.ritsumei.ac.jp/kodais2005 2 2.1 WWW HTML Hyper Text Markup Language) HTML Web HTML Internet Explorer http://www.ritsumei.ac.jp
More informationWorld 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 informationch31.dvi
1 1 1.1 1.1.1 ( ) ( 1.1 ): [ ] [ ] CPU[ + ] [ ] CPU( ) ( 1 2 1 1.1: ( 1.1 ): ( ) [ ] ( )[ ] + ( ) (+ ) ( ) ( ) 1.1. 3 1.2: ( ) ( ) ( 1.2) 4 1 1.3: 120m/ (432km/h) 0.5 2m/ 1 ( 1 ) ( ) ( ) ( 1.3) 1.1. 5
More informationJIS 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( )
2016 13H018 1 1 2 2 3 4 3.1............................................... 4 3.2 ( ).................................... 5 4 6 4.1........................................ 6 4.2..................... 6 5
More information演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 演習
Web データ管理 JavaScript (4) (4 章 ) 2012/1/11( 水 ) 1/22 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20120111 演習
More informationJavaScript演習
JavaScript 演習 2 1 本日の内容 prompt 関数 演習 1 演習 2 document.getelementbyid 関数 演習 3 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習 4 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行 2. 詳細設定タブの スクリプトエラーごとに通知を表示する をチェック
More informationJavaScript 演習 2 1
JavaScript 演習 2 1 本日の内容 演習問題 1の解答例 前回の続き document.getelementbyid 関数 演習問題 4 イベント処理 基本的なフォーム テキストボックスの入力値の取得 演習問題 5 演習問題 1 prompt メソッドと document.write メソッドを用いて, ユーザから入力されたテキストと文字の色に応じて, 表示内容を変化させる JavaScript
More informationSGML HTML XML Markup Language Web HTML HTML SGML Standard Generalized Markup Language Markup Language DTD Document Type Definition XML SGML Markup Language HTML XML HTML XML JavaScript JAVA CGI HTML Web
More information! "#$%&'()*+,-. STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ ÅÆÇÈÉÊËÌÍÎÏÐ
6 1 6 (1) (2) HTML (3) PDF Copy&Paste 1 Web 1 Web Web 1 Web HTML ! "#$%&'()*+,-. /0123456789:;?@ABCDEFGHIJKLMNOPQR STUV WXYZ[\]^_`abcdefghijklmno pqrstuvwxyz{ }~ ƒ ˆ Š Œ Ž š œ žÿ ª«±²³ µ ¹º»¼½¾ ÀÁÂÃÄ
More information経営論集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 informationSNS 14,917,000,000 10,780,000 SNS 8,850,000,000 14,900,000 MobileSpace 8,000,000,000 3,000,000 SNS 6,000,000,000 6,000,000 3,863,000,000 22,100,000 3,790,000,000 8,970,000 i i 3,500,000,000 6,000,000 2,001,000,000-1,900,000,000
More informationPowerPoint プレゼンテーション
3 Webデザイナーに求められる知識 優秀な HTML, CSS, 画像編集, JavaScript, jquery, XML, 色 彩理論, LL, データベース, SEO, SMO, EFO, コピーラ イティング, テキストライティング, イラストレー ション, Flash, ディレクション能力, プロジェクトマ ネジメント, Logo作成, Typography, サーバ管理, PHP, Perl,
More informationインターネット社会の発展
インターネット入門 第 8 回 Web ページの作成法 総合情報学部情報科学科榊原道夫, 河野敏行, 大西荘一 目次 1. Web ページの作成 2. タグによる作成手順 3. HTML の基本 4. 作ってみよう 5. スタイルシートの利用 Web ページの作成 作成に必要なアプリケーション HTML エディター 専用ソフト テキストエディター 画像編集ソフト コンテンツ作成ソフト Flash ファイル転送ソフト
More informationPowerPoint Presentation
HTML5 Level.1 Markup Professional HTML5 Level.2 Application Development Professional http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam
More information1 JIS X 8341-3:2016 WCAG2.0 http://waic.jp/docs/wcag2/understanding.html WCAG2.0 http://waic.jp/docs/wcag2/techs.html 2 ... 1... 3... 6 1.1... 6 1.2... 7... 8 1.1.1... 8 1.2.1... 13 1.2.2... 14 1.2.3...
More informationCONTENTS 0 /JSP 13 0.1 Web 14 1 HTML Web 21 1.1 Web HTML 22 1.2 HTML 27 1.3 Web 33 1.4 HTML 43 1.5 46 1.6 47 1.7 48 2 Web 51 2.1 Web 52 2.2 Web 54 2.3 Web 59 2.4 65 2.5 68 2.6 75 2.7 76 2.8 77 3 81 3.1
More information07_経営論集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スタイルシートでデザインを整えよう
スタイルシートでデザイン (2) CSS (Cascading Style Sheets) ここまで HTML は文章の意味的な役割を記述するもので 表示はブラウザ次第であることを強調してきました あるブラウザでの表示方法を前提に HTML で見た目を制御しようとすると 他の環境では意味が通じにくい 相互運用性の低い情報となってしまいます Web の表現を作者が指定するには HTML ではなく スタイルシートという別の機能をもちいます
More informationWeb
Web 1 1 1........................... 1 2 Web...................... 1 3...................... 3 4........................ 4 5........................... 5 i............................ 5 ii iii..........................
More informationWeb プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5
Web プログラミング 1 JavaScript (4) (4 章 ) 2013/7/17( 水 ) 日時 講義内容 4/10 ( 水 ) ガイダンス Web (1 章 ) 4/17 ( 水 ) HTML+CSS (1) (2 章 ) 4/24 ( 水 ) HTML+CSS (2) (2 章 ) 5/8 ( 水 ) HTML+CSS (3) (2 章 ) 5/15 ( 水 ) HTML+CSS (4)
More informationuntitled
2007 IT G Google Map API WEB2.0 2007 8 23 GoogleMapAPI GoogleMapAPI Google Web URL XHTML JavaScript GoogleMAP LHACA FFFTP TeraPad Haruhiro Unno Japan Electronics College 1 GoogleMapAPI Web Google GMail
More information目次 はじめに... 1 CSS?... 3 CSS の例... 4 CSS の基本の形... 5 HTML で CSS を読み込む... 7 <link> タグを置く ( ファイルを読み込む )... 9 <style> タグを置く ( スタイルを直接埋め込む ) セレクタ... 11
CSS について ( 概要 ) 作成日 : 2016/01/21 作成者 : 西村 はじめに この資料は HTML がある程度 ( 少しでも ) わかる人に CSS の仕組みを少しだけわかってもらえるように書いています この資料では 下記を説明します CSS とは何か CSS の基本の形 CSS の読み込み方 セレクタとは何か / 最低限覚えるとよいセレクタ プロパティと値 / 最低限覚えるとよいスタイル
More informationJavaScript 1.! DOM Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2
JavaScript (2) 1 JavaScript 1.! 1. 2. 3. DOM 4. 2. 3. Ajax Shelley Powers,, JavaScript David Flanagan, JavaScript 2 (1) var a; a = 8; a = 3 + 4; a = 8 3; a = 8 * 2; a = 8 / 2; a = 8 % 3; 1 a++; ++a; (++
More informationJavaScript演習
JavaScript 演習 2 山口研究室後期博士課程 3 年玉川奨 ( たまがわすすむ ) 居室 :24-604 / 23-620 mail : s_tamagawa@ae.keio.ac.jp 1 前回の補足説明 + 復習 IE における JavaScript のデバッグ方法 prompt 関数 演習問題 1 IE における JavaScript のデバッグ方法 1. ツール インターネットオプションメニューを実行
More information1222-B Transform Using Class And Tag (classセレクタと要素型セレクタ(Tag)を使用してスタイルを適用する)
1232 セレクタを使う (selector) CSS でスタイルを指定する時に セレクタ (selector) でスタイルを適用する対象を特定することができます セレクタには次のようなものがあります もうすでに使用してきた #box1 のような指定は id セレクタ と呼ばれるセレクタです また フォントの指定で使用してきた.font1 は class セレクタ と呼ばれるセレクタです セレクタ
More informationoverflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サ
1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き
More informationcss.pdf
1 2 Web (2) HTML ( ) HTML CSS CSS = Cascading Stye Sheet (CSS) W3C (Word Wide Web Consortium, Web ) 2006-2018 Harumi Murakami and Kota Abe HTML&CSS 3 1990 Web HTML Web 1993 Web , , HTML HTML&CSS
More information27短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 informationm_sotsuron
iphone Web 0848066 1. 1 1 1 2 iphone 2 3 2 4 3 2. 3 1 3 2 iphone Web 6 3 HTML 10 4 CSS 12 5 iphone 14 6 15 7 16 8 ipad 18 3. 22 iphone Web Web 2 iphone Web iphone iphone Web iphone Web PC 1 2000 iphone
More informationホームページ制作 基礎編 (HTML5 CSS3 コーディング )
ホームページ制作 基礎編 (HTML5 CSS3 コーディング ) ホームページ制作 基礎編 ホームページ制作 基礎編 目次 はじめに 5 はじめに... 5 本教材について 5 WEB サイト制作の概要... 5 Web サイト制作の流れ 5 サイト制作に必要なプログラミング言語 6 HTML 7 HTML について... 7 HTML について 7 HTML の記述方法 7 HTML の解説 8
More informationサンプル CSS web ページを開くと同時にピエロの玉乗りが動き出すアニメーションを作ってみましょう AnimeAuto の説明 HTML の記述 (AnimeAuto.html) ピエロの画像に pierrot という id を 玉の画像に ball という id を付けておきます <!DOCT
1320 Animation のトリガー ( 開始させるきっかけ ) の方法 animation を開始させるきっかけは 次の3つの方法があります 1web ページが表示されるのと同時に開始させる方法 2マウスでクリック (click) して開始させる方法 3マウスカーソルを乗せている (hover) 間だけ動かす方法アニメーションを動かすためにはアニメーション名 (animation-name プロパティの値
More information子ボックスや孫ボックスなどに position: absolute; と指定すると それぞれ親ボックスに対する絶対位置で配置できるので親ボックスの上に複数の子ボックスや孫ボックスを重ねて配置することができます トランジションやアニメーションを作成するときに非常に便利なので覚えておきましょう top
1116 位置の記述方法について (position, top, right, bottom, left) ここまでの説明では ボックスの大きさを変えると その後ろや下にある他のボックスの位置が移動してしまいました それは margin プロパティが隣接するボックスとの間の空白を指定しているからです position プロパティを使用すると ボックスの配置位置を指定して位置を固定させたり 移動できるようにすることができます
More information3 top#index 1 web router.ex web/router.ex 12 scope "/", NanoPlanner do 13 pipe_through browser get "/", TopController, index 16 end URL / to
3 NanoPlanner SASS Bootstrap Font Awesome 3.1 RAVT 6 RAVT route action view template Phoenix top index top index top#index RAVT URL / top#index top#index top 23 3 top#index 1 web router.ex web/router.ex
More informationように記述をします 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 informationohp.mgp
2019/06/11 A/B -- HTML/WWW(World Wide Web -- (TA:, [ 1 ] !!? Web Page http://edu-gw2.math.cst.nihon-u.ac.jp/~kurino VNC Server Address : 10.9.209.159 Password : vnc-2019 (2019/06/04 : : * * / / : (cf.
More informationJavaScript の使い方
JavaScript Release10.5 JavaScript NXJ JavaScript JavaScript JavaScript 2 JavaScript JavaScript JavaScript NXJ JavaScript 1: JavaScript 2: JavaScript 3: JavaScript 4: 1 1: JavaScript JavaScript NXJ Static
More informationWebデザイン論
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サンプル CSS OutlineAnimation.html の説明 HTML の記述 (OutlineAnimation.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 div1 の div 要素を記述し 中にテキストで Out
1339 アウトラインのアニメーション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースと して使用されることが多い機能です また outline でボックスの輪郭をアニメーションさ せることもできますが あまり使われることはないかもしれません アニメーションで変化させることができる outline 関係のプロパティ outline-color animation
More information■新聞記事
情報処理 C (P.1) 情報処理 C ホームページ作成入門 テキストエディタ ( メモ帳 TeraPad など ) でHTMLファイルを作成する HTML(Hyper Text Markup Language ) ホームページを記述するための言語のこと テキストエディタの起動 (TeraPad の場合 ) [ スタート ]-[ プログラム ]-[ テキストエディタ ]-[TeraPad] をクリック
More information1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.
1 1 1............................ 1 2...................... 1 3..................... 2 4................... 2 2 4 1 CSS.......................... 4 2.......................... 4 3......................
More informationサンプル CSS1 入力フィールドの輪郭 (outline) のトランジション 入力フィールドをクリックすると変化します InputOutlineTransition の説明 HTML の記述 (InputOutlineTransition.html) id 属性 field の div 要素を作り
1250 アウトラインのトランジション outline は入力フィールドの輪郭を赤くして目立たせるなど ユーザーインターフェースとして使用されることが多い機能です outline はボックスに指定して border と同じようにトランジションさせることもできますが あまり使われることはないかもしれません outline には border と違って 角の半径を指定して丸くする機能はありません 入力フィールドをクリックすると変化します
More informationuntitled
Ajax Web Ajax http://www.openspc2.org/javascript/ajax/ajax_stu dy/index.html Life is beautiful Ajax http://satoshi.blogs.com/life/2005/06/ajax.html Ajax Ajax Asynchronous JavaScript + XML JavaScript XML
More informationボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必
1252-1 ボタンのトランジション 1 トランジションを利用して ボタンを作ってみましょう ボタンを工夫することでひときわ光る web ページにすることができます もう Illustrator や Photoshop でボタンの画像を作る必要はありません JavaScript でスクリプトを書く必要もありません すべて CSS3 の機能だけで作成されています サンプル CSS1 形と色が変化するリンクボタン
More informationabout かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理
CSS Taichi Kaminogoya 2007-03-24T13:30:00+09:00 about かみのごうや たいち 大阪府出身 東京都在中 28歳 うお座 O型 ゾウと写真が好き 2xup.org を管理 CSS photo by timlovesbrian. http://www.flickr.com/photos/cmsspork/417022096/ http://creativecommons.org/licenses/by/3.0/
More information388-356697252-2.pdf
専修大学 ネットワーク情報学部 2012年度 特殊演習 (Webプログラミング) 新居雅行 / Masayuki Nii 2 HTML/CSS 2012 4 23 1 2-1 Web 2 2-1 80 SSL Apache WindowsIIS Internet Information Server HTTP HyperText Transfer Protocol HTML HTML 1 1 [ URI]
More informationトリガーをわかり易くする方法
1221 トリガーをわかり易くする方法 (cursor, border-radius) 例えばブラウザにつぎのような画面が表示されていたら あなたはこの手の画像を何だと 思いますか? ほとんどの方が ハンドサインじゃないの? か 右方向を示しているのでしょう? と思われたのではないでしょうか 実は 私は手の画像をクリックすると画像が transition で右方向へ移動するように css を記述してあったのですが
More informationProVisionaire Control V3.0セットアップガイド
ProVisionaire Control V3 1 Manual Development Group 2018 Yamaha Corporation JA 2 3 4 5 NOTE 6 7 8 9 q w e r t r t y u y q w u e 10 3. NOTE 1. 2. 11 4. NOTE 5. Tips 12 2. 1. 13 3. 4. Tips 14 5. 1. 2. 3.
More information</div> </div> </body> </html> CSS の記述 (3DCubeAnime1.css) #stage ステージのスタイルを指定します 背景色を黒色で指定します 画像に軽く遠近感を出すために perspective: 1000px; と指定し perspective-orig
1342-7 応用 1 Rotate 3D Cube 3D Cube が回転するアニメーション サンプル CSS1 CSS3 で 3D の Cube を描いて回転させてみましょう 3DCubeAnime1 の説明 HTML の記述 (3DCubeAnime1.html) id 属性 stage の div 要素を作り その中に div 要素でボックスを記述します id 属性 cube の div 要素を記述し
More informationブログ制作教材
ブログ作成 2 3 id integer unique primary key not null auto_increment koshinbi integer title varchar(100) honbun text category_id interger ( 以下前と同じ ) id kiji_id koshinbi name com_honbun
More information2009 Web B012-1
2009 Web 2010 2 1 5108B012-1 1 4 1.1....................................... 4 1.2................................... 4 2 Web 5 2.1 Web............................... 5 2.2 Web.................................
More information大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box
1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました
More informationHTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17
1 11 13 2 11 27 3 12 11 HTML HTML HTML 4.1 4.2 4.3 4.4 14 15 16 17 WWW(World Wide Web) HTML(HyperText Markup Language) HTML HTML HTML HTML - 1 - .1 HTML (V)(C) HTML - 2 - HTML HTML OS Windows 2.1 HTML
More informationWeb09
情報処理技法 ( マルチメディアと表現 )I 第 9 回 CSS(1) D.Mitsuhashi 1 HTML と CSS D.Mitsuhashi 2 HTML と CSS の役割 HTML 書の構造を すための 語 CSS 書に視覚デザインを与える 語 HTML( 構造化 書 ) が 組みとすると, CSS( スタイルシート ) は外装にあたる D.Mitsuhashi 3 HTML に CSS
More informationNetwork 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 informationtransform: 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 information3 3.1 SSedit ua012345% ssedit SuperSQL config.ssql log.txt( logs.txt) SSedit SSedit 3.2 ssql Putty SSedit ua012345% ssql HTML /public html/ssql.ssql 4
SuperSQL SuperSQL 2016 12 13 1 SuperSQL ITC 2 SuperSQL 2.1 public html/ssql 2.2 SSedit SSedit (3.1 ) postgresql (ua123456 ) 131.113.101.124 /public html/ssql SuperSQL HTML /public html/ssql http://user.keio.ac.jp/
More informationFileList Convert a pdf file!
Tamadaigakufuzokuhijirigaokac yugakukoutougakkoupasocom butamadaigakufuzokuhijirigaok acyugakukoutougakkoupasoco mbutamadaigakufuzokuhijiriga 2009 09 20 21 okacyugakukoutougakkoupaso combutamadaigakufuzokuhijiri
More information<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 informationtransform: 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 informationBorder 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 informationwebsample 1 2 websample index.html
Web HTML Web 1 2 3 4 5 6 7 1 2 3 4 5 6 websample 1 2 websample index.html -1-1 HTML index.html html head /head body /body /html body table border="1" /table /body table border="" /table table /table table
More information/var/lib/sharelatex/data/compiles/5b35c6e168aeba3d a72a7acd11f6ba07fbbff68/output.dvi
SuperSQL 2018 7 5 1 2 2 2 2.1.................................... 2 2.2 SSedit....................................... 2 3 2 3.1 SSedit..................................... 2 3.2 ssql.................................
More information1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2
XHTML DOM JavaScript 2 2008 7 1 1 1 1.1............................. 1 1.2....................... 1 2 HTML 2 2.1 web HTML......................... 2 2.1.1 HTML.................... 2 2.1.2 HTML.........................
More informationPowerPoint Presentation
2 3 4 HTML 5 Level.1 Markup Professional HTML 5 Level.2 Application Development Professional 5 6 7 8 9 http://www.html5exam.jp/ @html5cert https://www.facebook.com/html5exam http://www.pearsonvue.com/japan/registration/
More information2016 IP 1 1 1 1.1............................................. 1 1.2.............................................. 1 1.3............................................. 1 1.4.............................................
More informationホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア 現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2 種類がある 2. テキストエディタ : テキストファイルと呼ばれる 文
ホームページ作成 1. HTML 言語によるホームページ作 成 2. ホームページ作成ソフト IBM : ホー ムページビルダー Microsoft FrontPage 1 ホームページ作成に必要なソフト 1. ブラウザ : ホームページを画面上に表示するためのソフトウェア 現在よく使われるのは Microsoft Internet Explorer と Netscape Navigator の 2
More informationMicrosoft Word - JavaScript基礎講座Web Speech API.docx
近畿大学工学部 公開講座 2017 年 5 月 20 日 ( 土 ) JavaScript プログラミング基礎講座 制作する Web アプリ : 音声入力 + Wikipedia 検索音声でキーワードを入力し,Wikipedia を検索して, 結果を表示する 徐丙鉄 ( 情報学科 ) スケジュール 1. 開発環境 Brackets のインストール 2.HTML と CSS の復習,CSS アニメーション
More information第 2 部 JavaScript 編 17 演習の答え 17.1( 演習 3-3)1 列目の width を 200px 2 列目を 300px にしなさい pr3-3.html <title> </title> <table border="1" style="border-collapse:co
付録 第 2 部 JavaScript 編 17 演習の答え 17.1( 演習 3-3)1 列目の width を 200px 2 列目を 300px にしなさい pr3-3.html
More information* この 確認問題解答 / 演習問題解答 は, 書籍 HTML 演習 HTML5 版 ( 発行 : 株式会社 SCC) の ダウンロード用 [ 別冊 ] として, 当該書籍の読者に限定して提供しています - 2 -
HTML 演習 HTML5 版 別冊 確認問題解答 演習問題解答 1-1A CShogo Nakajima 2017 * この 確認問題解答 / 演習問題解答 は, 書籍 HTML 演習 HTML5 版 ( 発行 : 株式会社 SCC) の ダウンロード用 [ 別冊 ] として, 当該書籍の読者に限定して提供しています - 2 - 確認問題解答 / 演習問題解答 第 1 章 確認問題 1.1 (1)
More informationMicrosoft PowerPoint _2b-DOM.pptx
要素ノードの参照 プロパティで参照可能な親 子 兄弟ノード 要素ノードの他に, テキストノード, ノード, コメントノードなど様々なノードが含まれる ( 処理中に判別が必要 ) 要素ノードのみ参照するプロパティ プロパティ 参照先 parentelement 親要素 firstelementchild 先頭の子要素 lastelementchild 末尾の子要素 nextelementsibng 直後の兄弟要素
More informationuntitled
JavaScript HP JavaScript JavaScript Web JavaScript Web JavaScript JavaScript JavaScript HTML HTML HTML JavaScript 1. JavaScript ON/OFF 2. JavaScript 3. 4. 5. 6. 7. 8. 9. 10. if 11. if 12. switch 13. 14.
More informationインターネットマガジン2001年2月号―INTERNET magazine No.73
+CD-ROM Å 5 5.5 M8 A N S W E R A N S W E R
More informationColor Change
1229 Text の 3D トランジション (rotatex, rotatey) テキストが 3D で変形するトランジションを作ってみましょう Hover ボタンの上をマウスポインター ( カーソル ) で hover すると テキストが 3D で 変化するトランジションが動きます プロパティ transform: rotatex( ) rotatey( ) 要素を 3D 回転するときに指定します
More information1222-A Transform Function Order (trsn
1247 Matrix3D の合成 Multiply Matrix3D ここでは matrix3d 関数で 3D の変形 ( 拡大縮小 傾斜 ) 回転 移動を同時に行いたい場 合の数値の指定方法について説明します マトリックスに指定する数値はつぎのようになっています ( 注 : これは数学上のマトッリ クスの数値の並びです 数学上のマトリックスで計算して 最後に matrix3d 関数の数値の 並びで指定します
More information<!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 information1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2.....................
CSS 0348085 1 1 1........................... 1 2.............................. 1 3........................ 2 2 3 1...................... 3 2..................... 3 3........................... 5 3 CSS
More informationISコースプロジェクト実習 前期(第1回 ガイダンス)
プロジェクト実習 IS2 前期 ( 第 1 回 ) 使用教室 :5-102,8-203,8-303,8-305,4-205 担当教員 : 熊谷和志, 早川吉弘 資料サイト : 熊谷研究室授業資料 (http://ckuma.html.xdomain.jp/class/) 1. 授業を進める上で 授業概要 1 学年の コンピュータリテラシ, 総合工学基礎実験 を踏まえ, 数週間から数ヶ月の中長期にわたり,
More information1
...1...37 1 HTML4.01 Transitional Frameset DOCTYPE 5.1.a 2 Windows Shift_JIS Linux Unix EUC jp meta 5.1.a 3 5.1.a JIS cm cc kg alt 4 5.4.a 5.4.a 5 alt alt alt alt alt alt="" alt 6 5.4.b 5.4.b 7 8 5.3.a
More informationjavascript key
Associate Professor Department of International Social Studies KYOAI GAKUEN UNIVERSITY Email: ogashiwa@c.kyoai.ac.jp, ogashiwa@wide.ad.jp sample
More information16 (2) 23 - <div class="col-12 col-md-4"> </div> 23 + <div class="col-12 col-md-4 bg-info text-white text-md-right"> </div> HTML bg-info #17
16 (2) Elixir/Phoenix 16.1 web/templates/plan_items/show.html.eex 3 - 3 + 7 -
More information背景の線形グラデーションをアニメーションのように見せる方法は 前章の #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フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボ
フォームとインナー HTML を使って動的にページ内の文章を変更しよう 問題 1. つぎの指示と画面を参考に HTML を組みなさい 仕様 テキストボックスに任意の文字を入力し [ コメント ] ボタンをクリックすると 下部の文章がテキストボックスの内容に置き換わる フォーム名 : f1 テキストボックス名 : t1 関数名 : MM() test-a.htm function MM(){ a=document.f1.t1.value;
More informationii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3
Web 2.0 Web Web Web Web Web Web Web I II I ii II Web Web HTML CSS PHP MySQL Web Web CSS JavaScript Web SQL Web 2014 3 1. 1.1 Web... 1 1.1.1... 3 1.1.2... 3 1.1.3... 4 1.2... 4 I 2 5 2. HTMLCSS 2.1 HTML...
More information( 注 )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 information2 / 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 information2
CSS ホームページ HTML の作り方 作ったことない人でも大丈夫! 準備から始まる教科書です HTML,CSS の基礎を学べる決定版 見本を見ながら基礎学習 基礎を学んで目指そう Web クリエイター 1 2 基礎から学ぶ Web デザイン vol.1 1 2 はじめに4 拡張子を表示しよう 4 拡張子とは? 4 表示しないと 4 必要なものを用意しよう 5 何で作るか? 5 用意するもの 5
More informationWebデザイン論
2008 年度松山大学経営学部開講科目 情報コース特殊講義 Web デザイン論 檀裕也 (dan@cc.matsuyama-u.ac.jp) http://www.cc.matsuyama-u.ac.jp/~dan/ 前回の課題 Web デザイン論 の期末試験まで何日残っているか表示する Web ページを JavaScript で制作し 公開せよ 宛先 : dan@cc.matsuyama-u.ac.jp
More informationJavaScript¥×¥í¥°¥é¥ß¥ó¥°ÆþÌç
JavaScript 2009 5 28 1 2 1.1 JavaScript.................................. 2 1.2..................................... 3 1.3 if................................... 4 2 6 2.1.....................
More information動させることはできません 少し工夫が必要になります 元の画像を移動すれば反射画像 も一緒についてきますが 反射画像だけが移動するように見せたいので 元の画像の上に は黒色のボックスを覆い被せます ReflectAnime1 の説明 HTML の記述 (ReflectAnime1.html) id 属
1333 Reflection の効果 -webkit-box-reflect プロパティをアニメーションに利用してみましょう Reflection は Safari (webkit 系ブラウザ ) と Chrome(webkit にも対応 ) のみで動かすことができます 2013 年 12 月現在 W3C で Reflection の仕様が Working Draft( 草案 ) となっています
More information1 ななちゃんの IT 教室ウェブページを作ろうの巻 第 1 回ウェブページの構造 ( 見出し 改行 箇条書き ) を指定 (HTML) なな : これって 朝日新聞の ののちゃんの DO 科学 のパクリ? 先生 : パロディって言ってちょうだい 家政婦のミタ ( 家政婦は見た のパロディ ) クレ
ななちゃんの IT 教室 ウェブページを作ろうの巻 by nara.yasuhiro@gmail.com ウェブページを見るだけだったななちゃんが自分のホームページを作れるようになるまでのお話 第 0.7 版 2017 年 5 月 7 日 フリー素材 http://freeillustration.net もくじ第 1 回ウェブページの構造 ( 見出し 改行 箇条書き ) を指定 (HTML) 第
More informationSVG資料第10回目(その2) Ajaxによる同期通信と非同期通信の違い
10 ( SVG 10 ( Ajax Ajax I(SVG) 2017/6/27 10 ( Ajax 10 ( Ajax 100 10 HTML 1 2 3 4 5 6
More information_勉強会_丸山さつき_v3
CSS 2019/6/21 1 CSS CSS CSS!2 CSS Web!3 CSS HTML CSS CSS!4 CSS!5 !6 Id class id class CSS!7 !8 body 16px p 16px px, rem, em, %!9 !10 body 16px p 16px 1 CSS!11 !12 CSS CSS!13 CSS 4 CSS 1. OOCSS 2. SMACSS
More informationWeb データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 湘南工科大学講義資料 Web データ管理 (2011) 阿倍 1/18
Web データ管理 JavaScript (3) (4 章 ) 2011/12/21( 水 ) 1/18 演習室の PC のハードディスクには演習で作成したデータは保管できません 各 PC の ネットワーク接続 ショートカットからメディア情報センターのサーバーにアクセスしてください (Z ドライブとして使用できます ) 演習名 使用するフォルダ 演習 1 Z: Web データ管理 20111221
More information