はてなブックマーク

今回はjavascriptでアナログ時計を作ってみました。 なぜ作ったか アナログ時計なので 時間周りの処理が必要なのでそこらへんの勉強になるのと、 あまりwebサイトではアナログ時計を見ないですが、サイトにあったら意外とお洒落かもと思って 作ってみました。 作るアナログ時計の完成イメージ 基本的な丸型の時計です。 コード html まずはアナログ時計の元になるhtmlを書いていきます。 必要なhtmlはごく少量です。 大きく分けて、必要なのは 外枠 時針 分針 秒針 時間の文字 これだけです。 <div class="c-clock"> // 外枠 <span class="c-clock__hour"></span> <!-- 時計 --> <span class="c-clock__min"></span> <!-- 分針 --> <span class="c-clock__sec"

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

flocssについてまとめてみた 最近flocssを触っているのでいいタイミングだと思い今回まとめてみました。 flocssとは cssの設計思想の一つで、OOCSS、SMACSS、BEMなどのコンセプトが取り入れられています。 cssでありがちなこと 基本原則 flocssでは次のようなレイヤーで構成されます。 foundation ブラウザのデフォルトスタイルの初期化(Reset.cssやNormalize.cssなど)や、プロジェクトにおける基本的なスタイルを定義をする場所。 layout header,footer,メインコンテンツなどのページを構成する大枠の部分を指定する場所。 基本的にはページ内で唯一の存在になるのでIDを使用するのも可能だが、IDセレクタは高い詳細度を持つため、 接頭辞(l-◯◯など)をつけた命名規則を採用するか,[id="header"]のように属性セレクタ