Howtoサイトのnanapi、Facebook連携とHTML5でモダンリニューアル : けんすう日記
はじめに ○○のやり方、みたいな記事を集めるnanapiというサイトをやっているのですが、このサイトのリニューアルを行いました。3回目のバージョンアップなので、ver3.0と呼んでいたりします。 オシャレキッズである株式会社ロケットスタートのメンバーは、モダンさを追求したいという欲求が大きくあり、今回はそのモダンな感じが前面にでた、モダンリニューアルといえる内容になっています。 今回はどのあたりがモダンなのかを詳しく説明したいと思います。 モダンその1：Facebook連携を中心にしたリニューアル まだ検索からの流入が多い日本のWebサイトですが、海外だとソーシャルサイト、特にFacebookからの流入が増えてきています。 簡単に言うと友だちから紹介されたコンテンツって気になるよねってことだと思います。 そこで、モダンnanapiでは、インターフェイスをソーシャルに振り切ろうと考えてリニュ
iPhoneアプリを作ってみよう（Xcode4編）第１回：じゃんけんゲーム - もとまか日記Ｚ
以前から気になってたことですが、以下のエントリについて。 iPhoneアプリを作ってみよう：目次エントリー - もとまか日記 もう２年以上も前の記事なので、内容的に古くなってしまって、所々で最新の内容とは異なる動きをしてるんだろうな、と思ってました。とはいえ、随時対応していくのはなかなかシンドイ、というか実質無理です。なのでずっと放置してたんですが、先日公開されたXcode4でUI等が大きく様変わりしたこともあり、この機会に最新の内容に対応した記事を用意していこうかな、と考えました。 てことで、第１回目はやっぱり「じゃんけんゲーム」です。今回は今後のことも踏まえて試してみたいこともあるので、構成を以前とは変えて、１記事で全内容としているため少々重いかもしれません。ご了承くださいm(_ _)m プロローグ 今回の題材「じゃんけんゲーム」のイメージは以下です。 難しい部分は一切なく、その仕組み
Dreamweaver から Coda に乗り換えて、最初に行った３つのこと。 | Alternativa
最近、Dreamweaver から Coda に乗り換えました。 そこで、まず一番最初に行った設定などを３つ、ご紹介。 1. タブのインデント操作を Dreamweaver の挙動に変更 Coda のエディタを初めて触ったときの違和感が、タブのインデントでした。 Dreamweaver では複数行選択して、Tab キーでインデント、Shift+Tab でインデント解除ができます。 それが Coda だと複数行選択して、Tab キーを押しても中身が消えちゃう…！ これじゃちょっとな〜と。 コードの構造を体感として把握するのと、可読性を保持するためにも けっこう使っていたので、当たり前の機能とすら思っていたところです。 じゃあどうやって Dreamweaver と同じような挙動にするか。 そこで、このプラグイン。 tabsterforcoda タブのインデント操作を Dreamwe
ベジェ曲線が慣れてきた人の為のillustratorの使い方 - kojika17
ベジェ曲線が慣れてきたけど、「アンカーが多い」「時間がかかる」。 春なので、そんな人の為の記事を書いてみました。 ベジェ曲線の基本 ベジェ曲線の基本は、@WebDesignRecipeさんが分かりやすい記事を書いて下さっています。 おさらいで読んでおいた方がいいかもしれません。 Illustrator（Photoshop） のペンツールできれいなパス、ベジェ曲線を描くためのコツ（私流） ハンドルとアンカーと曲線の関係 一般的に、アンカーをなるべく減らせば、いい曲線ができると言われています。 しかし私は、ハンドルをうまく扱えることで、いい曲線ができると思っています。 不要に思えるところでもアンカーは必要ですし、減らしすぎはよくありません。 円を３つ書いてみました。 次のアンカーとハンドルは以下のようになっています。 アンカーが2点でもハンドルを調整するれば、円を描くことができます。 ただし正
CSS属性フォーマット Version 0.2 – cyano
CSS属性フォーマット Version 0.2 をリリースしました。この拡張機能はCSSのセレクタ内の属性を指定した順番にフォーマットしてくれるものです。Version 0.2では属性を整列する順番を設定するダイアログを付けました。 CSS属性フォーマット Version 0.2をリリースしました。この拡張機能を使うとバラバラになりがちなCSSの属性を、位置を指定するもの→ボーダーを指定するもの→・・・といった具合にに並び替えることが出来ます。この拡張機能はDreamweaver 4以降で動きます（MX2004でしか検証してませんが…）。インストール方法は上のリンクからCSS_AttrFormat020.mxpをダウンロードしてダブルクリックするとExtensionManagerが立ち上がり、自動的にインストールされます。 この拡張機能はCSSのセレクタ内の属性を指定した順番にフォーマット
著作権についてとりあえず覚えとけって話
先日ネタ帳の @yamada_nt と著作権についてツイッターで話してたらまとめてくれと言われましたので、著作権絡みで覚えといた方が良さそうな話をずらずらっとあげてみました。 法律家ではありませんのであまり細かいことは書いてません。ちゃんと説明してるページのリンクを付けてますので、ざっと見て必要そうなのがあればリンク先をご覧ください。 あと法律の解釈については全部個人的見解ですのでなーんも保証しません、てことでどーぞ。 著作権とは 知的財産権の一つです。特許権などの産業財産権と異なり申請や登録など手続きを行わなくても、著作物が創られた時点で自動的に付与されます。 産業財産権等は，権利を取得するために「申請」「登録」などの手続きが必要ですが，著作権は，こうした手続きを一切必要とせず，著作物が創られた時点で「自動的」に付与するのが，国際的なルールとされています（権利取得のための「登録制度」など
IA Wiki
概要 IA wikiとは、株式会社モフが運営する、情報設計（Information Architecture）に関する体系的なアプローチを試みるためのWikiサイトです。 現在、IA wikiは、新しいバージョンに移行作業中です。新しいIA wikiは、システムと内容を新たにし、順次コンテンツを拡充しております。 材料と道具 大工にとっての建築の材料「建材」は、木材やコンクリや漆喰などであるが、情報設計における材料は何か？もちろん「情報」ということになる。ところで、大工は建材の種類や用い方、特性や性質を熟知しているが、われわれ情報設計を担う者は「情報」という材料をキチンとわかっているのか？そこかしこに存在するこの「情報」とは、いったいなんなのか？特性、性質を理解できているか？ 一方で、大工にとっての「道具」とはカンナ、カナヅチ、ノコギリ、クギ、メジャーあたりが挙げられる。では、われわれ情報
サイト設計をする時に覚えておきたいポストタイプの特徴などいろいろ
WordPress で Webサイトを構築する時に、設計の段階で知っておきたい投稿のタイプ（ポストタイプ）について、その特徴などをまとめてみました。とても長い記事になってしまい、うまくまとめられなかったかもしれません ... WordPress ... 奥が深いんだもん ... Webサイトを作るぞーってなってから、アップロードして公開するまでには、本当にたくさんの色んな工程がありますよね。まず発信したい情報があって、誰に見てもらいたいとか考えて、設計してデザインして、コーディングして … 。 Webサイトを作るとき、いきなりデザインやらコーディングから始めるってことはありませんよね。今回は実際にデザインを始める前の段階、サイトの設計やワイヤーフレーム作りをする段階のお話。WordPress で Webサイトを作る時に、設計の段階で知っておくといいかなーと思う、ポストタイプ（’post_t
HTML5 Grayscale Image Hover - Web Designer Wall
Once upon a time, grayscale image has to be manually converted in order to be displayed on the web. Now with HTML5 canvas, images can be manipulated into grayscale without having to use image editing software. I’ve put together a demo to show you how to use HTML5 & jQuery to dynamically clone color images into grayscale (see demo). Credits: thanks to Darcy Clarke (my Themify‘s partner) for the jQu
複数バージョンのFirefoxを共存させる方法
複数バージョンのFirefoxを共存させる方法を紹介します。 以下、共存させるための手順を紹介します。注意事項は次の通りです。 １項のバックアップは必ず行ってください 作業の途中で新しくインストールしたFirefox起動しないでください それでも起動させてしまった場合は、６項に進んでください（１項の作業を行なっている必要があります） ここではFirefox3とFirefox4で説明していますが、最新版のFirefoxでも可能です。2014年現在、Firefox28と29で共存できることを確認しています。 １．Firefox3のプロファイルのバックアップ 作業中に Firefox4をうっかり起動してしまうと、Firefox3のプロファイル（=ブラウザのオプション設定やアドオンなどが保存されているフォルダ）が、Firefox4のプロファイルで上書きされてしまいます。上書きされてしまうと、Fir
生活をもっと便利に・楽しくしてくれる無料Webサービスいろいろ | Webクリエイターボックス
2017年6月30日 便利ツール 「こんな事がネットでできると便利なのになあ」と思った事はありませんか？生活に「便利」「楽しみ」をくれるサービスが無料であれば嬉しいですよね！ということで、今回はWebに詳しくない人でも簡単にはじめられるWebサービスを紹介します。中には会員登録も不要なものも！今直ぐ試してみてください！ ↑私が10年以上利用している会計ソフト！ ファイルシェア Sendoid Sendoid 会員登録不要のファイル送信サービス。ファイルをアップロード後にURLが生成されます。パスワード設定可。おすすめです！ イベントスケジュール ATND（アテンド） ATND（アテンド） イベント・カンファレンス・勉強会の告知や参加者管理が簡単にできるサービス。イベントの詳細を入力したり、参加予定者がコメントしあったりできます。Twitter、Google、Yahoo、Mixiなどでログイ
[CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー
IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。 CSS3 dropdown menu デモページ [ad#ad-2] CSS3非対応のIE6, 7ではCSS3の角丸などは適用されてませんが、ドロップダウンとしての機能は損なわれずに実装されています。 デモページ：IE6での表示 下記は各ポイントを意訳したものです。 HTML HTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。 <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphi
Firefox 4をUSBでも持ち運べる『Firefox 4 Portable』 | ライフハッカー・ジャパン
モバイルバッテリーとは呼べない。「ほぼポタ電」なコレ1台で有事の時もアウトドアも大活躍!【AmazonスマイルSALE】
float解除の決定版。clearfixを考えたら、進化した。
現在この中でclearfixでよく使用されているプロパティは display:inline-block; height:1%(min-height:1%) zoom:1; でも良く考えたら、全て微妙です。 zoom:1はIEの独自仕様ですし、heightを使用する場合は、IE6,7に対応させるために2つのプロパティが必要です。 display:inline-blockもボックスの要素を変形させることになります。 hasLayoutのスイッチを見た時に、一番理に適ったプロパティはwidthかなと思いました。 子要素を囲む要素として、divやulなどデフォルトCSSがdisplay:blockのプロパティのものが多く、display:blockのプロパティの場合、width:100%で問題ないと思ったからです。 現在のブラウザ状況に適したclearfix 上記を踏まえ見直したclearfixが
イラストやWeb制作に使えるフリー素材を紹介 | 9search
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
アイデアひとつで何かを実現するサイト！ READYFOR? をリリースしました！
READYFOR? というサイトをリリースしました！ みなさん、お久しぶりです！元気ですか？僕は元気です＞＜ 最近、 READYFOR? という日本初のクラウドファンディングサービスをリリースしました！ ですので、今日はそのサービスの紹介と、新しい資金集めの形である「クラウドファンディング」というものを紹介したいと思います！ クラウドファンディングって何？ クラウドファンディングとは、簡単にいうと ウェブ版、「マネーの虎」 のような仕組みです！ つまり、何か「やりたいこと」がある人（実行者）がそのアイデアを披露して、それに賛同した人（支援者）に必要なお金を支援して貰うという仕組み、それをウェブや SNS と連携してやっちゃおうじゃないか！というのがクラウドファンディングサービスです。 クラウドファンディングを使うと、誰でも「こういうモノを作りたい！」というアイデアさえあれば、それを世の中に
スマートフォンサイトの作成術 - 大川洋一
The document discusses various techniques for developing mobile web applications, including: 1. Using viewport meta tags to control layout on different screen sizes. 2. Storing cached content in Web Storage instead of cookies for better performance on mobile. 3. Loading images lazily via Ajax to improve perceived performance. 4. Detecting device orientation changes and resizing content appropriate
ウェブデザインのマンネリ化から抜け出したい人のためのリンク集
ウェブサイトでよく使用されるエレメントやデザインのアイデアをコレクションしている、インスピレーションを与えるサイトを紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
not found
http://japan.internet.com/allnet/20110404/4.html
スケジュール調整ツール『トントン』
ネットプリント
商用利用も無料、素朴なペンシルタッチのカラフルなアイコン素材 -177ICONS
サイトの見せ方をひと工夫するjQueryプラグイン
[Webデザイン]iPhone スマートフォンサイトのデザインのまとめ | CSS Lecture