タグ

ブックマーク / www.mao-engineer.jp (2)

  • CSS編:レスポンシブデザインのグリッドレイアウトを詳細解説 | MAO PC エンジニア

    いまさらながら、グリッドレイアウトのレスポンシブデザインについて記載したいと思います。 レスポンシブデザインのグリッドレイアウトについて可能な限りわかりやすく、フレームワークを使用しなくてもコーディングできるよう記載したいと思います。 グリッドレイアウトのレスポンシブデザインを理解することで、フレームワークを利用するよりもはるかに応用のきくページが作成できます。 最終的には以下のようなページができるように説明していきます。 完成品のページで画面の幅を変更してみてください。 完成品を確認 もし、時間がないという方はGoogleで「グリッドレイアウト レスポンシブデザイン」で検索して上位表示したページのツールを使うことをお勧めします。 ちなみに私は以下のサービスを推します。 ■gridpak http://gridpak.com/ シンプルで操作性がよく、グリッドレイアウトの基的な

    CSS編:レスポンシブデザインのグリッドレイアウトを詳細解説 | MAO PC エンジニア
  • 基礎から学ぶCSS3で作るギミック、アニメーション transform transition animation編 | MAO PC エンジニア

    このブログは、css3 で実装されたアニメーションを直感的に理解しマスターできるように作成しました。 なので、細かい説明、パラメータは省きます。 css3 のアニメーションで何ができるかを学んでいただければ。 ブラウザの世界では、今まではjavascript(Jquery) Flash などでアニメーションを実現してきた。 それが、人類の限界と思われていた、、、が、、、、、、、、 確かにある。 css でアニメーションを実現できる方法が。 最初は私も混乱しましたよ。 何せ、css3で追加されたアニメーションに深くかかわるプロパティが複数あんですから。 いや、基礎的な要素もアニメーションに欠かせませんよ。 でも、いろいろあると言っても、やはり css3 で追加された transform 形を操る。歪み、移動、回転など。 transition 動きを与える。Transform

    基礎から学ぶCSS3で作るギミック、アニメーション transform transition animation編 | MAO PC エンジニア
  • 1