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

ねっとぱんだ

webdesignとprogramingの勉強ブログ。

1day1banner(1日1つバナー制作 4日目)

1日1つバナーを作っていきます。 化粧品のバナー ターゲット 20代~30代女性 素材 フリー tool Photoshop time 60min

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

30分以内でバナーを作っていきます。 大人の女性向けファッションブランドのセールバナー ターゲット 30代~40代女性 目的 ECサイトへの誘導 素材 フリー tool Photoshop time 20min

javascriptの勉強 3月23日 ランダム関数と条件分岐

random関数とif構文を使ったおみくじ var omikuji =parseInt(Math.random() * 10) + 1; console.log(omikuji); if (omikuji == 1){ console.log('大吉'); }else if(omikuji ==2){ console.log('中吉'); }else if(omikuji <= 4){ console.log('小吉'); }else …

javascriptの勉強 3月23日 演算子の復習

以前学習したことや今日学習した事の復習と補填です。演算子 変数は代入されない限り変化しない。 var num = 50; //50+50で100と表示 console.log(num + 50); //numのみが呼び出され50と表示 console.log(num); 演算子計算などに使用する記号 算術演算子 主…

javascriptの勉強 3月22日② random関数とparaseInt関数

今日勉強した事の復習と補填です。randam関数 パラメータ{ ()内の値 } 無し 返り値 0.0以上1.0未満の乱数。 メソッドが呼ばれるごとに0.0以上1.0未満までのランダムな浮動小数点を計算して返す。 擬似乱数が生成される。(擬似乱数:乱数列のように見える計算…

javascriptの勉強 3月21日①

今日学習した事、今まで学習した事を復習しました。console.log( ); console この部分をオブジェクトという。どこに指示を出すかという指定。 log( ) この部分をメソッドという。何をさせるかとう指示。 ( )の中身 パラメーターと言う。指示に必要な情報を入…

【CSS】animationの記述法方、ショートハンド等のまとめ

animationプロパティについてまとめました。animation-nameと@keyframesanimation-nameで指定した名前を@keyframesで呼び出して使う。 div.box { /*animeを指定*/ animation-name:anime; } @keyframes anime{ ここにanimeの動きを記述していく } @keyframes…

【CSS】transformプロパティ

cssのtransformについて改めてまとめました。 translatetlanslate(x軸の移動,y軸の移動); transform:translate(100px,100px); tlanslateX(x軸の移動); transform:translate(100px); tlanslateY(y軸の移動); transform:translateY(100px); tlanslateZ(z軸の移…

【javascript】ポップアップウィンドウを作る(Todays code)

javascriptでフラットなポップアップウィンドウを作りました。画像ごとに値を取得して違う画像を表示します。 ボタンのホバーアニメーションも少し練習しました。ポップアップウィンドウ ●DemoHTML(top page) <html lang="ja"> <head> <meta charset="UTF-8"> <title>lightbox</title> <link rel="stylesheet" href="style.css"> </link></meta></head></html>

【javascript】get引数、openメソッド、locationserch等

以前、下の記事で練習したコードのプロパティ等を詳しく確認します。pandafam.hatenablog.com get引数変数aに、bb.html(htmlへのリンク)に?=c(cの変数には後から値を入れる)を入れる。 var a="bb.html?="+c; openメソッド新しくウィンドウを開かせるメソッド…

【javascript】ボタンごとに別ウィンドウで違う画像を表示【Todays code】

それぞれのパンダをクリックすると新しいウィンドウで大きい画像が表示されます。 ●DemoHTML(top page) <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="../style.css"> <script type="text/javascript"src="../script.js"></script> </head> <body Onload="view();"> <p>nihao</p> <div id="img">…</div></body></html>

【japascript】1ページで内容が切り替わる【Todays code】

javascriptでコンテンツが切り替わる動きを作りました。コンテンツが切り替わるtabをクリックで内容が切り替わります。●DemoHTML <html lang="ja"> <head> <meta charset="UTF-8"> <title>a</title> <link rel="stylesheet"href="style.css"> <script type="text/javascript" src="script.js"></script> </head> <body> <div class="container"> <ul> </ul></div></body></html>

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

javascriptでDOMの操作を勉強しました。DOMを追加するボタンを押すと🐼が現れ、ボタンが消えます。●Demohtml+css+javascript <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 a</meta></head></html>…

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

30分以内でバナーを作っていきます。 柑橘系炭酸飲料のバナー ターゲット 10代~20代 概要 新発売の炭酸果汁飲料 素材 レモン:フリー 商品:既存のものを合成加工 tool Photoshop time 30min 反省 新発売としては本当に印象的なものになっているのか?(10代2…

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

transformでボタンのアニメーションを作りました。ハンバーガーメニューの変形不要論もあるハンバーガーメニューですが、アニメーションの練習として製作してみました。上下二本が傾いてXに変形●Demohtml <div class="button1"> <span></span> <span></span> <span></span> </div> css /*button*/ .button1{ position:relative; …

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

30分以内でバナーを作っていきます。 脱毛サロンのキャンペーンバナー ターゲット 10代~20代女性 目的 キャンペーンの認知、サイトへの誘導 素材 フリー tool Photoshop,illustlator time 30min 反省 完全にこのバナーの模写になってしまったのが反省点です。…

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

毎日1つ以上、コードの反復練習。今日練習したコードconfirmでtrueならstyleが書き出される。 <script>// var x=window.confirm("背景に色を付ける"); if(x==true){ document.write("\ <style>\ body{background:#f00;}\ </style>\ "); } </script> ・confirm 直訳:確認するデ…

TodaysCode 3/12 -javascript-

今日練習したコードquerySelectorAllによる値の取得 <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</meta></head></html>

javascroptでDOMを指定する

javascriptでDOMを指定する記述を勉強しました。headerとbodyの指定 document.head document.body scriptをhead内に記述する場合(init 直訳:~の中に) <body>タグの中に<body onload="init();">と入れる。 処理をfunction init(){ }の中に記述 id,name,class,tagの指定id 変数=document.get</body></body>…

javascript 関数

関数 function 関数名(引数1 引数2){ 実行する処理。 } 例 function sum(num1, num2, num3){ } sum(1, 2, 3); sum(4, 5, 6); function sum(num1, num2, num3) → 関数sumが記述され、 sum(1, 2, 3); → num1に1、num2に2、num3に3が代入される。 sum(4, 5, 6);…

javascript 条件分岐構文

条件分岐if else書き方1 if(条件) trueの時の処理 else falseの時の処理 if else書き方2 if{ trueのときの処理 }else{ falseのときの処理 } else if if(条件1){ 条件1がtrueの時 }else if(条件2){ 条件2がtrueの時 }else{ 全て正しくないとき } switch sw…

Javascript 変数、定数、配列、演算子

変数について予約語varを使って宣言。 var 変数名; var 変数名,変数名 var : variable(変わりやすい,変化しやすい) 宣言&代入 var 変数名 = 値; var 変数名 = 値,変数名 = 値,…; 定数 const 変数="値"; (値が変更できなくなる。) 配列 変数=[値,値,…] 一…

Javascriptの記述2

Javascriptの記述法について勉強した事をまとめます。Javascriptの記述方法HTML内に記述ブラウザでHelloと表示されます。 <html> <body> <script> document.write("Hello ") </script> </body> </html> 外部から読み込み外部からsample.jsを読み込みます。 <script src="js/sample.js"></script> 文章を改行する時は(バックスラッシュ) docu…

Javascriptの記述

Javascriptの記述法について勉強した事をまとめます。Javascript記述の基本 大文字と小文字は区別される セミコロンで文が終わる。 処理が完結しており改行されていれば終わり。 改行してあってもまだ続く記号があったり、分が未完結なら改行の次も続いてい…

ulとolとdlの使い分け

・ulとolとdtの違い。 ul unordered list(unorderd=順序が置き換わっても意味が伝わる様内容に使う。 ol ordered list 順序が必要な内容に使う。 ol = ordered list(指定されたリスト) dl definition list(definition定義)タイトルと説明文が必要なとき…

CSSで基本的なレイアウトの練習

cssの基本的なレイアウトの枠組みを記述してみます。 ①float layout #container{ background-color:#eee; width:700px; height:550px; } #header{ color:#fff; height:100px; background-color:#000; } #side{ height:450px; width:180px; float:left; borde…

CSSの要素の順番(ボックスモデル)

大まかな要素の順番一般的には外側のエリアから内側に行くごとに重なっていくイメージ。 content border background-image background-color content area(width height) padding margin その他のプロパティより詳細に知る為にはW3CのSpecificationを見た方…

CSSで画像に乗算やスクリーン等の加工をする(background-blend-mode)

CSSで画像に乗算やスクリーン等の加工ができるプロパティ、background-blend-modeについてまとめてみました。 background-image: url("画像のパス");background-color:重ねる背景色background-blend-mode:どうブレンドするかの値;} "background-image" "back…

PHP基礎 制御構文(if , else if , for , while)

PHP

phpの制御構文if , else if , for , whileについて勉強しました。 制御構文 (繰り返しや判断を実行するための構文) if「もし~だったら」を判断する。 if(式){ 処理 } ・1990年2月10日15:30:0が現在より過去なら"NEW!“が表示される。 比較演算子 ==$a==…

PHP 変数と論理演算子

PHP

phpの変数と論理演算子について勉強しました。 変数 値を入れられる。 (例)$a 代入 変数に値を入れること。 変数($name)に値(山田花子)を代入 演算子 計算するための記号 = 代入演算子 . 結合演算子 四則演算の方法 +加算$a+$baにbを足す -減算$a-$b…

PHP 記述方法と基本の型

PHP

phpの基本的な記述方法と型を勉強しました。 基礎知識 の間に記述していきます。 動作チェック phpのinfoが表示されます。 echoを使ってみる。 //helloと表示されます。 保存するときは文字コードUTF-8Nで保存する。 UTF-8だと文書の前に見えないBOMとい…

MACのターミナルを触ってみる

Mac

macのターミナル。今までグラフィックデザインのみをやってきたので何となく放置していたターミナルを触りました。 CUIとGUIの違いから… GUI(Graphical User Interface ) 一般的に、私たちが使っている画面はGUIです。 Graphical(絵的という意味)に操作でき…

jQueryプラグイン①bxSlider導入方法

今回はbxSliderをつかったスライドの作り方に着いて勉強しました。 bxSlider導入方法 1.まず[bxSlider](http://bxslider.com/)のサイトに行き、ダウンロードします。 2.「jquery.bxslider.zip」がダウンロードできるので解答し、フォルダ内にある「jquery.bx…

jQuaryのメソッドの種類2

今回はjQueryのメソッドの種類についてまとめてみました。 ・メソッドの種類2 ・hide(表示されている#aを隠す) ・すぐに隠す alert($("#a").hide()); ・スピードを指定する(slow,normal,fast) alert($("#a").hide('slow')); ・スピードを秒数で指定する(10…

jQuaryのイベントの種類

今回はjQueryのイベントの記述法と種類についてまとめてみました。 ・イベントの記述 ・一つのイベント $("セレクタ").イベント(function(){ }}); ・複数のイベント $("セレクタ").イベント1 イベント2 (function(){ }}); ・親セレクタの中の子セレクタを指…

jQuaryのメソッドの種類

今回はjQueryのメソッドの記述法と種類についてまとめてみました。 ・メソッドの記述 ・1つの指示の場合 $("セレクタ").css("color","#fff"); ・複数の指示の場合 $("セレクタ").css("color","#000"); $("セレクタ").css("font-size",12px"); $("セレクタ").…

jQuaryのセレクタの種類

今回はjQueryのセレクタの種類についてまとめてみました。 主なセレクタの種類 ・全ての要素 $("*") ・その要素全て $(".要素名") ・nameを指定 $("[name=name名]") ・idを指定 $("#id名") ・classを指定 $(".class") ・AもしくはBに一致する要素 $("A,B") …

jQueryのエラー検証方法(GoogleChrome)

今回はGoogleChromeでのデバックの方法についてまとめてみました。 google chromeでのエラーの検証方法 ・ブラウザ上で右クリックし、検証をクリック ・「console」と書かれている部分をクリックすると、 エラーがある場合はエラーの内容(赤い文字)とエラー…

jQuary基礎②記述方法など

今回はjQueryの基本的な記述方法についてまとめてみました。 基本的な記述 ・$かjQueryから記述が始まる。 ・WordPressの場合はjQueryでしか動作しない。 ・行末に必ず;(セミコロン)をつける。 $("セレクタ").イベント(function(){ $("セレクタ").メソッド…

jQueryをダウンロードせずに読み込む方法(2017年1月現在)

jQueryの教本を見ていた所、実際のサイトとは少し違う場所に本体を読み込むコードが書かれていたのでここにメモしておきたいと思います。 2017年1月現在の状況です。 jQueryを読み込む手順 まずjQueryのサイトに行きます。 Downloadページに飛びます。 スク…

nameとidとclassの違いは?

今日はidとname、classの違いについてまとめてみました。 id 原則として固有のもので、同じ文章内で重複して書く事はできない。 class その名の通りグループを指定するもので、複数のタグにつける事ができる。 name idと同じようなものだそうですが、formタ…

Macでアニメを作りたい!OpenToonzに挑戦。

Mac用アニメーションソフトを探していた… Photoshopで作れる簡単なgif画像じゃなくて、もう一歩踏み込んで作ってみたい! でもアニメーション制作ソフトは数万円以上するものが多くて、なかなか手が出ない… そんなとき見つけたのが「OpenToonz」というアニメ…

マリメッコ展 -渋谷bunkamura-

bunkamuraでやっていたマリメッコ展を見にいきました。 実際にお店に入ったり買ったりしたことはないんですが、そんな僕でもウニッコ柄だけは知っていました。上のポスターでも使われていますが、マリメッコはよく知らなくても、この柄なら見た事があるとい…