CAの ahomu/1000ch さんからご恵贈頂き、レビュー書いてくれと頼まれたので、自分のパフォーマンスというものへの思いの丈と共に書評を書こうと思う。 自分も6年ぐらいフロントエンドぐらいやってきたけど、あんまりちゃんと用語定義をしないまま「勘」で調査しがちだったのと、彼ら二人がどの数値見てるんだろう、という視点で読んだ。 gihyo.jp 要約: これはフロントエンドエンジニアの勘を体系化/言語化したものだ フロントエンドエンジニアにとって Chrome DevTools は日常的にお世話になる、「これナシでは生きていけない」という類のツールだ。だが、これの読み方は癖があり、経験的に蓄積してきた積み重ねがなければやや難しい側面があった。 この本は、フロントエンドエンジニアが今まで経験的に蓄積してきたでろう「勘」を、Webの仕様や各社のUXガイドラインの明確な定義を通して再整理したも

2015年3月18日 CSS 2011年に「少しのコードで実装可能な20のjQuery小技集」という記事で数々の便利な制作技を紹介したのですが、時は流れ、今ではCSSのみで表現できるものが多くなってきました。という事で今回はその記事内で紹介した技を中心に、かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる小技を紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 Div全体をクリックできるようにする テーブルの偶数・奇数の行の色を変える フォームにテキストを入れておき、フォーカスで消す（文字色も変更） ラジオボタンとチェックボックスを装飾する スライドパネル アコーディオン ツールチップ 言語によってスタイルを変更 横並びのdivの高さ揃える ボックスを上下左右中央に配置する それでは実際にどんな事ができるのか見てみましょう！サンプルも作ったのでコードと

Chromeのデベロッパーツールは、Web制作に欠かせないといっても過言ではありません。DOMインスペクター、スタイルパネル、JavaScriptコンソールなど基本的な機能だけでも便利ですが、さらに便利になる機能も数多くあります。 デベロッパーツールを使って、Webページやアプリの制作・デバッグのワークフローが大きく改善される実用的で便利な機能とテクニックを紹介します。 Mastering Chrome Developer Tools: Next Level Front-End Development Techniques 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 01. ダークテーマ 02. 要素をすばやく選択できる選択モード 03. グローバル変数として格納 04. アニメーション用のツール 05. 要素の疑似状態をシ

JavaScriptとCSSを使ってる時に気になったことなんですが、 styleタグでスタイルを定義すると問題ないんですが、linkタグでcssをリンクするとJavaScript側からスタイルルールにアクセスする際に詰まるという話。 現象 Chrome(v12のみ確認)で発生し、FirefoxとOpera,Safariでは発生しない。 IEはそもそもcssRulesが存在しないので論外。 styleタグで指定したStyleにはwindow.styleSheets[*].cssRulesが存在 \の様にリンクしたCSSにはwindow.styleSheets[*].cssRulesが存在しない 確認出来るコード とりあえず次のコードを試すと確認出来る。 test.css .testclass { background : blue; width : 100px; height : 100px

追記 (16:40) 右上の自分のアイコンが丸になっていると報告を受けたので修正しました。 追記 (10:48) Chrome拡張機能のほうが便利という声があったので、拡張機能として公開しました。インストールは以下のリンクから。 Twitter Icon Come Back - Chrome ウェブストア ただし、Chrome拡張機能ではrun-atをdocument-bodyにできないので、document-endに変更しています。この関係で、UserScript版より若干反映が遅れます。UserScriptの導入に抵抗がない方は、以下のUserScript版をおすすめします。 リポジトリはここです。UserScript版もここに置きました。 foooomio/twitter-icon-come-back: Google Chrome extension for reverting th

重箱の隅がきになる病気 少し前からQiitaのページ開くのが憂鬱でした。 なんでかってーと、1ページに線の色が3種類(今回調べてみたら4種類だった)あって、俺のような人間は「あーもーこれ気になる、気になる。」と毎回思わなきゃなんないからなのです。 なおせばいいじゃない 重い腰をあげてユーザースタイル書きました。 俺は薄めが好きなので #eee に統一しましたが、お好きな色に、どうぞ。 .headerContainer-public, .userInfo, .userInfo-danger, .categoryNavigation_menu, .categoryNavigation_menu-danger, .nav-tabs, .nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus, .

散々擦られているネタですが, 昨日PPAPが流行語にも選ばれましたのでCSS(SCSS)のみで実装してみました。 参考 http://qiita.com/hmhmsh/items/a9c1848437b765e538d3 http://qiita.com/on0z/items/ef32f79bde5452a2ccec 仕様 Pen: ✏️ Pineapple: 🍍 Apple: 🍎 Pen, Pineapple, Apple, Penをランダムに出力して ✏️🍍🍎✏️ の並びが来たら"Pen Pineapple Apple Pen !!"と出力して終了します。 デモ PPAP SCSS on Codepen キャプチャ 処理部分 $content: ""; $pen: "✏️"; $pineaple: "🍍"; $apple: "🍎"; $array: $pen, $apple

外部CSSを一つ加えるだけで、最近よく見かけるさまざまなコンポーネントやエレメント、Flexboxベースの柔軟なレイアウトが簡単に利用できるCSSのフレームワークを紹介します。 一部だけ利用してもよし、もちろん全部を利用してもよし、カスタマイズも簡単なので、ブルマをベースに自分用のデザインを適用して利用するのもよしです。

ボタン１つで、text-align: right がこのように。 すばらし

ひまなのでWebで丸を描く方法についていろいろ考えてみました。TMTOWTDI。 http://aikelab.net/circle ▪文字 <div id="mychar">●</div> #mychar { color: #00f; font-size: 120px; } ▪CSS <div id="mydiv"></div> #mydiv { width: 100px; height: 100px; margin-left: auto; margin-right: auto; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #00f; } ▪Canvas <canvas id="mycanvas" width="110" height="110"

This domain may be for sale!

700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は　トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶

ウェブ開発者のKeith Clarkさんが、ウェブページ製作には欠かせないHTMLとCSSという2つの言語を使い、FPSなどで登場しそうな3D空間を再現しています。 Creating 3D worlds with HTML and CSS http://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/ HTMLとCSSで作られた3D空間は以下のページで実際に表示させることが可能。PCはもちろんのこと、スマートフォンやタブレットからも見ることができます。 A 3D engine built using HTML and CSS 3D transforms by Keith Clark http://keithclark.co.uk/labs/css-fps/ 上記ページの「Mouse ＆ Keyboard」をクリッ

タイトルの通りですが、アイコンの上にマウスを乗せると吹き出しが現れるサンプルを紹介します。今回は現れる動きが違うサンプルを5つ用意しましたので、気に入ったものがあればうれしいです。 Chrome、Firefoxの最新バージョンやIE10だとすべてのサンプルが動きます。CSS3のtransitionやrotateが使えないブラウザでも機能的には問題はないと思います。opacityが使えないIE8以下はちょっと厳しいですが、最後に少し対応法を紹介します。 では、一番上のサンプルを解説します。 HTML まずはHTMLから。 Home Twitter Facebook RSS Setting a要素がアイコンで、span要素が吹き出しです。アイコンはWebフォントで表示します。 続いてCSSです。いつも通りまずは全部載せます。 @font-face { font-family: 'typicon

Build Insider OFFLINE vol.01 スマートフォンサイトのこれから ～ レスポンシブ・Webデザインは救世主となり得るかH2O Space. Co., Ltd.

下のボタンCSS3を駆使して色々しているのは分かりますが、最近フラットなデザインが流行っていることもあり、何となくあか抜けない気がします。 なぜでしょうか。 ということで、どのようなボタンが好きかプロパティごとで考えてみます。 ボタンの色（background-color） まずはどのような色がよいか考えてみます。背景色によってどの色がよいかは違ってくると思いますが、今回は白い背景色で考えます。 最初に青いボタンです。 色がきつすぎてあまり好きではないです。同じ青系でも薄くてさわやかな色の方が好きです。 緑系も同じです。 濃い緑より薄い緑の方が好きです。 オレンジも同じです。 ということで薄めで明るい感じの色が好きです。 テキストの色（color） 続いてテキストの色について考えます。まずは白。 これが一番いい気しますが、一応いくつかやってみます。では黒。 なんかきつすぎる。次は背景と対極