パブリックドメインで配布されている、クロスブラウザ対応を意識したHTML5+css3製のフレームワーク・Gridless
いくつも似たようなのはあるのですが、 複数覚えておいて損は無いのでメモ がてらご紹介・・・クロスブラウザ対応 を意識したHTML5+CSS3フレームワ ーク・Gridlessです。装飾を施さない、 とてもシンプルなものになっています。 Gridlessは、美しいタイポグラフィをクロスブラウザで実現するためのフレームワークです。MediaQueryによって、スマフォにも対応しやすい雛形になっています。 ライセンスは一部のjs（Respond.jsとHTML5 shim）を除いてパブリックドメイン（著作権放棄）で配布されています。 無駄な装飾がないので、1から作るプロジェクトのスターターキットとしても使えそうです。クロスブラウザ対応といっても、完璧ではなく、より差の無い実装となっています。 各テキストのエレメント。 IE6や7にも対応 IETesterによるIE6の表示です。 タブレットやスマ
jQuery Mobile使用時によく使うマークアップで日本語サンプルを作ったので配布します
簡単なものですけど、jQuery Mobile でのマークアップ時によく使うっぽい UIのサンプル作ったので配布します。 簡単なチートシート代わりになるのでは 無いかと思ったのでシェアしてみよう かと。良かったら使ってください。 というのも、JQMの日本語サンプルの配布先を見かけなかったので、なかなかお困りの方もいらっしゃるんじゃないかなと。調べるの面倒ですし、手元にサンプルコードあったほうが何かと便利ですよね。 というわけで、以前マークアップサンプルの記事書いたときに作ったサンプルサイトに手を加えた物を丸ごと配布します。 流石にかなり出てるので今更説明不要かもですけど、ざっくり説明するとWebサイトをスマフォ向けに簡単に出来るjQueryプラグインです。 以下のサンプルで使用しているファイルが丸ごと梱包してあります。 サンプル※別窓 いちおうキャプチャ。 目次 サムネイル付きのサンプルと
【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
lululemonに学ぶオンラインマーケティング | Webクリエイターボックス
2017年7月14日 マーケティング 日本ではあまり知られていないと思われますが、私の住むカナダでは絶大の人気を誇るスポーツウェアブランド「lululemon athletica（通称ルルレモン）」。バンクーバーの街に出てlululemonの服を着ている人を見ない日は一日もないほどの人気っぷりです。そのlululemonがWebを使ってどのようなマーケティングをしているのか見てみました！ ↑私が10年以上利用している会計ソフト！ lululemonってなんだ？ lululemonはカナダ・バンクーバー発祥のヨガを中心としたスポーツウェアのブランド。ここカナダではヨガはただのブームではなく人々の生活に密着したライフスタイルとなっています。私もかれこれ６年くらいヨガをしていますが、どこのヨガスタジオに行ってもほとんどの人がlululemonを着用しています。また、雨が多く肌寒いバンクーバーでは
フリーランスになる準備をしよう！独立前に知っておいてほしいこと。 知らないはリスク
■屋号を決める まずはこれから自分が背負う屋号を決める必要があります。 屋号とは個人で使う会社名みたいなもの。 ●●商店とかも屋号ですね。 屋号を決めるにはいくつか注意点があります。 1.相手に伝わりやすいかどうか 例えば取引先に電話した時など ●●●の（個人名）です。と電話受付の方にお電話しないといけませんが、 覚えにくい、分かりにくい名前だと何度も●●ですか？いえ違います●●ですみたいな やりとりをしてしまいます。 できれば一言で伝わるものがいいでしょう。 僕は独立当時は個人用に取得していた「strive-ex」というのを そのまま屋号に最初使っていたのですが、多くの人が 「strive」や「ex」という単語が聞きなれない、間にハイフンがあるなど 問題が山積みだったため、2年目には「stid」という短いものに変更しました。 ※strive interactive design から短縮
Fireworksの拡張 7選 ｜ 新米WEB家ブログ｜Muracchi.com
世のFireworksユーザーの方はどのように機能拡張して使っているのでしょうか？ Photoshopに比べれば少ないですが、作成・配布、解説・紹介をされている方が確かにいらっしゃいます。 探した中で、僕が実際に使用している7つの拡張の紹介です。 テクスチャを増やす Fireworks texture gallery Fireworksで使えるテクスチャファイル300種類を無料で配布しているWEBサイトです。 単純な縦線や斜線のバリエーションなどから作り込まれたものまで、種類豊富に揃っています。 Fireworksの和風・伝統紋様テクスチャ – ProjectDD Blog 「ProjectDD Blog」さんの記事内でも複数のテクスチャファイルが配布されています。 【テクスチャファイルの使用方法】※Mac版 Fireworks 8の場合 /アプリケーション/Macrome
#cssnitelp14 fireworksで使いたいツール、エクステンションなど13選 | outloger.com
Yoropan blog - Fireworksに入れてみた機能拡張機能拡張いろいろFireworks AutoBackup utility - Adobe Marketplace - Offering Detail自動バックアップツール。adobe謹製Tool Force Software | ForeverSave Lite自動保存ツール自動化のすすめ（Fireworks CS4 コマンドでより効率化！） - EC studio ...(none)Fireworksでマルチアイコンのfavicon.icoを書き出す。｜linker journal ...(none)Fill With Background - Adobe Fireworks Extensions - johndunning.comボタンの文字を消すアレOrange Commands | workflow automat
ハイクオリティなWEBデザイン用Photoshopパーツ５０:phpspot開発日誌
50 Ultra High Quality Free Web Design PSD Files | CreativeFan ハイクオリティなWEBデザイン用Photoshopパーツ５０が紹介されています。 全体のデザインPSDなんかもあったりしますが、こうしたパーツのほうが実は使いやすかったりしそうですね。 こういうPSDを提供してくれる方々に感謝しつつ使わせていただきましょう。 関連エントリ かなりクールなPhotoshop用フリーUIキット-PSDファイル50個 シンプルで汎用に使えるWEBレイアウトのPSDソース「Blackbeard template」 色々使えそうなフリーのPSD素材ファイル３０ ボタンやインフォボックスなどを集めたＵＩパーツのPSD
JavaScriptでFlashみたいなタイムラインアニメーションを作るToolkit「Mashi」:phpspot開発日誌
Mashi - Javascript Timeline Toolkit JavaScriptでFlashみたいなタイムラインアニメーションを作るToolkit「Mashi」 トップページにアクセスするとわかるのですが文字や画像がいい感じにアニメーションします。 ドキュメントも比較的綺麗にまとまっています オーサリングツール等は存在しないため、使い方にはちょっとコツが必要かもしれませんが、iOS端末用に、よし、Javascriptでやろうっていうような時に使えるかもしれません。メジャーになってくればコードを吐いてくれるオーサリングツールなんかも出来るかもしれませんね。 関連エントリ もうFlashは買わなくていいかもしれないデザイナー向けフリーのFlashアニメーション作成ツール「Giotto」
[JS]美しいエフェクトを備えた水平タイプのアコーディオンのスクリプト -zAccordion | コリス
滑らかなスライドのアニメーション、繊細なドロップシャドウ、フェードで表示されるインフォボックスなど、美しいエフェクトを備えたアコーディオンのjQueryのプラグインを紹介します。 zAccordion - A Horizontal Accordion Plugin for jQuery 上記ページのスライドは、跳ね返るバウンスのアニメーションになっています。 [ad#ad-2] zAccordionのデモ デモでは、最小限の機能を備えたものから、最大限に拡張したもの、ちょっと面白いものまでが揃っています。 zAccordion — An Inverted Accordion スライドの重ね順を反転させたちょっと面白いデモ。 zAccordionの実装 HTML アコーディオンの各パネルはリスト要素で実装します。 <ul id="featured"> <li> <image src="/im
初心者Webアプリケーション開発者がチェックすべき情報源2011 - ハニーポッターの部屋
毎年恒例の診断前準備として開発者向けに、「初心者Webアプリケーション開発者がチェックすべき情報源」を集めているので、皆さんにもご紹介。他に追加した方が良い情報源があった場合はご指摘いただけると助かります。 上から重要な順。★がとりあえず読んどけ、の必須。必須のポイントは、短期間で大雑把に網羅的にポイントが整理されているもの。 徳丸本を必須に入れるか迷ったけど、あの厚さは、万人は読めないので、上位ランクだけど必須からははずした。 ★Webサイト構築 安全なウェブサイトの作り方 改訂第5版 http://www.ipa.go.jp/security/vuln/websecurity.html 携帯ウェブサイトの実装方法を追加 セキュリティ実装 チェックリスト（Excel形式、33KB） 安全なSQLの呼び出し方（全40ページ、714KB） ★発注仕様 発注者のためのWebシステム／Webアプ
[JS]テーブルにアニメーションを伴ったページネーション機能を加えるスクリプト -Table Paginator
既存のテーブルにも簡単に組み込める、テーブルに美しいフェードのアニメーションを伴ったページネーション機能を加えるjQueryのプラグインを紹介します。 Table Paginator デモ [ad#ad-2] デモはシンプルに実装されたテーブルの上にある「Click to Pagenate」をクリックすると、長いテーブルがページネーション付きのテーブルに変更されます。 テーブルの下部に配置されたナビゲーションをクリックすると、フェードのアニメーションで指定されたテーブルが表示されます。 美しいグラデショーンを伴ったフェードのアニメーション ※デモで実際のアニメーションをお楽しみください。 Table Paginatorの主な特徴 既存のテーブルにも簡単に実装できます。 美しいインターフェイスを提供します。 インターフェイスはjQuery UIのテーマを継承します。 アニメーションのスピード
グリッドベースのテクスチャが簡単に作成できる全120種類のPhotoshopのパターン素材
商用でも無料で利用できる、最近のウェブデザインの背景にもよく見かけるグリッドベースのテクスチャが簡単に作成できるPhotoshopのパターン素材を紹介します。 120 Free Photoshop Grid Patterns [ad#ad-2] ダウンロードできるPhotoshopのパターンは全部で120種類で、細かいグリッド、荒いグリッド、斜めの金網状のグリッド、クロスステッチのようなグリッドなどさまざまなものが揃っています。
[JS]Flashでもない、HTML5でもない、タイムラインベースの複雑なアニメーションを作成できるスクリプト -Mashi | コリス
ぱっと見た瞬間「Flashだな」と思ってしまったくらいの、Flashで実装したような複雑なアニメーションやムービーを作成できるスクリプトを紹介します。 使用するのはHTML, CSS, JavaScriptで、こういったものにありがちなHTML5, Canvas, CSS3には頼っていません。jQueryなど他のスクリプトにも依存していません。 ※CSS3のエフェクトなどオプションとして利用が可能です。 Mashiの主な特徴 スタンダードなHTML, CSS, JavaScriptでFlashのようなムービー、アニメーションを作成できます。(X)HTMLコンテンツに設置が簡単にできます。 41KB/13KB(CDN+GZip)と非常に軽量で、オブジェクト指向、モジュール式です。 基本的な利用では、追加のプラグインは必要ありません。 IE6をはじめ、すべての主要なブラウザをサポートしています
透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニック:phpspot開発日誌
Color Animate Any Shape with a Knockout PNG | CSS-Tricks 透過PNGで枠だけ作って背景をCSS3アニメーションするという新テクニックが掲載されています。 CSS3の登場でハックの幅は広がりましたが、今後こういうテクニックが色々現れてくると思うと楽しみです。 まずはマリリンをかたどった縁の画像を透過PNGで作ります このデモは必見 あとは背景をCSS3の keyframes, animation を使ってアニメーションさせると、なんとマリリンが７色に変化します。これはすごい！ マリリンはたまったものではありませんが、色々応用の効くテクニックかもしれませんね 関連エントリ CSS3で動くプログレスバー作成サンプル IE9にも対応したCSS3リファレンスサイト「css3files」 超シンプルなマークアップで実現できるCSS3による画像を使
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
新着記事
TechCrunch
新着記事