今年（2014年）で見かけて気になったものやダウンロードしたデザインUIキットのまとめです。 そのままデザイン素材として使用するだけでなく、パーツやカラーの組み合わせ方を参考にしたり、どのようなレイヤースタイルで作られているかなど制作時のヒントに繋がる場合もあると思います。 紹介しているUIキットを使用する際は、ライセンス等は各自で再度確認してください。
HTML と Less をセットにした Boilerplate 的なテンプレート「Rin」を作りました。ダウンロードは下のリンクから。 Rin は、以前 html-template という名前で公開していたプロジェクトの改良版ですが、あまりに名前に芸がなさすぎたので、今回の変更に合わせてリポジトリ名も変えました。リーンなテンプレートなので凛です。 Rin は色々な web サイトで使える HTML テンプレートです。jQuery とか、Google Analytics のコードとか、Like ボタン設置に必要な Facebook の JavaScript SDK とか、よく使いまわすコードがあらかじめ書かれてあるので、スムーズにサイトを作り始めることができます。 また、ついつい忘れがちな OGP タグもあらかじめ仕込んであるので、あとは項目を埋めていくだけで OK です。比較的最近登場した
jQuery Tempura は jQuery 依存の簡単な Templating Engine です。 この記事のものや jQeury Plugin Registry などを調べたのですが、 自分の要望を満たすものが無いので、オレオレにしちゃいました。 普通のHTMLファイルの上から、正しいHTMLを維持したまま使える {{foo}} や <%= foo %> といったテンプレ変数を埋め込まなくて良い。AngularJS のようにHTML属性値でテンプレ変数とリンクする。 これは一言で言えば「HTMLがまんま残るのは良いことだ」という利点であるが、「別のテンプレートエンジンと併用が可能」という側面もある。 必要な部分だけを更新する 更新の度に、テンプレ全体を再生成しない。 テンプレ変数が足りなくても空白になったりしない、前の状態が残る。 なので、イベントハンドラを生かし易い。大体のケース
自分の知識の確認の意味を込めて、去年の11月にHTML5用の簡単なテンプレートを作成しました(もともとはCSS Animationの確認のために作った物です)。 もし気に入っていただけたらダウンロードして使っていただけたら幸いです。特に変わった仕様も無く、シンプルで単純なものだったので、多少でも見栄えを良くしようと、先日カスタマイズしておきました。 カスタマイズといっても、jQueryやアイコン・画像・少しのコードを追加しただけなので、そんなに期待しないでね！ちなみにブログ用にカスタマイズしてあります。 あとこのテンプレートの名前は【SimpleBlack】です(名前なんてどうでもいいですよね)！ 今回利用したjQueryなど jQuery Slider2 すごくシンプルで、軽量なスライダーです。あまりにシンプルだったので、本当に動くのか心配だったんですが、きちんと動いてくれました！このテ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
This domain may be for sale!
A personal exploration of design, technology, & rebellion. Design by undesign. Simplicity is polarizing. Simple is hard. Resisting the urge to add more. How to stand out online. The cost of overwhelming uniformity in web design. Back to basics. Going “build–step free” for a handcrafted experience. Portfolio Most recent work. Thanks for visiting, – joshua
こんにちは、ウェブ開発の林です。 スマートフォン向けウェブページを作る際、横幅ぴったりにしたいと思いませんか。 meta viewport というタグを使えば表示サイズを調整することができます。 ただそれを使ったとしても、Android / iPhone は端末により横幅が違うため個別に最適化するのは面倒です。 スマホ端末ごとにコードを分けることなく常に幅ぴったりにする HTML テンプレートを作りました。 こちらを参考に組んでみてはいかがでしょうか。 HTML テンプレートコード（ヒント付き） こちらの HTML コードを丸っとコピペして修正していくと楽だと思います。 追記： ライセンスフリーです。自由に使ってください。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title></title> <!--
綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 2012年01月10日- jQuery UI Bootstrap 綺麗なUIのサイトがサクサク組めるTwitter Bootstrapを使ったjQuery UIテーマ「jQuery UI Bootstrap」 Twitter Bootstrapでデザインがあまり出来ずともTwitter風の綺麗なUIが作れる事で話題を集めましたが、jQuery UIにTwitter BootstrapのCSSでをあてはめた物が出たようです。 Twitter Bootstrapのメリットを享受しつつjQuery UIも使えてしまいます。 サンプルでは１ページにjQuery UIのウィジェットが配置されているのですが、１ページにあることで、削ったり切り貼りすることでデザ
We have already published a post about 60 Extremely Beautiful Mobile Phones GUI PSD Packs and that was greatly appreciated by our readers. Now we have gathered another great collection of Mobile Phones GUI PSD Packs. In this summary, we are gathering a collection of some quality psds. PSD files are the truly amazing and unique resources among all the available resources for designing. PSD files no
Free HTML CSS Templates Latest 200+ Templates are responsive HTML5 mobile-ready CSS layouts with Bootstrap framework. All 588+ CSS templates are absolutely 100% free download for your web design. You can use free templates for your commercial or personal or learning purposes. Please contact us if you have any question. We have a variety of CSS templates in different categories. You may start from
Facebookページを作る時、FacebookページGUIのPSDがあると便利ですよね。提案時、運営方針を決める時、デザイン案を出す時、本当に色んな場面で使う機会はあるかと思います。 でも、基本的にFacebookとかのGUIって英語版しか無いんですよね。 つい先日、英語と日本語のFacebookページ両方を作るプロジェクトに参加させてもらった時に、日本語のGUIテンプレを探してみたのですが無かったのでとりあえず作ってみました。 ウォール画面 タブ画面下地 Donload PSD File ついでに作った感じなので、ライセンスについてはフリーです。お役に立てればプロジェクトで使ってもらうなり、モック作成時に使ってもらうなり、ご自由にどうぞ。一応この記事へのリンク以外で再配布や転売などはお控えください。 そして、一つだけ愚痴を言えば、これ作ってるときにFacebookリニューアルの話をテレ
前回の更新日が見たくない程に時が流れている今日この頃・・・。 ブログを更新するモチベーションが中々上がらなかったんですが、まだ、だらだらでも良いから書いていきたいなと言う気持ちは有るんです。えぇ。 こんだけ更新が滞ってても、Twitterとかで時々ブログ読んでますって言ってもらえたり、最近なら「今日からできる定時で上がるためのWEB制作効率アップ術 | カッシーのWEBる。」で、【HTML5】新規でサイトを作るのに使えそうなの一式。Ver 1 を紹介してもらったりしてうれしい半面、更新して無いなーと、何とも言えない気持ちになったり。 なので、これからはちょろっとでもネタが有れば更新していきたいなーと。 何をモチベーションに更新するかはまだ見つかってないけど＞＜ さて、そんな訳で、今回はスマートフォン向けの新規でサイトを作るのに使えそうな感じの一式です。 【スマートフォン向け】新規でサイトを
HTML5版の新規でサイトを作るのに使えそうな一式です。 今までの新規で使えそうな一式のVer3からも有る程度流用はしていますが、結構いじってます。 今までみたいに、社内のマークアップエンジニアとかそういう人がもう居ない環境なので、何処かで使われていた訳ではありませんが、まー最初の準備って地味に面倒なのでちゃちゃっと始めるには良いんじゃないでしょうか。 【HTML5】新規でサイトを作るのに使えそうな一式。Ver 1をDL（zip：12kb） HTML5版のVer 1を見る 社内のマークアップエンジニアとかって書いたら、これどうなのよ？とか話してた頃がちょっと懐かしくなった。 コーダー飲みとか、CSS Niteなんかで、マークアップエンジニアやコーダーさんと会う機会は結構有るのに、そういう具体的な？話まではしないからなぁ・・・ それはさておき、中身のご説明などを続きにて。 中身のご説明 zi
Free Business Website Template. Minimalistic Stylish Solution February 28th, 2011 The week has started and it is time to present you another freebie from our friends TemplateMonster.com. Today’s post is dedicated to Free Business Website Template that is worked out as a visually attractive ready-made solution for your online project. The final concept of its design features cold dark blue color s
おっと、これは便利かも（後述するが一つ罠があるのだが）。 Free Android App Makerを使えば、無料でさくっとAndroidアプリが作れるらしい。 もちろんプログラミングの知識は不要だ。そのかわり、作れるアプリの種類はすべてテンプレート化されたものだ。 ただし、そのテンプレートの種類が多いのがポイントである。フォトギャラリーやパズル、電子ブックなど、現在のところ、18種類もあるようだ。 さっそく作ってみたが簡単な設定ですぐにできるようだ。ただし、無料で作る場合、最長で6週間もレビューにかかるようだ。この期間を短くするためにはフィーを払わないといけない、という仕組みになっている。なかなかうまいですな。 どちらにしろ、テンプレートの種類が魅力なので、Androidアプリをさくっと作ってみたい人は覗いてみてはいかがだろう。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
