YouTubeなどの埋め込み iframe を CSS だけでレスポンシブウェブデザインに対応させる方法
YouTubeなどの埋め込み iframe を CSS だけでレスポンシブウェブデザインに対応させる方法 2014年06月02日 15:08HTML / CSS YouTube で取得できる埋め込み用コード、 いまは iframe になってますね。 こんなぐあい。 これをレスポンシブウェブデザインに対応させるにはどうしたらいいか、 というお話です。 画像とは事情が違う 通常、ブラウザの幅にあわせて画像の表示サイズが変わるようにしたければ CSS でこんな感じに書くと思います。 img { width: auto; max-width: 100%; height: auto; } これで、最大幅は親要素の幅と同じ、 元の画像がそれ以下のサイズ場合は本来の幅で表示され、 高さは縦横比を保ちながら適切なサイズになりますね。 ところが iframe の場合は事情が違って、 適切なサイズで表示するに
10万台分の駐車場を携帯で検索、予約して1日500円で使えるサービス『あきっぱ！』に期待
10万台分の駐車場を携帯で検索、予約して1日500円で使えるサービス『あきっぱ！』に期待 2014年03月07日 16:24サービス おもしろい駐車場サービスが出てきた。 あきっぱ！ 3行で言うと 10万台分の駐車場から探せる スマートフォンで予約ができる 利用料は1日最大500円 という駐車場サービスです。 一時利用の駐車場は足りてない 乗用車は日本全国に6,000万台あるのに対して 一時利用の駐車場は440万台しかないそうです。 一方、月極駐車場は5,000万台分以上あると言われていて しかも特に住宅地では空きが増えて深刻化しているとのこと。 そこで、駐車場を一時利用したいドライバーと 駐車場が空いて困ってるオーナーがスムーズにつながればいいのでは？ という発想ですね。 駐車場版の Airbnb という感じかな。 利用者としては1日500円は破格だし 駐車場の管理者は、どうせ空けとくな
温泉の注意書きに学ぶ「伝わる」メッセージのために覚えておきたいこと
その注意書きは、確かに読んでいた。 書かれた言葉の意味も理解していた。 それでも、そのメッセージは伝わらなかった。 露天風呂のメッセージ 初めて行った露天風呂の壁に こんな貼り紙がされていた。 一段目の下は低くなっています。お気をつけください。 一段目があって、下の段もあるんだな。 下の方の段は、低くなっているんだな。 だから気をつけないといけないんだな。 そして、風呂に入った。 少しびっくりした。 深い。この風呂、深いよ。 確かに書かれていた 確かに、そのことは書かれていた。 よくある露天風呂のように、岩場が段になっていて 一段目は出入りのための階段と腰掛けを兼ねた部分。 その下の段が、風呂の底。 確かに、一般的な浴槽と比べて、下の段が低い。 言葉の意味は理解していたのに 実際の感覚と結びついていなかった。 だから、入って少しびっくりした。 どこですれ違ったか 営業時間外の浴槽は空なんじ
「校長先生のお話」の思い出
学生として聞いたのではなくて、 高等学校の教員として勤めていたときの話。 何の行事だったかは忘れたんだけど 校長が全校生徒に向かって仰った言葉が今でも忘れられない。 みなさん、絶好調ですか？私はただの校長です。 何をどうしたかったんだろう。
【追記あり】日経新聞の記事はクレジット表記なしで自由に転載していいことが判明しました - 頭ん中
としか解釈のしようがないんですけど、 もし間違っていたらいけないので 他の考え方もできるよという方がいらっしゃったら教えてください。 判断の内容 日経新聞ウェブ版の記事は、スクリーンショットを自由に転載していい 情報源は「ある新聞」と書けばよい 元記事へのリンクは必要ない その際、許可を取る必要はない 判断の根拠 こちらの記事に 機種変更で「１人負けドコモ」の必死さに触れました ：日本経済新聞 当ブログの記事のスクリーンショットが掲載されていますが、 「あるブログ」とだけ表記されておりますし 情報元へのリンクもされていませんし そのことについて事前にも事後にもご連絡はいただいておりませんので 上記のような方針で運営されているものと判断しました。 誤っていれば速やかに訂正します もし上記の判断が何らかの誤りを含む場合は速やかに訂正いたしますので 何かご存じの方がいらっしゃったら ご連絡をい
MOSDO の名前に隠された謎かけ
モスバーガーとミスタードーナツのコラボレーション店 MOSDO というのがありますね。 先日東京にもできて話題になりました。 MOSDO! この名前、何かに似てると思ってたんだけど、わかった。MS-DOS だ。 しかも単に文字列が似てるというだけではなくて、 そこには謎かけが隠されていました。 MOSDO とかけて、MS-DOS ととく。 その心は「マックではありません」。
心の底からツイートするためのサービス『心の底から』を公開します
タイトルのとおりですけど、 心の底からツイートするためのサービス『心の底から』を公開します。 Twitter のウェブページでツイートを見ると その投稿に使われたアプリケーション名が表示されますね。 日本語設定にしている場合、 Twitter 本家のウェブサイトを使えば「webから」 yabmin を使えば「yabminから」と表示されます。 もうおわかりかと思いますが、 「心の底」という名前のアプリケーションから投稿するとこうなります。 それをやるためのサービスです。 存分にお叫びなさい。 心の底から — 心の底からツイートするためののサービス 作りたかったから作った。 反省するようなことは何もない。 追記 Twitter 本家の改変により アプリケーション名が表示されなくなったため、 『心の底から』はサービスの提供を終了しました。 心の底からツイートするためのサービス『心の底から』を終
ふぁぼられまとめ2011
去年やったこれを、今年もやってみます。 ふぁぼられまとめ2010 – 頭ん中 よく favorite されたツイートをまとめてみれば 人がどんなことに興味を持つのかが見えてくるかも。 2011年中の @msng のツイートから 人の作品や自分のブログ記事を紹介しただけのものは除いて 『ふぁぼったー』での上位10件。 ただ、今年のある時期から Twitter 公式の RT を使う人が増えてきた気がするので それも加味して順番をつけてみます。 第1位 「ノー残業デー」っていうのは他の日は残業が常態化してることのあらわれであって、エラそうに言うことではないと思う。「人のものを盗まない日」を設定してる人を想像してみたらわかる。 — マスナガ レイ (@msng) 8月 10, 2011 人によっていろんな思いがあると思いますけどね。 「盗むのは犯罪だから、それと比べるのはおかしい」 というご意見も
コンビニやスーパーがバレンタインの時期にやるべきこと
4年ほど前にこんなことを書いたんだけど、 チョコレート好きだと気苦労が多い – 頭ん中 バレンタインデーとは、 チョコレート好きな男性とって ずいぶん迷惑なイベントのようだ。 今もまた悲痛の叫びが聞こえてきた。 Twitter / エトゥ スーパーで「バレンタインデーキッス」が流れてる。あぁ、チョコが買いづらい時期になってきたなう。 このように悩んでいる人の声を聞くことは多いし、 その苦しみをどこへも訴えられずにもがき続けている人だってたくさんいる。 その数については正式な調査結果が待たれるところだが 相当な数に上るであろうことは想像に難くない。 もうコンビニやスーパーはこの時期 「バレンタインデーとは関係ないチョコ好きのためのチョコ売り場」 を作ってください。全力で応援します。
円周率1,000,000桁表を手に入れた
『円周率1,000,000桁表』という冊子を手に入れました。 以前 Amazon で見つけて気になったので 「ほしい物リスト」に入れといたんだけど、 こないだ何気なくそのリストを Facebook に晒してみたら それを見つけた ululun さんが本当に贈ってくださいました。 ありがとうございます。自分ではきっと買わなかった。 開いたらこんな感じ。 わかりますかね。 拡大。 3.14 から始まって、 1,000,000桁目まで。 買う人あんまりいないと思いますけど、 Amazon で買えるので一応リンクはっときます。 円周率1000000桁表 こんなのもあった。 オイラー定数1000000桁表 重要な追記 同じくこれを持ってるなん吉さんから指摘されて 重要なことを書き漏らしてることに気づいたので追記。 この本の値段、こうなってます。 消費税込みで330円。 330 ÷ 1.05 ≒ 31
同じことを何度も聞いてくる人への返事で言わない方がいいことと、何と言えばいいかの提案
同じことを何度も聞いてくる人への返事で言わない方がいいことと、何と言えばいいかの提案 2010年11月22日 21:56言葉 いま念頭に置いてるのはメールなんだけど、 ちゃんと説明したことが伝わってなくて 同じことを何度も聞かれたり 謂れない非難を受けたりすることはあると思う。 「もう！前にも言ったじゃん！」と憤りたくもなるし 返信するときにこんな表現をしたくなる気持ちもわかる。 その点につきましては以前にもお伝えいたしましたとおり、[同じ説明をする] でもこれを言っても誰も幸せにならないので やめておいた方がいいような気がする。 以前にもお伝えしたことがちゃんと受け止められていれば そのような悩ましいやりとりは発生しなかったはずなので、 相手はたぶん以前にもお伝えされたということを認識していない。 だからこの表現は「思い出してね」ではなく 「ちゃんと読んでないお前が悪い」という意味になっ
「FirefoxかわいいよFirefox」と思う最大の理由
追記あり。Google Chrome もかわいくなりました。 追記あり。Google Chrome のかわいさは限定的でした。 ここしばらく Google Chrome を使ってみてて これはこれでいいブラウザだと思うんだけど、 やっぱり自分のデフォルトブラウザは Firefox だなあ と思った。 アドオンが豊富だからとかそもそも慣れてるからとか いろいろ理由はあるんだけど、 一番かわいいなあと思うのは ロケーションバーで履歴の AND 検索ができるところ。 Chrome でも Firefox でも ロケーションバー（アドレスバー）に何か文字列を入れると 閲覧履歴やブックマークから それにマッチするものをひっぱってくれるんだけど、 Firefox ではこのときスペース区切りの AND 検索ができる。 例えばロケーションバーに “dev” という文字列を入れたとすると、 Facebook
WindowsからMacに乗り換えた人に伝えたい、入れておくと幸せになれるかもしれないアプリケーション
WindowsからMacに乗り換えた人に伝えたい、入れておくと幸せになれるかもしれないアプリケーション 2010年11月04日 15:44Mac 追記 これは2010年に書いた記事なんですけど、今でも使っているものはここで挙げたものの半分以下になりました。 最近 Mac を使い始めてここに来た方、せっかくだからこっちを見ていってください。 Mac を使い始めたら真っ先に覚えてほしいキーボードショートカット10項目 « 頭ん中 MacBook Air の影響もあると思うんだけど 周りで Mac を始める人が増えてきたので 「これ入れとくと幸せになれるかも」 というMac のアプリケーションを挙げてみます。 いいものはいっぱいあるんだけど Mac らしいと思うものや、Windows から Mac に移行した人が困りそうな点を補ってくれるものを優先 ブラウザや Dropbox, Evernote
緊急地震速報が届いたらどんな音がするか知っていますか？
緊急地震速報というのがありますね。 日本の気象庁が中心となって提供する地震情報で、 テレビや携帯電話などで通知されるようになっているもの。 最近で言えば2010年9月29日午後5時頃 東京都内を含む広い地域に配信されたようです。 「みんなの携帯が一斉に鳴ってびっくりした」 という発言を Twitter なんかでもたくさん見ましたが そもそもどんな音がするのか知っていなかったら いざというときすぐ「地震だ」と判断して 必要な行動をとることができないんじゃないかな。 というわけで緊急地震速報が届いたらどんな音がするか あらかじめよく確認しておいた方がいいと思うんだけど まとめてあるところが見あたらなかったので書いてみます。 NTTドコモ 「エリアメール」というサービスで提供されている模様。 対応機種はこちら。 対応機種 | サービス・機能 | NTTドコモ 事前の受信設定が必要な機種もあるよう
PHPでTwitter APIのOAuthを使う方法まとめ
この記事以降 Twitter API の仕様が変わっており、このままでは正しく機能しない場合があると思います。近いうちに今のやり方を書くので、それまで参考程度にご覧ください。 Twitter API の OAuth でひととおりやってみた。 忘れないようにメモ。 大雑把な流れ Twitter にアプリケーションを登録する。 Consumer Key と Consumer secret を取得する。 リクエストトークンを取得する。 認証用 URL を取得する。 ユーザーから承認を受ける（bot の場合は自分でやる）。 アクセストークンを取得する。 API にアクセスする。 以下、やった作業の手順です。 事前準備 HTTP_OAuth を使えるようにする OAuth の通信部分そのものは PEAR の HTTP_OAuth を使うことにしたので これをインストールする。 一番めんどくさい部分を
“OAuth”は何と読むか
“OAuth” は何と読むのか、が話題になることがある。 たしか最初は “oath” と同じ発音だった（これが「オース」）けど 今は “Oh Auth” と発音をするのだと書かれていたのを見た気がするので “oauth pronounce” で検索してみたらまさにそれが出てきた。 "OAuth" is pronounced "Oh Auth" and has two syllables "OAuth" is pronounced "Oh Auth" and has two syllables "OAuth" の発音は "Oh Auth" で、2音節だよ。 経緯についてはこう。 OAuth was originally called "OpenAuth" but then AOL took the name, so we renamed to "OAuth". We originally p
くしゃみが出そうで出ないときの対処方法
おばあちゃんの知恵袋みたいなお話なので ご存知だったらごめんなさいよ。 くしゃみが出そうで出ないというのはなかなかつらい。 待ってる間は何か変な顔になるし。 ずっと前、友人に 「そういうときは太陽を見たらいいよ」 と教えられたことがある。 そのときは「そんなアホな」と思ったんだけど、 「本当に効くから試しにやってみろ」と言う。 いやでも仮にその方法が有効だとしても 太陽を肉眼で見ちゃだめだし 要するに強い光を目に入れろということだろうと思って 天井を見上げて照明の光を見てみた。 効いた。 その後何度も試してみたけど、 やはり光を目に入れるとくしゃみがスムーズに出る。 このことを思い出して検索してみたら、 ちゃんとこの現象には名前がついてた。 光くしゃみ反射 – Wikipedia しかも意外な事実が。 この反射は日本人では約25%の人に現れる。優性遺伝によって子孫に伝えられると考えられ、光
Tab Mix Plus より軽い Firefox のタブ機能拡張アドオン: Tabberwocky
Tab Mix Plus より軽い Firefox のタブ機能拡張アドオン: Tabberwocky 2009年10月22日 12:24未分類 Firefox のタブ機能を拡張してくれるやつ。 特に タブの多段表示 未読タブのハイライト 左 (右) 側のタブをすべて閉じる あたりがどうしてもほしいので。 これに取って代わるかもしれないアドオンが登場。 Tabberwocky :: Add-ons for Firefox Tab Mis Plus はよくできていて特に不満があるわけではない。 ただ、Tabberwocky の説明を見ると Tabberwocky :: Add-ons for Firefox Size = 25KB (compared to ~400KB for Tab Mix Plus) とのこと。 Tab Mix Plus が400 KB ほどあるのに対して 25 KB と
コマを並べるだけのパズルゲーム「ロンポス」が想像以上におもしろい
パズル専門店の人が 「これが一番人気」と言っていたので試しに買ってみた。 サイズはちょうどニンテンドー DS と同じくらい。 ケースを開くとカラフルなコマが入っている。 これを問題集で指示されたとおりに配置して 残りのピースを並べて敷き詰めればクリア。 上のは残りピース4つから始める「レベル4」問題の一例。 4つ並べるくらいなら簡単だろうと思うんだけど、 何も考えずに並べると すぐに行き詰まる。 解く過程では 「もしここにこれを置くとすると、この部分に入るのはこれしかあり得ない。するとこっちを埋めることが不可能になるから、少なくともこの仮定は消える」 という論理パズルみたいなことを 指先を動かしながらやることになるので、 いろんなところが刺激されてよさそうな気がする。 これが正解。 レベル6になるとコマの半分を自分で並べることになって かなり手応えがある。 しかも遊び方はこれだけじゃない。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://www.msng.info/archives/2012/02/but-in-fact.php