実はHTMLだけで多くのことが実現できる！知っておくと便利なHTMLの使い方
HTMLだけで多くのことが実現できるのは素晴らしいことです。一昔前までは、CSSやJavaScriptを使用しなければできなかったこと、かなり複雑なコードを書かなければできなかったことが、実はHTMLだけで多くのことが実現できます。 知っておくと便利なHTMLの使い方をまとめて紹介します。 HTML can do that? by Ananya Neogi 先日紹介した「CSSでここまでできるのか！」の続編です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. datalist -フォームに入力候補を表示 2. dialog -ダイアログ ボックス 3. progress -プログレスバー 4. detailsとsummary -開閉パネル 5. inputmode -スマホで入力時に適したキーパッドを表示 6. inpu
Cacoo HTML5 バージョンが8月28日にリリース決定！編集画面のパフォーマンスが向上します。 | Cacooブログ
仕様やUI(画面)は現行バージョンと異なる可能性があります。 Cacooの最新版についてはこちらからご確認ください。 こんにちは！Cacooチームの平山です。いよいよ2017年8月28日より、HTML5で作られたCacooの編集画面が利用できます。 Cacoo HTML5 バージョンのリリーススケジュールについて、28日の段階では、新規で作成した図はすべてHTML5バージョンで編集可能に、リリース後一ヵ月をめどにしてすでに作成した図もHTML5バージョンで編集できるようになります。 Cacoo HTML5 バージョンでは、ユーザーインターフェースは従来のFlash版を踏襲していますが、内部処理が刷新されており、従来よりもパフォーマンスが向上しています。詳しい改善点は28日のリリース後にあらためて情報を公開します。 Cacoo HTML5 バージョン提供にあたって起きる変更点 反応速度が改善
Web Pushでブラウザにプッシュ通知を送ってみる - Qiita
本記事のアップデートについて ※ Chrome 60以降、Firefox 55以降では、暗号化の手順に変更が生じます。詳細は、[改訂版] Web Pushでブラウザにプッシュ通知を送ってみるを参照してください。 2022-05-03: 今後メンテナンスを行わない見通しであることから、Javaで動作するデモの公開を終了いたします。長らくありがとうございました。なお、GitHubリポジトリはそのまま残しますので、古いコードでよろしければ参考になれば幸いです。 はじめに 先に「ChromeでW3C Push APIを使ってみた」や「Firefox (Developer Edition)でW3C Push APIを使ってみる」で書きましたように、ブラウザでのプッシュ通知の対応が徐々に形になってきています。 ChromeやFirefoxでプッシュ通知を通知だけではなくデータ(ペイロード)付きで送れる
[HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita
こんなsectionは○○だ 1.見出しが無い 見出しが無い/用意できない = 章や節ではない = sectionじゃない 2.段組みのためだけに使う sectionはdivの代わりじゃない セマンティクスを意識しよう nav サイトナビゲーションセクションを表す。 <nav> <ul> <li><a href='/'>サイトトップ</li> <li><a href='/about'>このサイトについて</li> <li><a href='/contact'>お問い合わせ</li> </ul> </nav> こんなnavは○○だ 1.nav要素を大量に使っている nav要素を使うことができるのは、そのサイトにとって主要なナビゲーションだけ。 多くても３つくらい たとえば、ヘッダメニュー、サイドメニュー、ぱんくずリストはnav 検索ボックス、リンク集は非nav 2.リストじゃない セマンティ
![[HTML5] 新要素まとめ【2014/2/14版勧告候補】 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/2f6ba61007b09f1271e822cee8fb7e128662ea29/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCSFRNTDUlNUQlMjAlRTYlOTYlQjAlRTglQTYlODElRTclQjQlQTAlRTMlODElQkUlRTMlODElQTglRTMlODIlODElRTMlODAlOTAyMDE0JTJGMiUyRjE0JUU3JTg5JTg4JUU1JThCJUE3JUU1JTkxJThBJUU1JTgwJTk5JUU4JUEzJTlDJUUzJTgwJTkxJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1hMGNiNDNiNTFiMmJjNjM4OGU3NDk5NTgwNmQwNWJjZQ%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBtYWNjb3RzYW4mdHh0LWNvbG9yPSUyMzFFMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWViNjJjNjg5M2Q4ZTFkMDM5MmVjZmFjZWRlZGY5NTM5%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Db46bffda810eba3e8a47f4348b4cad12)
article,section,nav,aside,header,footer,mainなどの解説 HTML5 実践編
article,section,nav,aside,header,footer,mainなどの解説 HTML5 実践編 こんにちは。 Webマーケティング部の杉尾成行です。 前回の続きで、HTML5でのコーディングについてお話しさせていただきます。 よろしくお願いします。 ※今回、新たに作成するものはございません。 前回はコチラ ⇒ ＨＴＭＬ5で書く~まずは骨組みから HTML5実践編 前回のおさらい 前回出来上がったものは下記のような形でした。 <!DOCTYPE HTML> <html lang="ja"> <head> <title>旅行したい国</title> </head> <body> <header> <h1>旅行したい国</h1> <nav> <ul> <li>ヨーロッパ編</li> <li>アジア編</li> <li>アフリカ編</li> <li>北米、南米編</li>
HTML 5.1の新要素picture入門 - Qiita
(2016/09/26 追記) picture要素について、ICS MEDIAにて更に詳しく解説しました。こちらも合わせて参照ください。 レスポンシブイメージで画像の表示を最適化 〜CSSもJSもいらないHTML 5.1の新機能 - ICS MEDIA HTML 5.1にて実装される新要素picture要素を使うと、CSSメディアクエリを使って画像を出し分けることが可能です。 例えば、ビューポート横幅が700px以下の時、a.pngという画像を表示するコードは下記のとおりです。個別の画像の指定はsource要素で行い、画像パスをsrcset属性、メディアクエリをmedia属性でそれぞれ指定します。また、picture要素に対応していないブラウザの為に、img要素も必ず指定します。 <picture> <source media="(max-width: 600px)" srcset="im
Introduction to Service Worker: How to use Service Worker - HTML5 Rocks
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
【HTML】初期開発コーディングテンプレートと CSS コーディング規約
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>タイトル | サイト名</title> <meta name="description" content="ディスクリプション" /> <meta property="og:type" content="website" /> <meta property="og:title" content="タイトル" /> <meta property="og:image" content="/img/icon.png" /> <meta property="og:url" content="http://example.net/" /> <me
もう逃げない。HTMLのviewportをちゃんと理解する
<meta name="viewport" content="width=device-width,initial-scale=1"> と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返す
HTMLのsrcsetを使って画像をレスポンシブにRetina対応させてみよう | Kia King
WEBでレスポンシブ対応するときに結構大変なのが画像の扱い。iPhone等の高解像度デバイス(Retinaディスプレイ等)には2倍の画像を用意する必要があるし、最近は画面のサイズに会わせて画像を切り替えたい場合も多い。そんな時にHTML5のsrcsetがすこぶる便利だったのでご紹介します。 srcsetでできること 次のようなことが可能になります。 Retinaディスプレイ用に画像を切り替える ウィンドウサイズに合わせて画像を切り替える ウィンドウサイズに合わせて動的に画像を切り替える Retinaディスプレイ用に画像を切り替える 基本的な使い方は下記のような感じでimgタグに使用します。シンプルですね。 <img src="img/example-img.jpg" srcset="img/example-img.jpg 1x, img/example-img@2x.jpg 2x" alt
Webプログラマから見たiOS9 Safari9のCSS/JavaScriptなどの新機能解説 - Qiita
iOS9がリリースされ、iPhone6sも発売され、iOS9 Safari9で使える新機能をWebプログラマ目線で使ってみたいものをいくつか試してみました。iOSはアップデートの進捗がわりと良いので、新機能でもモバイルサイトであれば積極的に使える…はず。デスクトップ版の方は…お察しください。 ぶっちゃけ今回はそこまで目玉機能はなく、地味です。地味ですが、SafariでWebアプリを作れるようになりそうな気配がどことなくするようなしないような感じの内容です。残念ながらServiceWorkerには対応していないので、それに対応してくれたらもっとアレなんですが。 iOS Safari9の新機能（OSX版含む） CSS系 backdropフィルタ対応 新し目のiOSやOSXとかのメニューバーが半透過されるあれが作れます。要は背景要素に対してフィルタがかけられるプロパティです。綺麗で良いですね。
File APIs(Blob, BlobURL, ArrayBuffer, FileReader) - Qiita
まえがき 以前の JavaScript はバイナリデータの扱いがとても下手でした。 バイナリデータをブラウザ上に一旦保存し再利用するには、サイズが1.3倍になることを覚悟した上でデータをDataURIに変換する必要がありましたし、XHRを使ってサーバからデータを取得する場合も、一度全てメモリに読み込んでから、ループでマスク処理を施し、Base64に変換し、DataURIに変換し… と、何重にも変換を繰り返す必要がありました。 2009年に出版された JavaScript Good Parts では、ビット演算子が「使うべきではない悪いパーツ」と評価されていた事を思い出す方もいるでしょう。 あれから5年、もはや時代が違います。 2015年の JavaScript においては、バイナリデータはもはや扱いづらい困った存在ではありません。 ハードウェアと JIT コンパイラの進化に合わせ、大容量の
Blocs - Fast, easy to use and powerful visual web design tool, that lets you create responsive websites without writing code.
The Ultimate Website Builder for Mac, iPad & iPhone Blocs is fast, intuitive and powerful visual web design software, that lets you create responsive websites without writing code. Blocs for MacBlocs for iPadBlocs for iPhone Learn Get up and running fast with our learning portal. You'll find everything you need to master building websites with Blocs. Learning Portal Connect Connect with other Bloc
Google の検索結果に、誰もが表示できるウェブサイトを
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
スマホWebサイト/ハイブリッドアプリ開発を高速化するJavaScriptフレームワークまとめ | BACKEND AS A SERVICE mbaas BLOG
デスクトップ向けのWebサイト開発ではjQuery/Backbone.js/AngularJS/Ember.jsなどを採用するケースが多いのかなと思います。しかしスマートフォン、タブレット向けのWebサイトとなるとまた勝手が違います。特にUI周りの取り回しであったり、タッチ/マルチタッチイベント、スマートフォン特有のAPIなどを適切に扱えなければなりません。何よりハードウェアの性能がデスクトップより低いので高速にストレスなく動作させるためには軽量でなければなりません。そこで今回はスマートフォン、タブレット向けのWebサイトを構築したり、HTML5によるハイブリッドアプリを開発するのに使えるJavaScriptフレームワークを紹介します。ぜひ皆さんの開発に役立ててください。mBaaSお役立ちブログ トップ> ブログ> Tips> スマホWebサイト/ハイブリッドアプリ開発を高速化するJava
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ゲームプラス トップページ - Yahoo!ゲーム
CSSで面倒なコード、HTML5の新要素やスニペット、FacebookのOGPやTwiterカードなどのコードを生成できるオンラインツール
株式会社ココノヱ - coconoe inc.
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
cow2design.com
