動くCSSのためのメモ。
CSSでできる事がどんどん増えてます。JavaScriptを使って実装するようなレイアウトやUIも、CSSだけで作れちゃうほど、便利なプロパティがじゃんじゃか増えましたね。ここでは、要素にアニメーション効果をつけるためのCSSを使ったエフェクトについて、まとめてゆこうと思います:)。 CSSで動かす 「動く」といっても、自由自在にぐにゃぐにゃ動かせるわけではなくて、CSSアニメーションでは、プロパティの数値をスムーズに増減させることで、要素のスタイルを滑らかに変化させます。 例えば、下のサンプルでは、p要素にカーソルを合わせた時に、font-sizeの値を、1emから2emに、スムーズに変化するように指定しています。 p { transition: font-size 1s; } 動かすためのマストプロパティ CSSでアニメーションさせるために必要不可欠なのがtransitionプロパティ
CSSだけでスライドショーはつくれるよ。
この記事はCSS Programming Advent Calendar 2012、22日目のための記事です。 CSS Programmingとは、jsを使わないでHTMLとCSSを駆使してゲームとかスライドショーとか作る技術です ということで、ここでは、前回の記事で作った、グローバルナビの下の大きめの画像のところ（以下：スライドショー）を、CSSだけで実装してみます。JavaScriptで実装したサンプルはこちら。 以下が目次になります。 まえがき CSS Programmingに使える便利なやつ transitionプロパティ E ~ F（間接セレクタ） :not(s)否定疑似クラス :checked疑似クラス <label>要素 それCSSで出来るよ。 きっかけづくり チョボのところの仕組み ~と:checked <label> transition :first-childと:fi
海外のウェブサイトでよくみる「要素が画面内に入ったらふわっとフェードインするあれ」の実装方法 | imasashi.net
最近よく見るようになりましたエフェクトの実装方法です。海外のおしゃーなウェブサイトは必ずといっていいほど取り入れているように思います。 デモ作りました。要するにこういうやつです。 以下、これのつくりかたを紹介します。 基本的な考え方 アニメーションはCSS3のtransitionで制御する アニメーションの開始トリガーをjsで制御する という感じで、CSS3とjsのあわせ技で頑張ります。 具体的なマークアップ コーディング方法です。 HTML <div> <section class="fadein"> <h2>情報設計</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section> <section class="fadein"> <h2>サイトマップ</h2> <p>何かしらの説明文。何かしらの説明文。何かしらの説明文。</p> </section
jQueryの次に学びたい！D3.jsはWebデザイナーの最高の武器になる
え、「D3ってグラフ描くライブラリーでしょ？」ですって？ それだけではありません。あらゆるデータを魅力的に見せる「データビジュアライゼーション」は、Webデザイナーの表現の幅をさらに広げてくれそうです。 本記事はMichaela Lehr、Tim Severienが査読を担当しています。最高のコンテンツに仕上げるために尽力してくれたSitePointの査読担当者のみなさんに感謝します。 D3.jsはデータに基づいてドキュメントを操作するJavaScriptライブラリです。D3.jsはHTML、SVG、CSSを使ってデータを活用します。 私がおすすめする、Web制作者が学ぶべきJavaScriptライブラリーは、jQuery、Underscore.js、そしてD3.jsの3つだけです。この3つのライブラリーは、新しい方法でコードを考えることができます。jQueryを使うと少ないコードでDOM
ぬるぬる動く！Web地図クライアント「Leaflet」を使おう！
D3.jsと組み合わせても使いやすい、Web地図クライアントライブラリの大本命……だと、個人的には思ってる……たぶん。 leaflet leaflet.jsとは何か leafletはWeb上で地図を表示するオープンソースのマップクライアントライブラリです。 軽量でスマートフォンなどのタッチ操作にも対応した地図を手軽に表示することができます。 ユーザーによって様々なプラグインが作成されているのが特徴で、それらを組み合わせることで多様な表現を行うことができるので「地図なんてGoogle Maps APIで十分じゃね？」という方も、一度触ってみてください。 そんな訳で、簡単な「Leaflet クイックスタート」的なものを書いてみました。 ベースマップの作成 cdnからcssファイルとjsファイルを読み込みます。 <link rel="stylesheet" href="http://cdn.le
D3の魅力
d3.js Advent Calendar 2013 6日目の参加記事です。 技術的なことはちょっと置いておいて、個人的なD3愛を語ってみました。 例えば、大学で私は、コンピュータに手を触れる前に 紙の上でプログラムを完全に理解しなければならないと教わった。 でも私はそういうふうにはプログラムできなかった。 私が好んだやりかたは、紙の前ではなく、コンピュータの前に座って プログラミングすることだった。もっと悪いことに、 辛抱強く全てのプログラムを書き上げて正しいことを確認するなんてことは せずに、私はめちゃくちゃなコードをおっぴろげて、 それを次第に形にしてゆくのだった。 私が教わったのは、デバッグとは書き間違いや見逃しをつかまえる 最終段階の工程だということだったが、 実際に私がやっていたのは、プログラミングそのものがデバッグという具合だった。 （中略） プログラミング言語はプログラムを
github という公的なインフラを使うために必要なこと - アンカテ
馬しか見たことない人に、これと自動車を両方見せて「どっちが欲しい」と聞いたら、どちらを選ぶだろうか？ 理性的な人だったら、自動車が平らな道しか走れないことを一番気にするだろう。 ボストンダイナミクスの四足自走機械は、馬が走れる道ならほとんどそのまま進める。道が舗装されてなかったら、自動車で行ける範囲は本当に限られている。どうみても、四足自走機械の方がずっと実用性が高い。 「道を舗装して、トンネルや橋を作って道を平らにすればいいんですよ」なんて言ったら、「たかが乗り物のためにどうしてそんな手間をかけなきゃいけない？」とあきれてしまうだろう。 私は、今、github を中心に仕事が回る職場で働いている。実際使ってみて、この github というものは非常に便利だと思うのだが、過去の自分にこれを勧めてみたらどういう反応するか想像してみると、これと同じ反応になると思う。 私が働きはじめたのはワープ
虫だらけの惑星──『昆虫は最強の生物である: 4億年の進化がもたらした驚異の生存戦略』 - HONZ
昆虫は最強の生物である──と断言されると、人類じゃなくて？ と疑問が湧いてくるが、まあ「最強」の定義次第といったところだろう。たとえば、人類はこの地球上に種そのものを脅かす天敵はいないわけで、その観点からいえば「人類は地球最強の生物」といってもいいだろう。 しかし、別の観点からすると、これまでに発見され、命名された昆虫は100万種、名前もついていないものも含めれば何千万種にも及ぶという膨大な数になる。仮に異星人が地球にやってきて、その支配領域の広さと個体数、種の多さによって「支配者」を決め、コンタクトを取ろうとしたら──その交渉相手は人類ではなく昆虫になるに違いない。著者も下記のようにとうとうと、節足動物である昆虫がいかに人類より素晴らしいかを述べてみせる。 ここで読者の皆さんに提唱したい。動物の体の形として優れているのは、外骨格のほうだ。有害な排泄物を体内に蓄積するのではなく体外に排出し
http://www.tys-yokohama.net/leaflet_handson/doc_html/
はじめに みなさんこんにちは。これから Leaflet のハンズオンセッションを始めます。 Leafletは総ファイルサイズが約31KBと軽量で、滑らな動作と洗練されたスタイリングが特徴の、JavaScriptのWebマップAPIです。 モバイルデバイスでの使用もよく考慮して設計されています。 現在のヴァージョンは0.6というまだ若いAPIで、最近 OpenStreetMap のWebサイトに採用された事で、はじめてLeafletの名を知ったという方もいらっしゃるのではないでしょうか。 このセッションの前半では、JavaSciptやHTMLのコードをタイプしながら、下記のLeafletの基本的な項目について学びます。 Map - ベースの地図を表示する Layers - オーバーレイの表示、スタイリング Events - 地図やオーバーレイとのインタラクション Layer Group &
海外移住先としてのニュージーランドの魅力 －ITエンジニア高給／ワークライフバランス／安全／平和－ - Life is colourful.
先のエントリーで、観光地としてのニュージーランドの魅力を紹介したが、今回は、海外移住先としてのニュージーランドの魅力を伝えてみたい。 ITエンジニアは高給取りになれる ニュージーランドでIT職は高給取りである。実際に日本からニュージーランドに移住して、豊かな生活（人間的かつ金銭的に）を手に入れたITエンジニアが何人もいる。このブログと同じはてなブログにも、『NZ MoyaSystem』のはっしーさんがいる。元社畜SIer→NZプログラマを実現した代表的な例である。 ニュージーランドの高収入職業ランキングを見てみよう。 Information technology systems architect ー $125,000 Information technology manager/project manager ー $115,000 Commercial real estate agent
プログラマの海外就職に必要な技術力は？ NZで働く僕のスキルを公開｜NZ MoyaSystem
プログラマとして海外で働くには、どれくらいの技術があればいいのかな？ 海外転職に興味はあるけど、スーパーハッカーレベルじゃないと採用されないのでは…… 自分の今のスキルでじゅうぶんなのか、目安が知りたい。 海外転職にそこまで高い技術レベルは必要ありません 僕はニュージーランドのとある企業で、正社員のプログラマとして働いております。 残業はゼロ、毎日定時で帰ってますし、お給料も平均よりかなり高い額をいただいてます。 ありがたいことです！ かといって凄腕のスーパーエンジニアなのか？といえば、一切そんなことはございません。 それどころかもともと理系ですらなく、出身学部は文学部日本史学科です。 大学を卒業するまでプログラミングの経験ゼロだった、典型的な文系エンジニアなんです。 「海外転職って、一握りの超優秀な人にしかできないのでは……」と考えている人がいるなら、僕はこう答えます。 就活してた当時の
「UX」という言葉が聞こえないクックパッドのサービスデザインとは？
インタビューUX MILK編集部、編集スタッフの藤井です。 UXデザインの現場に突撃取材するUX MILKのインタビューコーナー、今回は株式会社クックパッドの倉光さんにお話を聞いてきました！ クックパッドではどんなUXデザインを実践しているのかお伺いしたところ、そもそもクックパッドのサービス開発現場では「UX」という用語はあまり聞こえてこないとのこと…！ その理由とは…!? 学生の方にもわかりやすくお仕事内容を説明いただいたので、ぜひ初心者の方にも読んでいただきたい内容となっています。それでは、早速インタビューをどうぞ。 倉光 美和（くらみつ みわ） 福岡県生まれ・デザイナー。家庭用ゲーム業界でゲームのUIデザインを経て、2015年にクックパッドへ入社。現在は主に iOS/Android アプリの開発・改善を手がけるほか、グループ会社のサービスデザイン組織のサポートなども。人間中心設計推進
７つの事例で学ぶ白ベースのWebデザインにおけるポイント
Webを取り巻く技術の進歩で、グラデーションやシームレスな背景パターンなど、Webサイトをカラフルに彩る技術も発達していますが、いまだに根強い人気を誇るのが「白」をベースとしたWebサイトです。もともと、HTMLやCSSのデフォルトでも背景が白地だということも、採用される理由のひとつです。しかし、最近立ち上げられたWebサイトでは、新しい意味での「白地」の使い方を提案しているようです。 そこで今回は、Web技術が発達したいまだからこそ押さえておきたい「白」ベースのWebサイトの構築の7つのポイントを、事例とともにお伝えしていきます。 デザイナーがあえて白地を使う理由 王道の白地背景パターンですが、まだTableレイアウトが主流だったWebの黎明期と比較すると、デザイナーは少し違った意味合いで白地のデザインを選択することが多いようです。通販サイトやブログでは昔から頻繁に使われていましたが、最
ファンタジスタ石原伸晃の伝説 - ヘソで茶をわかす
東京都知事選が終わりました。 都民ではありませが、日本の首都たる東京の首長を選ぶ選挙となれば注目せざるを得ませんでした。 というわけで、外野からの感想です。 忘れてはいけないＭＶＰの存在 今回の選挙では与党が分裂しているのに対して、野党は統一候補を立てることに成功するなど、ワイドショー的なエンタメ性も抜群でしたので、選挙戦序盤から報道も過熱気味で見世物としてもなかなか面白いものでした。 もっとも、野党統一候補となった鳥越氏が予想外にポンコツだったため、中盤以降は選挙戦というよりもポンコツ候補のスキャンダルに世論は湧いていたような気もしますが… そう、今回の選挙戦は鳥越氏の女性問題などスキャンダルが次々と明るみになるうえ、氏自身の言動なども問題視され、完全に自滅の形でフェードアウトしていった感があります。 そのため、勝敗を決した真のＭＶＰの存在が忘れられているような気がするのです。 ですから
jQuery初心者のためのJavaScript設計トレーニング | 機能や役割に着目したコード整理
2006年よりWeb制作会社にてUI実装や運用業務を経験した後、2010年よりフロントエンド・エンジニアとして株式会社ピクセルグリッドに入社。これまでの経験の大半は大規模Webサイトの壊れにくいHTML/CSS設計、及び実装。また、SVG, Canvas, WebGLの扱いも得意としている。 外部に向けたアウトプットも積極的に行っており、カンファレンスでの講演などを多数こなしている。Tokyo WebGL Meetupの主催者。2011年から2021年まで10連続でMicrosoft MVP（Developer Technologies）を受賞。 著書に『Webデザイナー/コーダーのための HTML5コーディング入門』（共著：エクスナレッジ、2011年3月12日）や『CSS3デザイン プロフェッショナルガイド』（共著：毎日コミュニケーションズ、2011年5月28日）』などがある。
NTTからピクシブ株式会社に転職しました - 大企業からベンチャーへ移ったエンジニアの話 - ふろしき Blog
ピクシブ株式会社に入社しました！…といっても、入社したのは2015年8月1日と約1年前です。 「転職エントリーは、転職した直後に書くよりも1年後の方がいいのでは？転職の興奮が覚め、会社のこともある程度わかってから書いたほうが、身になる話ができるんじゃないか？」 なんてことを入社直前に思いつき、あえて今頃になって、転職エントリーを書いています。 このエントリーでは、大企業からベンチャーへ、エンタープライズ系からネット系へ、受託メインの会社から事業メインの会社へ転職した私が、1年経った今感じていることをお話しします。それで、後ろに続こうとしている人に、何かしらのヒントを残せたなら、私としても嬉しいです。 最初に言っておきますが、「こんな会社辞めてやる！」的な、そういうコンテンツはないので、期待しないでください！！！ 転職で変わったこと 私の転職は、テクノロジーというキーワードを除くと、なにもか
今からでも読んでおきたいReact.js入門資料12選
Facebookが提供しているJavaScriptライブラリ・React.jsは「Yahoo!」「Airbnb」「Reddit」「Netflix」などで採用されています。 日本でも注目され始めているので、React.jsを使ってみたい方は多いのではないでしょうか。 これからReact.jsを学ぶ方の参考になるReact.jsの入門資料（サイト・記事・スライド）を12個ご紹介します。 他のJavaScriptフレームワークからReact.jsに乗り換えようか迷っている方の参考になる資料も紹介しています。 React.jsの学習の参考になるサイト・記事 今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference / HTML5 Expert.jp https://html5experts.j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Page Not Found - NxWorld
