読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

【HTML+CSS+JS】クリックでDOMを操作【Todays code】

Javascript

javascriptでDOMの操作を勉強しました。

DOMを追加する

ボタンを押すと🐼が現れ、ボタンが消えます。

●Demo

html+css+javascript

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<style>
.box{
  font-size:50px;
  text-align:center;
  line-height:200px;
  background:#ffdddd;
  height:200px;
  width:200px;
  margin:0 auto;
}
#BTN{
  font-size:12px;
  font-weight:bold;
  border-bottom:1px solid #000;
  cursor:pointer;
  text-align:center;
  width:100px;
  margin:10px auto;
}
</style>
</head>
<body>
<div class="box">
<p id="OUTPUT"></p>
</div>
<div id="BTN" onClick="addNode();">
PUSH!
</div>
<script>
function addNode(){
  var CHILD=document.createElement("p");
  CHILD.setAttribute("id","CLD");
  CHILD.innerHTML="🐼";
  var PARNET=document.getElementById("OUTPUT");
  PARNET.appendChild(CHILD);
  var CLD=document.getElementById("CLD");
  CLD.style.fontSize="50px";
  document.getElementById("BTN").style.display="none"
}
</script>
</body>
</html>

DOMを消したり出現させたりする。

PANDAを押すと🐼が現れ、REMOVEを押すと消えます。

●Demo

html+css+javascript

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<style>
.box{
  font-size:50px;
  text-align:center;
  line-height:200px;
  background:#ffdddd;
  height:200px;
  width:200px;
  margin:0 auto;
}
#BTN{
  font-size:12px;
  font-weight:bold;
  border-bottom:1px solid #000;
  cursor:pointer;
  text-align:center;
  width:100px;
  margin:10px auto;
}
</style>
</head>
<body>
<div class="box">
<span id="PANDA">🐼</span>
</div>
<p id="BTN" onClick="add();">
PANDA
</p>
<p id="BTN" onClick="remove();">
REMOVE
</p>
<script>
function add(){
  document.getElementById("PANDA").style.display="block"
}
function remove(){
  document.getElementById("PANDA").style.display="none"
}
</script>
</body>
</html>

30分バナー製作2つ目(1day30min1bunner)

1day1bunner(1日一つバナー制作)

30分以内でバナーを作っていきます。

柑橘系炭酸飲料のバナー

f:id:p_and_a_fam:20170316105443j:plain
ターゲット
10代~20代
概要
新発売の炭酸果汁飲料
素材
レモン:フリー 商品:既存のものを合成加工
tool
Photoshop
time
30min

反省

新発売としては本当に印象的なものになっているのか?(10代20代がこれを見てクリックするか?)

この見せ方で商品パッケージを覚えてもらえるのか?商品が埋もれていないか?

目線の流れ的に文字の入れ方は適しているのか?フォントの種類、加工はこれでいいのか?

時間を区切ると完成度の低さが目立ってきます。作業工程を明確にして必要最低限な物は何か等、手より頭を動かす部分が大事だと感じました。

【CSS,HTML】transformでボタンをアニメーションさせる(Todays code)

HTML・CSS

transformでボタンのアニメーションを作りました。

ハンバーガーメニューの変形

不要論もあるハンバーガーメニューですが、アニメーションの練習として製作してみました。

上下二本が傾いてXに変形

●Demo

html

<div class="button1">
<span></span>
<span></span>
<span></span>
</div>

css

/*button*/
.button1{
  position:relative;
  height:100px;
  width:100px;
  margin-bottom:30px;
  transition:transform  0.4s;
}
.button1 span{
  display:inline-block;
  position:absolute;
  background:#000;
  width:100%;
  height:4px;
  transition:transform  0.4s,opacity 0.2s;
}
.button1 span:first-of-type{
  top;:0;
}
.button1 span:nth-child(2){
  top:50px;
}
.button1 span:nth-child(3){
  bottom:0;
}
/*button:hover*/
.button1:hover span:first-of-type{
  position:absolute;
  transform:translateY(50px)rotate(45deg);
  top:;0
}
.button1:hover span:nth-of-type(2){
  opacity:0;
}
.button1:hover span:nth-of-type(3){
  position:absolute;
  transform:translateY(-50px)rotate(-45deg);
  bottom:0;
}

回転してXに変形

●Demo

html

<div class="button2">
<span></span>
<span></span>
<span></span>
</div>

css

/*button*/
/*button2*/
.button2{
  position:relative;
  height:100px;
  width:100px;
  margin-bottom:30px;
  transition:transform  0.4s,opacity 0.2s;
}
.button2 span{
  display:inline-block;
  position:absolute;
  background:#000;
  width:100%;
  height:4px;
  transition:transform  0.4s,opacity 0.2s;
}
.button2 span:first-of-type{
  top;:0;
}
.button2 span:nth-child(2){
  top:50px;
}
.button2 span:nth-child(3){
  bottom:0;
}
/*button2:hover*/
.button2:hover{
  transform: rotate(360deg);
}
.button2:hover span:first-of-type{
  position:absolute;
  transform:translateY(50px)rotate(45deg);
  top:;0
}
.button2:hover span:nth-of-type(2){
  opacity:0;
}
.button2:hover span:nth-of-type(3){
  position:absolute;
  transform:translateY(-50px)rotate(-45deg);
  bottom:0;
}

transformとperspectiveで3D的な動きのボタン

●Demo

html

<div class="button2">
<span></span>
<span></span>
<span></span>
</div>

css

/*全体の変化のスピード*/
.button3,.button3::after {
	transition: all .3s;
}
/*最初に見えているボタン*/
.button3 {
  color: #333;
  line-height: 54px;
  border: 2px solid #333;
  box-sizing: border-box;
  height: 54px;
  text-align: center;
  width: 200px;
	position: relative;
  /*デフォルトより前面に出している*/
	z-index: 2;
  /*3Dのパースを指定*/
	perspective: 300px;
  /*3D空間を指定*/
	transform-style: preserve-3d;
}
.button3::after {
  position: absolute;
  display: block;
  content: '';/*空のコンテンツを入れている*/
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #333;
  transform-origin: center top;
  /*X軸を中心に90度の位置
  (つまり垂直になっていて見えない)*/
  transform: rotateX(90deg);
  opacity: 0;
}
.button3:hover {
	color: #fff;
}
.button3:hover::after {
  /*背面へ下げる*/
  z-index: -1;
  /*X軸を中心に0度の位置
  (回転していない=デフォルトの位置)*/
	transform: rotateX(0);
	opacity: 1;
}

30分バナー製作1つ目(1day30min1bunner)

1day1bunner(1日一つバナー制作)

30分以内でバナーを作っていきます。

脱毛サロンのキャンペーンバナー

f:id:p_and_a_fam:20170315111205j:plain
ターゲット
10代~20代女性
目的
キャンペーンの認知、サイトへの誘導
素材
フリー
tool
Photoshop,illustlator
time
30min

反省

完全にこのバナーの模写になってしまったのが反省点です。

日頃からアイディアをストックして、瞬間的にアウトプット出来る様にしていきたいです。

javasriptでDOMへの書き込みなど Todays code 3/14

Javascript

毎日1つ以上、コードの反復練習。

今日練習したコード

confirmでtrueならstyleが書き出される。

<script>// 
var x=window.confirm("背景に色を付ける");
if(x==true){
document.write("\
<style>\
body{background:#f00;}\
</style>\
");
}
</script>

・confirm 直訳:確認する

デバック方法

alert();

alertで変数を呼び出せばfalseかtrueか等が分かる。

onClick

<h1 onclick="alert('panda')">click!</h1>

・h1をクリックするとalertが現れる。

・この場合文字列は"ではなく'で囲まないとerror


タグ内に2つ以上書く

<h1 onClick="x=prompt('write panda');
alert(x);">click!</h1>

javascriptで使えるイベント

onClick
クリックしたとき
onDblclick
ダブルクリックされたとき
onKeyDown
キーが押し下げられたとき
onKeyPress
キーが押されたとき
onKeyup
押されていたキーが上がったとき
onMouseDown
マウスボタンが押し下げられたとき
onMouseUp
押されていたマウスのボタンがあがったとき/dd>
onMouseOver
マウスカーソルが領域に入ったとき
onMouseOut
マウスカーソルが領域から出たとき
onMouseMove
マウスカーソルが動いたとき
onLoad
読み込みが完了したとき
onUnload
別のページに移動する前
onFocus
入力フォーカスを得た
onBlur
入力フォーカスが外れたとき
onSubmit
送信ボタンが押されて送信される直前
onReset
リセットボタンが押されてリセットされる直前
onChange
セレクトボックスなどの選択項目が変化したとき
onSelect
セレクトボックスなどの選択項目が選択されたとき
onResize
サイズを変更されたとき
onMove
移動したとき
onDragDrop
ドラッグアンドドロップされたとき
onAbort
読み込みが中止されたとき
onError
エラーが発生したとき

関数にしたものをタグ内で呼び出す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<script>
function a(){
x=prompt("入力して")
alert(x);
}
</script>
</head>
<body>
<header>
<h1 onClick="a();">click</h1>
<p>click up column</p>
</header>
</body>
</html>

関数に引数を渡す

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<script>
function a(b){//引数bを指定
alert(b);//bに代入された値をalertする
}
</script>
</head>
<body>
<h1>click under button</h1>
<button onClick="a('black & white')">panda</button>
<!--関数a(b)の引数bにblack & whiteを渡す-->
<button onClick="a('black & yellow')">tiger</button>
<!--関数a(b)の引数bにblack & yellowを渡す-->
</body>
</html>

・pandaボタンを押せばblack & white、tigerボタンを押せばblack & yellowが表示される。

Nodeを追加

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<script>
function addNode(){
/*addNodeという関数を作る。*/
var child=document.createElement("p");
/*pを新たに作る変数child*/
child.innerHTML="●○panda○●";
/*childの中に●○panda○●と書き込む*/
var parnet=document.getElementsByTagName("div").item(0);
/*一番最初のdiv( item(0) )を指定する変数parnet*/
parnet.appendChild(child);
/*parnetの子ノードリストの末尾にchildを追加*/
}
</script>
</head>
<body>
<h1>add Node</h1>
<button onClick="addNode();">
infinity panda button
</button>
<div></div>
</body>
</html>

・「infinity panda button」を押す度に<p>●○panda○●</p>が<div><div>の中に書き込まれていく

createElement
新たな要素を追加(属性(classやid)はつけられない)
innerHTML=""
指定した要素の中に文字列を書き込む
document.getElementsByTagName("")
タグを指定する
getElementsByTagName("")
タグを指定する
item()
Nodelistを指定(何番めの指定した要素か)
appendChild()
指定した親Nodelistの子Nodelistの末尾にNodeを追加

TodaysCode 3/12 -javascript-

Javascript

今日練習したコード

querySelectorAllによる値の取得

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<script>
function init(){
  var res=document.querySelectorAll("div p");
//querySelectorresによってresにdiv pを呼び出します。
  for(var i=0;i<res.length;i++){
//res.length=div pのNodeの数
    res[i].innerHTML="<b>changed!</b>"
//res(div p)のNodeの数だけ、res(div p)に<b>changed!</b>を代入します。
  }
}
</script>
<body onload="init();">
<div>
<p>A...</p>
<p>B...</p>
</div>
</body>
</html>

上の結果、HTMLは以下の様に書き換えられます。

<div>
<p><b>changed!</b></p>
<p><b>changed!</b></p>
</div>

alert

「あ」と「い」というアラートが出てくる。

この場合、window.という指定は省略できる。

window.alert("あ")
alert("い")

入力した文字を書き出す

promptのウィンドウが出てきて入力した文字が書き出される。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<body>
<script>
x=window.prompt("何か入力して")
document.write(x)
</script>
</body>
</html>

入力欄にデフォルトで「好きな食べ物は?」と表示

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>a</title>
<body>
<script>
x=window.prompt("何か入力して","好きな食べ物は?")
document.write(x);
</script>
</body>
</html>

promptからの入力を変数に格納する

xに格納した値が書き出される。

x=window.prompt("何か入力")
document.write(x)

\の後の値は文字列として書き出せる(macの場合alt+¥で\)

document.write("\"\\")

「"\」と書き出される

javascroptでDOMを指定する

Javascript

javascriptでDOMを指定する記述を勉強しました。

headerとbodyの指定

document.head

document.body

scriptをhead内に記述する場合(init 直訳:~の中に)

<body>タグの中に<body onload="init();">と入れる。
処理をfunction init(){ }の中に記述

id,name,class,tagの指定

id

変数=document.getElementById(idの値);

name

変数=document.getElementsByName(Nameの値);

class

変数=document.getElementsByClassName(classの値);

id

変数=document.getElementsByTagName('任意のタグ');
全て文字列(""''で囲む)で指定。

SelectorAPI

CSSセレクタと同じ記述で指定できる。

指定した値の最初の要素

変数=document.querySelector(文字列);

指定した値すべて

変数=document.querySelectorAll(文字列);

Nodelist

Node=DOMツリーに組み込まれている一つ一つの要素。

配列と似たような働き。