フロントエンドのテクニカルディレクションに求められるスキル
フロントエンドのテクニカルディレクションに求められるスキル フロントエンドの多様化が進む中で昨今重要視されているのが「テクニカルディレクション」のスキルセットです。 会社の規模や職域、ビジネスモデルにより求められるスキルセットは異なりますが、中小のWeb制作会社を前提に話をいたします。 ディレクター/フロントエンドエンジニアの作業分担 ケースとしては以下のようなパターンが考えられます。 アサインされたディレクターがテクニカルディレクションを行い、フロントエンドエンジニアが実装を行う アサインされたフロントエンドエンジニアがテクニカルディレクションとフロントエンド実装を行う アサインされたSE/テクニカルディレクターがテクニカルディレクションを行い、フロントエンドエンジニアが実装を行う。 個人的には2のケースでアサインされることが一番多いですが、最近の案件では3のケースで1年ほどテクニカルデ
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
[書評]Web制作者のためのGitHubの教科書
[書評]Web制作者のためのGitHubの教科書 Web制作者のためのGitHubの教科書をちょっと前に献本いただきました。 本書は非エンジニア向けに「GitHub」の利用方法が書かれた一冊です。 これからGitやGitHubを覚えたい人や覚えなくてはいけない人には間違いなくお勧めの一冊です。 本書の特徴はすごく敷居をさげ、すごく丁寧に解説されている点です。技術書には珍しくストーリー仕立てになっており、架空のWeb制作会社オクトリンク株式会社のWebデザイナー渋谷さんが先輩デザイナーの白金くんやディレクターの白樹さんに教わりながらGitHubの使い方を覚えていくとストリーになっております。 苦手意識をもつ人が多いGitHubだけに、最初のステップとして本書ぐらいのライトな書籍で使い方を覚えれば躓くことも少ないでしょう。また、本書でGitHubやGitの基礎を理解した後に「Git逆引き入門」
![[書評]Web制作者のためのGitHubの教科書](https://cdn-ak-scissors.b.st-hatena.com/image/square/f5dfe0a9c9d3a255574891943cfff1e9ef4b8b4a/height=288;version=1;width=512/http%3A%2F%2Fimages.amazon.com%2Fimages%2FP%2F4844337009.09._OU09_SCMZZZZZZZ_.jpg)
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)
footerをウィンドウ下部に固定する『footerFixed.js』
footerをウィンドウ下部に固定する『footerFixed.js』 footer部分を画面下部に固定するためのjsライブラリ『footerFixed.js』を作成しました。 フッターをコンテンツの内容量にかかわらずwindow下部に表示させるためのjsライブラリです。 サンプル 設置方法は head要素なのでfooterFixed.jsを読み込みます。 <script type="text/javascript" src="./footerFixed.js"></script> ウィンドウ下部に固定したい要素にid属性「footer」を付けます。 これでその要素をウインドウの下部に表示させることが可能です。 (ウインドウの下部というのがわかりにくいと思うのですが、内容量がウィンドウサイズを超える場合は通常通り、内容量がウィンドウサイズより小さい場合はウィンドウの下部に配置という意味です
メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」
メディアクエリをまとめるGruntタスク「grunt-combine-media-queries」 CSSソース内に散らばったメディアクエリをまとめたいと思って調べたらGruntタスク「grunt-combine-media-queries」に行き当たりました。 CSSソース内に散らばったメディアクエリとはどういうことかというと、レスポンシブWebデザインでPC向けとSP向けのCSSを記述しなくてはいけないときに、以下のようにPC向けとSP向けの記述をなるべく近くに書くことでCSSのメンテナンス性が高まる反面、１つのCSSファイルに同様なメディアクエリが散らばってファイルサイズを増加させてしまいます。 .header{ width:950px; } @media screen and (max-width: 640px) { .header{ width:auto; } } .footer
Compassで書き出すCSSファイルを軽量化する
Compassで書き出すCSSファイルを軽量化する Compassは便利な半面、書き出されるCSSのサイズが非常に大きくなってしまうことがあります。設定を変更することで書き出されるCSSファイルの容量を削減することが可能です。 Step1.圧縮する コンパイル時に圧縮オプションを指定することで改行や空白を取り除いた形で書き出してくれます。config.rbに以下のコードを追加するだけで圧縮してくれます。 output_style = :compressed Step2.無駄なベンダープリフィックスを取り除く(ブラウザ別) CompassのCSS3ミックスインは便利な反面過剰なベンダープリフィックスをつけます。 Sassファイルの冒頭に以下のようなコードを追加することで「-o-」や「-ms-」、「-moz-」といったベンダープリフィックス付のプロパティが書き出されなくなります。Operaは現
CSS3でセレクトボックスをカスタマイズ
CSS3でセレクトボックスをカスタマイズ スマホ向けにセレクトボックスをカスタマイズする必要があったのjQuery Mobieなどが利用している方法でデザインをカスタマイズしました。 セレクトボックスはCSSでのカスタマイズはほとんど出来ないので結構トリッキーな方法です。 サンプル HTMLは次のような感じ。 <select> <option>オプションA</option> <option>オプションB</option> <option>オプションC</option> <option>オプションD</option> <option>オプションE</option> </select> <div>オプションA</div> select要素以外にカスタマイズ用のdivなどを用意しておきます。そしてdivをCSSでセレクトボックスっぽくカスタマイズ。before擬似要素とかafter擬似要素なんか
jQuery版のLightBox「ThickBox」
jQuery版のLightBox「ThickBox」 ThickBoxはLightBoxのjQuery版とも言えるJavaScriptライブラリで、画像をクリックするこのにより拡大画像を表示させることが可能です。 LightBoxがprototype.jsをベースに開発されたjsライブラリであるのに対して、ThickBoxはjQueryをベースに開発されています。 設置方法 配布ページよりjquery.jsとloadingAnimation.gif、thickbox.css、thickbox.jsというファイルをダウンロードし、ThickBoxを利用したいhtmlのhead要素などでそれらのファイルを読み込みます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"
IEなどすべてのブラウザで使えるCSSデバッガー「Firebug Lite」
IEなどすべてのブラウザで使えるCSSデバッガー「Firebug Lite」 FirefoxのアドオンFirebugを利用することで効率的なCSSデバッグが可能になる。ただし、このFirebugはIEなどFirefox以外のブラウザでは利用することが出来ない。しかしFirebugではFirefox以外でも利用できるFirebug Liteが提供されている。 Firebug LiteはIE6以上, Firefox, Opera, Safari そしてGoogle Chromeなどほとんどのブラウザで利用可能です。 オリジナルのFirebugと比較すると機能が限定されているがCSSデバッグには十分利用できるでしょう。 Firebug Liteの利用方法 Firebug Liteはブックマークレットとして提供されています。ブックマークレットとはサイト上で任意のJavaScriptを実行する機能で
ブロックレベル要素の高さを揃える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
Google Sitemapを使いこなす
Google Sitemapを使いこなす 日本版のBetaが公開されたgoogle Sitemap Betaに早速挑戦。 Google Sitemapとは？ googleのサイト検索用のクローラーにxmlで作成したサイトマップの情報を渡して、クローラーがすべてのページを円滑に検索エンジンにインデックスできるようにします。 付加機能としてどのようなキーワドでサイトの上位に来ているか、どのようなキーワドで検索したユーザーがサイトまで訪れているかなどのSEO対策に使える機能もあるので、是非登録しとくべきです。 Google Sitemapを作ってみます。 XML サイトマップのフォーマットは以下のようになります。 <?xml version="1.0" encoding="UTF-8"?> < urlset xmlns="http://www.google.com/schemas/sitemap
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
