これからフリーランスになる人へ
これからフリーランスになる人へ 私の経験からこれからWeb制作の受託でフリーランスになる人へのアドバイスを書いてみたいと思います。あくまで私の経験からですので人により参考になること、ならないことがあると思います。 ちなみに、私は4年ほどフリーランスをしてから株式会社まぼろしに合流しているので今は完全なフリーランスではありません。(執筆やセミナーは個人事業として受託しています。) いつフリーランスになるのがいいのか? やる気があるならいつなってもいいと思います。むしろなりたいと思った時がなり時です。慎重に準備するのも良いのですが、やった事がないことに向けて準備するというのは結構非効率です。 向いてなかったら就職する いざフリーランスになってみてうまくいかなかったら、すぐ就職しちゃえばいいです。フリーランスになることをあまり特別視せずに、軽い気持ちでやればいいと思います。 運転資金 Web制作
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ
Android4系でoverflow: hiddenとposition: fixedで位置がおかしくなるバグ 表題のとおりですが、少しわかりにくいので詳しく説明します。 このバグはAndroid4.0とAndroid4.1のブラウザで発生を確認しました。ChromeやiPhoneのMobile Safariでは発生しません。 ページ内にposition: fixedした要素(A要素)が存在し、別の要素(B要素)にoverflow: hiddenを指定しています。B要素にはwidth:100%やwidth:autoでウィンドウ幅いっぱいになるように設定しています。そしてB要素の内側にはブラウザ幅を越える要素を配置します。 HTML/CSSはこんな感じ。 <div id="a"></div> <div id="b"><div></div></div> #a{ width:100%; heigh
CSS3で実現するアローアイコン
CSS3で実現するアローアイコン スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#" class="arrow">link</a></li> <li><a href="#">link</a></li> <ul> .arrowには以下のようなCSSを指定します。 li a
jQuery 2.0を利用するために注意すること
jQuery 2.0を利用するために注意すること 4月18日にjQuery 2.0がリリースされました。これまで1.x系でバージョンアップを進めてきたjQueryでは初のメジャーバージョンアップとなります。 jQuery 2.0がjQuery 1.x系と大きく異なるのは、これまでjQueryはIEのバージョンは6以上をサポートしてきましたが、jQuery 2.0ではIE9のバージョンは9以上がサポートとなります。 誤解しないようにして欲しいのはjQuery がIE8以下を切り捨てたわけではないということ。jQuery 1.x系は今後もバージョンアップされていき、jQuery 1.x系はjQuery 2.x系と基本的には同じ機能が実装される予定です。ちなみにjQuery 1.x系の次のバージョンはjQuery 1.10です。 jQuery 1.x系とjQuery 2.x系の使い分け 追記:正
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ
AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) iOS 8.4.1の:hover問題 iOS 8.4.1で:hoverを指定していると1タップでページ遷移できない問題 【STINGER5】AndroidのChromeで＆nbsp;が「・」になってる気がする | ビビビッ を に変更すると直るとのこと。 Mobile Safari 8でposition: fixedした擬似要素が完全に位置が固定されない - Weblog - Hail2u.net Mobile Safari 8でposition:
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
Safariの開発者メニューでスマートフォン開発
Safariの開発者メニューでスマートフォン開発 AndroidやiPhoneのスマートフォンのサイト作成を行う際にSafariの開発者メニューを利用すると便利です。 開発者メニューは環境設定の詳細タブから設定が可能 「メニューバーに"開発"メニューを表示」にチェックを入れることでメニューバーに開発者メニューが追加されます。 開発者メニューではユーザーエージェントの切り替えができるので、ユーザーエージェントで処理を変えている場合もSafariで検証が可能です。 iPhoneやiPod touch、iPadなどだけではなく「その他」から任意のユーザーエージェントも選べます。複雑なユーザーエージェント分岐を行っていなければ「Android」などと入力するだけでAndroid用の処理が実行できます。 また、Webインスペクタを起動することでFirebugに似たデバッグツールが利用できるようになり
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ かなりレアなケースだと思うのですがiPhoneのSafariで特定のzoomとfont-sizeの際に文字サイズが拡大するバグがあります。 次のようなCSSとHTMLの組み合わせ html{ zoom:0.5; } p.case1{ zoom:2; font-size:10px; } p.case2{ font-size:20px; } p.case3{ font-size:21px; } p.case4{ font-size:22px; } <h1>case1</h1> <p class="case1">1あああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ<p> <h1>case2</h1> <p class=
Webデザイナーのためのタイポグラフィと文字組版 by 鷹野 雅弘 [CSS Nite LP11]
Webデザイナーのためのタイポグラフィと文字組版 by 鷹野 雅弘 [CSS Nite LP11] CSS Nite LP11の鷹野さんのセッション「Webデザイナーのためのタイポグラフィと文字組版」のメモ的まとめ。twitterも合わせてチェック！ 画像フォント ベタ組み ツメ組み 和文フォント 基本的に正方形の仮想ボディ内に文字が配置されている。 オーソドックス（仮想ボディーに対して小さ目・文字間が大きく感じる） モダンスタイル（仮想ボディーに対して大き目・文字間を感じない） イラストレーターで文字詰め 自動（フォントの情報から詰める） オプティカル（字面から詰める） その後、手動で詰める MSPゴシックとMSP明朝だけ仮想ボディを持たないポロポーショナルフォント。 欧文フォント プロポーショナル（文字ごとにサイズが違う） 欧文向け(ベースラインに余裕がある) line-height:
本当にクライアントのことを考えた調整術 ムチャぶりには、こう切り返せ![CSS Nite LP11]
本当にクライアントのことを考えた調整術 ムチャぶりには、こう切り返せ![CSS Nite LP11] CSS Nite LP11の最後のセッション「本当にクライアントのことを考えた調整術 ムチャぶりには、こう切り返せ!」のメモ的まとめ。原さんをモデレーターにお題に対して中川さん、守谷さん、東さんが回答するというもの。twitterも合わせてチェック！ 本セッションの効果的な受講方法。見聞を広める、自分にあてはめる。明日から活かす。 第一部：ゲストのムチャぶり体験談 オリエン慣れしていない競合プレでのムチャぶり 7社によるオリエンテーション。 つくりたいものは明確、要件が何も決まっていない。 質問してもクライアントが回答できない。 プレゼン費ももらえない。 降りようと思ったが２社が既に降りていたので、先に「降りないでくださいね」と先方に言われてシブシブ参加。 先方のパワーバランスを考える。
14のjQueryベストプラクティス[to-R]
14のjQueryベストプラクティス 原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しくは原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $someDiv .attr('class', 'someClass') .hide() .html('new stuff'); jQueryオブジェクトを返すのがわかっていれば次のように分割して書くことも出来ます。 var someDiv = $('#someDiv'); someDiv.hide(); 次のように一行で書くことも出来ます。 var someDiv
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」
iPhone/iPadでダブルタップが利用できるjQueryプラグイン「jquery.event.dblTap.js」 iPhone/iPadでダブルタップをJavaScriptで実装するで紹介してたダブルタップの実装方法をjQueryプラグインにしてみました。 利用方法 jQuery本体とjquery.event.dblTap.jsをhead要素などで読み込みます。 <script src="jquery-.min.js"></script> <script src="jquery.event.dblTap.js"></script> 後は「dblTap」をbindするとdblTapイベントが実装できます(クリックにも反応するようにしています)。 $("button").bind("dblTap",function(){ alert("duble tap"); }) デモ 初期設定では5
Googleの検索結果に表示されるパンくずリストがmicrodataとRDFaに対応
Googleの検索結果に表示されるパンくずリストがmicrodataとRDFaに対応 ネタ元:Google、パンくずリストでのURL表示にマークアップを利用可能に | 海外SEO情報ブログ・メルマガ これまでWEBサイト所有者が制御できなかったGoogle の検索結果に表示されるパンくずリストがmicrodataとRDFaで制御が可能になったようです。 パンくずリストは次のように検索結果のURL中に表示されます。 microdataでの記述 HTML5 で策定されているmicrodataは、特定の種類の情報（レビュー、人物、イベントなど）をラベル付けする方法の 1 つです。 <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="http://www.example.com/dresses" ite
jQueryでiPhone/iPadの向きを検出する[to-R]
jQueryでiPhone/iPadの向きを検出する iPhone/iPadで向きの概念が存在し、横向き(landscape)と縦向き(portrait)によって幅が変わるのでデザインやスクリプトを変更することがあります。 そういった場合に利用できるのがメディアクエリーのorientationです。 <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css"> このように記述をすると縦向き(portrait)の場合はportrait.cssを横向き(landscape)の場合はlandscape.cssを読み込むことが出
![jQueryでiPhone/iPadの向きを検出する[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/1788fe5c4e0abeec501baa392c032db6a3514abe/height=288;version=1;width=512/http%3A%2F%2Fblog.webcreativepark.net%2Fimages%2F20100817_01.jpg)
Firebugで始めるCSSデバッグ
Firebugで始めるCSSデバッグ FirebugはWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。CSSデバッグに関してはWeb Developerよりこちらを使っている人のほうが多いと思います。個人的にもFirebugなしでCSSは書きたくないと思うぐらい重宝しています。 インストール Firefoxで配布サイトにアクセスして「Firefoxへの追加」をクリックします。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてインストールを開始してください。 インストールが終了したらFirefoxの再起動が求められるので、Firefoxを再起動してください。 Firebugの使い方 Firebugをインストールするとブラウザの右下に
Web Developerで行うCSSデバッグ
Web Developerで行うCSSデバッグ Web Developerはナトラボさんが公開しているWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。 インストール Firefoxで配布ページにアクセスし「ダウンロード：Webdeveloper for Firefox (399kb)」をクリックすることでインストールが開始されます。 インストール開始時にページ上部に「このサイト(lab.tubonotubo.jp)からはFirefoxにソフトウェアをインストールできない設定になっております。」と表示されますが、右の「許可(A)」ボタンをクリックすることでインストールが可能です。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてイン
MTのコメントスパムをなくす.htaccess
MTのコメントスパムをなくす.htaccess 運営しているサイトのひとつでコメントスパムが急増したので.htaccessによるスパム対策を行いました。 .htaccessに次のような記述を書くとコメントスパムがほとんどなくなります。 「http://blog.webcreativepark.net」を運営しているサイトのドメインに変更してください。 <Files mt-comments.cgi> SetEnvIf Referer "^http://blog.webcreativepark.net" ref order deny,allow deny from all allow from env=ref </Files> リファラーを確認してリファラーがサイトのドメインと異なる場合mt-comments.cgiへのアクセスを弾く仕組みになっています。 .htaccessはmt-comme
iPhone用CSSをメディアクエリで分岐する問題点
iPhone用CSSをメディアクエリで分岐する問題点 これまで1つのHTMLソースでPC用とiPhone用のスタイルシートを切り替えるテクニックとしてCSS3のメディアクエリが用いられることが多かったのですが、iPhone 4の登場によりこのテクニックはバッドノウハウになりつつあります。 追記(2010/07/09) 本エントリーはiPhone 4の発売前に書いたものです。 iPhone 4のSafariに関しては画面サイズが320×480として計算されている為、問題ないようです。 参考：Fonland: iPhone 4 の viewport は iPhone 3G と同じ これまでは次のようなコードでiPhone用にiphone.cssをそれ以外のデバイスにimport.cssを読み込むことが出来ました。 <link media="only screen and (max-device
jQueryにおける:first-childと:firstの違い
jQueryにおける:first-childと:firstの違い jQueryには「:first-child」というセレクタと「:first」というセレクタが存在しており、混同されがちですが異なる意味を持っております。 例えば、次のようなHTMLがあるとします。 <ul> <li>list1-1</li> <li>list1-2</li> <li>list1-3</li> <li>list1-4</li> </ul> <ul> <li>list2-1</li> <li>list2-2</li> <li>list2-3</li> <li>list2-4</li> </ul> :first-childで指定できるのは「<li>list1-1</li>」と「<li>list2-1</li>」です。 $("li:first-child").css("color","red"); サンプル 一方:f
4月26日にApple Storeで無料のjQueryセミナーを行います
4月26日にApple Storeで無料のjQueryセミナーを行います 4月26日にサイバーガーデンbiz主催でApple Storeで無料の『Web制作の現場で使う jQueryデザイン入門』出版記念のjQueryセミナーを行います。 [詳細] 2010年4月26日（月）19:00〜20:30(開場・受付開始は18:30)で事前申し込み等、必要ありませんのでお気軽にお立ち寄りください。（椅子席は96名で先着順になりますので、席に座りたい方はお早めにお越しください。） jQueryってどんな感じ？どんなことが出来るの？というのを短時間で理解できる構成になっております。 jQueryに興味がある方、書籍のご購入を検討されている方、書籍を買ったがまだ手を付けられていない方などは、ぜひ参加をご検討ください。 セミナー終了後には懇親会(4,000円（飲食代実費）が必要、懇親会だけのご参加も可)も
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
