CSS には vw, vh, vmin, vmax という単位がある | DevelopersIO
例として以下の様な HTML 構造があったとします。 <body> <!-- 画像解像度: 100 x 100 (px)--> <img src="images/thumbnail.jpg" /> </body> img { display: inline-block; margin: auto; width: 10vw; } img の幅を 10vw と指定しています。基準となるビューポートの幅を vw で表すと 100vw となります。iPhone 5S のビューポート幅をピクセルで表すと 320px な訳ですが、10vw はその 1/10 ということで32px が img の幅となります。つまり 1vw は 1% と同じ長さになります。もちろんリキッドレイアウトにも対応した動きを持っています。 Demo - viewport lengthを開く（このサンプルはChromeブラウザでの
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
nodeconf.eu 2日目 (node.js in production, jschan, debugging) - from scratch
さてさて二日目。 ひょんなことから円卓で座って会話したらイギリス英語とアメリカ英語の話になって、 「なんでナスってアメリカだとeggplantなんだよ、卵って紫じゃないだろw」 「イギリスのaubergine ってなんだよ、覚えられないよw」 みたいな会話に巻き込まれて、 「いやいや、そんな野菜よりも色のgreyとgrayの差のほうが深刻で、間違えやすいよ、CSSとかでどうしてるの?」 って言ったら 「ウェブの標準はアメリカ英語だから」 っていうマジレスを受けました。 二日目のセッションも色々と聞いてきてすげー面白かったので、まとめていきます。 node.js in production ab testing in netflix Netflix JavaScript Talks - Scaling A/B Testing on Netflix.com with Node.js from
パスワード定期的変更の効能について徳丸さんに聞いてみた
高橋: こんにちは、高橋です。今日は徳丸さんをお招きして、今話題のパスワードの定期的変更について、本当のところ効果がないのか、その効能についてご説明いただきます。徳丸さん、よろしくお願いします。 徳丸: 徳丸です。いつもはパスワードの定期的変更にはあまり意味がないと主張していますが、今日はパスワードの定期的変更を擁護する立場なんですね。面白そうです。よろしくお願いします。 高橋: まず問題の整理についてです。IPAより9月3日に『「ID・パスワードのセキュリティ対策促進に関する広告等業務」 係る企画競争 』の仕様書(PDF)が公開されました。その仕様書中の行動喚起を促す対策事例の一つに「ID・パスワードは定期的に変更する」 があったので、セキュリティクラスタが騒ぎ出し、その結果かどうかは分かりませんが、9月9日に同仕様書が改定され、パスワードの定期的変更は対策例から削除されました。一連の議
工数見積の際に子供の看護リスクを織り込む計算式 - Qiita
シビアに見積もった工数をdとした時の計算式： d + d(( r1 [ + r2 … + rn] ) * x1 [* x2] ) 例 例）1, 3, 5歳の子供がいて、夫婦で看護を半々にシェアできるエンジニアの当初の見積工数が30人/日、時期は1月~2月の場合 30 + 30 * (( 0.04 + 0.04 + 0.02 ) * 1.2 * 0.5 ) = 31.8 ということで計算後の見積工数は32人/日ということになります。 さいごに 半分ネタで半分本気です Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWh
Specificity Calculator
A visual way to understand CSS specificity. Change the selectors or paste in your own. Specificity Calculator was built by Keegan Street. The specificity calculator JavaScript module is available on GitHub or via npm install specificity. Specificity Calculator is built for CSS Selectors Level 4. Care has been taken to ensure results are accurate. If you find a defect, please report it.
CSS Architecture | en.ja Article
CreditThis article is translated with permission of Philip Walton. You can find original article at CSS Architecture.本記事はPhilip Walton氏の了承を得て翻訳された記事です。 原文はCSS Architectureにて掲載されています。CSSアーキテクチャ 多くのWebデベロッパとって、良いCSSとはビジュアルモックアップをコードで完全に再現できることを意味する。tableタグを使わず、また出来る限り画像を少なくすることに誇りを持つ。もしあなたが本当に優れたデベロッパであれば、メディアクエリ、Transitions、Transformといった最新で偉大な技術をも使うことだろう。 これらすべてが良いCSSデベロッパに必要なすべてであることは確かではあるものの、ス
NTTドコモ 端末・ブラウザスペック
2024年05月16日d-51C (14)の端末スペックが公開されました。 2024年05月16日SH-51C (14)の端末スペックが公開されました。 2024年05月16日SH-52C (14)の端末スペックが公開されました。 2024年05月16日SH-53C (14)の端末スペックが公開されました。 2024年04月24日SH-52D (14) の端末スペックが公開されました。 2024年04月24日SH-53D (14) の端末スペックが公開されました。 2024年04月24日SH-54D (14) の端末スペックが公開されました。 2024年04月24日SO-51C (14) の端末スペックが公開されました。 2024年04月24日SO-52C (14) の端末スペックが公開されました。 2024年04月24日SO-53C (14) の端末スペックが公開されました。
A/Bテストとユーザビリティテストの使い分け
A/Bテストは、用意した複数のデザインのどちらの成果指標がよりよいか、という結果を定量的に比較検討するための手法です。いくつかのデザインの選択肢があった場合に実際にユーザーに利用してもらうことで、どのデザインが最も数値目標達成率が高いかを把握するのには有効ですが、なぜその結果になったのか、という理由を把握することはできません。デザイナーの発想の域を越えることはできず、変更すべきデザイン要素が別のものだったとしても気づくことができません（例：真の問題は、色ではなく配置だった）。 一方、ユーザビリティテストは、ユーザーの利用状況を観察することで、目的達成を妨げる問題など、定性的な洞察を得るための定性的な手法です。まだ開発途中である場合や、リリースしたあとに、ターゲットとしたユーザーがどのように思考し行動するかを把握するのに有効ですが、定量的な指標による評価にはあまり向きません（それをしようとす
Lean Analytics: KPIにしてはいけない8つの指標
追うべき指標と追うべきでない指標の見分け方 Lean Analyticsには、追うべきでない指標(vanity = 虚栄な)と追うべき指標(actionable = 行動できる)の性質について、以下のように書いています。 追うべきでない(Vanityな)指標は、(数値の大きさから)楽しい気分にさせてくれる。しかし、あなたがどのように行動したらいいのかは教えてくれない。 追うべき(actionableな)指標は、進むべき方向を指し示してくれる。 つまり、「KPIは自分の行動につながるものでなくてはならない。ただ眺めるだけの指標には、何の意味もない」というわけです。 順にその理由を書いていきます。 ヒット数 古くからあるが何の役にも立たない。 PV数 ヒット数よりはましだが、大した意味はない。 訪問者数 数百回訪れている一人のユーザーなのか、一回しか訪れない一人のユーザーなのか分からない。 ユ
Web系サービス運営でKPIを決める時に気を付けるべき3つのポイント - 渋谷駅前で働くデータサイエンティストのブログ
そろそろ新職場にも慣れてきましたよ、ということでちょっと与太話でも。少し前のTokyoWebminingでも話題になっていた、「KPIの決め方」についてです。 ところで、現場によってはKPIが何故か売上高とか営業利益とか「目標そのもの」になってしまっているケースがあると聞くんですが、そういう方には『「KPI」＝「目標」だと勘違いしていませんか？｜中野康之のソーシャルメディア運営で「ビジネスを加速」させるブログ』を一読されることをお薦めします。 売上や利益など、 対外的に提示する一般的な指標を「目標」とするのに対し、 内向きの行動に繋がる具体的な指標が「KPI」です。 ものすごーく当たり前のことだと思うんですが、一昔前の体育会系営業みたいな「とにかく毎日の売上高にしか興味がない」というやり方*1でいくと、Web系サービスのような施策介入できる余地が限られている業界*2ではどんどん手詰まりにな
JavaScriptのいろいろなコーディングルールをまとめてみた
JavaScriptの書き方はJavaScript自体がある程度自由なためいろいろな書き方ができますが、一貫性を持って書いた方がバグなども発生しにくくなるため、コーディングルールを定めておくのはよいことだと思います(特に複数人の開発の場合) 有名な企業やライブラリはコーディングルールも公開している事が多いので適当にまとめてみました JavaScript style guide – MDC Docs Mozilla/Firefox向けのものなので、一部ECMAScriptの範囲を超えたものも含まれています。 多くの人が見ていると思うので、見たことない人は一度読んでみるといいです。 jscsにこのコーディングルールをチェックするプリセットが用意されています。 Google JavaScript Style Guide Google JavaScript Style Guide 和訳 — Goo
速報、Appleの新フォント！…かとおもいきや？ - de-liKeR:+SUB!
Apple新フォント、AppleTPのお知らせです！！ Apple TPという、Text,Thin,Ultralightという3ウェイトでAppleのほーむぺーじで使われております！ が、もしや、どっかで見たことあるフォント…と思って調べてみると、 小塚ゴシックPr6に似てるんすよね… これ名前だけApple TPに変えたんじゃないかな……？？？？ が、「な」を打つことで小塚ではないことが判明。 じゃあ一体何なのか？ まとめると、Apple TPフォントは、 ・日本語部分にAxisを使用、ただし等幅ではなく若干修正してあるっぽい ・英語部分にはMyriadを使用 ぽかったです。 で、日本語フォントでは珍しく、等幅フォントではないのが特徴。
ことばマガジン：朝日新聞デジタル
校閲センターとは？ ■最初の読者として 校閲センターの一番の役割は、「最初の読者」の視点で点検すること。どんなに優れたニュースでも、誤字脱字や変換ミスがあったら「この記事、信用できるかな」と不安になってしまいますよね。「紙面にミスはないか」「もっと分かりやすい表現に出来ないか」。新聞製作は常に時間との競争ですが、冷静に記事を読み込み、誤りのない文章にします。 ■リサーチ 記事が校閲センターに届くと、社内の資料やインターネットなどを駆使して、出来る限り記事のデータを確認します。人名は正しいか、年齢は、地名は。スポーツなら去年の大会での成績の記述は間違いないか……。ときには「申し込みの期限が迫っているのに、締め切り日がない。入れた方がいいのではないか」と出稿部に提案し、より有益な記事にすることもあります。 ■人権を守る 「間違った常識」にとらわれた紙面になっていないか、を点検するのも大事な役割
JavaScript Memory Management Masterclass with Addy Osmaniの要点まとめ - console.lealog();
最近こういうことよくやらなきゃなのでまとめました。 以下のリンクにある動画とスライドのまとめみたいなものです！ 自分用なので、細かいことは書いてませんが。 参考：Memory Management Masterclass with Addy Osmani - YouTube 参考：JavaScript Memory Management Masterclass // Speaker Deck 動画のがわかりやすいので、時間のある人はぜひぜひ。 0. はじめに パフォーマンスチェックには、DevToolsのTimelineとProfileが便利 Chromeのタスクマネージャでもメモリの使用量とかはわかるけど、DevTools使ったほうがわかりやすいし使うべき 1. DevToolsを使ったDEMO Sawtooth Curve DevToolsのTimelineで、所謂ノコギリ型にメモリの
金沢の近江市場が楽しい3つの理由
石川県金沢市に行った際、空き時間に同行者の発案で近江町市場というところへいったのだが、これが想像以上にパラダイスだった。 どのくらい気に入ったかというと、翌日もまた行ってしまったほど。いくらでも観光する場所がありそうな金沢なのに、まさかの翌日リピートである。 そんな近江町市場の魅力を、個人的視点で３つのポイントから紹介してみたいと思う。
エンタープライズの開発における、プロダクトオーナーとしての組織（前編）。Developers Summit 2014 Summer
エンタープライズの開発における、プロダクトオーナーとしての組織（前編）。Developers Summit 2014 Summer ソフトウェア開発において、プロダクトに責任を持って決断してくれる優秀なプロダクトオーナーがいることは望ましいことですが、一般に受託開発において、お客様側にしっかりとしたプロダクトオーナーとしての担当者がいることはめったにありません。 7月末に行われたDevelopers Summit 2014 Summerのセッション「創業122年の企業と顧客価値にコミットした 開発を実現する試みと成果について」では、東京商工リサーチのシステム開発を行ったグロースエクスパートナーズが、「プロダクトオーナーとしての組織」と題して受託開発における現実的なプロダクトオーナーの取り組みについて解説しています。 このセッションは開発側であるグロースエクスパートナーズだけでなく、発注側で
Bootstrap's Grid System vs. Susy: A Comparison — SitePoint
There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I’ll like to introduce you to a slightly lesser known framework that has caught on for many people – Susy. In this article, I’ll show a comparison between Susy and Bootstrap’s grid system so you can f
Jet Profiler for MySQL
is a real-time query performance and diagnostics tool for the MySQL database server. Query, table and user performance Jet Profiler focuses on queries, tables and users. This gives you the information you need in order to quickly fix performance problems in your code, such as most frequent queries, most used tables or the busiest users. Graphical visualisation Data is collected, analyzed and displ
nodeconf.eu 1日目 (Future Node.js, microservices, hapi) - from scratch
さて、 nodeconf.eu に来ています。 当たり前なんだけど、nodeconf.eu ではnode.jsを使っているユーザーが多くて、外人ばっかり。 会う人会う人に「お前の国ではNode.jsは流行ってるのか?」って聞いてるんだけど、とりあえずの理解では、「サンフランシスコ、シアトルとかアメリカでは流行ってる。Dublin、ロンドンとかのアイルランド、イギリスでもまぁまぁ流行ってる。スウェーデンでは全く流行っていない。」っていう感じ。 日本ではどうなんだ?って聞かれたから「MatzのおかげでRubyがめっちゃ流行ってるよ、Node.jsも一時期流行ったけどRubyほどじゃない、最近だとGoとScalaが流行ってるよ」って応えてる。 ちなみにサンフランシスコだと、Node.jsめっちゃ流行ってて、Goがちょっと前のNode.jsみたくぼちぼち流行ってる、エッジな人たちがRust使い始め
トレタでの「slack」活用を紹介してみる - @hitoshi annex on hatena
おかげさまで、トレタもコツコツ導入実績を積んで、少しずつ会社らしくなってきました。 気づけばメンバーも20人を超えてオフィスの席が足りなくなり、恵比寿にもお引っ越ししました。（お引っ越しについてはまた別の機会にでも書きます） 会社には、その規模とかステージに応じた情報共有環境が必要になるんだと思うのですが、今回はトレタでのslack（チャットサービスです）の活用についてご紹介してみたいと思います。 たかがツール、されどツール。ツールが変わるだけで、仕事の仕方とかコミュニケーションの形もガラッと変わるんですよね。で、トレタもslackのおかげで仕事から会社の雰囲気まで、いろいろなことが大きく変わりました。 7月から全社で利用中 トレタでは、7月からslackを全社の標準チャットツールとして採用しています。今やチャットツールにも多種多様なサービスがありますが、帯に短しな感じでど真ん中にどんぴし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Switching Ghost From Ruby Sass to Libsass
Blogger
GitHub - petehunt/webpack-howto
Google JavaScript Style GuideのRev. 2.11:2.93 (svn r65:r112) のdiff http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
GitHub - dodo/node-slug: slugifies even utf-8 chars!
Kazuho Oku on Twitter: "「本当に優秀な技術者は、自転車置き場の議論に首をつっこまない」という言葉が好き #自戒的な意味で"
分割と整合性と戦う