実習ーhtmlも使いHPを装飾ー
HPWGでは､実習しながら研修を実施していきます。
固定ページで[実習1][実習2]…など、ページを作って目次に登録しておいてください。
また､文章や画像の見本を準備しておいてください。
①アイコンフォント
ブック
電話
携帯
旗
home
例題
携帯番号は090-1171-9116です
090-1171-9116です
我が家です
主なフォントのクラス
fa-camera fa-book fa-calendar fa-envelope fa-phone fa-mobile fa-fax fa-home fa-map-marker fa-file-pdf-o fa-file-word-o fa-file-excel-o fa-file-image-o fa-youtube-play
②アニメーション
ページを表示した時にアニメーション
class=”anidown”
class=”anileft”
class=”aniback”
class=”aniright”
class=”aniup”
スクロールに連動するアニメーション
anidown….
anileft….
anirotate….
aniright….
aniup….
②-1 アニメーションアンカー
aタブ(Anchor、リンク)へマウスを乗せたときのアニメーションです。テキスト及び画像のアニメーション例です。
テキストリンクのアニメーションその1 class=”aniline”
テキストリンクのアニメーションその2 class=”aniline2″
②-2 ホバー
ホバーは画像をクリックしたときに、変化するのを楽しみます。
an alpha an tilt an scale
を 高度な設定の追加CSSに書き込みます。
style は上記HTMLカスタムアニメーションの中に、ホバーの画像アニメーションとして入っています。