$(function(){varheaderTitleElement=$("#DeltaPlaceHolderPageTitleInTitleArea>span>span>a");headerTitleElement[0].innerHTML="書換え後のタイトル名";});

vararg=newObject;url=location.search.substring(1).split('&');for(i=0;url[i];i++){vark=url[i].split('=');arg[k[0]]=k[1];}varid=arg.user_id;

$(function(){varele=$("#scriptWPQ3 tbody td:nth-of-type(6)");ele[0].innerHTML='<img src="/sites/jphgt4743/SiteAssets/document_download.png">';ele[1].innerHTML='<img src="/sites/jphgt4743/SiteAssets/document_download.png">';});

#scriptWPQ3tbodytd:nth-of-type(6)img{width:23px;}

<divclass="div"><imgsrc="img.png"><h1>タイトル</h1><ahref="#">詳細はこちら</a><!-- 普通はリンクに飛べるのはこの箇所だけ --></div>

.div{position:relative;/* ① */}.parenta{position:absolute;/* ② */top:0;/* ③ */left:0;/* ④ */width:100%;/* ⑤ */height:100%;/* ⑥ */}

<divclass="div"><imgsrc="img.png"><h1>タイトル</h1><span>詳細はこちら</span><!-- 適当なタグを追加する --><ahref="#"></a><!-- この中の文字列を削除 --></div>

#mainContent{width:600px;min-height:100vh;background-color:#fff;margin:0auto;padding:40px;box-sizing:border-box;}.haba100{background-color:#29292e;color:#fff;width:600px;margin-left:-40px;box-sizing:border-box;padding:10px40px;font-size:14px;}

/*
terminalのtabごとに画像が変わります。
split機能を使用しても背景画像はtabに設定されたもののままです。
*//*地味にここのクラス指定が他の二つと違うので注意*/.terminal-outer-container.terminal-tab::after{content:'';background-size:cover;width:100%;height:100%;position:absolute;top:0px;right:0px;background-position:top;opacity:0.15;pointer-events:none;}.terminal-tab:nth-of-type(3n+1)::after{background-image:url(痛画像のpath);}.terminal-tab:nth-of-type(3n+2)::after{background-image:url(痛画像のpath);}.terminal-tab:nth-of-type(3n+3)::after{background-image:url(痛画像のpath);}

/*
split Terminal機能で分割されたターミナルそれぞれに画像が設定されます。
タブを増やしても表示される画像は変わりません。
*/.terminal-outer-container.split-view-view::after{content:'';background-size:cover;width:100%;height:100%;position:absolute;top:0px;right:0px;background-position:top;opacity:0.15;pointer-events:none;}.terminal-tab.split-view-view:nth-of-type(3n+1)::after{background-image:url(画像のパス);}.terminal-tab.split-view-view:nth-of-type(3n+2)::after{background-image:url(画像のパス);}.terminal-tab.split-view-view:nth-of-type(3n+3)::after{background-image:url(画像のパス);}

/*
tabとsplit、両方の画像をそれぞれ指定しています。
細かく指定できます。
*/.terminal-outer-container.split-view-view::after{content:'';background-size:cover;width:100%;height:100%;position:absolute;top:0px;right:0px;background-position:top;opacity:0.15;pointer-events:none;}.terminal-tab:nth-of-type(3n+1).split-view-view:nth-of-type(2n+1)::after{background-image:url(画像のパス);}.terminal-tab:nth-of-type(3n+1).split-view-view:nth-of-type(2n+2)::after{background-image:url(画像のパス);}.terminal-tab:nth-of-type(3n+2).split-view-view:nth-of-type(2n+1)::after{background-image:url(画像のパス);}.terminal-tab:nth-of-type(3n+2).split-view-view:nth-of-type(2n+2)::after{background-image:url(画像のパス);}.terminal-tab:nth-of-type(3n+3).split-view-view:nth-of-type(2n+1)::after{background-image:url(画像のパス);}.terminal-tab:nth-of-type(3n+3).split-view-view:nth-of-type(2n+2)::after{background-image:url(画像のパス);}

<template><divref="drag_area"class="drag_area"@mousedown="dragStart($event)"@mousemove="dragMove($event)"@mouseup="dragEnd($event)"@mouseleave="dragEnd($event)"><imgref="preview_image"class="preview_image"src="image.png":style="{transform: 'scale('+scale+') rotate('+rotate+'deg)',top: new_pos.y+'px',left: new_pos.x+'px'}">
    <divclass="control_btn"><button@click="zoomIn"></button><button@click="zoomOut"></button><button@click="rotateLeft"></button><button@click="rotateRight"></button><button@click="resetStyle"></button></div></div></template><script>exportdefault{data(){return{scale:0.8,rotate:0,new_pos:{x:0,y:0,},prev_pos:{x:0,y:0,},isDrag:false,}},mounted(){this.resetStyle();},methods:{zoomIn(){this.scale*=1.2;if(this.scale>10){this.scale=10;}},zoomOut(){this.scale/=1.2;if(this.scale<0.1){this.scale=0.1;}},rotateLeft(){this.rotate-=90;},rotateRight(){this.rotate+=90;},resetStyle(){this.scale=0.8;this.rotate=0;this.new_pos.x=(this.$refs.drag_area.offsetWidth-this.$refs.preview_image.offsetWidth)/2;this.new_pos.y=(this.$refs.drag_area.offsetHeight-this.$refs.preview_image.offsetHeight)/2;this.prev_pos={x:0,y:0,};},dragStart(e){e.preventDefault();this.isDrag=true;this.prev_pos.x=e.pageX;this.prev_pos.y=e.pageY;},dragMove(e){if(this.isDrag){// マウス座標の差分letmoved_x=e.pageX-this.prev_pos.x;letmoved_y=e.pageY-this.prev_pos.y;// ドラッグで移動できる範囲を制御leta_w=this.$refs.drag_area.offsetWidth;leta_h=this.$refs.drag_area.offsetHeight;letb_w=this.$refs.preview_image.offsetWidth;letb_h=this.$refs.preview_image.offsetHeight;letc_w=b_w*this.scale;letc_h=b_h*this.scale;letdiff_w=(c_w-c_h)/2;letdiff_h=(c_h-c_w)/2;letmax_x=a_w-(b_w-c_w)/2-40;letmin_x=-(b_w-(b_w-c_w)/2-40);letmax_y=a_h-(b_h-c_h)/2-40;letmin_y=-(b_h-(b_h-c_h)/2-40);// 回転したときの差分if(this.rotate/90%2!==0){max_x-=diff_w;min_x+=diff_w;max_y-=diff_h;min_y+=diff_h;}// 移動距離を反映letnew_pos_x=this.new_pos.x+moved_x;letnew_pos_y=this.new_pos.y+moved_y;if(new_pos_x>max_x){this.new_pos.x=max_x;}elseif(new_pos_x<min_x){this.new_pos.x=min_x;}else{this.new_pos.x=new_pos_x;}if(new_pos_y>max_y){this.new_pos.y=max_y;}elseif(new_pos_y<min_y){this.new_pos.y=min_y;}else{this.new_pos.y=new_pos_y;}// マウス座標を更新this.prev_pos.x=e.pageX;this.prev_pos.y=e.pageY;}},dragEnd(e){this.isDrag=false;},}}</script><stylelang="scss"scoped>// ※デザインの部分は省略してます。.drag_area{cursor:move;position:relative;overflow:hidden;.preview_image{position:absolute;top:0;left:0;width:auto;height:auto;max-width:100%;max-height:100%;transform:scale(.8)rotate(0deg);}}</style>

<imgref="preview_image"class="preview_image"src="images.png":style="{transform: 'scale('+scale+') rotate('+rotate+'deg)',top: new_pos.y+'px',left: new_pos.x+'px'}">

dragStart(e){e.preventDefault();this.isDrag=true;this.prev_pos.x=e.pageX;this.prev_pos.y=e.pageY;},

dragMove(e){if(this.isDrag){// マウス座標の差分letmoved_x=e.pageX-this.prev_pos.x;letmoved_y=e.pageY-this.prev_pos.y;// 移動距離を反映this.new_pos.x+=moved_x;this.new_pos.y+=moved_y;// マウス座標を更新this.prev_pos.x=e.pageX;this.prev_pos.y=e.pageY;}},

// ドラッグで移動できる範囲を制御leta_w=this.$refs.drag_area.offsetWidth;leta_h=this.$refs.drag_area.offsetHeight;letb_w=this.$refs.preview_image.offsetWidth;letb_h=this.$refs.preview_image.offsetHeight;letc_w=b_w*this.scale;letc_h=b_h*this.scale;letmax_x=a_w-(b_w-c_w)/2;letmin_x=-(b_w-(b_w-c_w)/2);letmax_y=a_h-(b_h-c_h)/2;letmin_y=-(b_h-(b_h-c_h)/2);

// 移動距離を反映letnew_pos_x=this.new_pos.x+moved_x;letnew_pos_y=this.new_pos.y+moved_y;if(new_pos_x>max_x){this.new_pos.x=max_x;}elseif(new_pos_x<min_x){this.new_pos.x=min_x;}else{this.new_pos.x=new_pos_x;}if(new_pos_y>max_y){this.new_pos.y=max_y;}elseif(new_pos_y<min_y){this.new_pos.y=min_y;}else{this.new_pos.y=new_pos_y;}

letdiff_w=(c_w-c_h)/2;letdiff_h=(c_h-c_w)/2;// 回転したときの差分if(this.rotate/90%2!=0){max_x-=diff_w;min_x+=diff_w;max_y-=diff_h;min_y+=diff_h;}

dragEnd(e){this.isDrag=false;},

<imgref="preview_file"class="preview_file":src="images[activeIndex].data":style="{transform: 'scale('+scale+') translate('+new_pos.x+'px,'+new_pos.y+'px)'}">

letmax_x=(a_w-(b_w-c_w)/2)/this.scale;letmin_x=-(b_w-(b_w-c_w)/2)/this.scale;letmax_y=(a_h-(b_h-c_h)/2)/this.scale;letmin_y=-(b_h-(b_h-c_h)/2)/this.scale;

<bodyonload="alert('this is alert');"><h1>Hello</h1></body>

<body><h1>Hello</h1>


   //こちらがJavaScriptスペース

   <script type="text/javascript">alert('this is alert');</script></body>

<body><h1>Hello</h1>


   //こちらが外部JavaScriptシート（index.js）の参照

   <script src="index.js"charset="utf-8"></script></body>

alert('this is alert');

document.firstElementChild.lastElementChild.firstElementChild;

//id名で指定document.getElementById("idName");//class名で指定document.getElementsByClassName("className");//タグの名前で指定document.getElementsByTagName("h1");//h1複数ある場合は配列に格納されているので、何個あるか確認document.getElementsByTagName("h1").length;//その配列の2個目の色をREDに変えたい場合document.getElementsByTagName("h1")[1].style.color="red";

//タグを選択する場合document.querySelector("h1");//IDを選択する場合document.querySelector("#idName");//クラスを選択する場合document.querySelector("className");//リストの中のaリンクのみを選択する場合（階級構造）document.querySelector("li a");//nameというクラス名を持つ リストを選択する場合document.querySelector("li.name");// id名"List"の中にあるクラス"item"の要素を全て抽出document.querySelectorAll("#list .item");

//selectorでh1を選択して、styleの色を"red"に変える。document.querySelector("h1").style.color="red";

.gorilla{color:brown;}

<h1> Gorilla is the strongest animal in the world. </h1>

// Goriilaのノードを選択し、クラス gorilla を適用document.querySelector("h1")classList.add("gorilla");// すでに適用されているクラス"gorilla"を外すdocument.querySelector("h1")classList.remove("gorilla");// "gorilla"クラスがすでに適用されていれば外して、適用されていなければ適用するdocument.querySelector("h1")classList.toggle("gorilla");

//取得して変更document.querySelector("h1").textContent="changed H1 text";document.querySelector("h1").innerHTML="changed H1 text";

<ahref="htps://www.google.com">グーグル</a>
//上記のaタグがどのような属性を持っているかを求めるdocument.querySelector("a").attributes;//aタグの特定の属性hrefを求めるdocument.querySelector("a").getAttribute("href");//→ この場合、"htps://www.google.com"が求められます。//最後にこのaタグのhref部分を置換しますdocument.querySelector("a").setAttribute("href","https://www.kibinag0.com");

<svg><clipPathid="clip-left-above"><rectx="0"y="0"width="130"height="50"/>　//切り取る部分の設定
        </clipPath><circlecx="100"cy="100"r="100"clip-path="url(#clip-left-above)"/> //元の図形
      </svg>

<svgwidth="1000"height="1000"><clipPathid="clip-somewhere"><rectx="130"y="0"width="125"height="200"/><rectx="350"y="20"width="255"height="180"/><rectx="220"y="220"width="120"height="110"/><rectx="400"y="200"width="170"height="155"/><rectx="130"y="350"width="190"height="110"/><rectx="430"y="440"width="220"height="50"/><rectx="145"y="515"width="450"height="40"/><rectx="222"y="570"width="160"height="100"/><rectx="490"y="560"width="230"height="230"/></clipPath><imagexlinkHref={"画像のURL"}width="800"height="800"clip-path="url(#clip-somewhere)"/></svg>

d3.select(graphSelector)
            .selectAll(".bar-below")
            .data(Data)
            .enter()
            .append("rect")
            .attr("clip-path", "url(#clip-below)")　//clip-path属性の指定
            .attr("class", "bar-below")
            .attr("x", d => Number(scale.x(d.x.toString())) + 5)
            .attr("y",  height)
            .attr("width", width / Data.length - barPadding)
            .attr("y", d => scale.y(d.y))
            .attr("height", d => height - scale.y(d.y))
            .style("fill", "blue"); //clip-belowで切り取られた範囲は青

        d3.select(graphSelector)
            .selectAll(".bar")
            .data(Data)
            .enter()
            .append("rect")
            .attr("x", d => Number(scale.x(d.x.toString())) + 5)
            .attr("y",  height)
            .attr("width", width / Data.length - barPadding)
            .attr("clip-path", "url(#clip-above)")　//clip-path属性の指定
            .attr("class", "bar-above")
            .attr("y", d => scale.y(d.y))
            .attr("height", d => height - scale.y(d.y))
            .style("fill", "red");　//clip-aboveで切り取られた範囲は赤

        d3.select(graphSelector)
            .data(Data)
            .append("clipPath")
            .attr("id", "clip-below")
            .append("rect")
            .attr("x", d => Number(scale.x(d.x.toString())) + 5)
            //100%の高さを起点に指定
            .attr("y", (height * 3) / 13)
            .attr("width", width)
            .attr("height", 500)

<gclass="graphContainer"><clipPathid="clip-above"><rectx="5"y="0"width="500"height="69.23076923076923"></rect></clipPath><clipPathid="clip-below"><rectx="5"y="69.23076923076923"width="500"height="500"></rect></clipPath><rectclip-path="url(#clip-below)"class="bar-below"x="5"y="184.6153846153846"width="45"height="115.38461538461539"style="fill: blue;"></rect><rectclip-path="url(#clip-below)"class="bar-below"x="55"y="46.15384615384615"width="45"height="253.84615384615384"style="fill: blue;"></rect><rectclip-path="url(#clip-below)"class="bar-below"x="105"y="230.76923076923075"width="45"height="69.23076923076925"style="fill: blue;"></rect><rectclip-path="url(#clip-below)"class="bar-below"x="155"y="161.53846153846152"width="45"height="138.46153846153848"style="fill: blue;"></rect><rectclip-path="url(#clip-below)"class="bar-below"x="205"y="23.076923076923062"width="45"height="276.92307692307696"style="fill: blue;"></rect><rectclip-path="url(#clip-below)"class="bar-below"x="255"y="53.07692307692309"width="45"height="246.9230769230769"style="fill: blue;"></rect><rectclip-path="url(#clip-below)"class="bar-below"x="305"y="76.15384615384615"width="45"height="223.84615384615387"style="fill: blue;"></rect><rectclip-path="url(#clip-below)"class="bar-below"x="355"y="235.3846153846154"width="45"height="64.61538461538461"style="fill: blue;"></rect><rectclip-path="url(#clip-below)"class="bar-below"x="405"y="140.76923076923077"width="45"height="159.23076923076923"style="fill: blue;"></rect><rectclip-path="url(#clip-below)"class="bar-below"x="455"y="11.538461538461531"width="45"height="288.46153846153845"style="fill: blue;"></rect><rectx="5"y="184.6153846153846"width="45"clip-path="url(#clip-above)"class="bar-above"height="115.38461538461539"style="fill: red;"></rect><rectx="55"y="46.15384615384615"width="45"clip-path="url(#clip-above)"class="bar-above"height="253.84615384615384"style="fill: red;"></rect><rectx="105"y="230.76923076923075"width="45"clip-path="url(#clip-above)"class="bar-above"height="69.23076923076925"style="fill: red;"></rect><rectx="155"y="161.53846153846152"width="45"clip-path="url(#clip-above)"class="bar-above"height="138.46153846153848"style="fill: red;"></rect><rectx="205"y="23.076923076923062"width="45"clip-path="url(#clip-above)"class="bar-above"height="276.92307692307696"style="fill: red;"></rect><rectx="255"y="53.07692307692309"width="45"clip-path="url(#clip-above)"class="bar-above"height="246.9230769230769"style="fill: red;"></rect><rectx="305"y="76.15384615384615"width="45"clip-path="url(#clip-above)"class="bar-above"height="223.84615384615387"style="fill: red;"></rect><rectx="355"y="235.3846153846154"width="45"clip-path="url(#clip-above)"class="bar-above"height="64.61538461538461"style="fill: red;"></rect><rectx="405"y="140.76923076923077"width="45"clip-path="url(#clip-above)"class="bar-above"height="159.23076923076923"style="fill: red;"></rect><rectx="455"y="11.538461538461531"width="45"clip-path="url(#clip-above)"class="bar-above"height="288.46153846153845"style="fill: red;"></rect></g>

HTML:
<div class="image-container">
  <img src="some-image.jpg" />
</div>

CSS:
.image-container {
  max-height:100px;
  overflow:hidden;
}

HTML:
<div class="image-container">
  <img src="some-image.jpg" />
</div>

CSS:
.image-container {
  max-height:40vw;
  overflow:hidden;
}

<!-- 表示を切り替えてみたい要素  --><pclass="msg light">light mode</p><pclass="msg dark">dark mode</p><!-- モード切替スイッチ --><divclass="switch"><labelclass="switch-label"><inputtype="checkbox"id="js_mode_toggle"><spanclass="switch-mode"id="js_rotate"></span></label></div>

/* デフォルトはダークモード表示 */body{margin:0;padding:1em2em;color:#AAAE8D;background-color:#1D1D2C;transition-duration:1s;transition-property:color,background-color;}.msg{font-size:30px;font-weight:bold;}.dark{display:blcok;}.light{display:none;}/* ライトモードのとき */.js-mode-light{color:#000;background-color:whitesmoke;}.js-mode-light.light{display:block;}.js-mode-light.dark{display:none;}/* モード切り替えボタン */input[type="checkbox"]{display:none;}.switch{position:fixed;top:.5em;right:.5em;font-size:60px;}.switch-label{cursor:pointer;}.switch-mode{position:absolute;top:-120px;right:-120px;display:block;width:200px;height:200px;transform:rotate(0);transition:transform1s;}/* 月と太陽を対角線上に設置しておく。
   設定したspanを回したら太陽がひっくり返ってしまったので、transform scaleで上下反転した */.switch-mode::before{content:"🌙";position:absolute;left:0;bottom:0;}.switch-mode::after{content:"🌄";position:absolute;right:0;top:0;transform:scale(1,-1);}

// 要素やクラスを指定しておくconstcheckToggle=document.getElementById('js_mode_toggle');constrotateIcon=document.getElementById('js_rotate');constclassLight='js-mode-light';// デバイスがライトモードかどうかチェックconstisLight=window.matchMedia('(prefers-color-scheme: light)').matches;// ローカルストレージに保存するための適当なKey名constkeyLocalStorage='whike-theme-mode';// ローカルストレージの情報を取得constlocalTheme=localStorage.getItem(keyLocalStorage);// 絵文字を回転させる角度letnowRotate=0;// ローカルストレージの中身と、端末がライトモードかどうか（ie,edgeには無意味）をチェックif(localTheme==='light'){// ローカルストレージの情報が優先rotateInfinite();changeMode('light');}elseif(localTheme==='dark'){changeMode('dark');}elseif(isLight){rotateInfinite();changeMode('light');}// チェックボックスでの切り替え、選択をローカルストレージに保存// モード切替スイッチが変更されたら発動checkToggle.addEventListener('change',function(e){// 絵文字大回転rotateInfinite();// チェックされたらライトモード、されなければダークモードにし、ローカルストレージにどちらを選んだか保存するif(e.target.checked){changeMode('light');localStorage.setItem(keyLocalStorage,'light');}else{changeMode('dark');localStorage.setItem(keyLocalStorage,'dark');}});/**
 * テーマ切り替え
 * @param {String} mode 'light' もしくは 'dark'
 */functionchangeMode(mode){// 引数にしたがってbodyにクラスをつける// チェックボックス経由で変更かかったときはいいんだけど、ローカルストレージとかからモードを変えた場合にチェック状態がおかしくなるので、合わせておくif(mode==='light'){document.body.classList.add(classLight);checkToggle.checked=true;}elseif(mode==='dark'){document.body.classList.remove(classLight);checkToggle.checked=false;}}/**
 * 月と太陽アイコン無限回転
 * 呼ばれるたびに180度角度が追加されていく
 */functionrotateInfinite(){nowRotate+=180;rotateIcon.style.transform='rotate('+nowRotate+'deg)';}

.dark{display:block;}.light{display:none;}@media(prefers-color-scheme:light){.dark{display:none;}.light{display:block;}}

const Name = styled.div `
  display: block;
`

const Name = styled.div `
  db
`

const Name = styled.div `
  <db>
`

"emmet.includeLanguages": {
  "typescriptreact": "css",
  "javascriptreact": "css"
}

<divclass="square"></div><style>.square{width:100px;height:100px;background-color:red;}</style>

<divclass="square"></div><style>.square{width:50％;　<=変更しましたheight:100px;background-color:red;}</style>

<divclass="square"><divclass="inner"></div></div><style>.square{width:50%;height:100px;background-color:red;}.inner{width:0px;height:0px;}

.inner{width:0px;height:0px;padding-bottom:100%;<=追加}

<divclass="square"><divclass="inner"></div></div><style>.square{width:50%;background-color:red;}.inner{width:0px;height:0px;padding-bottom:100%;}

body,html{height:100%;background-color:white;}h1,h2,h3,h4,h5,h6,p,body{font-size:18px;color:#4a4a4a;font-family:sans-serif;margin:0;padding:0;}

<divclass="left-content"></div><divclass="right-content"></div>

.left-content{width:700px;float:left;}.right-content{width:260px;float:right;}

<divclass="bottom-content"></div>

.bottom-content{background-color:green;clear:both;

<divid="slideshow"><h1>Hello!</h1></div>

div{height:300px;width:500px;transition:background-image2.5Sease;/*背景画像をゆっくり変化させる*/background-image:url("最初に表示する画像パス");}h1{font-size:30px;color:white;text-align:center;line-height:300px;}

//スライドショー で表示させる画像パスを変数に格納varsetImage=["画像01パス","画像02パス","画像03パス"];//カウンターの初期値設定varcounter=0;//設定した画像パスをid="slideshow"のbackground-imageに設定する、繰り返すfunctionslideimage(){//カウンターが設定画像数より大きいか確認if(counter>=(setImage.length-1)){//カウンターを初期値に戻すcounter=0;}//背景画像を設定document.getElementById("slideshow").style.backgroundImage="url("+setImage[counter]+")";//カウントアップcounter++;}//3秒ごとに背景画像を切り替えるsetInterval("slideimage()",3000);

//JS
setInterval("slideimage()",3000); //3秒

//css
transition: background-image 2.5S ease; //2.5秒

//buttonがclickされたらclicked()関数を適用するdocument.querySelector("button").addEventListner("click",clicked);

document.querySelector("button").addEventListner("click",function(){alert("this button was clicked");});

// addEventSelector で keyboard が押されたときの処理をかく// keydownの詳細がevent として、anonymus functionに渡される。document.addEventListener("keydown",function(event){varkeyPressed=event["key"];alert("Pressed key is "+keyPressed+".");});// function関数のeventとは何なのかをみてみる（今回はkeydownの詳細）// consoleを開いて、keyboardを押してみるとみれる（関数内に入れる）console.log(event);// eventには、様々な要素が入っている。その中の "key"という要素を抜き出す。（関数内に入れる）event["key"];// これで"a"とか"k"とか何のキーが押されたのかがわかります。

//足し算の関数functionadd(num1,num2){returnnum1+num2;}//掛け算の関数functionmultiply(num1,num2){returnnum1*num2;}//関数指定によって、適切な関数を適用するfunctioncalculator(num1,num2,operator){returnoperator(num1,num2);}

//consoleでやるとdebuggerモードになります。debugger;calculator(3,4,add);

//音声を変数に格納するvaraudio=newAudio("sound.mp3");//play関数でaudioを再生するaudio.play();//buttonをclickすると、functionが適用されるdocument.querySelector("button").addEventListner("click",function(){audio.play();});

for(vari=0;i<numberOfButtons;i++){document.querySelectorAll("button")[i].addEventListener("click",function(){this.style.color="white";//ちなみに、ここに console.log(this.innerHTML); とかって書くとthisが実際なんなのかわかるよ});}

//BOBのデータvarstudent1={Name="Bob",English:98,Math:80,Japanese:35,Nationality:"USA"}//JOHNのデータvarstudent2={Name="John",English:70,Math:90,Japanese:85,Nationality:"AUS"}//SARAHのデータvarstudent3={Name="Sarah",English:50,Math:50,Japanese:100,Nationality:"FRA"}

//BOBのデータ全てを呼び出す。student1;//BOBのEnglish部分を抜き出すconsole.log(student1.English);

//Constructor Function の作成functionTestScore(name,english,math,japanese,nationality){this.name=name;this.english=english;this.math=math;this.japanese=japanese;this.nationality=nationality;}// new student4 を作成するときvarstudent4=newTestScore("Amy",72,39,80,"CAN");// newを忘れないように注意。。

//Constructor Function の中のデータに関数を入れるfunctionTestScore(name,english){this.name=name;this.english=english;this.func=function(){alert("calling function");};}//student4 で関数を呼び出すときは、、student４.func;

// あらかじめ 変数nameは定義しておく必要はあり。 nameのデータによって処理かえる。switch(name){//nameがドラえもんだったら、、case"ドラえもん":console.log("僕ドラえもん〜！");break;//nameがピカチュウだったら、、case"ピカチュウ":console.log("ピッ ピカチュウ！");break;//nameがカオナシだったら、、case"カオナシ":console.log("あ、あ、う、あ、う。");break;//nameがそれ以外だったら、、default:console.log("あなたのことを知りません。");break;}

.animation{opacity:0.5;}

functionapplyAnimation(){// button というクラスを持つ要素に animation というクラスを追加するdocument.querySelector(".button").classList.add("animation");// 1秒後に animation クラスを外すsetTimeout(function(){document.querySelector(".button").classList.remove("animation")},1000)}

<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">

<link rel="stylesheet" href="css/sanitize.css">
<link rel="stylesheet" href="css/style.css">