サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
この記事は、以下のモダンCSSに関する記事のHTML版です。 せっかくならHTMLもちゃんと学んでみようと思い、最近のHTMLの新機能を改めて学び直したので、アウトプットついでにこの記事を書いています。HTML Living Standardの時代へ 2019年5月28日、W3CとWHATWGは、HTMLとDOM標準の開発をWHATWGが主導することで合意しました。これにより、HTMLは「HTML5」のようなバージョン番号を持つ仕様から、継続的に更新される「HTML Living Standard」へと移行しました。 この変化は単なる管理体制の変更ではなく、HTMLの進化の方向性を示しています。この記事で紹介する2019年以降の新機能を見ると、以下のような傾向が明確に現れています： 宣言的UI構築への移行 -JavaScript実装から、HTML属性による宣言的な記述へ ブラウザネイテ
2025年のモーダルの実装方法のメモ書き。 <dialog> 要素の利用を前提とします。 Web アプリケーションでUI ライブラリを利用する場合は話が変わってきます。 1年前にdialog要素を使用したモーダルウィンドウの実装例を投稿しましたが、大幅にアップデートされているため、忘れても構いません。 結論<dialog>要素の開閉は command 属性を使用する<dialog>要素の外側をクリックした際に閉じる Light dismiss 機能は closedby 属性を使用するcommand 属性と closedby 属性はPolyfill を使用する開閉時のアニメーション、背面のスクロール抑制、スクロールバーの有無によるガタツキの防止はCSS で行う方針としては極力JavaScriptを書かないことを目指します。 次のようにHTMLを書くことで<dialog>要素の開閉および
画像表示のマルチデバイス対応をHTMLとCSSのみで実現できる「レスポンシブ・イメージ」ですが、効果的な使い方をするには、いくつか注意点があります。プロダクション・サイトで使えるようになるまでにはもう少し時間がかかりそうですが、基礎と注意点くらいは今から覚えておいても良さそうです。 Cloud Fourというアメリカの制作会社のブログ で、<picture>要素の使い方について注意を促していて、とても重要な情報だと思ったのでこちらでもシェアします。先日書いたレスポンシブ・イメージとPicturefill 2のまとめとあわせて、近い将来、レスポンシブ・イメージ実装の参考になれば幸いです。 まずは推奨の記述方法から レスポンシブ・イメージ実装の際に推奨されるHTMLの記述方法は以下のとおりです： とりあえず、これだけ覚えておけば、細かいところはこの記事をはてブ しておいて、使う時にもう一度見な
Intro Preload を指定する <link rel=preload> の仕様が公開されており、現在Chrome Canary に実装されている。 この仕様のモチベーションについて、Chrome 開発者の Yoav Weiss 氏のブログも公開された。 今回は、この仕様の特徴と用途を解説し、本サイトへの適用について検討する。 W3C Preload Spec Intent to Ship: <link rel=preload> Preload: What IsItGood For? Preload Preload はリソースのローディングを最適化することを目的に策定された仕様である。 link 属性ファミリーで、最適化に用いられる値としては、以前書いた Resource Hints 系 と近いが、仕様としては別になっている。 また、既に HTTP2 においてこの仕様の一部が使わ
パート1：メディア・クエリのどこがまずいのか？ そう、もし君がウェブサイトを作っている時代が1993年2月23日から2010年5月25日の間だったら、画像の扱いなんてチョロかったね！ それはこんなふうに単純だった。 幅の固定されたレイアウトをにらみつける 画像がきっかり何ピクセルかを測る――その画像はあらゆるユーザーの画面で変わらないスペースを占めることになる Photoshopのエンジンをかける 画像をさっき測ったとおりのサイズで「ウェブ用に保存」する それを<img>タグでマークアップする グラスにビールを注ぎ（または新鮮なグリンピースの缶を開け）、仕事がうまくいったことを祝う ときおり聡明なる預言者が荒野から現れては、この手法に潜む問題について深遠な真実を説くこともあった。それでもこのやり方は、20年もの間、ウェブ・デザイナーを生業とするものたちに受け入れられてきた。 しかし、時代は
Web技術者コミュニティ「html5j」が主催する最新技術トレンドや業界動向を学ぶ勉強会「HTML5とか勉強会」が六本木ヒルズのGoogleで開催された。第44回となる今回のテーマは「HTML5とセキュリティ」。セキュリティのエキスパートたちが語る、HTML5および関連する周辺技術のセキュリティ対策に役立つ情報とヒントをレポートする。 by 馬場美由紀 （CodeIQ中の人） 今から始めるHTML5セキュリティ トップバッターで登壇したのは、一般社団法人JPCERTコーディネーションセンターの松本悦宜氏。JPCERT/CCが2013年10月に公開した「HTML5を利用したWebアプリケーションのセキュリティ問題に関する調査報告書」をもとに、Webアプリケーション開発者が 知っておきたいHTML5および関連する周辺技術のセキュリティ対策について解説した。 便利さの一方で、脆弱性も広がるHT
バリデーション, 複数入力, ヒント表示などの新機能も テキスト入力用の部品は、type属性以外の属性を使って、さらに機能を追加することができます。 required属性で「必須項目」にする（未記入だと送信不可のバリデート） pattern属性で、「正規表記」による制約（違う形式で書くと送信不可） multiple属性で、e-mailアドレスの「複数入力」を可能にする placeholder属性で、ヒントになる「入力見本テキスト」を表示しておく list属性で、テキストフィールドに選択肢を表示する（<datalist>要素を併用します） autofocus属性で、HTMLのロード後すぐに「フォーカス（記入のための選択）」 form属性で <form>要素の外に出してレイアウトする autocomplete属性で「オートコンプリート（履歴から入力予測する）」機能 readonly属性で「読み
![[49-2] input要素でテキストを入力してもらおう ( text, search, tel, url, email, password )](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2f395680a05400440c663991ff18a2ff876fc360a6%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttps%253A%252F%252Fblog-imgs-51.fc2.com%252Fh%252Fo%252Fn%252Fhonttoni%252F130226-3.gif&f=jpg&w=240)
figure要素には何を入れられるのか figure要素には何を入れられるか、どう使うべきなのかが疑問になったので考えてみました。 発端：リストにタイトルをつけたい このfigure要素について考えるきっかけになったのは、ブログ内で「タイトルの付いたリスト」を作りたいと思った時です。 別に見出し要素の直後にリストを置けば読み手にはそれについてのリストだと認識されるんでしょうけど…場合によってはなんかしっくりきません。 だって画像はfigureで囲めばfigcaptionで、inputにはlabelで、tableにはcaptionでマークアップ的にしっかり関連づいたキャプションがつけられるのに、リストや定義リスト、あとコードにキャプションがつけられないのは変ですよ、変だよなー。と思ってたわけです。 figure要素の説明を読んだHTML5.JPを読みに行きましょう。すると figure 要
![[HTML5]正しいfigure要素の使い方(文脈まで深く考えた)](/image.pl?url=https%3a%2f%2fcdn-ak-scissors.b.st-hatena.com%2fimage%2fsquare%2fa4edf0eaf5e8f4c77408f10ba236c93f8031449d%2fheight%3d288%3bversion%3d1%3bwidth%3d512%2fhttp%253A%252F%252Fwebcre8.jp%252Fwordpress%252Fwp-content%252Fuploads%252F2012%252F03%252Fhtml5-right-figure-01-150x150.png&f=jpg&w=240)
と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view
これなんだけども:HTML - <a href="#top">Top of the Page</a>は該当するフラグメント（<div id="top">や<a name="name">）がなくても仕様的に正しい - Qiita 文書の先頭へのリンク · terkel.jp 仕様についてあんまり書いてなかったので自分で読んでみたまとめ書く。 href="#top"を指定すると自動的にページの先頭へのリンクになる ……というブラウザーの独自仕様があったわけなんだけども、これが正式に仕様として明記されたとの事。 MDNの説明が一発で分かる。 a 要素 -HTML | MDN href これは、ハイパーリンクのソースを定義するアンカー要素で唯一必須の属性です。（中略） 補足: 特別なフラグメントである "top" を使用すると、ページの最上部に戻るリンクを作成できます。例: <a href="
こんにちは、MUGENUPの倉成です。 最近はWebアプリでもデスクトップ通知が出来るものが増えていますよね。 今日はそんなデスクトップ通知の実装を取り上げてみようと思います。 便利なライブラリデスクトップ通知はブラウザによって実装が異なり、各ブラウザの対応は手間がかかるので、今回はクロスブラウザ対応を簡単にできるHTML5-Desktop-Notificationsを使います。 他のデスクトップ通知のライブラリにはnotifyもあり、こちらもHTML5-Desktop-Notificationsと同じくらいのStarが付いているようです。 使い方 さて、ここからはHTML5-Desktop-Notificationsの使い方をREADMEにそって ブラウザ対応状況の確認 ユーザーに通知の許可を求める 通知を発行 の3段階で説明していきたいと思います。 なお、本記事はこのコミット時のコー
Canvas、WebGL、WebRTC、WebSocketなど、HTML5の花形スターとも言えるモテ系APIは、常に世間の注目を集めている。これらAPIを使いこなせるウェブディベロッパーはどこからも引っ張りだこだろう。しかし、注目度が低いながらも、今後のウェブを支える（かもしれない）最新のAPIが数多く存在する。このようなAPIは派手さが足りないゆえに話題になることもない。しかし、これら非モテ系のAPIも含めてHTML5だ。本セッションでは、ありきたりのモテ系APIに飽きたマニアな貴方のために、普段は陽の当たらないAPIを一挙紹介する。もちろん、どれかのブラウザーに実装されているAPIのみだ。今から使おうと思えば使えないことはない。そして、W3Cにて仕様策定が始まって日が浅いため、明日にはどうなるか分からない。無くなるかもしれないし、大幅に変更されてしまうかもしれない。今覚えても役に立た
WebOSGoodies へようこそ！ WebOS はインターネットの未来形。あらゆる Web サイトが繋がり、共有し、協力して創り上げる、ひとつの巨大な情報システムです。そこでは、あらゆる情報がネットワーク上に蓄積され、我々はいつでも、どこからでも、多彩なデバイスを使ってそれらにアクセスできます。 WebOSGoodies は、さまざまな情報提供やツール開発を通して、そんな世界の実現に少しでも貢献するべく活動していきます。Google リーダー、全 Web アプリケーション中でダントツ No.1 の使用率だったんですよ。デスクトップと合わせても、たぶん Web ブラウザ、Emacs に次ぐ 3 位くらいなんですよ。購読フィードの数が多い上にiPhone や Nexus 7 でも読むから、他のリーダーじゃダメなんですよ。それなのに・・・猶予期間たった 4 ヶ月で終了とかどういうこ
この記事は年以上前に書かれたもので、内容が古かったり、セキュリティ上の問題等の理由でリンクが解除されている可能性があります。 今更ながら擬似クラスを使ったフォームバリデーションのスタイリングを試してみましたのでメモがてら。目新しい情報でもないので適当にスルーして下さいませ。 自分用のメモです。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"> <sp
本を買わずに解決するWeb制作の小技 ホームページ作成でちょっとしたことを参考書を買わずに解決する方法をPHPCSSWebデザイン jQuery Flashを中心に便利な技をまとめていきます！現在、長野県長野市の制作会社でWeb作成中！iPhoneやiPadのアプリを作りたいけど、iPhoneアプリ初心者なので 作るにはObjective-Cを覚えたり登録したりお金かかったりとかiPhoneアプリの作成にはハードルがちょっと高い。 そこで、今までのWebの知識を活かして、Webアプリにしようと 思って試してみた。 基本的な知識を理解しなければいけないので、超簡単なWebアプリを作成してみた。 だた、写真を100枚表示するだけ。 Webアプリと呼べるのだろうか？ 今回は、基本的な知識を知りたかったのと分かりやすいので Webアプリと呼ぶことにします。 完成したものはこちら！iPhon
App Engineによる設計手法でひとつ私が実案件で試してなかなかうまくいったと思ったのは、「Smalltable」って私が勝手に呼んでいるアーキテクチャです。簡単にいうと、「複数クライアントのローカルのSQLite間をDatastoreを介して同期する」仕組みです（こういうの一般に何パターンと言うのでしょう…教えてください！）。 クライアントはHTML5やAIR、iPhone、Android等のリッチクライアントで（実際に実装したのはAIRとiPhoneです）、SQLite等の小規模RDB（以下、Smalltable）をローカルに持つことが前提 Smalltableは、Datastoreが保持するすべてのデータのうち、そのユーザーが常時使用するデータのみ保持するサブセット アプリケーションの大半のロジックをリッチクライアント内のSmalltableだけで実装する すべてのレコードにはク
IntroductionIt's becoming increasingly important for web-based applications to be accessible offline. Yes, all browsers can cache pages and resources for long periods if told to do so, but the browser can kick individualitems out of the cache at any point to make room for other things.HTML5 addresses some of the annoyances of being offline with the ApplicationCache interface. Using the cache in
フォームの入力コントロール （input とかtextarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用するプレースホルダ。HTML5 では、placeholder 属性が新たに追加され、プレースホルダの提供が簡単に行えますが、この属性の値を活かして、未対応環境にもプレースホルダを提供する jQuery プラグインを紹介します。 フォームの入力コントロール （input とかtextarea） に対して、初期値として入力例などをうっすら表示し、ユーザーへのガイドとして使用する （プレースホルダ） なんてことはよくやります。HTML5 では、プレースホルダを指定する属性として、まさにそのままの名前が付いた、placeholder 属性が新たに追加され、ブラウザさえ対応していればとても簡単に実現可能になっていますが、今のところ IE が対応していな
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
