どこまでも続く道のようなデザイン
忘れないようにメモです。
イラストレーター
『効果』⇒『ワープ』⇒『旗』
↓
『効果』⇒『パスの変形』⇒『ランダム・ひねり』
イラストレーター
『効果』⇒『ワープ』⇒『旗』カーブ100％・水平方向100％
↓
『オブジェクト』⇒『変形』⇒『個別に変形』縦57％
↓
『効果』⇒『パスの変形』⇒『ランダム・ひねり』水平0％・垂直30％・IN
ホームページを作る前の準備
先日書き続けた『ホームページに対する誤解』でも書きましたが、
改めて、ホームページを作る前に準備して考えていて欲しいことを
書いていこうと思います。
１．ホームページを何故欲しいのか？
２．ホームページで何をしたいのか？
３．ホームページを誰に見て欲しいのか？
※ホームページでしたいことと、見て欲しい人は
マッチしていますか？そもそも、したいことと
見て欲しい人がミスマッチをおこしてないですか？
４．ホームページで伝えたいことは何ですか？
５．ホームページを作って達成したい目標を
明確にしておきましょう。
ここからは、作った後のことになりますが、更新を
どうやってしていくのか、どんな情報を追加していく
のかを考えておきましょう。
改めて、ホームページを作る前に準備して考えていて欲しいことを
書いていこうと思います。
１．ホームページを何故欲しいのか？
２．ホームページで何をしたいのか？
３．ホームページを誰に見て欲しいのか？
※ホームページでしたいことと、見て欲しい人は
マッチしていますか？そもそも、したいことと
見て欲しい人がミスマッチをおこしてないですか？
４．ホームページで伝えたいことは何ですか？
５．ホームページを作って達成したい目標を
明確にしておきましょう。
ここからは、作った後のことになりますが、更新を
どうやってしていくのか、どんな情報を追加していく
のかを考えておきましょう。
THE BROAD BAND VOCAL AUDITION
ボーカルオーディションのサイトなのですが、WebやカラオケのDAMから
応募するというサイトなのです。
THE BROAD BAND VOCAL AUDITION
https://bbiq-audition.jp/
※音が出ますのでご注意。
面白いのは顔写真も応募のときに付けるのですが、その顔写真を
もとに、まるで自分が歌っているような動画が自動で生成される
のです。
ちょっと不自然な動画もありますが、面白い技術ですね。
ちなみに、課題曲のACOさんの『ほしのうた』はとても良い曲です！
応募するというサイトなのです。
THE BROAD BAND VOCAL AUDITION
https://bbiq-audition.jp/
※音が出ますのでご注意。
面白いのは顔写真も応募のときに付けるのですが、その顔写真を
もとに、まるで自分が歌っているような動画が自動で生成される
のです。
ちょっと不自然な動画もありますが、面白い技術ですね。
ちなみに、課題曲のACOさんの『ほしのうた』はとても良い曲です！
昨日紹介した『CSS 読者になるボタンのロールオーバー』の補足
昨日ご紹介した『CSS 読者になるボタンのロールオーバー』の
記事内のCSSでロールオーバーを行うと、マウスを持って
いってロールオーバーされる際に、画像の読み込み時間が
発生するために、一瞬ちらつきが起こってしまいます。
特にIE6は毎回読み込みをするので、ずっとちらつきます。
（他のブラウザーだと最初の読み込み時だけちらつきます。）
ですので、読み込みの際にちらつかせない対策をしておくと
ロールオーバーがよりキレイになります。
で、その対策方法ですが、『CSS 読者になるボタンのロールオーバー』で
紹介されていたCSSにさらに一つ加えることで解決します。
『CSS 読者になるボタンのロールオーバー』のCSS
http://ameblo.jp/exlink/entry-10056775717.html
/* 読者になるボタンロールオーバー */
#readerList img {
visibility : hidden ;
}
#readerList dl a{
display: block;
padding:0;
margin:0;
height:50px;/*画像の縦*/
background-repeat : no-repeat ;
background-image : url(最初の画像のURL) ;
}
#readerList dl a:hover {
background-repeat : no-repeat ;
background-image : url(マウスがのったときの画像のURL);
}
↓
/* 読者になるボタンロールオーバー */
#readerList img {
visibility : hidden ;
}
#readerList dl dt{
padding:0;
margin:0;
height:auto;/*画像の縦*/
background-repeat : no-repeat ;
background-image : url(最初の画像のURL) ;
}
#readerList dl a{
display: block;
padding:0;
margin:0;
height:50px;/*画像の縦*/
background-repeat : no-repeat ;
background-image : url(最初の画像のURL) ;
}
#readerList dl a:hover {
background-repeat : no-repeat ;
background-image : url(マウスがのったときの画像のURL);
}
※追加した部分を赤くしています。
簡単に説明しておきますと、ロールオーバーしたときに、マウスが
のったときの画像を読み込むのに時間がかかってしまい、画像が
表示されてない時間が発生して、背景が見えてしまうことで
ちらつきが発生しています。
そこで、読み込みしているときに、既に背景を最初の画像にして
おくことで、消えても最初の画像が見えるようになり、ちらつきを
見せなくしています。
（背景にする画像は最初のでもマウスがのったときのでも
どちらでも大丈夫です。）
記事内のCSSでロールオーバーを行うと、マウスを持って
いってロールオーバーされる際に、画像の読み込み時間が
発生するために、一瞬ちらつきが起こってしまいます。
特にIE6は毎回読み込みをするので、ずっとちらつきます。
（他のブラウザーだと最初の読み込み時だけちらつきます。）
ですので、読み込みの際にちらつかせない対策をしておくと
ロールオーバーがよりキレイになります。
で、その対策方法ですが、『CSS 読者になるボタンのロールオーバー』で
紹介されていたCSSにさらに一つ加えることで解決します。
『CSS 読者になるボタンのロールオーバー』のCSS
http://ameblo.jp/exlink/entry-10056775717.html
/* 読者になるボタンロールオーバー */
#readerList img {
visibility : hidden ;
}
#readerList dl a{
display: block;
padding:0;
margin:0;
height:50px;/*画像の縦*/
background-repeat : no-repeat ;
background-image : url(最初の画像のURL) ;
}
#readerList dl a:hover {
background-repeat : no-repeat ;
background-image : url(マウスがのったときの画像のURL);
}
↓
/* 読者になるボタンロールオーバー */
#readerList img {
visibility : hidden ;
}
#readerList dl dt{
padding:0;
margin:0;
height:auto;/*画像の縦*/
background-repeat : no-repeat ;
background-image : url(最初の画像のURL) ;
}
#readerList dl a{
display: block;
padding:0;
margin:0;
height:50px;/*画像の縦*/
background-repeat : no-repeat ;
background-image : url(最初の画像のURL) ;
}
#readerList dl a:hover {
background-repeat : no-repeat ;
background-image : url(マウスがのったときの画像のURL);
}
※追加した部分を赤くしています。
簡単に説明しておきますと、ロールオーバーしたときに、マウスが
のったときの画像を読み込むのに時間がかかってしまい、画像が
表示されてない時間が発生して、背景が見えてしまうことで
ちらつきが発生しています。
そこで、読み込みしているときに、既に背景を最初の画像にして
おくことで、消えても最初の画像が見えるようになり、ちらつきを
見せなくしています。
（背景にする画像は最初のでもマウスがのったときのでも
どちらでも大丈夫です。）