RYOの備忘録

20歳学生です。ここでは誰かの役に立つこと、自分の成長のために徒然なるままに書きます。

サイト分析日記-第3回-

こんにちは。望月亮佑です。

 

第3回の今回はTINKERさんです。時計を扱っているのですかね。では見てみましょう!!

 

全体

f:id:ryo3336:20170912145350p:plain

 

ファーストビューです。オシャレですねー。ただ僕個人的にはあんまり良いと思っていないハンバーガーメニューですね(笑)

 

あとは全体の色味について。サイト全体でペールカラーを使用してます。透明感があり、優しく女性的な印象を与えることができますね。色の印象は弱く、白と組み合わせた時の視認性もよくないため、背景色や模様などによく使われることが多いそうです。

 

 

ヘッダー

f:id:ryo3336:20170912145602p:plain

 

先ほども少し触れましたがハンバーガーメニューを使用しています。開くと上の写真のようになります。これは大きくて見やすいですね。でも個人的に文句があります。

 

メニューのしたの方のSign up以降見にくくないですか?見えます?これ笑

どうしてこんなに小さいのでしょうか。。

 

フォント

 body→"GT America","Helvetica Neue","Helvetica",sans-serif;

 

その他

今回は気になったところが2つあります。

 

①時計が動いてるーーーー!!!!

f:id:ryo3336:20170912145832p:plain

 

これ写真だと分からないのですけど、針動いてます!!見えますか?ちゃんと日付も12日になってますね。

実装方法

検証してみるとめちゃくちゃファイルを読み込んでました。意味不明でした。ですがJsで現在時刻を取得してCSSも使いつつ針を動かすのだろうということは想像できます。

 

で、やり方をネットで調べてみました。

q-az.net

 

こちらのサイトを参考にしました。なるべくCSSで作ってくれたところが初心者には優しいですね。当然ですがCSSだけでは現在時刻の設定はできません。

サイトには現在時刻を取得するスクリプトも書いてありますが、今回はどうやって時計の見た目の動きを作っているのか知りたかったので一旦動くだけのコードを見てみます。

 

以下CSSとJsのコードです。

/* 時計本体 */

#clock {

    height: 700px; /* 高さは固定 */

    margin: 40px auto;

    max-width: 700px; /* 幅のレスポンシブ対応 */

    position: relative;

}

/* 秒針 */

#second-hand {

    animation: rotation-s 60s linear infinite; /* 60秒かけて一周 */

    background-color: #999;

    border-radius: 2px;

    height: 4px; /* 線幅 */

    position: absolute;

    right: calc(50% - 2px); /* 位置調整 線幅の半分ずらす */

    top: calc(50% - 2px); /* 位置調整 線幅の半分ずらす */

    transform-origin: calc(100% - 2px) center; /* アニメーションの中心軸 線幅の半分ずらす */

    width: 50%;

}

/* 分針 */

#minute-hand {

    animation: rotation-m 3600s linear infinite; /* 3600秒、1時間かけて一周 */

    background-color: #000;

    border-radius: 5px;

    height: 10px; /* 線幅 */

    position: absolute;

    right: calc(50% - 5px); /* 位置調整 線幅の半分ずらす */

    top: calc(50% - 5px); /* 位置調整 線幅の半分ずらす */

    transform-origin: calc(100% - 5px) center; /* アニメーションの中心軸 線幅の半分ずらす */

    width: 40%;

}

/* 時針 */

#hour-hand {

    animation: rotation-h 86400s linear infinite; /* 86400秒、12時間かけて一周 */

    background-color: #cc3b3b;

    border-radius: 5px;

    height: 10px; /* 線幅 */

    position: absolute;

    right: calc(50% - 5px); /* 位置調整 線幅の半分ずらす */

    top: calc(50% - 5px); /* 位置調整 線幅の半分ずらす */

    transform-origin: calc(100% - 5px) center; /* アニメーションの中心軸 線幅の半分ずらす */

    width: 25%;

}

/* 秒針の回転アニメーション */

@keyframes rotation-s {

    0% {transform: rotate(90deg)} /* 初期位置 0秒の位置 */

    100% {transform: rotate(450deg)} /* 初期位置 + 360deg で一周 */

}

/* 分針の回転アニメーション */

@keyframes rotation-m {

    0% {transform: rotate(90deg)} /* 初期位置 0分の位置 */

    100% {transform: rotate(450deg)} /* 初期位置 + 360deg で一周 */

}

/* 時針の回転アニメーション */

@keyframes rotation-h {

    0% {transform: rotate(150deg)} /* 初期位置 2時の位置 */

    100% {transform: rotate(510deg)} /* 初期位置 + 360deg で一周 */

}

 

なるほど。Jsでそれぞれの針の初期位置と360degで一周というのを定義してますね。cssでは何秒かけて一周するかを定義し、後は針の色や太さ、位置の微調整だったりをしてますね。

 

意外と簡単ですね。 

 

調べてみると時計を動かすのは JavaScript の setInterval あたりを使って動かすのが主流みたいですが、CSS だけでもこんな感じで動かせるのですね。ただし、CSS のアニメーションの時間はそんなに正確じゃないので時間が経てば経つほどズレていってしまうそうです。

 

techacademy.jp

 

②写真のレイアウトの実現方法

f:id:ryo3336:20170912163925p:plain

 

写真の配置の仕方が気になったのでchromeの検証機能を使って見てみます。floatを使って実現してました。floatをキャンセルしてみると要素の順番が分かります。

f:id:ryo3336:20170912164027p:plain

 

5つの写真に上から①〜⑤の番号を振ります。ここからは下手な絵にお付き合いください。

f:id:ryo3336:20170912170159j:plain

 

widthについては%で指定して調整してますね。

 

まとめ

今回はその他の②が大変勉強になりました。サイトを検証することでデザインと実装方法がセットで勉強できて有意義です。こうやって理解しつつ引き出しを作っていくことが成長につながりますね。

 

またJsを使うことで本当に色々なことができることが再認識できました。

 

Jsを書くときは基本コピペしますが、そのままだとうまく動かないことが多い。また、ちょっとカスタマイズしたい時もいじらないといけません。

 

今はそれすらもかなり苦戦してますが、毎度のコピペの際にしっかり意味を理解しながら使うことで成長していこうと思います。