学校 | 「な」のblog

卒業制作展④

制作テーマ「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシピ集、ショップカードなどを展開。いつまでも乙女心を忘れないすべての女性に捧げる作品。本物のお菓子について苦労した点クッキーにアイシング（砂糖飾り）で絵を描きましたが、アイシングは水分量の調節と練り具合が鍵になるのでしっかりと練ってひび割れなどが起こらないようにしました。 […]

卒業制作展③

制作テーマ「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシピ集、ショップカードなどを展開。いつまでも乙女心を忘れないすべての女性に捧げる作品。ショップカードについて苦労した点 2案制作し、2つ目に決定しました。1つ目はピンクと茶色で作っており、Webサイトとはまったく別のお店のような印象になってしまったのと、可愛い要素を盛り込み […]

卒業制作展②

制作テーマ「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシピ集、ショップカードなどを展開。いつまでも乙女心を忘れないすべての女性に捧げる作品。チラシについて苦労した点作業工程の写真を撮るのに、手が汚れているためにかなり苦労しました。手早く作業をする必要のある工程はとくに写真を撮るのが大変でした。また初心者でも手軽に作れるよう、 […]

卒業制作展①

トライデントコンピュータ専門学校で行われた卒業研究制作展終了しました。たくさんのご来場、誠にありがとうございました。私は2日間ともに午前中に作品の案内をさせていただいたのですが、とくに質問の多かった事項についてと、個人的にがんばったところなどをまとめていきたいと思います。制作テーマ「かわいい×たべられる」をコンセプトに、架空のかわいいお菓子を提供するカフェを作り、Webサイト、オリジナルレシ […]

【rellax.js】rellax.jsでパララックス

こんにちは。12月はアドベントカレンダーと称して毎日1記事ずつ書いていきたかったのですがサボってしまっております。今日はパララックスについて書いていきます。パララックスとはWebサイトのスクロールのスピードに差をつけて、ユーザーの目を惹くデザインを叶えてくれるものです。JavaScriptやjQueryで実装しますが、今回は一からではなくrellax.jsを使って簡単に実装する方法をやってみたの […]

SVGでローディングアニメーション

SVGはCSSアニメーションとほぼ同じようにしてアニメーションを設定できます。以下の例は丸の大きさが徐々に変わっていくローディングアニメーションです。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG</title>
  <style>
    svg {
      background-color: #f00;
    }

  #svg01 .loading01{
      animation: 1s infinite load01;
  }

  @keyframes load01 {
      0%,
      100%{ /* 1秒のとき */
          r: 3;
      }
      50%{ /* 0.5秒のとき */
          r: 10;
      }
  }

  #svg01 .loading02{
      animation: 1s infinite .2s load02;
  }

  @keyframes load02 {
      0%,
      100%{
          r: 3;
      }
      50%{
          r: 10;
      }
  }

  #svg01 .loading03{
      animation: 1s infinite .4s load03;
  }

  @keyframes load03 {
      0%,
      100%{
          r: 3;
      }
      50%{
          r: 10;
      }
  }
  </style>
</head>
 
<body>
<svg id="svg01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 300 300" version="1.1">
    <circle cx="110" cy="150" r="10" class="loading01" fill="rgba(255,255,255,1)" />
    <circle cx="140" cy="150" r="10" class="loading02" fill="rgba(255,255,255,1)" />
    <circle cx="170" cy="150" r="10" class="loading03" fill="rgba(255,255,255,1)" />
</svg>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

<!doctype html>

<html>

<head>

<style>

svg {

background-color: #f00;

}

#svg01 .loading01{

animation: 1s infinite load01;

}

@keyframes load01 {

0%,

100%{ /* 1秒のとき */

r: 3;

}

50%{ /* 0.5秒のとき */

r: 10;

}

#svg01 .loading02{

animation: 1s infinite .2s load02;

}

@keyframes load02 {

0%,

100%{

r: 3;

}

50%{

r: 10;

}

#svg01 .loading03{

animation: 1s infinite .4s load03;

}

@keyframes load03 {

0%,

100%{

r: 3;

}

50%{

r: 10;

}

</style>

</head>

<body>

</svg>

</body>

</html>

CSSのinfiniteは無限ループです。デュレーションの値（infiniteの後）を書くことで３つのアニメーションを少しずつずらしています。 SVGは特別にローディングアニメーシ […]

SVGについて

スマホの普及などにより再注目されているSVG形式について授業で習ったのでまとめます。 Illustratorで描いてSVGで保存すれば一応SVGファイルは作れますが、余分なコードがたくさん出てきます。なのでここでは直接テキストでHTMLファイルに記述していきます。

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>SVG</title>
  <style>
    svg {
      background-color: #ddd;
    }
   </style>
</head>
 
<body>
  <svg id="svg01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200" viewBox="0 0 300 300" version="1.1">
   <defs><!-- symbolをdefsで囲むと画面に描画されない -->
      <symbol id="lamp"><!-- symbol要素で使いまわすことが簡単になる -->
        <circle cx="100" cy="200" r="40" />
      </symbol>
    </defs>
    <rect x="100" y="200" width="300" height="100" rx="50" ry="50" fill="#fff" stroke="#000" stroke-width="5" />
    <use xlink:href="#lamp" x="150" y="50" fill="rgba(255,255,0,1)" fill="#fff" stroke="#000" stroke-width="5" />
    <use xlink:href="#lamp" x="60" y="50" fill="rgba(0,0,255,1)" fill="#fff" stroke="#000" stroke-width="5" />
    <use xlink:href="#lamp" x="240" y="50" fill="rgba(255,0,0,1)" fill="#fff" stroke="#000" stroke-width="5" />
</svg>
</body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

<!doctype html>

<html>

<head>

<style>

svg {

background-color: #ddd;

}

</style>

</head>

<body>

</symbol>

</defs>

</svg>

</body>

</html>

信号機を描くコードをサンプルとして載せました。ぞれぞれ解説します。 […]

【JavaScript】canvas要素を使って雪を降らせる

もうすぐクリスマス。というわけで期間限定でブログに雪を降らせてみました。 https://www.otwo.jp/blog/canvas_sakura/ ベースとなるJSはこちらを参考にさせていただきました。詳しく解説が載っています。こちらは桜の花をひらひら降らせています。 http://www.shurey.com/js/samples/1_tips10.html ドキュメントの高さを取得する […]

【JavaScript】if文でTOPへ戻るボタン

トップへ戻るボタンを習ったので復習しながら解説します。 HTML

<p class="gotop">TOPへ戻る</p>

1	<p class="gotop">TOPへ戻る</p>

CSS

.gotop{
position: fixed; /*表示場所を固定*/
right: 10px;
bottom: 10px;
opacity: 0;
transition: all .5s;
}
.is-show{
opacity: 1;
}

1

2

3

4

5

6

7

8

9

10

.gotop{

position: fixed; /*表示場所を固定*/

right: 10px;

bottom: 10px;

opacity: 0;

transition: all .5s;

}

.is-show{

opacity: 1;

}

JavaScript

let gotop = document.querySelector('.gotop'); //クラスgotopを変数gotopにいれる

window.addEventListener("scroll", function(){
let scl = window.pageYOffset; //スクロール量を取って変数に代入
if( scl &gt; 200 &amp;&amp; scl &lt;= 500 ){ //もしスクロール量が200より大きくかつ500以下のとき
gotop.classList.add('is-show'); //クラスgotopにクラスis-showを追加する
}else if( scl &gt; 500 ){ //もしスクロール量が500より大きいなら（おまけです）
gotop.innerHTML = "TOPへ戻ろうよ！"; //要素の中身を変える(おまけです）
}
});

1

2

3

4

5

6

7

8

9

10

let gotop = document.querySelector('.gotop'); //クラスgotopを変数gotopにいれる

window.addEventListener("scroll", function(){

let scl = window.pageYOffset; //スクロール量を取って変数に代入

if( scl > 200 && scl <= 500 ){ //もしスクロール量が200より大きくかつ500以下のとき

gotop.classList.add('is-show'); //クラスgotopにクラスis-showを追加する

}else if( scl > 500 ){ //もしスクロール量が500より大きいなら（おまけです）

gotop.innerHTML = "TOPへ戻ろうよ！"; //要素の中身を変える(おまけです）

}

});

JavaScriptの授業は覚えることが多くとても大変ですが、できることも多いので楽しいです。他にも簡単な […]