http://blog.zamuu.net四国を拠点にデザイナーとプログラマーのユニットで活動しているzamuuブログ。開発、ウェブサイト制作、SEOなどのテクニックなど情報を発信しています。jaTue, 15 May 2012 05:36:49 PDThttp://wordpress.org/?v=2.9.2hourly1no四国を拠点にデザイナーとプログラマーのユニットで活動しているzamuuブログ。開発、ウェブサイト制作、SEOなどのテクニックなど情報を発信しています。http://zamuu.net/http://blog.zamuu.net/wp-content/themes/zamuu/images/zamuu.pngSubscribe with PodnovaSubscribe with NewsGatorSubscribe with NetvibesSubscribe with PageflakesSubscribe with My Yahoo!Subscribe with ODEOSubscribe with GoogleSubscribe with PlusmoSubscribe with The Free DictionarySubscribe with Bitty BrowserSubscribe with Live.comSubscribe with Excite MIXSubscribe with WebwagSubscribe with Podcast ReadySubscribe with WikioSubscribe with Daily RotationSubscribe with My AOLSubscribe with Bloglineshttp://feedproxy.google.com/~r/zamuu/~3/1q7iOIE6K0I/日記・雑記スタジオダンス三豊市総合体育館香川県高瀬町covaSun, 13 May 2012 09:04:22 PDThttp://blog.zamuu.net/?p=4702
このページではRSSフィードを表示しています。このフィードをRSSリーダーに登録することで、最新記事の一覧を読むことができるようになります。]]>http://blog.zamuu.net/2012/0514/mitoyo_dance/feed/0http://blog.zamuu.net/2012/0514/mitoyo_dance/http://feedproxy.google.com/~r/zamuu/~3/yYcr4oMhRVs/HTML・CSSCSSLESSStyleSheetWebデザインcovaSun, 06 May 2012 07:25:31 PDThttp://blog.zamuu.net/?p=4683
このページではRSSフィードを表示しています。このフィードをRSSリーダーに登録することで、最新記事の一覧を読むことができるようになります。]]>http://blog.zamuu.net/2012/0506/css_less_howto/feed/0noWebデザイナーの方であれば、CSSのプロパティをいちいち設定するのが面倒臭いとか思ったことはないですか？今回紹介するのはそんな軽いところから、複数サイトの似たテンプレートを作成する上で、一括でプロパティの値を変更したり、クロスブラウザ対応も即対処できるようなツール「LESS」を紹介します。 LESSについて LESSはCSSのプロパティを変数定義できたり、条件によってプロパティ値を変更したりしてCSSファイルを動的に生成できるTOOLです。プログラマーにはなじみやすい関数に似たmixinというものも用意Webデザイナーの方であれば、CSSのプロパティをいちいち設定するのが面倒臭いとか思ったことはないですか？今回紹介するのはそんな軽いところから、複数サイトの似たテンプレートを作成する上で、一括でプロパティの値を変更したり、クロスブラウザ対応も即対処できるようなツール「LESS」を紹介します。 LESSについて LESSはCSSのプロパティを変数定義できたり、条件によってプロパティ値を変更したりしてCSSファイルを動的に生成できるTOOLです。プログラマーにはなじみやすい関数に似たmixinというものも用意されていたりします。 LESS本家：http://lesscss.org/ LESS日本語：http://less-ja.studiomohawk.com/ LESSエディタ「crunch!」入手先：http://crunchapp.net/ 開発環境 Crunch!をgithubからダウンロードします。 ダウンロードが完了したらインストールしてください。 以上で開発環境は完了です。 サンプルを作成してみる サンプルとして、「CSS Happy Life」さんのログイン画面をサンプルとして利用させて頂きました。 このログイン画面のstyle.cssを元にLESSファイルを作成し、CSS変換してみたいと思います。 変更内容 今回はLESSの勉強用として、以下のように変更を加えています。 style.css を 初期化(reset)とヘッダー(head)、コンテンツ(contents)とファイルを分け、LESSのパラメータ用に(param)ファイルを作成。 margin/padding/background/colorのプロパティ値をparam.lessで管理するよう修正、テストなのでgifファイルも1つparam.lessで管理するよう修正 #contentsのノード以下に配置される子ノード(h1,ul,p等)をネストで表現するよう修正 mixinを使用して、ログインのBoxに影(shadow)を追加し、クロスブラウザ対応させた できたファイル一覧 param.less 『変数』を宣言しています。変数とは、ここでは任意の数字や文字をいれる箱のようなものです。以下LESSソースだと「@mar」という箱に0を設定しています。「@mar」はmargineに記載する予定の値です。「margine: 0;」をイメージしています。同様に、「@pad」は「padding: 0;」、「@bor」は「border: 0;」、「＠color」は「color: white;」をイメージしています。先程も言ったように、ここではCSSプロパティとなりうる値を@~という箱にいれているだけです。 /* param.less */ /* ------------------ */ @mar: 0; @pad0: 0; @bor: 0; @color: white; /* ------------------ */ @pad5_10:5px 10px; @gif:"bg_header.gif"; reset.less ブラウザ依存の初期値のプロパティ初期化のイメージです。生成されるCSSは「reset.css」となります。イメージつきますか？ @import "param"; /*----------------------------------------------- __default style clear -----------------------------------------------*/ * { margin:@mar; padding:@pad0; } body { background:@color; font-size:74.5%; font-family:"メイリオ",Meiryo,verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,Meiryo,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; color:@color; line-height:1.5; } html { overflow-y:scroll; } h1,h2,h3,h4,h5 { font-size:115%; } p { margin:@mar @mar 1em; font-size:140%; } li { margin-left:25px; line-height:1.3; } img { border:@bor; } head.less コンテンツヘッダーのCSSです。上記param.less（param.css）ファイルを利用して使用します。@import でparam.lessを引き込みます、CSSファイル同様の定義です。各gif,margin,paddingプロパティにparam.lessで定義した『変数』を設定しています。 @import "param"; /*----------------------------------------------- __header -----------------------------------------------*/ #header { margin:@mar; padding:@pad5_10; background:#EC50B5 url(@gif) repeat-x; font-size:small; letter-spacing:1em; } contents.less コンテンツ部分のCSSです。head.less同様に『変数』を設定しています。その他に『ネスト』で設定しています。 17~51行目を参考に見てください。CSSでは「#contents h1 [...]HTML・CSS, CSS, LESS, StyleSheet, Webデザインhttp://blog.zamuu.net/2012/0506/css_less_howto/http://feedproxy.google.com/~r/zamuu/~3/esSAdBTDBM0/ウェブマーケティングfacebookソー活リクルート採用香川県covaThu, 03 May 2012 05:29:29 PDThttp://blog.zamuu.net/?p=4349
このページではRSSフィードを表示しています。このフィードをRSSリーダーに登録することで、最新記事の一覧を読むことができるようになります。]]>http://blog.zamuu.net/2012/0503/facebook_page_recrute/feed/0http://blog.zamuu.net/2012/0503/facebook_page_recrute/http://feedproxy.google.com/~r/zamuu/~3/HllrxE48lj8/Word PressbaserCMSWordBenchWordPress香川県高松市covaSun, 22 Apr 2012 05:19:31 PDThttp://blog.zamuu.net/?p=4669
このページではRSSフィードを表示しています。このフィードをRSSリーダーに登録することで、最新記事の一覧を読むことができるようになります。]]>http://blog.zamuu.net/2012/0422/wordbench_03_tea/feed/1http://blog.zamuu.net/2012/0422/wordbench_03_tea/http://feedproxy.google.com/~r/zamuu/~3/BhxJ5m77zxE/日記・雑記udonWordPressまんのう町多度津町琴平町香川県covaThu, 19 Apr 2012 07:16:13 PDThttp://blog.zamuu.net/?p=4655
このページではRSSフィードを表示しています。このフィードをRSSリーダーに登録することで、最新記事の一覧を読むことができるようになります。]]>http://blog.zamuu.net/2012/0419/wordudon-1st/feed/0http://blog.zamuu.net/2012/0419/wordudon-1st/http://feedproxy.google.com/~r/zamuu/~3/_sCMQ-uFdZg/androidAndroidOperacovaMon, 16 Apr 2012 16:35:10 PDThttp://blog.zamuu.net/?p=2788
このページではRSSフィードを表示しています。このフィードをRSSリーダーに登録することで、最新記事の一覧を読むことができるようになります。]]>http://blog.zamuu.net/2012/0417/opera-browser-beta/feed/0http://blog.zamuu.net/2012/0417/opera-browser-beta/http://feedproxy.google.com/~r/zamuu/~3/8jkwKZ5UQkc/日記・雑記chromeウィルスガンブラーブラウザcovaThu, 29 Mar 2012 09:32:54 PDThttp://blog.zamuu.net/?p=4645
このページではRSSフィードを表示しています。このフィードをRSSリーダーに登録することで、最新記事の一覧を読むことができるようになります。]]>http://blog.zamuu.net/2012/0330/chrome_poster_virus/feed/0http://blog.zamuu.net/2012/0330/chrome_poster_virus/http://feedproxy.google.com/~r/zamuu/~3/R8EZJIp7Z5U/android日記・雑記zamojojoTue, 13 Mar 2012 02:42:50 PDThttp://blog.zamuu.net/?p=4421
このページではRSSフィードを表示しています。このフィードをRSSリーダーに登録することで、最新記事の一覧を読むことができるようになります。]]>http://blog.zamuu.net/2012/0313/shthon2012s/feed/1http://blog.zamuu.net/2012/0313/shthon2012s/http://feedproxy.google.com/~r/zamuu/~3/FuTAbMoupVs/クライアント・サーバアプリVMwareアンインストールレジストリcovaMon, 20 Feb 2012 04:45:25 PSThttp://blog.zamuu.net/?p=4413
このページではRSSフィードを表示しています。このフィードをRSSリーダーに登録することで、最新記事の一覧を読むことができるようになります。]]>http://blog.zamuu.net/2012/0220/vmware_uninstall_registory/feed/0http://blog.zamuu.net/2012/0220/vmware_uninstall_registory/http://feedproxy.google.com/~r/zamuu/~3/sJyHs8RIzC4/androidzamojojoSat, 18 Feb 2012 18:24:43 PSThttp://blog.zamuu.net/?p=4366
このページではRSSフィードを表示しています。このフィードをRSSリーダーに登録することで、最新記事の一覧を読むことができるようになります。]]>http://blog.zamuu.net/2012/0219/android-r-drawable-icon-api15/feed/0http://blog.zamuu.net/2012/0219/android-r-drawable-icon-api15/nonadult