僕のWEB屋人生で見つけたテクスチャ、パターン系の素材サイト全部 | バンクーバーのうぇぶ屋
もはやタイトルのまんまなんですが。 僕がWEB屋を初めてから、背景やボタンのアクセントに使うようなテクスチャとかパターン素材とか、とにかく沢山見て来た物をメールから、ブックマークから、チャットから、Evernoteから引っ張り出して数ある限りご紹介させて頂きます。 僕の場合は、こういうサイトを見てテクスチャのアイデアを探すことの方が多いですね。 ちなみに数も多いので、devianaartやらeverystockphotoなどの超有名どころは外しています。では、早速見ていきましょう。 Subtle Patterns | Free textures for your next web project 種類はそこまで多くないですが、使いやすい感じのパターン素材ですね。個人的に一押し！ Texture | Premium Pixels 以前の記事でご紹介した、ハイクオリティなPSDがダウンロード出
スマフォサイトでよく見るパーツのコードサンプル集 | 07design.blog
最近スマートフォンサイトの案件が増えてきました。そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。…最近スマートフォンサイトの案件が増えてきました。 そこで、個人的によく使いそうなコードをEvernoteにまとめたりしていたのですが、 まだまだスマフォサイト構築のノウハウ記事も少ないですし、共有しておこうと思います。 すべてのデモ（chromeなどのwebkit系ブラウザまたはスマートフォン実機でご覧ください） download ヘッダーの右にメニュー <h3>ヘッダーの右にメニュー</h3> <!--ヘッダーの右にメニュー--> <header class="header1"> <h1><a href="#"><img src="title.png" alt="SIT
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
多機能且つ、クロスブラウザ対応のカルーセルを実装するjQueryプラグイン・carouFredSel - かちびと.net
使い勝手が凄く良さそうだったので メモ&シェア。クロスブラウザ対応の カルーセルを実装するjQueryプラグ イン・carouFredSelのご紹介です。 シンプルながら縦タイプ、スライド、 lightboxを付加させる事が出来る等 オプションも豊富です。 動きやデザインはシンプルなんですが、色々とカスタマイズ出来る仕様で、クロスブラウザ対応、という感じのカルーセル系jQueryプラグインです。
Home - Slide SJS
We have been working since 2009. We started with two people: a designer and a programmer. Today the company employs almost 20 people who are divided into four teams. Everyone is a master of his craft. There are open vacancies. We use all our experience, knowledge and skills to help you properly implement your plans to make the site a convenient tool - in this we see our mission. In tandem with the
主要メーラーのバグを回避するHTMLメール用テンプレート -Email-Boilerplate
Gmail, Outlook, Yahoo Mail など主要なメールアプリケーションに対応した、HTMLメールの主要なレンダリングの問題を避けるために開発されたテンプレートを紹介します。 合わせて、HTMLメールの作成に役立つポイントをまとめたスライドショーも紹介します。 HTML EMAIL BOILERPLATE Email-Boilerplateとは Email-BoilerplateはHTMLメールを作成する上で、主要となるスタイルをはじめ、各メールアプリケーションのバグを避けるためのものです。 テンプレートは大きく分けて、head箇所とbody箇所があります。head内にはグローバルなスタイルが定義されており、body内にはHTMLのデザインに必要とさせる要素と特定の修正箇所が含まれています。 これらは、そのまま利用してもよし、あなた自身で必要なものを加えたり、削除して使用して
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
CSS Trick: Creating a Body-Border - CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! This article as originally published on February 25, 2008, but is now being completely re-written to be more comprehensive and show modern techniques. Jon Hick’s site Hicksdesign is where I first saw the concept of a “body border.” In this case, it’s a very subtle and lovely effect. Characte
簡単にポップアップを実現するjQueryプラグイン「prettyPopin」 | WEBシステム開発 | HAPPY*TRAP
URL:jQuery popin solution – prettyPopin – by Stephane Caron jQueryプラグイン「prettyPopin」を使うと簡単にポップアップが実装できます。 サンプルはこちら(別ウィンドウで開きます)。 使い方を紹介します。 1. 「jquery.js」と「prettyPoint.js」の読み込み <script type="text/javascript" src="js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.prettyPopin.js" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPopin.css" type=
[jQuery Mobile]役立つコード集とつまづきやすいポイント | コリ
jQuery Mobileを使って、スマートフォン対応ページをはじめて作成する際に役立つコード、つまづきやすいポイントを紹介します。 10 handy jQuery mobile tips and snippets to get you started [ad#ad-2] 下記は各ポイントを意訳したものです。 スマフォ対応ページの基本HTML jQuery Mobileの利用方法 AJAXナビゲーションの停止 リストアイテムの省略を阻止 Media Queriesの利用 プラットフォームの特定 フォームを使用する際の注意点 ポップアップ ダイアログの作成 キャンセルとセーブのボタン カラム構造を作る時のポイント スマフォ対応ページの基本HTML まずは、スマートフォン対応ページを作成するための基本となるHTMLです。 HTML <!DOCTYPE html> <html> <head> <
初心者のためのスマートフォンサイトを作るときに見ておきたいサイト｜WEB Drawer -WEB制作に関するメモサイト-
スマートフォンサイトを本格的に作るようになってきたので、いろいろ基本的なことから調べてみました。 自分はコーディングがメインなので、HTML/CSS/JSが主になっています。 制作する前に仕様の確認 スマートフォンの仕様が載っています。一通り目を通すと、製作してる時に「これができない！」などの問題が回避できるかもしれません。 ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド ASCII.jp：サイト制作の前に知りたいiPhone/Androidの仕様｜実践！iPhone＆Androidサイト制作ガイド スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき スマートフォンサイトの制作 – 基礎編 – – ぺーぺーエンジニアのおぼえがき iPhone iPad向けサイトを制作するためのいろ
IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。
IDとclassを使わないで、HTML5とCSS3でコーディングしてみた。 2011-05-02 Webサイトをコーディングする時に、IDとclassを考えるのが面倒臭くなったので、IDとclassを使わないでコーディングしてみました。 シンプルなサイトなら簡単でつまらないので、IDとclassを使っても難しそうなデザインにしています。 今回もJavaScriptは一切、使用していません。 完成したサイト ID, classなしで組んだサイトを見る。 サイトでやってみたHTML5 HTML5では、html, head, bodyタグを完全に省略しても構わないとされています。 省略してもDOMツリー上に存在しているので、 body {background:#f00;} というCSSの記述も認識してくれました。 サイトで使用したCSS, CSS3の簡単なまとめ Child Selector 結
０円の広域負荷分散システムCloudFlareが素晴らしい件 | fladdict
fladdictの非公式プロジェクト（いわゆる裏dicct）に、posemaniacs.com というサービスがある。 絵のデッサン素材を無料配信するサイトだけど、いつのまにやら老舗サイトに。気がついたら1日の転送量が30〜40GBまで膨れ上がっていた。あまりの負荷にホスト元のhetemlさんでアクセス規制、あわや閉鎖の危機の大ピンチ。わりと本気で、Pixivとか星海社とかマール社にサービス譲渡とかしようか悩んだ今日この頃でした。 そんな折、@ku_suke さんのご了解で導入してみた、CloudFlareというサービスが、全ての危機を救ってくれた。マジ多謝です。 どういうサービス？ CloudFlareはCDN（広域負荷分散システム）。世界5カ所にデータセンターを有し、データをキャッシュして各地に配信するこで負荷分散してくれる。いわゆるAkamaiの同類だけど、ものすごい特徴が１つある。
2011年版！絶対にインストールしたいWordPressプラグイン45個 | Vanilla Rock
このブログでNo,1のアクセス数を誇っている『絶対にインストールしたいWordPressプラグイン30個！』の記事ですが、今でも凄いアクセスを頂いています。 そして、そのアクセスを見るたびに思うのです。申し訳ない…と。 ブログを移転したり色々やっていたので正確な日にちは判らないですが、あの記事を書いたのはもう一年以上前だった気がします。今ではもう使ってないプラグインやもっと良いものが沢山あるんです。 というわけで、2011年にもなったことですし2011年版のオススメWordPressプラグインを一挙にご紹介したいと思います！その数も増えて何と30個から45個へグレードアップ！記事もなるべく読みやすくしたつもりです。 どれもこれもWordPressユーザーならかなりオススメのものですので参考にして頂ければ幸いです！ それでは、少し長いので「続きから」どうぞ～！ WordPress
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ:phpspot開発日誌
スマフォサイト作りの前に知っておくべきデザインギャラリー等リソースまとめ。 「スマートフォン向けサイトの作り方エントリのまとめ」にてスマフォ用サイト作りの基本はまとめましたが、実際にデザインする際の参考になりそうなギャラリーサイトやブログエントリをまとめてみました。 インタフェースの研究ということで、サイトデザインのみではなくアプリのデザインギャラリーも紹介。 ギャラリーサイト CSS iPhone 様々な海外ポータルやデザインサイトのiPhone向けサイトをサムネイル付きで紹介。 どのサイトもよくデザインされており、非常に参考にできる部分が多そうです。 iOSpiration iPhone Web Design Inspirations - iPhone and iPad Design Inspiration iPhone/iPadサイトやiPhone/iPadアプリ・ゲームのデザインギ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スタイルシート［CSS］/CSSの基本/ID名とクラス名 - TAG index
IBM Developer
http://www.css-lecture.com/log/css3/css3-gradient.html
Webディレクターズマニュアル
http://e0166nt.com/blog-entry-872.html
