デザイン×テクノロジーで新しいサイトを創り続けるLETTERS.INCの制作物から心地よいアニメーションを学んでみるVol.1 – T2
デザイン×テクノロジーで新しいサイトを創り続けるLETTERS.INCの制作物から心地よいアニメーションを学んでみるVol.1 10月 7, 2015 tanamako 読了: 約 2 分 最近様々なサイトで、デザインとテクノロジーの掛け算が素晴らしい『Letters.inc』が制作したサイトが取り上げられている。心地よいアニメーションと綺麗・シンプルでありながらも印象に残るデザインが特徴的だ。平凡な二次元的なデザインやインタラクションではなく、見るものを惹き付ける心地よいアニメーションの裏側はどのように創られているのか一部アニメーションのソースを見ながら学んでみる。 こういう発想があったのかという手紙のアニメーション 今回アニメーションの参考にしたサイトはこちら。 http://amp-music.net/about/howtobuy/ AMP MUSICというチームにミュージシャンが所
ディレクターでもコピペで簡単実装出来るGoogle Analyticsのイベントトラッキング – T2
ディレクターでもコピペで簡単実装出来るGoogle Analyticsのイベントトラッキング 10月 1, 2015 tanamako 読了: 約 3 分 Google Analyticsを使ってサイトやメディアの分析をしている方が多いかと思います。グーグルアナリティクスで、ページのトラッキングだけでなく、ディレクターの要望に応じて『このリンクのイベント数を計測したい』という事があるかと思います。または、エンジニアの力を借りる事なく簡単に計測できるようにしたいという事がある場合に簡単にコピペで取得できる方法をご紹介します。 JS側の設定 // 現在表示されているURLを取得 function getUrl(){ return location.href.replace(/\#.*$/, '').replace(/\?.*$/, ''); } // aタグに付与 $('.js-gaTrack
Web・ホームページ制作の競争優位性は価格(安さ)、スピード、デザイン、技術力のどれになるか – T2
Web・ホームページ制作の競争優位性は価格(安さ)、スピード、デザイン、技術力のどれになるか 10月 1, 2015 tanamako 読了: 約 4 分 Web、ホームページ制作のツール(CMS)が増えて、一般に普及しており安価に、ある程度誰にでも制作を出来るようになってきました。更にクラウドソーシングサービスの成長で、フリーランス等の小さなチームに低単価で仕事を依頼するという流れがここ2年位あると実感しています。この流れはより進んでいくのではないかと思いますが、Web・ホームページ制作の競争優位性はどこになるのか、どこを伸ばすべきでどういう組織形成、受発注の仕組みを作るべきなのか考えてみます。 クラウドソーシングサービスによって価格が低下している？ ランサーズやクラウドワークスという発注者と受注する会社もしくは個人を繋ぐサービスが増えてきていますが、クラウドソーシングする事によって、価
UI・見た目の美しさだけではサービスの競合優位性は担保できず、ビジネスは勝てない – T2
UI・見た目の美しさだけではサービスの競合優位性は担保できず、ビジネスは勝てない 8月 1, 2015 tanamako 読了: 約 4 分 最近、「デザイン力が競争優位性でインターフェースが素晴らしい。」という言葉がよくネイティブアプリの開発界隈、デザイナー界隈、経営者で言われているように思います。勿論、見た目の美しさ、操作したくなる綺麗さ、情報のまとまり方は何かのサービスを継続的に利用する上で、一部必要な条件ですが、それだけでは競争優位性を担保できない、とこれまで4年ほど様々な企業のコーポレートサイト、ECサイト、コミュニティサービス、ポイントサービスと関わってきて考えている事です。 ディレクターやサービスを担っている、サービスのマネジャー、プロデューサーといったビジネス要件に関わっている人だけではなく、エンジニアやデザイナーもよりその視点を持たなければ、継続的なサービス開発に携わる事
MCSS
Introduction Multilayer CSS organization methodology is a guideline to structure your CSS. Core methodology principles are based on BEM and OOCSS ideas. MCSS was invented in Odnoklassniki.ru (Top 10 world social network) developers team and is recommended for other developers as core for own documentation and team based methodologies. Despite the fact that this methodology originated in a large pr
Kite
Simple Kite uses `inline-block`, not the latest CSS Syntax. It's practical, simple to understand and easy to use. Flexible Kite behaves like flexbox: justify-content, etc. You could easily create complex modules. // kite core components // 1. Fill in `inline-block` gaps and then reset to `font-size` root font-size `rem` // 2. For Android: Android doesn't fill in `inline-block` gaps. `display: tabl
CSS will-changeプロパティについて知っておくべきこと | POSTD
はじめに WebKit系ブラウザでCSS transformやanimationといったプロパティを使った時に発生する、“例のちらつき”。これに気づいたことのある人ならば、おそらく“ハードウェア・アクセラレーション”という用語をこれまでにも耳にしたことがあるでしょう。 CPU, GPU, ハードウェア・アクセラレーション 一言で言うと、ハードウェア・アクセラレーションとは、グラフィックス・プロセッシング・ユニット（GPU）を用いてセントラル・プロセッシング・ユニット（CPU）の処理量を軽減し、ブラウザのレンダリング処理を効率化することです。ハードウェア・アクセラレーターを有効にしてCSS処理を使うと、ページのレンダリングが速くなり、ページ表示が高速化されます。 名前の通り、CPUとGPUはどちらもプロセッシング・ユニットです。CPUはコンピュータのマザーボードに取り付けられている部品で、ほ
Easy retina-ready images using SCSS
If you’re interested in adding retina image support to your website or app and you happen to be using SCSS, here’s a handy shortcut that makes it dead simple. Just include this SCSS mixin in any rule and specify the high resolution image’s path and device independent pixel dimensions. Here’s an example: div.logo { background: url("logo.png") no-repeat; @include image-2x("logo2x.png", 100px, 25px);
【CSS】Knyle Style Sheets(KSS)/KSS-railsを導入してみた – T2
【CSS】Knyle Style Sheets(KSS)/KSS-railsを導入してみた 4月 8, 2013 admin 読了: 約 4 分 今携わっているスマホアプリがrailsを使用していて、CSSのドキュメント・クリエイティブの情報共有のためにstyledoccoを使用しようと思っていたのですが、railsとの互換性がなさそうなのでKSSを試してみました。 導入のための環境構築 まずrubyをインストールします。 かなり丁寧なのでこちらを参考に。 mac にrubyをインストールする方法 新規のアプリケーションを作成して、そこにいよいよkssを入れていきます。 KSS導入 既にKSSを使用してサンプルまで創られている人が記事を書かれていたので、そちらを参考に。 進めていて、kssのgithubのドキュメンテーション通りに進めているのですが、下記で止まったのでメモ //起動して、l
【JavaScript】JavaScriptをテストするために必要な事まとめ – T2
はじめに 意図としては、現在マークアップエンジニアでSassと少しJSを触っているわけですが、メインのJSerとの作業分担が難しいと感じている今日このごろ。 単純なマークアップだけなのか、動的に変化するコンテンツの実装なのか、JSの方は得意だけど、CSSがあまり得意でない人との協業の時に 動的コンテンツのデザインのためにCSSをいじるとき理解が少ない人だとiPhoneとandroidで見え方が違ったり、バグを生んだりするわけなので、 コミュニケーションだけでなくしっかりとしたテストの必要性を感じつつメモ JSのフレームワーク系 「フロントエンドJavaScript開発におけるテスト駆動開発のススメと自動テストフレームワーク利用の勘所」という勉強会に行ってきた。 JsUnit を使った JavaScript のユニットテスト JavaScript のユニット・テストを効率よく行う さまざまな
【HTML/CSS/JavaScript】ウェブアプリを速くするための28の方法(翻訳) – T2
【HTML/CSS/JavaScript】ウェブアプリを速くするための28の方法(翻訳) 3月 13, 2013 admin 読了: 約 24 分 フロントの技術について英語の記事をシェアされていて、気になったので理解を深めるために翻訳してみました。 英語の記事では、28から始まるのですがややこしいので、1はHTMLからはじめていきたいと思います。 DANGER!!!WARNING!!!はじめに 元記事はこちら ※間違った意図や誤訳をしている箇所が多々あると思いますが、その点ご了承くださいませ…。 初めてということでしょっぱい訳で、すみません…。 1. avoid inline code / インラインコードを避ける 1. <style></style> や <script></script> をHTMLに直接書く 2. <link rel="stylesheet" href="" />
CSS current work & how to participate
CSS specifications This page contains a list of all completed specifications and drafts by the CSS WG (formerly ‘CSS & FP WG’). If you want to follow the development of CSS, this is the place to start. You have ideas? Contributions? See ‘If you want to help’ on this page. A specification is not a manual. There is no excuse for badly written drafts and please complain if you find one. But specs
【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編）
さてさて、3回目のエントリーからは、実際に手を動かして行きますよっと。 何はともあれ、Sassが使えるようにしないといけないので、この記事では環境構築に関して書いてきます。 まずは黒い画面は一切使わずにGUIで操作が出来るScoutと言うAIRアプリでSassを動作させる方法をご説明します。 恐らく、現状ではコレが一番カンタンな方法だと思うので、取っ掛かりとしてはとても良いかなーと思います。 ちなみに、Scoutのインストールに関しては、まーしーさんの記事も分かりやすいかと思うのでそちらも参照して下さい。 Compass / Sass の導入が簡単にできる Scout を試してみた｜linker journal｜linker Scoutのインストール方法 んでは最初に、下記のサイトからScoutをダウンロードします。 英語なサイトですが、英語力は全く必要無いので躊躇なくいきませう！ Sco
howtohp.com - howtohp リソースおよび情報
This domain is registered at NameSilo. If you are the owner, start administering it at NameSilo.com. If this is not your domain, find similar names that work for you. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it
モバイルサイトの3キャリア共通CSSと最新コーディング事情 : LINE Corporation ディレクターブログ
こんにちは、「livedoor Blog」を担当している吉沢です。 スマホの登場で、すっかりケータイ (フィーチャーフォン/ケータイ/ガラケー) が日陰に追いやられた感がありますが、ケータイも毎年進化していて、モバイルサイトの開発が行いやすいケータイがユーザへ浸透してきています。 livedoor Blog では、スマートフォン分野に注力しながら、月間15億PV あるケータイ版のUI最適化にも引き続き取り組んでいます。今回は、livedoor Blog で採用した事例を元に、この先1〜2年のケータイ開発・運用に役立てられる、3キャリア共通の CSS から最新のコーディング事情を紹介したいと思います。 アクセスシェア〜ライブドアの場合 まずはどの世代のケータイをメインに開発して表示くずれを起こさないようにするか検討するため、アクセスシェアを把握します。 1年前と比べると、iモードブラウザ2.
CSSのセレクタ部分にハイフン(-)を使うべきか
もう暑くってェ グッタリしちゃってェ…んじに🐈にゃーん🍓🫐🍅🌽🍈🍆🥒🍇🦝 @uupaa (ε・◇・)з だらだら書いたよー http://t.co/fK9KaHRq 「CSSのセレクタ部分(IDやCLASS)にハイフンとか使われるの好きじゃないなー。ボクはあまり好きじゃないなー」 2012-01-22 01:37:32
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
就活生は悩みが多い。効率的に就活するために本番までに準備すべきことをまとめてみた
採用者が話す、企業が欲しい優秀な人材とは。- Webデザイナー編
stroll.js - CSS3 Scroll Effects