あなたがまだ使っていないかもしれない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 の仕様は「勧告候補」の段階で
node.jsとWebSocketで作る野球盤ゲームの裏側 (1/4)
Expressは雛型として扱うテンプレートエンジンを選択できます。デフォルトのテンプレートエンジンは「jade」です。jadeは以下のようにしてインストールします。 $ npm install jade jadeはXML形式でなく、インデント形式で記述します。jade以外にも、EJSやCoffeeKup、Hamlなどのテンプレートがありますので、好みで選びましょう。HTML形式で書きたい場合はEJSを選択するとよいでしょう。 Expressとjadeをインストールしたら、実際にWebアプリの雛形を作ってみましょう。 $express sample create : sample create : sample/app.js create : sample/logs create : sample/pids create : sample/public/images create : sam
localStorageの挙動と簡単なラッパー - Block Rockin’ Codes
[追記] テストのソースだけを見られる様に、gistに張りました。 gist:542451 localStorageを使ってちょっとやってみたいことが有るので、まずはlocalStorageを色々使って見ようと思ったのですが、思った以上にブラウザごとの挙動に差があって、イベントどころかだだ値を取り出すだけでも、色々気をつける必要があることが分かりました。 以下は、手元の Mac に有った FireFox 3.6.8 Chrome 5.0.375.126 Sagari 5.0 (6533.16) の環境で試した結果です。 格納出来るデータ W3Cの仕様ではJSのオブジェクトであれば一通り格納出来るように定めているらしいですが、現在は単なる文字列しか入らない物が多いようです。 なので、オブジェクトを格納するためには、JSONをシリアライズして入れる形になると思います。 Native JSON
<input> - フォーム部品：入力欄 - とほほのWWW入門
概要 説明 属性 共通属性 重要属性 共通属性 テキスト関連属性 数値関連属性 チェックボックス・ラジオボタン関連属性 イメージ関連属性 サブミット関連属性 その他属性 データバインド関連 i-mode 使用例 詳細 テキスト入力フィールド(type="text") パスワード入力フィールド(type="password") ファイル名入力フィールド(type="file") チェックボックス(type="checkbox") ラジオボタン(type="radio") 隠しフィールド(type="hidden") 実行ボタン(type="submit") 取消ボタン(type="reset") 汎用ボタン(type="button") 画像ボタン(type="image") 検索文字列(type="search") 電話番号(type="tel") URL(type="url") Eメール
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つを見比べてみましょう。上
Web コンテンツを開発するための Node.js 簡易 Web サーバー
de:code 2015 にご参加された皆様、ありがとうございました。ご参加されなかった皆様も、そのうちスライドや動画が公開されると思いますので、ぜひご覧ください。 de:code が終わって、前回の記事の続きで「HTML5 を使ったシンプルな 2 D ゲームの作り方(複数インスタンスの生成)」を書こう、と思ったのですが、このシリーズを書いている間に build 2015 があり、その中で、Windows はもちろん、Mac、Linux 環境でも使用できるコーディングツール Visual Studio Code が発表されました。 そして、そのタイミングで公開された Visual Studio 日本チームブログの記事では、このブログの「「HTML5 を使ったシンプルな 2 D ゲーム…」の記事を紹介してくれているのですが、紹介文にはこう書いてありました。 「(Visual Studio 2
HTML5で追加されたinput要素のタイプはiPhone、Androidでどのくらい使えるのか | DevelopersIO
HTML5でinputタグのタイブが追加されましたが、現行のiPhone、Androidでどのくらい使えるのか調べてみました。 OSとブラウザに関しては以下の機種で調べています。 iPhone 5(iOS6)のSafari Galaxy S3(Android 4.04)のGoogle Chrome バージョン18 目次 テキスト入力 検索(search) 数値(number) 電話番号(tel) URL(url) メールアドレス(email) 日付・時間指定 時間(time) 日付(date) 日時(datetime) 日時(datetime-local) 週(week) 月(month) その他 範囲から指定(range) 色選択(color) テキスト入力 まずはテキスト入力系の属性を調べてみます。 見た目が変わったり、フォーカスインした際の入力モードが変わります。 検索(search
HTML5 & CSS3 ブラウザ別サポート状況
What is an IP Address? An IP (short for “Internet Protocol”) address is a unique number assigned to every machine that connects to the internet. Nowadays, you can have multiple computers behind a router that share a single IP using Network Address Transformation (NAT). If you have ever used a wifi hotspot to access the internet, you’ve shared an IP address with someone. What’s the Difference betwe
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
成功するPhoneGapアプリを開発するための高速化＆UXテクニック
興味深いブログ記事が海外で掲載されていました。拙訳で恐縮ですが紹介したいと思います。 内容はPhoneGapアプリを高速化するための手法の解説で、具体的な事例とともに、いくつかのテクニックの紹介が行われています。少し長い記述になりますが、是非PhoneGapやMonacaを用いた開発の参考にしてください。 成功するPhoneGapアプリを開発するための高速化＆UXテクニック Performance & UX Considerations For Successful PhoneGap Apps PhoneGapアプリを開発する方から、下記のような質問をよく尋ねられます。 ・アプリを高速化する方法は？ ・どうやってネイティブアプリのような質感を出せるか？ ・プラットフォームに違和感のないアプリを作るためのテクニックは？ ・OSのルック＆フィールとマッチさせるためには？ この記事では、素晴らし
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://codeday.me/jp/qa/20190103/102961.html
mysql で現在使っているデータベース名を表示する - synblog
jQueryのセレクタメモ - Qiita
TECH PROjin
http://plus.appgiga.jp/masatolan/2014/03/07/51003/
