LessやSass、CoffeescriptなどをコンパイルできるWindows用ソフトウェア・「Prepros」PreprosはLessやSass、Coffeescript等のファイルを監視し、変更があった際に自動でコンパイルしてくれるWindows用のソフトウェアです。CodeKitほど高性能では無いにしても、割と似たようなものになります。OSSなので無料で利用する事が可能です。今後はJsHintやJsLintなどの導入を予定してるみたい。 Prepros
正規表現をjsfiddleのようにブラウザで実行、テスト出来るツール・reFiddle
JavaScriptの開発をブラウザ上で 行えるjsfiddleの正規表現版です。 reFiddleはオンラインで正規表現 テストを行えるWebツール。勉強に もいいかもしれませんね。僕も 全然出来ないので学びたい。 愛用しているjsfiddleの正規表現版、みたいなツールです。jsfiddleのように、実行テストを他サイトに表示させたりは出来ませんが、UIも似ているので同じ感覚で利用できそうです。 左側でJavaScript、ruby、.NETから選択してテストしたいコードと、コードテスト用のテキスト等を書けばいいだけ。保存も可能です。 マッチした部分がハイライトされる、というシンプルな作りです。jsfiddle同様、ユーザー登録も可能で、フォークも出来ます。 何より使い慣れているツールとUIが似てるのが嬉しかった。正規表現全然出来ないのでこれで暫く勉強してみる事にします。 reFidd
JavaScript無しで作るレスポンシブなコンテンツスライダー・CSS3 Responsive Slider
使えそうだったので参考にしました。 JavaScriptを使わず、CSSのみで動作 させるレスポンシブWebデザイン対応 のコンテンツスライダーのサンプル です。軽量化にも繋がりそうですね。 CSSのみで作られたレスポンシブなコンテンツスライダーです。これはちょっと覚えておきたい。 ちょっとこの発想は無かったですけど、確かに簡単なコンテンツスライダーならCSS3使えばJSはいりませんし、そのままレスポンシブWebデザインに対応させれば、あとはCSS3が使えないブラウザ向けにjsを書くだけ、という手もありますね。 以下サンプルです。レスポンシブWebデザイン対応の確認はresponsivepxでどうぞ。 Sample ※responsivepxで簡単に確認出来ます。 jsfiddle iPhoneのキャプチャ ナビゲーションのサイズはモバイルの際は大きくしないとですね。 まず、スライドの作成
国内のiPhoneアプリでデザインが参考になったWebサイトいろいろ
以前からちょいちょいブックマーク していたんですが、いつの間にか増 えてたので一覧化してみたいと思い ます。国内のiPhoneアプリサイトで Webデザインが参考になったサイトの まとめ。あんまり無いですが・・ 個人的な備忘録とメモ書きです。探し方も悪いと思いますので数はさほど網羅していません。「あそこ凄い素敵なのに載ってない」みたいなご意見ありましたらコメント欄にてご教授頂けますと幸いです。 この記事で見たいのはアプリではありませんのでWebサイトへのリンクしかありません。順不同となっています。シェア系アプリが多いです。 MogSnap 食べたものを写真で評価、共有するiPhoneアプリ。写真系なのでこういったスライドがあるとアプリの概要をイメージしやすいですね。無料であること、キャプチャ、アプリダウンロードのボタンが分かりやすく明示されています。 MogSnap 大辞林 言わずと知れた
ブラウザ上でHTML / CSS / Javascriptを書いてその場で実行、ブログ等にも貼付できるjsfiddleの基本的な使い方をざっくりと
個人的にお勧めしているjsfiddleですが、せっかくなのでちゃんと記事にして普及活動をしてみようかなと思います。jQueryのコードを気軽に試す、などにも最適です。 全部は書ききれないのでざっくりと、程度です。一応基本的な部分だけ・・jsdo.itでいいじゃんとか言われそうな空気満々ですが、いいならこんな記事書きませんのでお察し頂ければ幸いです。 jsfiddleとは、その場でjsコードを実行、動作テストできるツールで、人気のjsライブラリのjQueryの公式サイトでもバグを伝えるときはjsfiddleを使用して動作を見せるように薦められます。 When You Report A link to a reduced, working demo/test case that will never move (jsFiddle is good for this). （意訳：バグを報告するとき
iPhoneやAndroidのUIパターンを収集するシンプルで見やすいギャラリーサイト・Patterns of Design
いくつか同じようなギャラリーサイトは ありますが、こちらもなかなか見やすか ったのでメモ。スマートフォンのUIの パターンギャラリーサイトです。スマー トフォンに限らず、通常のWebサイトの パーツデザインの参考にもなりそうです。 特にスマートフォンのUIは細かい部分のこだわりが見られてとても参考になりますので見ておいて損は無いかと思います。 シンプルな作りです。パーツはカテゴリで分けられていて探しやすいです。ちょっと重いかな・・ 例えばこちらはグリッドのカテゴリ。同じ幅、同じ高さという限られた空間の中で、様々な工夫が見られます。 クリックするとその場でLightbox風にポップアップします。iTuneへのリンクもあるので確認しやすいですね。 同じようなギャラリーサイト似たようなサイトは沢山あるので合わせてチェックしてみてはいかがでしょう。 Mobile UI Patternspttrns
著作権放棄・シンプル・軽量で、iPhoneなどにもレイアウトを調整できるレスポンシブWebデザイン対応のHTML5フレームワーク・Fluid Baseline Grid
なかなか凄いフレームワークがあったので 反射的にメモ。パブリックドメインという のが何より太っ腹ですねー。自由に使用で きて、シンプルで汎用的、しかも軽量で iPhoneやiPadにもレイアウトを自動調整 するレスポンシブWebデザイン対応のHTML5 フレームワークです。 これ、凄く良い感じです。いいもの全部詰め込んだ、みたいなソフトウェアですね・・・ちゃんと使いこなせるようになりたいかも。 Media Queriesを使ったレスポンシブWebデザイン対応のCSSフレームワークです。3カラム構成で組めるようにもしてあります。マークアップはHTML5+CSS3ですが、jsを使ってIEにも対応してくれています。 以下にざっと特徴を。 著作権放棄(パブリックドメイン)軽量(CSSは9kb)ベースライングリッドに揃済みグリッドレイアウト対応iPhoneやiPadなどにも自動でレイアウトを調整HT
WordPressのテーマのカスタマイズに役立つコードスニペットを探せるWebサイトいろいろ
少し増えてきたので自分用にまとめてみます。 WordPressでテーマをカスタマイズしたい時 にサクッと探せると楽なんですが、その コードスニペットを探せる、というサイトが いくつかあるのでご紹介します。WPユーザー の方は一度ご覧になってみては如何でしょう。 というわけでちょっと個人的なメモです。WPスニペットを保管してるサイトのまとめ。お手軽なWordPress Tipsっていうカテゴリで記事をよく書いてるんですけどそのネタ元なので英語OKな方はこちらから探してみては如何でしょうか。 この手のサイトのコードは古い可能性もよくあるのでCODEXで非推奨のコードでは無いかどうか合わせて確認しておくとより良いかもしれません。 WP-Snippets 数は多くないけど需要のあるTips多め。最近リニューアルしてちゃんとカテゴリ分けしてくれました。単純な単語をタイトルにしてくれているので英語が苦
地味に使えるCSS小技のメモ&サンプル集
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード.centered { position: relative; overflow: hidden; } .centered ul { position: relative; lef
HTML5やcss3を使う際に見てるリファレンス的なサイトとか、使い勝手の良いツールとか
あまりに情報量が多くて混乱してきたので 自分用にまとめ。リファレンスとか、ちゃんと 実践で使えるツールを自分なりに厳選して まとめておきます。どうも、あっちこっちで あれが便利とかこれが便利だとか言われる と訳が分からなくなるのでそろそろ絞らない とですね。 というわけでお遊びではなく実践に役立ってる基本的なリファレンスとか助けてくれるツールのメモなので目新しいものはありません。完全に自分用のまとめです。個人的には基礎用のサイトと、実践向けのツールやライブラリだけあればいいという感じです。 尚、css3/html5に関する情報だけを求めている&特に情報取得に急いでないならdotHTML5というサイト1つで事足りるかと思います。 ※W3Cは割愛でいいですよね チートシートとかリファレンスだけで基本的にはいい感じですかね・・ HTML5 タグリファレンス マークアップもままならないほど慣れてな
Webサイトにおけるユーザービリティの復習をしたので、よくチェックするポイントをリスト化した
ユーザービリティに関して少し復習したので メモっておきます。初心忘れるべからずという 事で・・・Webサイトは基本的にユーザビリティ を考慮したレイアウトやコンテンツが理想です。 もちろんケースバイケースではありますが、 これは全共通して言える、という事を忘れない ようにメモ書き。 というわけで、申し訳ないですけど目新しい事は何一つ無い内容です。 そもそもこのブログ自体ユーザビリティを考慮した設計とは言えません（「やっちゃダメなこと」もしています）ので全然説得力ない感じです。 いろいろとテスト&エラーをして行きたいのでご了承下さい。 はじめに正しいユーザビリティはコンテンツによってケースバイケースだと思いますが基本的には僕はヤコブ・ニールセンの考えに従っています。 全ての項目は「すべてが正しい」ものではありません。100のサイトがあれば100通りのユーザビリティが考えられるはずです。場合に
スマフォ向けサイト構築等に便利そうな、指定サイズに応じてclass名を加えてくれる軽量jsライブラリ・Selector Queries
これはかなり便利そうだったので備忘録。 ディスプレイサイズに応じて指定した要素 にclass名を加え、そのclassを使ってデザ インする事でレスポンシブなWebデザイン を設計出来るようにする為のライブラリ。 かなり便利そうです。 この発想はちょっと素敵でした。指定したサイズに応じて要素にclassを与えるので、Media Queryを使用したPCとスマフォ向けサイトで見た目をまったく別のものにすることも出来そう。 特にjQueryやmootoolsといったスクリプトに依存してないのもいいですね。イメージ的には部分的にMedia Queryを手軽に使える、という感じでした。 わずか5KBほどの非依存型軽量ライブラリです。ディスプレイサイズ等で要素が指定した数値になると、class名を与えてくれるので、環境によってデザインを簡単に変更できるようになります。 上記はMedia Query T
スマフォとかミニマルデザインに特化した、これからお世話になりそうなWebデザインギャラリー
自分の中で課題があって、その為に 必要なインスピレーションを得るため のギャラリーサイトをまとめます。いち いちブックマークから探すのが面倒に なってきたのでちょっと整理がてら記事 にします。 というわけで個人的なリンク集です。スマフォとかミニマルデザインとかのWebデザインギャラリーいろいろ。デザインギャラリーですけど、目的はデザインというよりも、技術をどうやって上手く取り入れているかを見たい、という感じです。 ミニマリズム / シンプルミニマリズム、シンプルデザイン専門のギャラリー。 MNIMAL とにかくここ自体もミニマルなギャラリーです。よく見に行ってます。 MNIMAL siiimple シンプルレイアウトなWebデザインのみを集めています。 siiimple Minimal Exhibit ミニマルデザインを収集。少々カテゴリの分け方がアレ。 Minimal Exhibit m
iPhoneやAndroid等のタッチデバイス向けイメージギャラリー用JSライブラリ・PhotoSwipeなかなか良いですぞ
PhotoSwipeはタッチデバイス専用のJSライブラリ。iOS(iPhone/iPad)は勿論、AndroidやBlackBerryにも対応出来るそうです。また、jQuery依存型も非依存型が用意されているのも自由さがあっていいかなと。 [note] jQuery Mobileは昨日、サンプル配布したので宜しければ合わせてどうぞ。[/note] PhotoSwipeサンプル with jQuery Mobile 以下、iPhoneとiPadでのキャプチャです。 iPhoneでのキャプチャです デフォルト サムネを幅に自動で合わせてくれます。 ランドスケープ ランドスケープ時でもサムネイルを自動で拡大し、幅を合わせてくれます。 画像の閲覧 単体表示はサムネイルをタップします。左右フリックで進んだり戻ったり。 ナビゲーションもある 単体、ランドスケープ。タップすると下部にナビゲーションバーが
特化型の様々なギャラリーサイトまとめ
芸術の秋なのでギャラリーサイトを色々と調べてみました。良く有るようなcssギャラリーでは無く、特殊と言うと大袈裟ですけど何かしらに特化したギャラリーのまとめです。インスピレーションの向上や参考に綺麗なものを目に焼き付けておきたい所です。 通常良く見るcss系Webデザインギャラリーはほぼ全てGALLERY GALLERYにまとめられていましたのでこちらも合わせてご覧になってみてはいかがでしょう。ギャラリーの内容は殆どがWebデザイン関連ですが、他にもロゴや名刺、ファッションなどなどもあります。 LogoPond クールなロゴデザインのギャラリー。 LogoPond Creattica 名刺、ロゴ、広告など様々なデザインギャラリー。 Creattica Business Cards Observer かなりクオリティの高い名刺デザインのギャラリー。見てるだけで楽しい。 Business Ca
iPhone等での表示をPCで確認出来るAir製のシミュレーター・Mobilizerがローカルファイルにも対応出来るし、割と良かった
iPhoneや、BlackBerryなどでのWebサイトの表示をPCで確認出来るシミュレーターです。Air製で無料で使えます。まだ使い始めたばかりなんですが起動も軽く、ユーザーエージェントもそのデバイスごとに設定してくれてるみたいです。 シミュレーター（エミュレーター？よくわからｎ）はいくつかありますが、選択肢の一つとして。WinでもMacでもOKです。完璧ではないですけど、今までで一番良かった気がしました。もともと優れたシミュレーターはまだ無い気がしますしね・・・あるのかな？ｗ 動画あったので貼っておきました。iPhone4は勿論、Plam PreやBlackBerry、HTCなど4種のデバイスを同時に確認出来ます。ローカル上のHTMLも動作確認出来ますよ。Airアプリなので動作にはAdobeAirが必要です。 4つ同時に起動可能 日本なら、基本的にiPhoneとAndroidだけあれば
最近よく使ってる、Web制作に役立つWebサービス的なやつ
少し前に聞いてくれた方がいたのでついで にシェアしてみます。個人的に最近よく好ん で使っている、Web制作に役立つWebサー ビスみたいなものをご紹介。全部既出で 珍しいものは無いんですけど、一覧にする のもたまにはいいかもですね。 というわけで、場合によっては誰得な記事ですけどご了承下さい。僕がここ最近でよく使ってるWebツールを古いのから新しいのまで、順不同でご紹介していきます。 web計。 → 黄金比・白銀比をサクサク計算 計算が面倒な黄金比や白銀比を、数値を入力するだけでサクサク出してくれます。動作も軽くてストレス無しです。 web計。 simplelib → よく使うjQueryコードをパッケージで配布 めっちゃ楽です。jQueryで作りたい機能だけを選択して、1つのjsファイルにパッケージにしてくれますよ。ページスクロールとかタブとか需要の高いものが揃っています。ちょっと機能を
WordPressの管理画面をカスタマイズしたい時に覚えておくと重宝しそうなハックやプラグインいろいろ
商用でも無料で使えるGPLライセンスの 人気CMSなので当然、納品する事も多々 あるかと思います。クライアントさんが管理 する場合と、制作者側で管理する場合があ るかと思います。個人利用ではどうでもいい ですが前者の場合は出来れば管理画面を どうにかしたいところですね。 という訳で、WPの管理画面をどうにかしたい時に覚えておくと探す手間が省けて楽だなぁ、と思ってまとめた記事になります。 左上の「W」のWPロゴが目立つのでこれを変更。 お使いのテーマファイルのfunctions.phpに以下を加えます。 add_action('admin_head', 'my_custom_logo'); function my_custom_logo() { echo ' <style type="text/css"> #header-logo { background-image: url('.get_
WordPressのカスタム投稿（ポスト）タイプを作成するまでの手順リスト
捜し物をしている最中に、ちょっと気になったのでテスト的に記事にしてみます。WordPressに新たに追加されたカスタム投稿タイプですが、多少なりにカスタマイズ経験が無いとハードルも低くはない印象なので手っ取り早く作成出来る用にリスト化します。 便利なのにさほど深く浸透していない印象のカスタム投稿タイプ（カスタムポストタイプ）やカスタムタクソノミー（タグに親子関係を持たせる的な機能）とかいろいろと不可解なキーワードで混乱してる方も多いような気がします。 個人的には理解の前にとりあえず触ってみるのもひとつの手だと思いますので、まずは気軽に追加してみてからどういったものか調べればいいかなと。（賛否両論あるでしょうけど僕はとりあえず触って失敗して学びたい人なので カスタム投稿タイプってなんだろう カスタム投稿タイプとは、WordPressにデフォルトである「投稿」という機能とは別の「投稿」機能を加
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
猫の画像をダミー画像として使える・「{placekitten}」
