スポンサーサイト
上記の広告は１ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
新しい記事を書く事で広告が消せます。
キレイなホームページが簡単に作れるフレームワーク
ホームページのデザインって、時代によって似通ってきます。
リキッドレイアウト（画面の幅が違くても、ある程度同じデザインに見える手法）になったり、
ヤフーのようなポータルサイトデザインが確立されていったり、
ブログという形が浸透してきたり、
スマートフォン向けのホームページデザインが確立されてきたり。
みんなが真似し合ったり、良いところを取り入れたり、ということが日々行われ成長してきたのです。HTMLという形式が、ある意味でソースを常に開示している状況だったからなのか。理由は定かではありませんが、とにかく、皆通る道は同じなのです。
そして現在は、そこそこ使えるフレームワークが複数存在します。
フレームワークとは、みんなが常にやることとか、あったほうが便利な機能を詰め込んだ、言わばひな形です。
海外サイトですが、それらがキレイにまとめられているサイトも存在します。
http://usablica.github.com/front-end-frameworks/compare.html
このサイトでは主に、CSSフレームワークを紹介しています。左から、フレームワーク名、対応ブラウザ、CSSメタ言語、対応ハードウェア、ライセンス、となっております。
CSSは、HTMLの見栄えを表現するものだと前回やりましたが、それが良い感じに指定してあるのです。
CSSメタ言語とは、CSSの記述に幅をもたせるものです。例えば、ブラウザ毎に別に書かなければならないものを、一つ書けば、自動で展開してくれる、そんな言語です。PHP言語でHTMLを出力するように、ちょっとしたプログラムでCSSを出力してくれる感じです。Sass(scss,sass)、Less、Stylus、Tass、PCSS辺りが有名でしょうか。
これは自分に合ったものを選ぶと良いのですが、最初のひな形を使うだけなら覚える必要もないものです。もちろん覚えると便利ですが、プログラマーというより、WEBデザイナーさんの仕事になってきます。基本的に、ほとんどのフレームワークは、CSSを一切書かなくて大丈夫です。
そう、何故フレームワークを使うかというと、プログラマーはデザインに時間を掛けたくないからです。キレイな方がいいけど、一から覚えて作るのは大変！だからフレームワークを使うのです。
一番右のライセンス（ApacheとかMITとか）ですが、当ブログでは個人利用を想定しているので、あまり気にしなくて良いです。ソフトウェア開発の世界では付き物ですが、「無料で公開するから、もし改造したら無料で配布してね！」とか、「タダで商用で使ってもいいけど、改造はだめだよ！」とか、そういう感じのライセンスです。技術を進歩させるのは、エロ以外にもそういった無料共有精神のライセンスが一役買っていると思います。
ちなみにエロぺん動画は、Twitter Bootstrapのデザインをカスタマイズした、Bootswatchの中から、適当に選んで使ってます。
次回から、CSSフレームワークとはどんなものか、具体的な使い方を少しだけやっていこうと思います。
リキッドレイアウト（画面の幅が違くても、ある程度同じデザインに見える手法）になったり、
ヤフーのようなポータルサイトデザインが確立されていったり、
ブログという形が浸透してきたり、
スマートフォン向けのホームページデザインが確立されてきたり。
みんなが真似し合ったり、良いところを取り入れたり、ということが日々行われ成長してきたのです。HTMLという形式が、ある意味でソースを常に開示している状況だったからなのか。理由は定かではありませんが、とにかく、皆通る道は同じなのです。
そして現在は、そこそこ使えるフレームワークが複数存在します。
フレームワークとは、みんなが常にやることとか、あったほうが便利な機能を詰め込んだ、言わばひな形です。
海外サイトですが、それらがキレイにまとめられているサイトも存在します。
http://usablica.github.com/front-end-frameworks/compare.html
このサイトでは主に、CSSフレームワークを紹介しています。左から、フレームワーク名、対応ブラウザ、CSSメタ言語、対応ハードウェア、ライセンス、となっております。
CSSは、HTMLの見栄えを表現するものだと前回やりましたが、それが良い感じに指定してあるのです。
CSSメタ言語とは、CSSの記述に幅をもたせるものです。例えば、ブラウザ毎に別に書かなければならないものを、一つ書けば、自動で展開してくれる、そんな言語です。PHP言語でHTMLを出力するように、ちょっとしたプログラムでCSSを出力してくれる感じです。Sass(scss,sass)、Less、Stylus、Tass、PCSS辺りが有名でしょうか。
これは自分に合ったものを選ぶと良いのですが、最初のひな形を使うだけなら覚える必要もないものです。もちろん覚えると便利ですが、プログラマーというより、WEBデザイナーさんの仕事になってきます。基本的に、ほとんどのフレームワークは、CSSを一切書かなくて大丈夫です。
そう、何故フレームワークを使うかというと、プログラマーはデザインに時間を掛けたくないからです。キレイな方がいいけど、一から覚えて作るのは大変！だからフレームワークを使うのです。
一番右のライセンス（ApacheとかMITとか）ですが、当ブログでは個人利用を想定しているので、あまり気にしなくて良いです。ソフトウェア開発の世界では付き物ですが、「無料で公開するから、もし改造したら無料で配布してね！」とか、「タダで商用で使ってもいいけど、改造はだめだよ！」とか、そういう感じのライセンスです。技術を進歩させるのは、エロ以外にもそういった無料共有精神のライセンスが一役買っていると思います。
ちなみにエロぺん動画は、Twitter Bootstrapのデザインをカスタマイズした、Bootswatchの中から、適当に選んで使ってます。
次回から、CSSフレームワークとはどんなものか、具体的な使い方を少しだけやっていこうと思います。
- 関連記事
-
- bootstrapの使い方 (2013/04/06)
- キレイなホームページが簡単に作れるフレームワーク (2013/04/05)
- 画像にモザイクをつけるCSS (2013/04/04)
- スタイルシートについて (2013/04/02)
