115日目 | web制作
本日は…
・修了試験の講評
※metaタグのうち、charsetだけtitleの上に来ているのは、そこに日本語があるから→それ以外のmetaはtitleの下で良い
※cssは4種類以上入れるととても重くなる
※更新履歴や会社概要のdl部分はtableで組んでやるとスマート
114日目 | web制作
本日は…
■DWで日付を付けて自動更新する方法…
■DWのサイト管理を整理する(キャッシュの削除的な)
■ポートフォリオ作成
紙へのアドバイス
・ページごとの見え方を考える
>見出しが弱い
>流れが読みにくい
>もう少し統一性のあるレイアウトへ
>背景いらないかも?
113日目 | web制作
本日は…
■SVGで文字をアニメーションさせてみる
・Aiで文字を書き出す
→アウトラインにしてグループ解除
→SVGにして書き出す
※そのままロゴなどに使いたいときは、このファイルにリンクさせてやればいい
※今回はアニメーションさせたいので、SVGタグの中身だけ取り出してcssで加工します
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;} }
とりあえずはこれで動く。はず。
112日目 | web制作
本日は…
■ポートフォリオ制作続き
111日目 | web制作
本日は…
■修了試験
>内容