web制作 | 夜間飛行　備忘録

web制作講座で教わったあれこれを書き留めていきます

119日目 | web制作

本日は…

■ポートフォリオプレゼン第一弾

kojiwt2014.html.xdomain.jp

pinkismine.jimdo.com

web.fever.jp

http://webks.work/（予定）

116〜118日目 | web制作

本日は…
■ポートフォリオ制作
■ポートフォリオプレゼン…のはずが誰も発表せず…


個人的には構成書の作成を継続。
＜インターン用のサイトを制作＞
コンセプト：自分もインターンをしたくなるサイト
目的：インターンでの活動を知ってもらうこと
　　　インターンをしてみたい人の背中を押すこと
内容：

  • 参加者プロフィール…etc


※写真撮影

  • プレゼン用
  • 作業風景

→どのような角度からの写真が考えられるか、他のサイトを参考に検討

114日目 | web制作

本日は…

■DWで日付を付けて自動更新する方法…
■DWのサイト管理を整理する（キャッシュの削除的な）

■ポートフォリオ作成

紙へのアドバイス
・ページごとの見え方を考える
　＞見出しが弱い
　＞流れが読みにくい
　＞もう少し統一性のあるレイアウトへ
　＞背景いらないかも？

113日目 | web制作

本日は…

■SVGで文字をアニメーションさせてみる

・Aiで文字を書き出す
　→アウトラインにしてグループ解除
　→SVGにして書き出す

※そのままロゴなどに使いたいときは、このファイルにリンクさせてやればいい
※今回はアニメーションさせたいので、SVGタグの中身だけ取り出してｃｓｓで加工します

body {
	background: #092951;
}
.box {
	width: 500px;
	margin: 200px auto;
	height: 400px;
}

.bd {
	width: 500px;
	height: 300px;
	text-align:center;
	position: relative;
	padding: 60px 0;
}
div.bd div {
	backgrounf:#fff;
	position: absolute;
	transition: all .3s ease-in-out .3s;
}
.line {
	stroke: #fff;/*線の色*/
	stroke-width: 1;/*線の太さ*/
	fill: #092951;/*塗りつぶしの色*/
	stroke-dasharray: 3000;/*破線の間隔*/
	stroke-dashoffset: 3000;/*破線の開始位置*/
	-webkit-animation:DASH 2s ease-in-out 1s forwards;
	animation:DASH 2s ease-in-out 1s forwards;
}

@-webkit-keyframes DASH {
  0%{ stroke-dashoffset:3000;fill:#092951;}
  80%{ stroke-dashoffset:2000;fill:#092951;}
  100%{ stroke-dashoffset:0;fill:#fff;}
}
@keyframes DASH {
  0%{ stroke-dashoffset:3000;fill:#092951;}
  80%{ stroke-dashoffset:2000;fill:#092951;}
  100%{ stroke-dashoffset:0;fill:#fff;}
}

とりあえずはこれで動く。はず。