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ブラウザでの
John Resig - JavaScript Micro-Templating
I’ve had a little utility that I’ve been kicking around for some time now that I’ve found to be quite useful in my JavaScript application-building endeavors. It’s a super-simple templating function that is fast, caches quickly, and is easy to use. I have a couple tricks that I use to make it real fun to mess with. Here’s the source code to the templating function (a more-refined version of this co
複雑なHTMLを動的にロードするとき，JSテンプレートを利用するとよい - Qiita
完全に遅れてしまっていてもはやAdvent Calendarではなくなっている「Backbone.js Advent Calendar」ですが，なんとか25日まで続けます:) ちなみに昨日までの「Backbone.js入門」シリーズ(by @taka84u9)がとてもわかりやすいので，Backbone.jsを使ったことのない人はまずそちらから読むのがおすすめです． (http://qiita.com/adcal/backbone の12/11分より) はじめに Ajaxを利用して動的にHTMLをロードするとき，対象HTMLが複雑になってくるとJSだけで作るのはコストが大きくなってきます．(appendの山) またぱっとコードを見たときにどういうHTMLになるかわからず，デザイナーと共同作業もやりにくくなります．タグを1つ追加したいだけなのに，JSのコードを読んで追加処理を書くのはかなり面倒
がむしゃらに働いて燃え尽きないために...。もっと効率良く働く5つのアイデア | ライフハッカー・ジャパン
みなさん本当にお疲れ様です。しかし、そんなにがむしゃらに働かなくても、もう少し効率良く働くこともできます。 今回は、ソーシャルメディアの投稿スケジュールや自動化、分析などを管理するツール「Buffer」のコンテンツクラフターBelle Beth Cooper氏より、もっと効率良く働くための5つのアイデアをご紹介しましょう。（Cooper氏はExist社の共同創立者でもあります） Bufferの文化で好きなのは、一生懸命ではなく効率良く働くことを重視しているところです。私たちのチームでは、十分な睡眠と運動、それに余暇の時間をとることを大事にしているので、仕事の時間はできるだけ生産性を上げるようにしています。 一生懸命働くというのは、陥りやすい習慣でもあります。1日の終わりに仕事スイッチを切ったり、週末に仕事のことを考えずに休養するのは、難しいこともあります。自分で会社を立ち上げていても、管理
JavaScriptの動かないコード (JavaScriptエラー集) - 主に言語とシステム開発に関して
「このJavaScriptコードが動かないのは，なぜですか？」というミニクイズ集。 すべて制限時間は１分。 別名，JavaScriptのエラー事典。またはアンチパターンのまとめ。 中級編 初級編 番外編 2015年５月現在，全５３記事。 中級編 JavaScriptの仕様関連 p要素への appendChild() で失敗する かけ算を間違える イベントハンドラが見る値のエラー クロージャを使わない場合に起きるエラー オブジェクトのprototypeを変更した時のエラー 正規表現で同じ文字の連続を検出したい - 置換前パターン中での後方参照 jsonオブジェクトをevalできないエラー 不要なイベントが連鎖で発生してしまう （バブリングの対処） オブジェクトのプロパティ定義にthisを使って失敗するエラー setTimeoutのタイマーが指定時刻に動かないエラー オブジェクトのメソッドを
画像を使わずCSSだけで任意の間隔の破線を描く | 12px.com
cssで破線を使おうと思ったらdottedとdashedの2種類しか用意されていないので、それ以外の間隔の破線を使用したい場合にはあらかじめ白黒のgif画像を用意して、背景に繰り返して使用する事が多いです。 しかしCSS3のlinear-gradientを使用すれば任意の間隔の破線を描画する事が可能です。 CSS3を使用するので対応ブラウザがちょっと狭くなりますが 1 2 、画像を用意するのとくらべて線分や間隔の調整も容易になりますし、Retinaディスプレイにも対応する事を考えたら（奇数の破線を使用する場合など）2種類の画像を用意する手間が省けますのでCSSで描画する方が楽チンです。 手順やり方は下記の4つの指定をすれば良いだけです。 破線の部分はbackground-imageを使用して背景画像として描画します縞模様はlinear-gradientを使用してグラデーションの濃淡で表現し
MySQLのクエリ集計手法いろいろ | Ore no homepage
Webサービスを開発/運用してるモンとしては、いろんなWebサービスを触ってみなきゃアカンってことで、アメリカの若モンに大人気ってふれこみのsnapchatに登録してみた。これでリア充の仲間入りやと思ったが、snapchat友達が同僚二人しかいないうえに、利用シーンがあまり思い浮かばないww オジサン困っちゃいました。画像とか送信できるんだけど、数秒で消えるの。むしろそこがウリっていうね。どうやって遊ぼうか…。 2月はブログ書かなかったなーと思ったのでMySQL小ネタ。世間的にも自分的にも真新しくもなんともないTipsです。 innotopで集計 実は以前、Qiitaに書いたので↓をば。。。 http://qiita.com/la_luna_azul/items/505ca441b8c8e6a87aaa 流れるクエリ、ロックの状況、トランザクション(show engine innodb s
登録されるとつらいユーザー名リスト - Qiita
Twitter, GitHub, Qiita などのように root/(username) でユーザーページをルーティングするところが増えてきている. このルーティングを採用し, help などのユーザー名を許可すると, root/help が奪われてしまう. そこで, 登録時に validate で, ある程度排除するのが習わしになっていると思うが, 急に root 直下に置きたいページが増えたときなどに取得されていると悲しいことになる. また, サブドメインを利用するサービスだと, api などをうっかり取られてしまうケースが後を絶たない. http://api.hatenablog.com/ みたいに取られることによる面白みもあるが, おおむねつらい. 実際, twitter では search アカウントが取られていて, TweetDeck では twitter.com/searc
英会話初心者におすすめ！上達に効果的な4つの会話テクニック
Gospin123 : Situs Resmi Infini Berlisensi Resmi Oleh PAGCOR GOSPIN123 merupakan situs resmi yang sudah berlisensi oleh Pagcor maka dari itu sering kali banyak para pemain merekomendasikan untuk bertaruh di situs yang aman dan gampang menang. Tempat bermain yang terpercaya tentu saja sudah di lengkapi dengan fitur canggih seperti RTP dan Akun VIP akan membuka peluang banyak untuk member meraih keme
コンソールから切れたプロセスを標準出力につなげなおす - 絶品ゆどうふのタレ
不慣れな環境を不意にいじった時にあるあるネタ。 とりあえずー とか言って勢いで書いたsetupスクリプトを実行してみたら意外と時間かかって、 ちょっと目を離した隙にsshの接続が切れちゃいました！ 。。。ありますよね。ほんとよくありますよね。 そうなる予感はあったんだ なんて後の祭りです。ふとした油断から、screenもnohupすらも使わずにやってしまって、こんなことに。 shellがHUPしなかったからプロセスは生きてるものの、ログが見れないから進行状況がわからない。 うまく行ってるのかどうかモヤモヤした気持ちのまま、プロセスが終わるのをじっと待つ。。。 まぁ実に切ないです。 こんな時、いつも思うこと。 このプロセスの出力、もっかいstdoutに繋げられたらいいのに。。。 はい。というわけでつなげましょう。 長い前座ですみません。 切り離したプロセスを用意 #!/bin/bash wh
今どきのCSS3グラデーションの指定方法
意外とAndroid以外は最新ブラウザが正式な記述に対応しております。 正式な記述の対応が遅かったSafariやiOS、非対応のAndroidは比較的に古い段階から-webkit-gradientに対応してますので、-webkit-gradientも合わせて記述すると対応ブラウザを利用しているユーザーが一気に増えます。 IE9以下や上記の記述では対応できない古いブラウザにはちゃんとフォールバックを指定しましょう。 上記を踏まえると以下のように記述するのがシンプルでよいのではないかと落ち着きました。 /*Other Browser*/ background: #91bae4; /*For Old WebKit*/ background: -webkit-gradient( linear, left top, left bottom, color-stop(0.00, #b6e2fd), co
スマートフォンサイト制作時に覚えておきたいCSS 15
スマートフォンサイトを制作する際、個人的に覚えておいた方が良いと思うCSSのプロパティやテクニックをまとめてみました。 自分用の備忘録ではありますが、他のブログ等でも取り上げられていることが多いので、いずれも覚えておいて損はないものだと思います。 普段から制作している方にとっては目新しいのはないと思いますが、まだスマートフォンサイトを制作したことがない方やまだまだ苦手だなと思う方は参考にしてみてください。 UA切り替え・Viewport指定・拡大縮小の有無・電話番号リンクの無効化・ホーム画面用のアイコン指定など、スマートフォンサイトを制作する際に最低限覚えておくべきと思うことは他にも沢山あるんですが、今回はCSSに焦点を当てています。 また、タイトルでは「スマートフォンサイト制作時」としてはいますが、レスポンシブWebデザイン制作時でも頻繁に使うものだったり、PCサイト制作時でもCSS3に
細かすぎて伝わらないアンチエイリアスの話
はじめまして、デザイナーの越後です。 webフォント全盛の昨今ですが、まだまだ文字を画像化する機会も多く 画像で文字を扱うにしても、くっきりはっきり、意図した形でデザインがしたいものです。 そこで今回は「細かすぎて伝わらないアンチエイリアス」と題して、 少しマニアックなphotoshopでのフォント調整についてお話したいと思います。 おさらい：photoshopのアンチエイリアスについては、基本的には５種類 Photoshop上で文字を扱う際には、指定出来るアンチエイリアスは、 なし / シャープ / 鮮明 / 強く / 滑らかに の５種類です。 「なし」に関してはアンチエイリアスがかかっていないので、 文字のままのドットで表示されますが、 他の４つに関しては シャープ：文字が太い / くっきり 鮮明：文字が細い / くっきり 強く：文字が太い / なめらか 滑らかに：文字が細い / なめ
《時短＆簡単》正しい毛玉のとり方＆事前に防ぐ方法を教えちゃいます☆
洗濯毛玉スポンジ2019年12月10日 更新《時短＆簡単》正しい毛玉のとり方＆事前に防ぐ方法を教えちゃいます☆気づいたら毛玉だらけ…！なんて事ありませんか？そんな時に使える「正しい毛玉のとり方」をまとめてみました◎ お気に入りの服に毛玉がたくさん… セーターやカーディガンの毛玉は着るたび・洗うたびに毛玉が増えていきますよね。 毛玉がある服は汚く見えてしまうから着たくない、でもニットは着たい。 そんなあなたにおすすめの『毛玉のとり方』をまとめてみました！ これで冬の悩みの種も減り、いつでも綺麗なニットが着られるようになるはず◎ ご紹介するどの方法も、まず先に洋服の目立たない所で試してからやってみてくださいね。
横に水平線のあるテキスト
図1：横に水平線のあるテキストの例 おもに見出しなどで見かける、テキストの左右 (またはそのどちらか) に水平線を配置したスタイル。これを CSS で実現する方法について考えてみました。 Demo: 横に水平線のあるテキスト 重ねて隠すパターン まず最初は、1 本の水平線を幅いっぱいに配置した上で、テキストに重なる部分を隠す、という方法です。 <h2><span>Hello</span></h2> マークアップはこのように二重の要素が必要です。外側の h2 要素の擬似要素で水平線を作り、内側の span 要素に背景色を指定してテキスト部分を隠します。 h2 { position: relative; text-align: center; } h2:before { border-top: 1px solid; content: ""; position: absolute; top: 5
暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]
2020年8月31日(月)をもちまして、nanapiに関わるすべてのサービスは終了いたしました。 nanapiは、2009年のサービス開始より「みんなで作る暮らしのレシピ」という考えのもと、ユーザーの皆さまに生活に関する様々な「ハウツー」を投稿していただく投稿型ハウツーサービスとして運営してまいりました。 約11年間にわたって皆さまからご支援をいただきサービスを継続できたこと、nanapi編集部一同、心より御礼申し上げます。 掲載されていたコンテンツなどのnanapiについてのお問い合わせは、nanapi@supership.jp までお願いいたします。 長きに渡りnanapiを応援してくださり、本当にありがとうございました。
![暮らしの情報サイトnanapiはサービスを終了いたしました | nanapi [ナナピ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/0f2efe6fe863ec659c721d85c8e843e5fc1831ea/height=288;version=1;width=512/https%3A%2F%2Fimage.nanapi.com%2Fr%2F2013%2F12%2F24%2F11%2F20131224115452_52b8f77cb2139.jpg)
ボーイフレンドを直す方法 あるいは賢いjQuery.Deferredの使い方 - mizchi's blog
問題 モバイルは回線が不安定なので、ロードの失敗が頻繁に起こります。 開発時は高速なwifi環境で開発しているので、リリース間近になって帯域を圧迫していることに気づいたりします。 解決方法 画像を先読みします var preload = function(src){ var d = $.Deferred(); var img = new Image; img.src= src; img.onload = d.resolve img.onerror = d.reject return d.promise(); }; 何をやっているかというと、空のimgタグをつくってそこに画像を読み込みます。その過程でブラウザキャッシュに画像が保存されます。正確に言うとこの時点ではどこにも紐付いていないのでGC対象ですが、その後すぐDOMに画像をはるなら問題ありません。 並列で先読みする(速い・不安定) va
新しいGoogleマップをレスポンシブ対応で埋め込む方法 | ライフハッカー・ジャパン
Digital Inspiration：新しくなったGoogleマップでは、ウェブページに地図を埋め込むことが可能となりました。Googleマップのサイトを開き、埋め込みたいエリアをズームインします。右下の歯車アイコンをクリックして、メニューから「地図を埋め込む」オプションを選択すれば、埋め込みコードを取得できます。 埋め込みコードを使ったサンプルページがこちらです。デフォルトでは、Googleマップがレスポンシブに対応していません。スマートフォンなどでページを開くと、地図のサイズがデバイス画面にフィットせず、はみ出してしまいます。 同じGoogleマップをレスポンシブ対応で埋め込んだサンプルがこちら。ブラウザをリサイズしたり、スマートフォンからページを開いても、画面に合わせて地図のサイズを自動調整してくれます。 Googleマップをレスポンシブに埋め込む方法 以下がGoogleマップのデ
PHP - ファイル名から拡張子を取得する関数、ベンチマークもあるよ - たきゃはしです
拡張子取得、それは十人十色の関数である 一般的な拡張子を取得する方法は '.'を区切り文字として配列を作り、最後の要素を取り出す 拡張子があるであろう箇所を正規表現で検索、置換して取得する 最後に出る'.'を検索して以降を抜き出す など、他にもたくさんあります。 でも、パフォーマンスにバラつきはあるはずだし、 どうせなら「一番いいのを頼む」って考えるのが人の性ってもんですよね 拡張子を取得する関数たち エントリーNo1 正規表現の関数で配列に分割して最後の要素を取得する <?php $filename = '大きい画像a_1010.jpg'; $exts = split("[/\\.]", $filename); $n = count($exts) - 1; $ext = $exts[$n]; echo $exts[$n]; エントリーNo2 関数で拡張子を正規表現で検索、置換して取得する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]2013年、素敵なアイデア満載のスタイルシートのテクニックのまとめ