実技 ユーザーインターフェイス作成実習①

LP

講師： 大浜 信彦 先生

1限目
実技 ユーザーインターフェイス作成実習①
jQueryの使い方について

2限目
実技 ユーザーインターフェイス作成実習①
jQueryの導入

3限目
実技 ユーザーインターフェイス作成実習①
課題制作

4限目
実技 ユーザーインータフェイス作成実習①
課題制作

5限目
実技 ユーザーインターフェイス作成実習①
課題制作

今日はWEBパーツ（jQuery）の挿入のしかたを学んだ。

感想・質問

  • 感想
    大浜先生がやると簡単に挿入できるが、いざ自分でやると一度で動くことはなかった。改造もコードを解読しなければならないので、かなり大変な作業になりそうだ。
  • 質問
    ＞LPの機能を増やしていくと、どんどんCSSが長くなってしまう。セレクターなどをまとめて指定してCSSを短くした方が良いのでしょうか？
@keyframes kira-key{
	0%{
		background-image: linear-gradient(to left, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px), linear-gradient(to top, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px);
	}
	
	2%{
		background-image:
		linear-gradient(to left, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px);
	}
	
	3%{
		background-image: linear-gradient(to left, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px);
	}
	
	4%{
		background-image:
		linear-gradient(to left , #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px), linear-gradient(to top, #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px);
	}
	
	6%{
		background-image: linear-gradient(to left, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px), linear-gradient(to top, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px);
	}
	
	7%{
		background-image:
		linear-gradient(to left, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 5px, #9f833f 10px,#4f4913 15px,#4f4913 20px);
	}
	
	8%{
		background-image: linear-gradient(to left, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px), linear-gradient(to top, #4f4913 0px, #4f4913 8px, #9f833f 15px,#4f4913 20px);
}
	
	9%{
		background-image:
		linear-gradient(to left, #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px), linear-gradient(to top, #9f833f 0px, #4f4913 5px,#4f4913 15px, #9f833f 20px);
	}
	
	10%{
		background-image: linear-gradient(to left, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px), linear-gradient(to top, #4f4913 0px, #9f833f 5px, #4f4913 12px, #4f4913 20px);
	}