レスポンシブWebデザインに対応した「jquery.heightLine.js」
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
これからフリーランスになる人へ
これからフリーランスになる人へ 私の経験からこれからWeb制作の受託でフリーランスになる人へのアドバイスを書いてみたいと思います。あくまで私の経験からですので人により参考になること、ならないことがあると思います。 ちなみに、私は4年ほどフリーランスをしてから株式会社まぼろしに合流しているので今は完全なフリーランスではありません。(執筆やセミナーは個人事業として受託しています。) いつフリーランスになるのがいいのか? やる気があるならいつなってもいいと思います。むしろなりたいと思った時がなり時です。慎重に準備するのも良いのですが、やった事がないことに向けて準備するというのは結構非効率です。 向いてなかったら就職する いざフリーランスになってみてうまくいかなかったら、すぐ就職しちゃえばいいです。フリーランスになることをあまり特別視せずに、軽い気持ちでやればいいと思います。 運転資金 Web制作
jQuery基礎文法最速マスター[to-R]
jQuery基礎文法最速マスター はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> jQueryの記述場所 基本的にはscript要素内の次の箇所に記述していきます。 <script type="text/javascript"> $(function(){ /*ここにjQueryを記述*/ }) </script> 上のコードは$(document).ready()のショートカットなので、次のように書いても大丈夫です。 <script type="text/javascri
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
Firebugで始めるCSSデバッグ
Firebugで始めるCSSデバッグ FirebugはWeb制作をアシストしてくれるFirefoxの拡張機能(アドオン)です。CSSデバッグに関してはWeb Developerよりこちらを使っている人のほうが多いと思います。個人的にもFirebugなしでCSSは書きたくないと思うぐらい重宝しています。 インストール Firefoxで配布サイトにアクセスして「Firefoxへの追加」をクリックします。 インストール画面が表示されます。画面下部に『インストール(5)』といったグレーのボタンが表示されますが、すこし待つと『今すぐインストール』に変わります。変わりましたらボタンをクリックしてインストールを開始してください。 インストールが終了したらFirefoxの再起動が求められるので、Firefoxを再起動してください。 Firebugの使い方 Firebugをインストールするとブラウザの右下に
【Adobe Spry TIPS】別ドメインの内容を読み取る
【Adobe Spry TIPS】別ドメインの内容を読み取る 【Adobe Spry TIPS】ＲＳＳを取得して表示する。の補足。 Ajaxではブラウザのセキリュティ上、別ドメインの内容を取得することはできません。 それではRSSデータを十分に活用できませんので、別ドメインのRSSを読み取る方法としてcgiやphpなどでサーバーサイドで読み込みの処理をかます方法があります。 phpを利用して外部のドメインのRSS（twitterのRSS)を取得・表示する方法を解説します。 以下のような内容のurl_proxy.phpを作成します。 <?php $url = "http://twitter.com/statuses/user_timeline/5396752.rss"; $xml = file_get_contents($url); header("Content-type: applica
【Adobe Spry TIPS】ＲＳＳを取得して表示する。
【Adobe Spry TIPS】ＲＳＳを取得して表示する。 Spryでもっとも使い勝手がよいと思うのは、RSSを表示する機能です。 正確にはSpry.Data.XMLDataSetを利用してXMLファイルを取得して表示するのですが、もっとも普及しているXMLであるRSSフィードを取得し表示してみます。 ひとまずは、Sparyの簡単さを味わってもらいたいです。 head要素内などで以下の2つのファイルを読み込みます。 ファイルはそれぞれダウンロードしたSpry本体のincludesディレクトリにあります。 <script type="text/javascript" src="./includes/xpath.js"></script> <script type="text/javascript" src="./includes/SpryData.js"></script> xpath.j
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追
アルファ画像を扱うalphafilter.jsライブラリ[to-R]
アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
