ようこそ!浜村拓夫の世界へ

    ブログ内検索

    最近の記事

    ブックマーク数の多い記事

    Blog Translation

    Powered By FC2ブログ

    Powered By FC2ブログ
    ブログやるならFC2ブログ


    FC2ブログ LOGIN

    with Ajax Amazon

    YahooのCSSフレームワーク「Pure」

    このエントリーを含むはてなブックマーク はてなブックマーク - YahooのCSSフレームワーク「Pure」 あとで読む
    CSSでWebデザイン、レイアウトをしやすくするために、CSSフレームワークの使い方を勉強した。

    フラットデザインでWebデザインの改善(手抜き) - 浜村拓夫の世界 (2013/07/06)
    ドットインストールのTwitter Bootstrap入門 - 浜村拓夫の世界 (2013/07/04)

    実際に、Twitter Bootstrapを使ってみると、レスポンシブデザインが簡単に実現できて、感動した!
    CSSフレームワークが、とても便利なものであることが分かった反面、大味なデザインになりがちで、繊細さにかけると思った。
    CSSフレームワークで用意されている基本機能に加えて、自分で用意したスタイルを追加しないといけないのだろう。

    ●グリッドシステム
    CSSフレームワークには、いろいろあるが、基本機能の違いを比較検討するとき、「グリッドシステム」に着目したら良いと思った。
    グリッドシステム=レイアウト機能の使い方、制約事項を確認すべきである。

    Twitter Bootstrapの次は、Yahooで開発されたCSSフレームワーク「Pure」を評価してみたい。


    ●Pure
    http://purecss.io/
    ざっと見たところ、グリッドシステムは、Bootstrapとは、ちょっと違っていた。

    Bootstrapでは、ソースコードを読むための「bootstrap.css」と、ファイルのフットプリントを最小限にした「bootstrap.min.css」が別個に用意されていた。
    しかし、Pureは、CDNで配布されている「pure-min.css」しか見当たらなかった。
    →公式サイト、githubを見てみたけど、よく分からんかった。どっかに埋もれてるのかな?

    CSSを整形してくれるツールで、ソースコードの可読性をアップしてみた。
    http://cssbeautify.com/

    グリッドの分割方法が、%で指定されており、とてもローテクというか、原始的な方法であることに、少し驚いた。
    まあでも、逆に言えば、記述を追加するだけで、自分の好きな比率でグリッドを分割できるってことだな!

    JavaScript(jQuery)を使わずに、100%CSSで書かれているPureなら、ハックが比較的簡単なのではないだろうか?
    Pureで、思い通りのWebデザインができたらいいなー。






    関連記事

    コメント

    コメントの投稿


    管理者にだけ表示を許可する

    トラックバック

    トラックバックURL:
    http://hamamuratakuo.blog61.fc2.com/tb.php/941-a443a7f0

    FC2Ad