CSSのみで実装するボタンデザインやホバーエフェクト 20＋α - NxWorld
実際に使用したものやいつか使うかもと思ったものをJSFiddleやEvernoteなんかでバラバラにメモしていたのですが、それらの中でよく使いそうなものを一覧化したものが欲しかったのでまとめました。 今となっては様々なところで用いられていますし、もっと凄くて面白い動きを実装しているチュートリアルなんかも沢山見かけますが、個人的に汎用性高いと思うもの中心です。 対象ブラウザに古いIEなどが含まれている場合はもちろん使えませんが、いずれもjQueryや画像などを一切使用せずにデザインやアニメーションも全てCSSのみで実装しているものです。 また、同様にCSSのみでクリエイティブなボタンデザインやエフェクトを実装できるエントリーや便利なジェネレータツールなども備忘録兼ねて併せて紹介します。 CSS3を多用しているため、ブラウザ（特にIE7・IE8など）によっては動きや見栄えが説明と異なる場合があ
シェアするのに、URLのリンクである必要はない気がしてきた : けんすう日記
シェアするとき 最近、アンサーというiPhoneアプリを出しました。質問をすると、即レスで返信が返ってくるというコンセプトです。ぜひ使ってみた上で、最低5人くらいに広めていただけると幸いです。 アンサーをiTunes Storeでダウンロード(無料) さてこのアプリを作っていて、結構自分の中での意識変化が多かったのですね。 たとえば、僕はインターネットに慣れすぎていて、何かのサイトとかページを教えるときに 「そのページのURLを教える」 というのが一番あたまに浮かびがちなのでした。なので、普通に、URLをシェアするような仕組みがあったほうがいいよなー、と思っていたりしたんです。 しかし、最終的には、URLでシェアしないようになったのです。 なぜか。 それは、URLがあって、それをシェアすると、誰しもそのページを見れる、という考え方自体が、かなり今までのPC中心のWebの考え方なので、スマホ
right: 100%か負のマージンか
これまでCSSにはレイアウト方法があまりなかった。これからはFlexible Box LayoutやMulti-column Layout、Grid Layoutを始め、positionプロパティーに使える値の拡充などもあり柔軟に行えるようになるだろうが、それはけっして既存のレイアウト方法が不必要になるということではない。選択肢が増えると受け止めるべきだ。例えばright: 100%や負のマージンを使って親要素の外側左にレイアウトする手法はそのまま使い続けることになるだろう。 ほとんど同じレイアウトを実現するright: 100%と負のマージンの使い分けを通して、レイアウト方法の選択をどう行うべきかという基本的な思想を解説することにより、今後増えてくるレイアウトの選択肢にどう相対すべきかがわかるのではないかと思う。そしてそれはCSSプロパティーの意図された使い方を理解するということでもある
【島国大和】ゲームはこうしてダメになる。横ヤリ刺さって死屍累々。
【島国大和】ゲームはこうしてダメになる。横ヤリ刺さって死屍累々。 ライター：島国大和 島国大和 / 不景気の波にもがく，正体はそっとしておいて欲しいゲーム開発者 島国大和のド畜生 出張所ブログ：http://dochikushow.blog3.fc2.com/ どうも，島国大和です。 デスマーチ，してますか？ 前回，「ゲームを作る立場で，どうやって落とし穴を回避するかを考えるよ。」と題して，ゲームを開発していくうえでハマりやすい罠を，どうやって回避するのかといったことを書きました。 今回はその続き，というか，そこで書き切れなかったことをまとめてみたいと思います。テーマは，「なぜ横ヤリは入るのか」ということ。 ゲームが大失敗する理由の中で，かなり大きいのが，偉い人からの横ヤリです。完成品を見て「ここちょっと，こうすべきじゃない？」みたいな。 ここではなぜ横ヤリが入るのか，それがどうしてダメー
iOS 7で「Chrome」を辞めて「Safari」に完全移行しました
これまで筆者はiPhoneで調べ物をするときに、標準アプリの「Safari」ではなく、「Chrome」をメインのブラウザとして使っていた。職場はWindows、自宅と持ち歩き用のPCはMac……と、環境によってOSが異なるので、ブックマークを同期するには共通仕様のChromeを使うのが手っ取り早いからだ。 しかし、iPhone 5sにしてからはSafariを使う機会が増えている。使い始めて感じたのは、「予想以上に使いやすい」ということだ。 →「電話」と「メール」の細やかな使い勝手が向上、一方で気になることも…… →「iOS 7」で使い勝手が大きく改良――通知／コントロールセンター、Air Dropなどを試す →「A7チップ」と「M7コプロセッサ」の恩恵を体感する →iPhone 5sで欲しかった“あの色”をゲット／iOS 7で使い心地も大きく変化 アドレスボックスと検索ボックスを統合 iO
Webフォントのモリサワ TypeSquareに申し込んでシャレオツ和欧混植 | 高橋文樹.com | デザイン
おめあてのフォント（オールド明朝系）はFontPlusにしかなかったのですが、なぜか実装が上手くいかなかったのでモリサワにしました。大変後ろ向きな選択であります。 使ってみた感想 Webフォントをアイコン以外で使ったのははじめてだったんですが、なかなかいいですね。自分のブログに対するナルシスティックな思いをかき立ててくれます。 小説を書き始めた頃、自分の書いたものを印刷すると、それだけで高級ななにかができあがったような気分になったものですが、その頃の気持ちを思い出しました。以下、感想です。 1. 速度面 日本語のまともなフォントは字数が多い（15,000字〜）ので、5MBぐらいあります。これを読み込ませるのは無茶だろうということで、どのWebフォントサービスも次のような流れでフォントの読み込みを処理します。 まず、JSを読み込み。必要なフォントの種類をCSS解析で決定。 続いて、対象となる
火にかけると“フライパン”に早変わりする“まな板” - isuta（イスタ） -私の“好き”にウソをつかない。-
【GWおうちで何する？vol.4】話題の韓国っぽスマホケース「キーリングハンガー」を手作りしてみない？
商用フリー！昔の少女マンガ風イラスト｜アクトゼロ｜SMMやSEMを中心としたデジタルマーケティング会社
こんばんは、haruです。 最近急に冷え込んできましたね、 私は寒がりなので、この季節はブランケットが必需品です。 風邪を引かないよう山場をこなしたい、そんな今日この頃です。 今回は昔の少女マンガ風のイラストを用意しました。 基本の4点、モノクロの4点、おまけ差分の6点セットです。 おまけ差分の6点はこちら。 実際のサイズはこちら↓ 「どうしてわたくしが！？」みたいなイメージで使っていただければ幸いです。 なお画像は全てpngです。 ———————————– 形式：png ———————————– 商用個人にかかわらず利用フリーです。 ＼DLはこちらからどうぞ！／ ご利用にあたってのくわしいルールを必ずご覧ください。こちら↓です。 クリエイティブブログ内で配布されている素材の利用について シェアのご協力をよろしくおねがいします。
知りたい人にも伝わるUXにするために必要なこと
今年のはじめ「Quantifying the User Experience」という書籍を読みました。利用者体験をいかに数値化するのかという課題を、統計学と掛け合わせて解説しています。利用者の行動の観察やアンケートといった、ユーザー調査の結果を数値化して UX に活かそうという内容です。所々、数式が出てくるなど、他の UX 関連の書籍とはひと味違う難解な書籍でした。 実は、この書籍がオススメだから記事を書いているわけではありません。これは UX 実践者（もしくは UX デザイナーと呼ばれる人たち）が陥る問題に繋がるのではと思い、この書籍を紹介しました。UX も他の分野と一緒で、深く掘り下げないと理解できないところがたくさんあります。利用者の体験を考え始めると、必然的に社会学や心理学に目が向いてしまうのもそのためでしょう。また、方法論も確立されはじめたこともあり、海外からたくさんの情報が流れ
クライアントサイドJavaScriptのライセンス管理 | GREE Engineering
最近シリコンウエハーもらって嬉しかったago（@kyo_ago）です。 このエントリはGREE Advent Calendar 2013 11日目の記事です。 今回はクライアントサイドJavaScriptにおけるライセンス管理の問題を取り上げたいと思います。 ライセンス管理の問題点 「使用しているライブラリのライセンス管理をどうするか」はクライアントサイドJavaScriptにかぎらず発生する問題ですが、クライアントサイドJavaScriptには以下の様な特徴があるため問題が複雑になります。 コードが結合、圧縮される場合がある クライアントサイドJavaScriptでは読み込みの速度を上げるため、使用しているライブラリの結合、圧縮を行うことがあります。しかし、この時誤ってライセンス文が捨てられてしまうことがあります。 ソースが外部に公開される クライアントサイドJavaScriptではソー
【はてなスタッフ非公式ブログバトン】CoffeeScriptについて - hitode909の日記
12月なので，今日から，ブログバトンを始めることにしました． CoffeeScriptについて 最近ちょっとCoffeeScriptを書いたりしていて，チーム内にシェアしたところ，うーんみたいな感じで，あんまり使ったこない人もいそうだったので，まとめておきたいと思います． 経緯 僕はCoffeeScript2011年くらいから使ってて，遊びで書くのは全部CoffeeScriptで書いてる． 仕事では，アプリケーション本体じゃなくて，業務上使う便利ツールなどは，CoffeeScriptで書いてる． CoffeeScript導入のメリットについて． 些細なミスが減る CoffeeScriptでは，JSの構文上の微妙に気をつけるべきところがだいたい解消されている． たとえば，Objectを適当に書いておくと，コンパイル後には最後のカンマだけ自動的に除かれるので，書くときに，ここにカンマがあるとI
[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js
スクロールベースのページを実装する時にぴったり！ ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介します。スクロールのダウン・アップでclassを付与するので、ヘッダに限らず他にもいろいろと使えそうです。 スクリプトは単体で動作しますが、jQuery/ZeptoやAngularJSのプラグインとしても動作します。 Headroom.js 下にスクロールすると、ヘッダが上部に吸い込まれます。 一旦消えたヘッダは、上にスクロールするとどのポジションからでも表示されます。 この「どのポジションからでも」というのがこのスクリプトの便利なところです。 スクリプトにはさまざまなオプションが用意されており、デモページで楽しめます。 デザインは似ていますが、こちらは「Playroom」です。 デモページ ヘッダの非表示・表示のタイミングが細かく設定でき、アニメーションのエフェクト
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web担当者が日々の仕事をミスなく進める超便利タスク＆コミュニケーション管理ツール11選 | Webワーカー向け便利サービス