hamashun me : livedoor IRC リリース。及び、body開始タグの省略とstyle要素のscoped属性について
追記：body開始タグを省略できる条件 の和訳を追記しました（記事の結論は変わりません）。 livedoor IRC(Internet Relay Chat)が公開されました。 ライブドアのラボである、livedoor labs EDGE内のページです。 以下からが本題。 HTML5のタグの省略 件のlivedoor IRCのページもHTML5なのですが、デザインに合わせてソースコードもシンプルにしてみました。 HTML5では、仕様書でタグの省略について決められているので、それを参考にしました。 body開始タグの省略について で、省略して良いのか最後まで迷ったのが、body開始タグです。仕様書の該当部分には次のように書かれています。 A body element's start tag may be omitted if the element is empty, or if the f
HTML5でタグをどれだけ省略できるか調べてみた
ご存知の方も多いと思いますが、HTML5ではタグの省略が可能になっています。 ということで、タグをどれだけ省略できるのか調べてみました。 なお、HTML5に準拠したWebブラウザ上であれば、省略した要素と同一のDOMが生成されることが保証されるようですので、そのあたりも踏まえてます。 １．タグ自体の省略が可能な要素 タグ自体の省略が可能な要素、つまり開始タグ・終了タグの両方の省略が可能な要素は以下です。 html head body colgroup tbody これらのタグを省略した次のようなソースコードをFirebugで参照すると、html要素、head要素、body要素がきちんと生成されていることが分かります。 ソースコード <title>foo</title> <style> body { font-size: 100%; } </style> <script src="http:
グーグルの検索結果に「著者」として自分の名前と写真を出すGoogle Authorship Markupの設定方法 | Web担当者Forum
「Google Authorship Markup（グーグル・オーサーシップ・マークアップ）」は、自分が著作したコンテンツと著作者情報を紐付けることで、グーグル検索でそのコンテンツがヒットした際に、検索結果ページ（SERP）に著作者の情報（写真や名前）を含んだリッチスニペットを出す仕組みだ。 上図は、「アトリビューション 本」で検索した際に表示される筆者のサイトの表示例だ。赤枠で囲んだ結果が私のブログページへのリンクである。写真など、他の結果と比べても違う表示がされていることがわかるだろう。日本では、まだあまり設定例が多くないと思われるので、見たことがない人もいるかもしれない。 検索マーケティングというと、検索順位をアップさせたりキーワードを選んだりということに注目が集まりがちだが、こうした新しい技術を採用して検索結果ページで検索ユーザーの視線を留めさせるのも、検索マーケティングでは重要な
実践Sass 前編
17. Scout • 無償 • Compassも対応 • サイトからDLできるver.ではconfig.rbが読めない • githubの最新版は、config.rbとSass3.2対応 • Sass3.2の対応が遅かった （一昨日ようやくリリース）
[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ
調べる。 備忘録としてwebやデザインについて調べたり 新しく知ったことなどを書き残していくカテゴリです。 HTML5入門シリーズ 折りしも東京では先日HTML5カンファレンスというイベントが開催され、webで飛び交う話題もそれについてのものがドンドン増えてきています。このブログでもたびたびHTML5のコーディングにおけるややこしい話題を取り扱っていますが、こういった需要はさらに増えていくのではないかなと思っています。 今回からたびたびHTML5入門と題しまして、HTML5を使ってweb制作をしていく上で避けては通れない基礎的な理解を深める為の文章を書いていきます。webcre8もHTML5は絶賛勉強中で、これはいち制作者としてHTML5によるコーディングをどうするべきかを考えた考察の覚書でもあります。間違いがあればガンガンツッコミをお願いします！知識のある人は単に「間違っている」という指
![[HTML5 入門]コンテンツ・モデルについて勘違いしそうなところ](https://cdn-ak-scissors.b.st-hatena.com/image/square/a579b466a9d9646edbe9cc1cec01abca7601b9fc/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2011%2F09%2Fhtml5-section-outline-150x150.png)
:invalidや:valid擬似クラスを使ったフォームバリデーションエラーメッセージのスタイルサンプル
今更ながら擬似クラスを使ったフォームバリデーションのスタイリングを試してみましたのでメモがてら。目新しい情報でもないので適当にスルーして下さいませ。 自分用のメモです。CSS3からフォーム向けの便利な擬似クラスが追加されてるのですが試してなかったのでテスト。 フォームサンプル HTML5のフォームバリデーションサンプルです。A List Apartのデモを少し変えただけ参考に。 <div> <label for="email">メール</label> <input type="email" id="email" name="email" placeholder="example@example.com" required /> <p class="val"> <span class="invalid">正しいメールアドレス入れてくださいまし。</span> <span class="val
HTMLとかCSSとかAPIとか
2012年9月8日に開催されたHTML5 Conference 2012でお話したときのスライドです。 スライドを見る
iOS6のリモートWebインスペクタ
iOS6のリモートWebインスペクタ iPhone5が販売されて、それに合わせてiOS6がリリースされました。ちょっとアップデートは様子見をしようと思っていたのですが、iOS6のリモートWebインスペクタが気になったので検証用のiPhoneのiOSバージョンを4.3から一気に6にアップデートしました。 iOS6のリモートWebインスペクタの使い方 iPhoneの設定 iPhoneの設定→Safari→詳細でWebインスペクタをオンにします。 WebインスペクタをオンにしたらSafari6がインストールされているMacとケーブルで繋ぎます。 ちなみにiOS6ではこれまであったデバッグコンソールがなくなってるのでWindowsの人はアップデートしないほうがいいかも。 Macの設定 Safariを立ち上げて開発メニューから「WebKit Webインスペクタを使用」にチェックを入れます。 iPho
ssig33.com - iOS6 の地図について駅などをもとに考えてみる
散々言われている面白地図ですが、例えば高円寺駅について見てみると 正しい位置にある「高円寺駅」 正しい位置にあるひらがな表記の「こうえんじ」 正しい位置にあり検索するとピンの落ちる先として設定されている「高円寺駅」 駅名で検索しないと出てこない 測地系のずれと思われる位置(南東に数百メートルのずれ)にある「高円寺駅」 の 4 個があることが分かります。高円寺駅の場合はこれだけですが、いくつかの駅では 謎の数キロメートルのずれが発生してる本当に意味分からないやつ 西にずれてることが多いっぽい がさらにあります。 iOS6 の地図は国内ではインクリメント P の地図(MapFan のやつ、カーナビによく使われている)を基本に複数の地図をマージされたものであることはよく知られていますが、その際測地系の違いを無視してマージしたり、謎の数キロメートルにも及ぶずれが発生したり、同じ名前の POI のマ
レスポンシブWebデザインのこれから | コラム | ミツエーリンクス
本日、 レスポンシブWebデザイン入門セミナー の最終回を開催しました。Webサイトにおけるマルチデバイス対応の最新動向として、 レスポンシブWebデザイン （Responsive Web Design、以後「RWD」と表記）をご紹介するこのセミナー。今年5月25日の第一回を皮切りに計8回を開催、延べ410名もの方々にお申し込みいただきました。改めて、この場をお借りして参加された皆様に御礼申し上げます。ご参加、誠にありがとうございました。 これほど多くの方々がRWDに関心を寄せられたのは、スマートフォンやタブレット端末に代表されるモバイルデバイスの普及が、もはや無視できない状況にあるからだと思います。近年、モバイルデバイスからWebサイトへのアクセスは、着実にその比率を高めつつあります。サイト全体でみれば、モバイルデバイスからのアクセス比率の高くないB2Bサイトであっても、時事性のあるニュ
iOS6でViewportにinitial-scale=1指定の挙動が改善されてる？
あの1.5倍ズーム挙動がなくなってる？ 今のところiOS Simlulatorによる確認ですが、iOS対応で珍しく開発者・制作者の頭を痛めつけてくれていたinitial-scale=1のときの「回転時にズーム1.5倍問題」がiOS6で改善されていました。 よくある下記のような、Viewport指定したときのアレですね。 一応、上記の例ではwidth=device-widthつけてありますが、国内でAndroidとiOS対応だけを標榜するなら、initial-scale=1だけで構わないでしょう。たぶん。 そもそもですが、iOS5以前で以下の現象を回避するなら、landscape時のwidth=480pxを犠牲に、width="device-width"だけでもいいですし。iOSのdevice-widthは向きを問わずに320CSSピクセルを指してます。 まずは縦から まずは普通に縦持ちで表
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WebIntentsにより拓かれる次のWeb
実践Sass 後編