あなたがまだ使っていないかもしれないHTML5の便利機能10選 - Qiita
こんにちは、たかとーです🧑🎤 こちらは、10 useful HTML5 features, you may not be usingの翻訳記事になります。 当記事は、Tapasさんの許可を得て翻訳しています。Tweet 10 useful HTML5 features, you may not be using HTML5は新しいものではありません。最初のリリース（2008年1月）以来いくつかの機能を使用してきました。100DaysOfCodeの取り組みの一環として、HTML5の機能リストをもう一度よく見てみました。何か見つけたかな？私は今のところあまり使っていません。 この記事では、過去にあまり使ったことがなかったが、今では便利になったHTML5の機能を10個挙げています。また、Netlifyでホストされている、実際に動作する例を作成しました。参考になることを願っています。 htt
HTML5のcanvasを使ったお絵かきツール詳説
HTML5のcanvasを使ったお絵かきツールを勉強がてら作ってみました。下記の画像リンクをクリックすればサンプルページにジャンプします。 サンプル 以下、サンプルのHTMLとJavaScript（jQuery）を使って、canvasのお絵かきツールについて解説します。 探しきれてないだけと思いますが、お絵かきツールのjQueryでの実装が見つからなかったので、自力で書いてみました。いろいろ間違ってたらすいません。 １．HTML サンプルのHTMLは次のようになっています。 <canvas width="500" height="400">お使いのブラウザはHTML5のCanvas要素に対応していません。</canvas> <ul> <li style="background-color:#000"></li> <li style="background-color:#f00"></li>
最新版！Webページを作成する時のベースになる、最小限の構成で記述されたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で記述されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 イラスト: Girls Design Materials HTML5 Boilerplate -GitHub HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 オリジナルライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title> <met
HTML5における no-cache - Qiita
注 updated: 2018/01/25 本記事の投稿当時に紹介したアプリケーションキャッシュは、現在では廃止予定の機能となりました。 順次、各種ウェブブラウザからも廃止されていくことでしょう。 かわりに Service Workers / Cache API を使用するべきです。 Service Worker の紹介 | Web | Google Developers Service Workerの利用について - Web API インターフェイス | MDN はじめに ちょっとした JavaScript ミニアプリの作成で、キャッシングを無効にしたコンテナ用 HTML ページを1枚用意したかったんですが、ひっさびさに W3C Validation Service にかけたらエラーの烙印を食らったのでメモしておきます。 留意事項 本稿執筆時点で HTML5 の仕様は「勧告候補」の段階で
<input> - フォーム部品：入力欄 - とほほのWWW入門
形式 <input type="..."> サポート LS / H2 / e2 / Ch1 / Fx1 / Sa1 / Op1 / N2 / i1 カテゴリ フローコンテンツ フレージングコンテンツ インタラクティブコンテンツ(※1) パルパブルコンテンツ(※1) リステッド, ラベラブル(※1), サブミッタブル, リセッタブル, リアソシエイタブル, フォーム関連要素 ※1 type=hidden 以外の場合 親要素 フレージングコンテンツ を子要素に持てるもの 子要素 無し(Empty) タグの省略 開始タグ:必須 / 終了タグ:無し 属性 グローバル属性 accept alt autocomplete autofocus checked dirname disabled form formaction formenctype formmethod formnovalidate fo
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！
HTML5＋CSS3は「メニューの作り方」を覚えるだけ！：にわかデザイン（1）（1/3 ページ） Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では
HTML5＋CSS3の「カンタン装飾設定」で今風デザイン
基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上
Bootstrap3を使う - CakePHPクッキング
管理画面などを作るのに便利なCSSフレームワークのBootstrap。（記事公開時の最新バージョンは3.1.1） CakePHPに簡単にBootstrapを導入する方法を見ていきましょう。 Bootstrapを設置する サイトよりファイルをダウンロードします。 http://getbootstrap.com/ ダウンロードしたファイルを解凍し、css・fonts・jsをwebroot配下に設置します。 TwitterBootstrapプラグインを導入する slywalkerさんが作成したTwitterBootstrapプラグインをダウンロードします。 https://github.com/slywalker/TwitterBootstrap ダウロードしたファイルを解凍し、TwitterBootstrap とリネームして app/Plugin/TwitterBootstrap に設置します
How to Code HTML5 Video Background in Email
Capabilities Litmus is an all-in-one email marketing solution that helps you optimize and personalize every email to maximize your ROI and create exceptional brand experiences for every subscriber. Why Litmus Email Monitoring Email Design Email Building Email Personalization Email Testing Spam Testing Email Analytics Email Collaboration and Review Technology Integrations AI & Emerging Email Techno
もう逃げない。HTMLのviewportをちゃんと理解する
と呪文のように書いてきたが、いい加減ちゃんと整理して理解しよう。 いろいろ調査した結果、以下の考え方で理解できると思う。 まず、実際の液晶の解像度は一旦忘れろ。 <meta name="viewport" content="width=480">と指定したとする。 するとそこに幅480pxの仮想的なウインドウが作られる。幅480pxの液晶モニターがあることをイメージして欲しい。これをviewportと呼ぶ。 ブラウザはviewportにレンダリングする。viewportの中では、あたかも本当に480pxのモニターを使っているかのような環境になっている。なので、JSのdocument.documentElement.clientWidthなんかも480を返すし、media queryの条件判定でも480pxの画面幅が使われる。 次にviewportを実際の液晶画面に表示する。この時、view
HTML5 Forms の type 指定がデスクトップ IMEに影響するという話 - NyaRuRuが地球にいたころ
最近やっていた仕事について，一通りリリースが終わって誰でも試せる段階になったので書いてみる．Web アプリ開発者の人や，IME 作成者の人には影響があるかも知れない．ただし Windows デスクトップを相手にしていなければ，ここで読むのをやめてもなんら問題はない． 最近 Chromium と Firefox にパッチを書いて，HTML5 Forms の type 指定が InputScope として TSF ベースの IME (いわゆる Text Input Processors; TIP) やソフトウェアキーボードに通知されるようにした．これは，基本的に Windows 8 上での Internet Explorer 10 の動作に合わせたものである．具体的には，以下の環境で，各種ブラウザが InputScope をサポートするようになった． Microsoft Internet Ex
AngularとOnsen UIで作る最高のHTML5ハイブリッドアプリ
これからiPhoneアプリを作ってみたいけど、プログラミング知識のない方へ！ワンコインセミナーでその一歩を踏み出してみよう！Yoshinori Kobayashi
モバイル：ネイティブアプリとWebアプリ、ハイブリッドアプリ
ネイティブアプリとハイブリッドアプリはアプリストアでインストールするものだが、Webアプリはモバイルに最適化されたWebページで、アプリ的な外見を持つものである。ハイブリッドアプリもWebアプリもHTMLのWebページをレンダリングするが、ハイブリッドアプリはそのためにアプリに埋め込んだブラウザを利用する。 Mobile: Native Apps, Web Apps, and Hybrid Apps by Raluca Budiu on September 14, 2013 日本語版2013年10月28日公開 モバイルの分野で、ネイティブアプリやWebアプリ、さらにはハイブリッドアプリといった用語をよく耳にすると思う。ではその違いは何だろうか。 ネイティブアプリ ネイティブアプリはデバイス内にあるので、アクセスはそのデバイスのホーム画面上のアイコンを通して行う。ネイティブアプリは（Goog
「HTML 4.01」と「XHTML 1.0」と「HTML5」の違いまとめ フラップイズム
※2014年2月26日に更新しました。要素及び属性をなるべく新しい仕様書に準拠、その他頂いたコメントへの対応を行いました。 ※2014年3月3日更新しました。タグと要素の違いについて追記。本文内でタグと要素の記述が間違っていた部分を修正。「要素が要素をまたがってはいけない」というのはどの形式でも同じなので、記述を削除。 どうも、くーへいです。 今日はある方からリクエストされた記事を書こうかと思います。 皆さんは、コーディングをするときに「HTML 4.01」、「XHTML 1.0」、「HTML5」のどれを使っていますか？ 実際には案件ごとに使い分けているかもしれませんね。 この投稿では、それぞれの違いについて、考えていきたいと思います。 ※要素とタグを混同する方も多いですが、要素とタグでは意味が全く異なります。 例えば、「<html>・・・</html>」は要素ですが、「<html>」や「
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
WordPressでFacebookのいいね！ボタンを不具合無く設置する際のポイント
Facebookのいいね！ボタンはすでに当たり前のように設置されているけど、これって登場からまだ1年半ちょっとだった（よね？）たぶん。 こないだ仕事で、とあるWordPressで構築したサイトにいいね！ボタンを設置した所、謎のバグに遭遇した。 紆余曲折の末、解決はしたんだけど、ちょっと気をつけておいたほうが良い点なども踏まえ、WordPress内でソースに書いて挿入する設置方法のまとめをしてみようと思った。 Facebook開発者アカウントを認証しよう まず、Facebookはスパム対策のため、アカウントを認証する必要があります。 もちろん前提としてFacebookアカウントを持っていることが必要ですが、その上でこのページから携帯メールアドレスを確認しておきます。 余談ですが、Facebookって解り辛いんですよね。。個人的に日本語ライクじゃないというより、根本的な構造の問題もある気がしま
http://www.template1st.com/cascade-flat-responsive-bootstrap-admin-html5-template-free-download.html
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codeday.me/jp/qa/20190103/102961.html
jQueryのセレクタメモ - Qiita
連載インデックス「HTML5“とか”アプリ開発入門」 - ＠IT
