これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
なぜHixieはいつも“ノー”と言い続けるのか？ HTML5仕様のキーパーソン、Hixieへのインタビュー（前編）
なぜHixieはいつも“ノー”と言い続けるのか？ HTML5仕様のキーパーソン、Hixieへのインタビュー（前編） HTML5の登場は、Webのあり方を一変させようとしていると言っても過言ではないでしょう。その仕様策定はW3CとWHATWG（Web Hypertext Application Technology Working Group）が共同で行っています。 HTML5において、もっとも影響力のある人と言えばIan Hickson氏、通称Hixie（ヒクシー）がその筆頭にあがります。彼は昨年までW3CのHTMLワーキンググループでHTML5仕様のエディタをつとめ、WHATWGでは現在もエディタとして強力なリーダーシップを発揮しています。 そのHixieに、同じくHTML5界の著名人であるオペラのBruce Lawson氏がインタビューした記事「Interview with Ian H
Webパフォーマンス ベストプラクティス - Make the Web Faster
Webパフォーマンス ベストプラクティス Last updated: 02 October 2012 翻訳：@t32k WebページをPage Speedで調べるとルールに準拠していないものが提示される。このルールというのは、一般的にあなたが開発段階において取り入れるべきフロントエンドのベストプラクティスだ。あなたがPage Speedを使用しようとしまいと、私たちはこの各ルールについてのドキュメントを提供する（たぶんちょうど新しいサイトを開発中でテストする準備が整ってないだろう）。もちろん、これらのページはいつでも参照することができる。私たちはあなたの開発プロセスに取り入れてもらうために、このベストプラクティスを実装するための明確なティップスと提案を提供する。 パフォーマンス ベストプラクティスについて Page Speedはクライアント側からの観点でパフォーマンスを評価し、一般的にペー
徳丸本に学ぶ 安全なPHPアプリ開発の鉄則2012
2. 本日お話しする内容 • 鉄則1: PHP自体の脆弱性対処をしよう • 鉄則2: Ajaxの脆弱性対処をしよう • 鉄則3: 競合条件の脆弱性対処をしよう • 鉄則4: htmlspecialcharsの使い方2012 • 鉄則5: escapashellcmdは使わないこと • 鉄則6: SQLインジェクションの対処 • 鉄則7: クロスサイト･スクリプティングの対処 • 鉄則8: クロスサイト・リクエスト・フォージェリの対処 • 鉄則9: パスワードの保存はソルトつきハッシュ、できればスト レッチングも • 鉄則10: 他にもたくさんある脆弱性の対処 Copyright © 2012 HASH Consulting Corp. 2 3. 徳丸浩の自己紹介 • 経歴 – 1985年 京セラ株式会社入社 – 1995年 京セラコミュニケーションシステム株式会社(KCCS)に出向・転籍
BOWER
TWITTER ENGINEERING PRESENTS bower THE BROWSER PACKAGE MANAGER Introduction Bower is a package manager for the web. Bower lets you easily install assets such as images, CSS and JavaScript, and manages dependencies for you. For example, to install a package, run: bower install jquery This will download jQuery to ./components/jquery. That's it. The idea is that Bower does package management and pack
Tips - MarkdownをHTMLにembedする : 404 Blog Not Found
2012年08月16日21:30 カテゴリTipsLightweight Languages Tips - MarkdownをHTMLにembedする Markdownの最大の特徴は、「HTMLをembedできるマークアップ言語」であること。 Daring Fireball: Markdown Syntax Documentation For any markup that is not covered by Markdown's syntax, you simply use HTML itself. There's no need to preface it or delimit it to indicate that you're switching from Markdown to HTML; you just use the tags. それでは逆にHTMLにMarkdownをem
L'eclat des jours(2012-06-22)
_ githubのここが大嫌い githubには、お世話になっているが、どうにも気に食わないところがある。 でも、もしかしたら、おれが知らないだけで、～すればいいだけじゃん、みたいなことも当然あるので、ここで不満点を書いてみる。 何が気に食わないかと言えば、HTMLがまともに読めないことだ。 いろいろ理由があって、HTMLがレポジトリに入っているとするじゃん。 で、それをブラウザーを使って（だって、githubだからね）読みたいとする。 でも、そうは問屋がおろしてくれない。 ファイル名をクリックすると、行番号つきのテキストとして表示される。きれいに色がついているが、styleで指定したcolorが反映されているわけじゃない。タグが紺色っぽい色、属性名名が緑青で、属性が赤になっているだけだ。つまり構文を解釈して種類によって色わけしてあるだけだね。もちろん、おれはHTMLのソースが読みたいんじ
prototypeを拡張することで得られるもの。prototype拡張指向へのスイッチ - latest log
(ε・◇・)з mofmof.js や新しい uupaa.js では prototype拡張を活用しています (ε・◇・)з 長所がわかりづらいみたいなので、言い出しっぺのボクの中の人がメリットを列挙してみよー というエントリです (ε・◇・)з でも、長文になりそうなので、思いついたらちょっとずつ書き足していって、後で再編するよー というノリです (ε・◇・)з タイトルも適当です かわいい子には旅をさせるよ ( HTMLElement#cut ) 子ノード(div)を親ノードからパージする処理を考えてみましょう。 ---✂-------------------✂--- if (div.parentNode) { div.parentNode.removeChild(div); // div.parentNode = null } ---✂-------------------✂---
スクリプトが無効の場合のスタイル
たとえばホームページのビジュアル要素など、いったん非表示にしておいてスクリプトでふわっとフェードインさせたい、みたいなことはよくある。そのとき非表示にする操作も JavaScript にやらせると一瞬見えてしまうことがあるので CSS で非表示化したいが、それだとスクリプトが無効の場合に何も表示されなくなってしまう… というような、スクリプトによる操作を前提にしたスタイルのフォールバックをどうするかという問題。 ここのところよく使っていたのは、JavaScript で html 要素の class 属性を操作し、それをもとに CSS を書くという手。Modernizr でも使われてるあれ。 (function () { var root = document.documentElement; root.className = root.className.replace(/\bno[-_]
次世代HTMLの新仕様「レスポンシブ・イメージ（仮）」についてまとめてみた
レスポンシブWebデザインを実装する際、画像の扱いは一つの課題として残っています。現在、PHPを使用した「Adaptive Images」やJavaScriptを使った「Responsive-Images」などが現実的な対応策としてありますが、どちらもApacheの設定を必要とします。レスポンシブWebデザインが広まって標準的な実装方法の一つになろうとしている今、サーバサイド技術に依存しない解決策が早急に求められています。 そんな中、HTMLの仕様策定の一端を担うWHATWG（Web Hypertext Application Technology Working Group – ワットダブルジーと読む）で、新たな仕様が検討されています。 では、どんな議論がされていて、今どんな状況なのか？ なかなか複雑なことになっているようなので、調べてまとめてみました。 ※この記事は、レスポンシブWeb
DOCTYPE はなぜあるのか - 若葉もすなる☆日記というもの
DOCTYPE 宣言はなぜ作られたのですかという質問がありました。 HTML 文書の先頭には必ず DOCTYPE がなければならないとされています。しかし確かに DOCTYPE は一見何の役割も果たしておらず、無駄な行にしか見えません。なぜそんな DOCTYPE が作られ、今も必要とされているのかを理解するためには、少し昔の話をする必要があります。 SGML になりたかった HTML HTML は元々 SGML と呼ばれるマーク付け言語を参考に作られました。正確には SGML はマーク付け言語ではなく、マーク付け言語を定義するための枠組み、メタマーク付け言語とでも言うべきもので、どのような要素や属性、タグや実体参照を組み合わせてマーク付け言語を構成するかを SGML の規定に従って記述することになっていました。これが文書型定義 (DTD) であり、 DTD を宣言・参照するのが DOCTY
【続・誤植】Adobeの提案する新しい＜br＞の世界が酷すぎて泣ける。
【閲覧時腹筋注意】Apple新商品のキャッチコピーが直訳すぎて気になったので集めました。 それに引き続き今度はAdobeのサイトにも似たような面白いものがあるということで見てきたました。 今回は前回ほどでは無いのですが、修正される前にキャプチャーを撮ったのでよろしければどうぞ。 これを見て、分かる人は分かると思います。 この＜br＞というのは、ホームページなどをつくるHTML等で使う改行のこと。 本来ならこの＜br＞というのはこのように表示されず、そこの部分が改行されるのですが、 ＜＞が全角なんでしょうか？とりあえずそのまま表示されちゃっているので、こんな奇妙な文章に… とりあえずAdobeが提唱する＜BR＞の新たな次元をご紹介しましょう。 なるほど。＜br＞は効率かつ柔軟なんですね。 最高峰の＜br＞には世界が驚きます。 Adobeを使えば＜br＞が効率良く作れます。 ＜br＞というのは
はてなグループの終了日を2020年1月31日(金)に決定しました - はてなの告知
はてなグループの終了日を2020年1月31日(金)に決定しました 以下のエントリの通り、今年末を目処にはてなグループを終了予定である旨をお知らせしておりました。 2019年末を目処に、はてなグループの提供を終了する予定です - はてなグループ日記 このたび、正式に終了日を決定いたしましたので、以下の通りご確認ください。 終了日: 2020年1月31日(金) エクスポート希望申請期限:2020年1月31日(金) 終了日以降は、はてなグループの閲覧および投稿は行えません。日記のエクスポートが必要な方は以下の記事にしたがって手続きをしてください。 はてなグループに投稿された日記データのエクスポートについて - はてなグループ日記 ご利用のみなさまにはご迷惑をおかけいたしますが、どうぞよろしくお願いいたします。 2020-06-25 追記 はてなグループ日記のエクスポートデータは2020年2月28
一億台のスマートテレビ、データ放送を活用する「JoiNTV」の新展開
日本テレビ放送網の「JoiNTV」は、放送通信融合型のソーシャル視聴サービスだ。データ放送を使った枠組みということで、多くの人が”馬鹿にしている”のだが、実態を見返すと、とても馬鹿にはできない、というのが現状である。 「JoiNTV」の利用イメージ。必要なものは、地デジ対応テレビとFacebookアカウントのみ。テレビ画面にFacebookの“友達”リストを表示して一緒に番組を視聴し、気に入ったシーンではリモコン操作で「いいね！」を残せる というのも、地デジに完全移行した結果、データ放送の利用者は1番組あたりで50万世帯を超えているという。テレビの進化などにより、以前に比べてデータ放送を利用する際の速度感（表示にかかる時間）が異なるというのも、利用率が向上している理由かもしれない。 確かにデータ放送は古い技術だ。BMLというHTMLのサブセットを端末に送り、コンテンツを表示させる。策定され
デバッグしやすいHTMLのテストの書き方 - 2012-01-18 - ククログ
注意: 長いです。 一言まとめ: withinとtest-unit-capybaraを使ってHTMLのテストを書くと問題を見つけやすくなる。あわせて読みたい: デバッグしやすいassert_equalの書き方 HTMLに対するテストに限らず、開発を進めていく中でテストが失敗する状況になることは日常的にあることです。HTMLの場合は、入力フォームのラベルを変更したり、項目を追加したら既存のテストが失敗するようになるでしょう。そのとき、どのようにテストを書いていれば原因を素早く見つけられるのかを説明します。ポイントは「注目しているノードを明示すること」です。 HTMLテストのライブラリ さて、Rubyで処理結果のHTMLをテストするときにはどんなライブラリを使っていますか？The Ruby ToolboxにあるBrowser testingカテゴリを見てみると、Capybaraが最も使われてい
nginxで広告(HTML断片)をランダムに入れ替える - karasuyamatenguの日記
このようなHTMLで広告を表示するとしよう： <div class="ad"><a href="..."><img src="..." /></a></div>この画像リンクの部分をページロードする度に次のHTML断片の一つに入れ替えたい。 <a href="/redirect?dest=FOO"><img src="/img/FOO.png"></a> <a href="/redirect?dest=BAR"><img src="/img/BAR.png"></a> <a href="/redirect?dest=BAZ"><img src="/img/BAZ.png"></a> 高速化のためにキャッシュしておいたHTMLを、一部を書き換えるために再び生成するのは効率が悪い。HTMLの一部を前もって用意された幾つかのHTML断片の一つにおきかえるという簡単な操作なので、スクリプト言語によ
HTMLとJSだけで何か作るときの - hitode909の日記
HTMLとJSだけで何か作ることが多くて，開発環境をどう作るかとか，ノウハウみたいなのがたまってきたと思う． ローカルのHTMLファイルをブラウザで開くと，いろんな制約がある．たとえば，ファイルAPIを使えないとか，YouTubeのプレイヤー貼り付けできないとか，/js/みたいに絶対パスで指定することもできない．ページ1枚なら他のページにリンクとかいらないけど，ウェブサイトを作ってるときとかは，/help/でヘルプページを表示するとか書いたときに，ローカルのファイルを見てリンクが切れてるということになる．開発中はリンク切れだけど本番サーバーに置くと見れるはずとか言って開発するのは怖い． サーバーでRubyとかPerlが動いてるみたいなときはローカルでサーバーを立てて開発してると思う．HTMLとJSだけ使うときでもローカルでサーバーを立てて開発したほうがいいと思う． 開発中は，nginxでフ
固定レイアウトのEPUBって何なのよ？ - 電書ちゃんねるBlog
ろす 今回から、EPUBの固定レイアウト（Fixed Layout）について、徐々に踏み込んでゆきたいと思います。 ここで主に扱うのは2012年3月13日に発表されたInformational DocumentであるEPUB 3 Fixed-Layout Documentsという文書。EPUB3の仕様本体からは切り離された位置づけにある文書ですが、出版デジタル機構や緊デジ（コンテンツ緊急電子化事業）の制作フォーマットとして利用される可能性もあり注目です。 EPUB 3 Fixed-Layout Documents 電書ちゃん 今日は入門者の立場に立って容赦なくツッコむわよ、覚悟しなさい。 そもそもEPUB＝リフローが一般的な理解だと思うんだけど、固定レイアウトは、リフローしないレイアウトよね。つまり、ディスプレイや文字の大きさによって行の折り返しやページ区切りの位置が変化したりしないのよね
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Component概要
Firefox 17 のサイト互換性に関わる修正のまとめ
