Re : Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！ - to-R

2016/06/29 111 users 游ゴシック Windows Webデザイナー 前置き フォント

ネタ元 ： Windowsで游ゴシックが汚いのは、どう考えてもWebデザイナーが悪い！ ネタ元の記事にはいくつか疑問に思われる点があるので私で調べた内容をまとめておきます。 前置きとしてデバイスフォントの話となり環境によって異なる結果がでる可能性があることを前提に読んでください。 font-familyで「游ゴシック」を指定した場合に採用されるフォント まずは以下の箇所 そのため、font-fam... 続きを読む

Web制作における対応ブラウザの選定方法 - to-R

2015/11/25 201 users テクニカルディレクション ターゲット フロントエンド 視点

「 フロントエンドのテクニカルディレクションに求められるスキル 」で出てきた話題として対応ブラウザの選定方法について掘り下げて解説を行います。 サイトのターゲット・予算・リソース・開発期間などビジネスにより選定方法は異なりますので、あくまで参考程度にしてください。 対応ブラウザを絞る意味 まず最初は「なぜ、対応ブラウザを絞るのか」という視点から。 理想論で言ってしまえばWebサイトを訪れるユーザー... 続きを読む

技術トレンドを追わないという勇気 - to-R

2015/11/20 233 users 勇気 技術トレンド

昨日、「第19回 HTML5+JS 勉強会 【オレオレフロントエンド開発環境 ～際限なき修正を攻略せよ！～/甦れFlasher「swf2js」でswfをリアルタイムでcanvasに出力】」というイベントに参加してきました。 そこで講師の沖さん(@448jp)が、 「技術は目的を達成する手段なので、あまり新しい技術に振り回されてはいけない。」的なことをおしゃっていて、それはそうだなと思いながら私が最... 続きを読む

スマホ用のブラウザ判別を行うための「 jquery.browser.sp.js 」 - to-R

2014/05/19 239 users GitHub scrip script jquery.js

普段スマホ用のブラウザ判別を行うために利用しているjQueyプラグインを公開したのでご紹介します・ ダウンロード / GitHub 利用方法 jQuery本体を読み込んだ後にダウンロードしたjquery.browser.sp.jsを読み込みます。 <script src="jquery.js"></script> <script src="jquery.browser.sp.js"></scrip... 続きを読む

タスクランナーgulp入門 - to-R

2014/05/12 128 users

gulpはGruntと同じように様々なタスクを自動化してくれるツール(タスクランナー)です。 node.jsで開発されており、Sass/CompassやLess、StylusなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 Gruntとできることはほとんど同じですが、Gruntよりタスクの流れがわかりやすく、... 続きを読む

今どきのCSS3グラデーションの指定方法 - to-R

2014/02/05 125 users 今どき CSS3グラデーション 指定方法 TOP 記述

今どきかはわからないですがCSS3グラデーションの指定方法を再考してみました。 対応ブラウザ 現在の正式な記述「linear-gradient (to bottom)」とちょっとレガシーな記述「linear-gradient (top)」、それと古いWebKit用のgradientプロパティの対応状況を調べてみました(緑はベンダープリフィックスが必要)。ひとまず角度指定がどのバージョンから変更され... 続きを読む

jQueryのfind()を利用した高速化 - to-R

2014/01/06 101 users jQuery find foo セレクタ bar

最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。 アンチパターン 最近、見かけたパターンとしては以下の様なものがあります。 $('.foo #bar') このセレクタをfind()を使って高速化する為に以下のように書きなおす。 $('.foo').find('#bar') というもの。これは、ケースによっては高速化が見込... 続きを読む

レスポンシブWebデザインに対応した「jquery.heightLine.js」 - to-R

2013/10/21 176 users jQuery セレクタ heightLine.js 要素 多く

多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応... 続きを読む

Gruntで始めるWeb制作の自動化 - to-R

2013/08/27 268 users Sass JSHint Grunt CSSプリプロセッサー

Grunt.jsとはWeb制作の様々なタスクを自動化してくれるツールです。 node.jsで開発されており、Sass/CompassやLessなどのCSSプリプロセッサーのコンパイルやCSS/JSの結合圧縮、JSHintによるバリデーションなど様々なタスクを自動で行ってくれます。 インストール まずはnode.jsをインストールします。公式サイトでインストーラーが配布されていますので簡単にインスト... 続きを読む

これからフリーランスになる人へ - to-R

2013/07/09 138 users フリーランス 受託 執筆 株式会社まぼろし アドバイス

私の経験からこれからWeb制作の受託でフリーランスになる人へのアドバイスを書いてみたいと思います。あくまで私の経験からですので人により参考になること、ならないことがあると思います。 ちなみに、私は4年ほどフリーランスをしてから株式会社まぼろしに合流しているので今は完全なフリーランスではありません。(執筆やセミナーは個人事業として受託しています。) いつフリーランスになるのがいいのか? やる気がある... 続きを読む

CSS3で実現するアローアイコン - to-R

2013/06/25 310 users Arrow CSS3 かんじ 矢印 class属性

スマートフォンなどでリンク領域を示すことなどで使われることが多いアローアイコン。これをCSS3を使って表現する方法を紹介します。 ちなみにアローアイコンとはこんなかんじのリストの右にある矢印。(アローアイコンの正式名称とかあるのかしら) まず、HTMLは次のようにします。今回は便宜的にアローアイコンを付けるa要素にclass属性「arrow」を付加しています。 <ul> <li><a href="... 続きを読む

Google Chromeでスマホサイト制作 - to-R

2013/06/13 116 users Twitter Scre Google Chrome 歯車

@ichigamiさんからTwitterで「Chrome の開発者ツール、下でなくて右に表示させることができるの知らんかったー」とコメントを貰ったので、普段わたしがどんな感じでスマホサイト制作をしているかご紹介します。 基本的には開発者ツールは右に表示。これは開発者ツールの左下のアイコンを長押しで設定できます。 他にも右下の歯車の設定から、「Device metrics」にチェックを入れ「Scre... 続きを読む

PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」[to-R]

2012/04/19 450 users ライブラリ Check Tweet URL スマートフォン

PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」 Check Tweet PCサイトとスマートフォンサイトを切り替える「Pc2Sp.js」を作成したので公開しておきます。 このライブラリを利用すると スマートフォンでPCサイトにアクセスした場合、指定したスマートフォン用のURLに転送されます。 PCでスマートフォンサイトにアクセスした場合、指定したPC用のURLに転送されます。 ス... 続きを読む

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ[to-R]

2012/03/13 816 users iPhone コーディング パク Android エントリー

AndroidやiPhoneのHTML,CSS,JavaScriptのバグまとめ Check このエントリーをはてなブックマークに追加 Tweet AndroidやiPhoneなどのスマートフォンではHTML,CSS,JavaScriptにバグが多くてコーディングが大変になります。そこでバグを紹介しているサイト、記事をまとめてみました。(中にはバグではなく仕様なものもあるかもしれません) 随時追加... 続きを読む

スマホサイト案件の見積もりについて[to-R]

2012/02/09 246 users 単価 Check Tweet 見積り Android案件

スマホサイト案件の見積もりについて Check Tweet 「Android案件の見積り」や「スマホ案件の見積もりについて」を受けて、アプリではなくHTML+CSSでつくるスマホサイト制作の見積もりではまりやすいポイントをまとめています。 HTML+CSS構築ではPCの0.７倍くらいの単価 スマホサイトはPCより小さいのでHTML+CSSの構築コストも安くみます。ただ、CSS3で作ったほうが良いと... 続きを読む

続：Androidブラウザでviewportのwidth指定[to-R]

2012/01/06 161 users viewport BIND functio window 端末

続：Androidブラウザでviewportのwidth指定 Check Tweet １年ほど前にAndroidブラウザでviewportのwidth指定という記事を書いたのですが、１年間いろんな端末や状況に対応しているうちに今は結構違うスクリプトを利用しています。 var portraitWidth,landscapeWidth; $(window).bind("resize", functio... 続きを読む

スマートフォンサイトをデザインする上で知っておくべき10のTIPS[to-R]

2011/06/16 1478 users Tips dpi iPhone Android 距離

スマートフォンサイトをデザインする上で知っておくべき10のTIPS Check Tweet iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCで... 続きを読む

「Web Intents」でTwitterの機能をサイトに埋め込む[to-R]

2011/04/19 104 users Twitter Facebook Check Tweet

「Web Intents」でTwitterの機能をサイトに埋め込む Check Tweet 先日、AmazonがTwitterやFacebookによるシェア機能に対したので、どうやって実装しているかを見ているとTwitterは「Web Intents」という機能を利用して実装していました。 ノーチェックだったのですがWeb Intentsは4月1日に公開された機能らしくすごく便利です。今までサイト... 続きを読む

14のjQueryベストプラクティス[to-R]

2010/09/13 545 users

原文:14 Helpful jQuery Tricks, Notes, and Best Practices 良かったので翻訳してみました。かなりの意訳で、上手に訳せてない箇所も多いので詳しく原文を参照してください。 1.メソッドはjQueryオブジェクトを返す ほとんどのメソッドがjQueryオブジェクトを返すのが重要です。 これにより次のようなメソッドチェーンが可能になっています。 $some... 続きを読む

web制作の現場で使うjQueryデザイン入門が激しくお勧めな件*ホームページを作る人のネタ帳

2010/02/14 422 users jQueryデザイン入門 Web制作 ネタ帳 現場 作者

『web制作の現場で使う jQueryデザイン入門』 jQueryを、プログラムとしてとらえるのではなく、デザインとしてとらえて解説している一冊。 つまりデザイナー向けの攻略本となっている。個人的に超お勧めの内容だったのでご紹介。 この作者は、西畑氏です。 何度か私のブログでもjQueryの記事かいてるのですが、そのときに色々教えてくれたto-Rのあの人です。 2010年2月15日発売予定で、書店... 続きを読む

jQuery基礎文法最速マスター[to-R]

2010/02/02 1281 users jQuery src text API JavaScript

jQuery基礎文法最速マスター HP登録でSEO対策！アクセスアップにコチラ！ 検出率No.1・PC軽快さNo.1のウイルス対策ソフト はやっているようなのでまとめてみたいと思います。 jQueryの読み込み Google AJAX Libraries APIで簡単に読み込めます。 <script type="text/javascript" src="http://ajax.googleapi... 続きを読む

8のjQueryのすごいTIPS[to-R]

2009/03/17 353 users jQuery external funct target 原文

原文：8 awesome JQuery tips and tricks 微妙なTIPSもあるのですが、役に立つのもあるのでご紹介。 target="_blank" のリンクの作成 XHTML 1.0 Strict ではtarget=blank属性が利用できない。そこでjQueryを利用して別ウィンドウを開く方法を紹介しよう。 $('a[@rel$='external']').click(funct... 続きを読む

jQueryを良くする25のTIPS[to-R]

2008/12/18 752 users jQuery Tips

ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi... 続きを読む

jQueryのコードを良くする5つのTIPS[to-R]

2008/11/18 246 users jQuery attr Selec selector Tips

5 Tips for Better jQuery CodeでjQueryのコードを良くする5つのTIPSが紹介されています。 DOM中にデータを保存できるdataメソッドを使おう $('selector').attr('alt', 'this is the data that I am storing'); // then later getting that data with $('selec... 続きを読む

WEB製作者の為のSEOチートシート[to-R]SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました

2008/05/02 999 users SEOmoz レンタルサーバー title要素 HTML要素

WEB製作者の為のSEOチートシート 【PR】初心者でも安心なレンタルサーバー。２６３円から使えます。 【PR】HP登録でSEO対策！アクセスアップにコチラ！ SEOmozで配布されているSEOチートシートが素敵ですので日本語にしてみました。 重要なHTML要素 title要素にキーワードを含みましょう。 h1,h2,h3要素にキーワードを含みましょう。 b要素、strong要素でキーワードを包み... 続きを読む