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)が、 「技術は目的を達成する手段なので、あまり新しい技術に振り回されてはいけない。」的なことをおしゃっていて、それはそうだなと思いながら私が最... 続きを読む

フロントエンドのテクニカルディレクションに求められるスキル - to-R

2015/11/11 84 users テクニカルディレクション フロントエンド スキルセット 職域

フロントエンドの多様化が進む中で昨今重要視されているのが「テクニカルディレクション」のスキルセットです。 会社の規模や職域、ビジネスモデルにより求められるスキルセットは異なりますが、中小のWeb制作会社を前提に話をいたします。 ディレクター/フロントエンドエンジニアの作業分担 ケースとしては以下のようなパターンが考えられます。 アサインされたディレクターがテクニカルディレクションを行い、フロントエ... 続きを読む

今どきのCSS3グラデーションの指定方法 (2015年版) - to-R

2015/11/09 72 users 今どき CSS3グラデーション 指定方法 TOP 2015年版

昨年、「今どきのCSS3グラデーションの指定方法」という記事を書いてそこそこアクセスがあるのですが、今年にはいって状況が変わってきたのでアップデートしておきます。 まずは各ブラウザの対応状況。現在の正式な記述「linear-gradient (to bottom)」とちょっとレガシーな記述「linear-gradient (top)」、それと古いWebKit用のgradientプロパティの対応状況... 続きを読む

iOS 8.4.1の:hover問題 - to-R

2015/08/29 79 users opacity hover iOS 8.4.1 Safari

ネタ元：結構緊急リンクが飛ばない iOS 8.4.1からCSS :hoverも１クリックカウントっぽいSafari | WEBスキルアップ君 上記の件、結構やっかいな問題なのでiPhone6+をiOS 8.4.1にアップデートして色々と検証してみました。 どんな現象になるの？ 以下のサンプルで確認できます。 a:hover img{ opacity:0.6; } <a href="http://b... 続きを読む

スマホ用のスワイプギャラリーjQueryプラグイン「jquery.swipeGallery」 - to-R

2014/05/21 58 users jQuery GitHub jQueryプラグイン アレ 画面

スマホで利用できるスワイプギャラリー用のjQueryプラグイン「jquery.swipeGallery」を公開しました。指で画面をスワイプすると画像が切り替わるアレです。 ダウンロード / サンプル(スマホで見てね) / GitHub スワイプ系のギャラリーとしては珍しい無限ループに対応しているプラグインです。 利用方法 jQueryを読み込みその後にjquery.swipeGalleryを読み込... 続きを読む

スマホ用のブラウザ判別を行うための「 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よりタスクの流れがわかりやすく、... 続きを読む

CSSスプライトを生成する「grunt-spritesmith」 - to-R

2014/04/07 98 users Grunt src CSSスプライト コマンド インストール

grunt-spritesmithはCSSスプライトを生成するGruntモジュールです。 Gruntの基本的な使い方は「Gruntで始めるWeb制作の自動化 - to-R」を参照に。 grunt-spritesmithのインストールは以下のコマンドです。 npm install grunt-spritesmith --save-dev Gruntfile.jsの内容は以下のようにします。srcで個... 続きを読む

jQueryで指定されたイベントの定義場所を取得する方法 - to-R

2014/04/03 89 users ＡＤＤ jQuery 要素 コード html上

セミナー時にHTML上のイベントが指定されている要素から、実際にイベントを指定したコードが書かれているJavaScriptファイルや場所を知りたいと質問を受けました。 調べたところ良さそうな方法があったのでシェアしておきます。 ちょっと動画に取ってみたので、動画でご確認ください。 なにをやっているかというと、まず、デベロッパーツールを開き、検証したい要素を選択します。 次に右クリックして「Add ... 続きを読む

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

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

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

Google Chrome 32でスマホのエミュレーションを行う - to-R

2014/01/29 65 users エミュレーション デベロッパーツール Option タブ 上部

Google Chrome 32になってスマホなどのエミュレーションを行う方法がわからなくなっていたのですが、教えてもらったのでメモっときます。 Macなら⌘ + option + i、WindowsならF12でデベロッパーツールを表示。 上部のタブで「Elements」を選択。 右上のアイコンをクリックすると画面下部にウィンドウが表示されます。 右側の「Emulation」タブを選択。 最後に「... 続きを読む

新MacBook ProにインストールしたCUIアプリ - to-R

2014/01/20 88 users Homebrew Git コマンドライ XCode コマンド

新MacBook ProにインストールしたMacアプリ24に続いて、インストールしたCUIアプリもご紹介。 Homebrew Mac用のパッケージ管理ソフト「Homebrew」。ターミナルから以下のコマンドを入力するとインストールできます。Gitがインストールされてないとインストールできないと思うので、事前にXcodeをインストールしておきましょう。（Homebrewのインストール中にコマンドライ... 続きを読む

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

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

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

jQueryプラグインのメソッドパターン - to-R

2013/12/25 96 users jQueryプラグイン メソッド リレー形式 エントリー 企画

このエントリーはjQuery Advent Calendar 2013の 最終目のエントリーです。(Advent Calendarとは様々なテーマを12/1〜12/25までリレー形式でブログなどに執筆する企画です。) 今回はjQueryプラグインのメソッドパターンについて紹介をしたいと思います。 jQueryプラグインのメソッドとはどいうものかというと、まず以下のようなプラグインがあったとします。... 続きを読む

レスポンシブ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デザインに対応... 続きを読む

iOSにおけるviewportの指定方法による細かい違い - to-R

2013/10/11 55 users viewport iPhone iOS width 挙動

iOSではviewportの指定方法が異なると細かいデバイスの挙動が変わってきます。 検証はiPhone(iOS6.1)のみで行っているのでiPadやiOS7ではちょっと違うかも。 まず、以下のような数値によるviewport指定をPCモードとし、 <meta name="viewport" content="width=960px"> 以下のようなdevice-widthによるviewport指... 続きを読む

Compassで書きだすCSSファイルを軽量化する - to-R

2013/09/02 51 users Compass compress CSSファイル 半面 改行

Compassは便利な半面、書きだされるCSSのサイズが非常に大きくなってしまうことがあります。設定を変更することで書きだされるCSSファイルの容量を削減することが可能です。 Step1.圧縮する コンパイル時に圧縮オプションを指定することで改行や空白を取り除いた形で書きだしてくれます。config.rbに以下のコードを追加するだけで圧縮できます。 output_style = :compress... 続きを読む

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をインストールします。公式サイトでインストーラーが配布されていますので簡単にインスト... 続きを読む

ローカルのWebサイトを確認する方法 - to-R

2013/08/06 59 users users Desktop Webサイト Tips 方法

ローカルのWebサイトを作成している際に確認するTIPSをいくつかご紹介します。 解説はMacのみですが、Windowsでも足りないソフトをインストールすればできると思います。 まずは、 たとえば以下のようなディレクトリで作業していてindex.htmlを確認したいとします。 /Users/nishihata/Desktop/htdocs/index.html 普通にやるとブラウザのアドレスバーに... 続きを読む

これからフリーランスになる人へ - 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... 続きを読む

CSS3アニメーションを利用したサンプル[to-R]

2013/04/14 63 users サンプル CSS3アニメーション background 動作

CSS Niteビギナーズ：HTML5+CSS3でCSS3アニメーションを紹介したところ、使いどころがよく分からないとの意見をたくさん頂いたので、サンプルをいくつかご紹介します。 実際の動作はサンプルページから確認できます。 sample1 ボタンにマウスをのせた際にアニメーションして背景色を切り替えます。 /*sample1*/ .sample1 a{ background:#3f8bad; t... 続きを読む