楕円運動アニメクラス
楕円運動アニメクラス城内スタ－トファイル作成
楕円運動アニメクラスの大元となる、
楕円運動アニメクラス城内 スタ－トファイル
cir_oval_start.php
を作成することにします。
ファイルは至って簡単です。
ファイル内容は、左サイドナビ｢楕円運動アニメクラス｣の中の
楕円運動アニメクラス城内スタ－ト PHP ﾌｧｲﾙ
から見てください。
アニメのための軌道座標を CSS に代わり PHP で書込むため、
<style>
<?php
include "cir_oval.php";
?>
</style>
と記述し、楕円軌道を設定するため
PHP スタイル設定ファイル
cir_oval.php
をインクル－ドし、これにより、@keyframes を作成します。
DIV 作成
アニメ軌道を２つ作ります。
<div id="object1"></div>
<div id="object2"></div>
"object1"と"object2"の２つの軌道を作り、この軌道に沿って画像を移動します。
これで、
楕円運動アニメクラス城内スタ－トファイル
cla_cir_oval_start.php
は作成完了です。
とてもシンプルです。
viewport 追加
iPhone やスマートフォンでサイトを表示させると、字や画像が小さくなってしまいます。
これを防止するため最初の方の行で、meta タグの viewport 指定をします。
あまり追加したくないですが Google さんが追加しろしろとうるさいので追加します。
作法は、
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
沢山の方が機械的に入れている基本形です。
これなら、ユーザーがズームできるし、最近のスマートフォンでは表示も適切です。
ただ、iOS 5 以前では、画面を横向きにするとページが拡大されるという問題があったようです。
現状は、iOS 9 になっているので、みなさんこの問題は無視しているようです。
width で指定しているのが viewport の幅です。
width = device-width としているので、viewport の幅は表示デバイスの幅に設定されます。
ブラウザは、ウェブページを表示する前にウェブページを viewport の大きさに合わせてレンダリング(表示準備)します。
ここでは、initial-scale = 1.0 と指定していますので、レンダリングした結果を、デフォルトでは
viewport の幅がブラウザウィンドウの幅に合うように拡大縮小して表示します。
楕円運動アニメクラス北丸
CSS ファイル作成 に続く
楕円運動アニメクラス作成概要 に戻る