W3C、「HTML 5.2」勧告。同時にHTML 5.3のファーストドラフトを公開
Web技術の標準化団体であるW3Cは、HTML 5のマイナーバージョンアップである「HTML 5.2」の策定を完了し、勧告としました。 HTML 5.2ではいくつかの機能追加、削除、バグフィクスなどが行われています。 機能追加の例では、ダイアログボックスを表示する＜dialog＞要素が追加されました。下記は＜dialog＞要素を用いたサンプルです。 ... <body> <div> <!-- body content --> </div> <dialog> <h1>Add to Wallet</h1> <label for="num">How many gold coins do you want to add to your wallet?</label> <div><input name=amt id="num" type=number min=0 step=0.01 value=10
便利すぎてしびれた！あなたが知らないCSS関数トリック8選
どんどん進化するCSSの中でも、意外と知られていないのがCSS関数。アイデア次第で実用的で応用の効くCSS関数を、もっと使ってみませんか？ CSSはWeb開発者が思っているよりもっとたくさんの可能性を持っています。スタイルシート言語は年々大きく進化を続け、JavaScriptなしでもブラウザーでさまざまな機能をさせるまでになっています。この記事では、JavaScriptをまったく使わない8つのCSS関数の賢いトリックに注目します。 1.軽量CSSツールチップ たくさんのWebサイトがツールチップを実装するのにまだJavaScriptを使っていますが、実はCSSのほうが簡単です。一番シンプルなのはツールチップテキストをHTMLコード内のデータ属性に記述する方法です（例：data-tooltip="…"）。このマークアップを使って、次のコードをCSSに記述すれば、attr()関数に与えられた値
ものっすごい簡単にGoogleマップAPIを操作出来るjQueryGoogleMAPプラグイン
タイトルで全部言っちゃってる気がしないではないですが、WebサイトにGoogleMAPを設置して、色々と簡単にAPIを叩けるプラグインです。 ちなみにこの記事の為にこのjQueryプラグインを読み込むなんてことはしておりませんので、説明で使用しているMAPは全てキャプチャー画像です。本来なら、ぐりぐりと拡大縮小出来るあのMAPを貼り付ける事が出来ます。気になる方は、最後に紹介するチュートリアルページをご覧になっていただければ、わかると思います。 まずは呼び出し 基本の呼び出し。 まずはページのどっかに書いて読み込みましょう。 <script src="javascripts/jquery.js"></script> <script type="text/javascript" src="//www.google.fr/jsapi"></script> <script type="text/
[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid
レスポンシブ対応のカード型レイアウトを簡単に実装できる、jQueryなどの他スクリプトに依存しないシンプルで超軽量（2KB）のスクリプトを紹介します。 デモのアニメーション minigridの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="http://henriquea.github.io/minigrid/minigrid.js"></script> </body> Step2 :HTML 各アイテムには「.grid-item」を、ラッパーには「.grid」を付与します。 <div class="grid"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div
![[JS]シンプルで超軽量なのがいい！レスポンシブ対応のカード型レイアウトを簡単に実装できるスクリプト -minigrid](https://cdn-ak-scissors.b.st-hatena.com/image/square/51d7e65c86ee67bce7000a1d7008655aaff74295/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015080204-01.png)
[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js
コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できるスクリプトを紹介します。 ↓区切り線がぽちゃんたぷんっと波立ちます。 Raindrop.js ヘッダやフッタあたりに少し適用するのはいい感じですね。 Raindrops.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="js/jquery-1.9.1.min.js"></script> <script src="js/raindrops.js"></script> </body> Step 2: HTML 水面のアニメーションを適用する要素を用意します。 <div id="example1"></div> Step 3: JavaScript 適用する要素
![[JS]コンテンツの区切り線を水面に見立てて、ぽちゃんたぷんっと波立たせる癒やし系スクリプト -Raindrops.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/42d4f0aeabe8d5c05510d7c537c44691f1eec9d1/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015071301.gif)
俺の最近のRailsのJS開発環境を教えてやる - Qiita
こうやってるだけでも出力されたhtmlにはscriptタグが30個ぐらいならんでて、ページの読み込みに10sec以上かかる。 だけど、単にapp/assets/javascriptsをgulp watchとかはしたくない。 なぜならビルドはブラウザのリロード時に変更がある場合だけして欲しかった。 あとwindow.AppNamespace以下にモジュール追加していくのも辛い。 モジュール同士の依存関係もよくわかんないし、何よりwindow.AppNamespace.Modules.UserList.ItemViewとか長すぎ！ browserify-railsってやつ使ってみた browserifyがrailsの仕組みの中で動くようになる。 browserify-rails/browserify-rails https://github.com/browserify-rails/brows
JavaScript による日付・時刻・時間の計算・演算のまとめ - hoge256ブログ
JavaScript でいろいろな日付の計算関係をまとめてみました。前回の日付関係のまとめエントリの JavaScript版です。 日付の単位について 基本的なことですが、一応まとめておきます。 1秒は1000ミリ秒 1分は60秒 1時間は60分 よって 1時間=60分=3600秒=3600000ミリ秒 1日=24時間=1440分=86400秒=86400000ミリ秒 現在時刻の取得 まずは、最もよく使う処理です。 //今日の日時を表示 var date = new Date(); document.write(date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate() + " " + date.getHours() + ":" + date.getMinutes() + ":" + date.get
【HTML5】デスクトップ通知が出来る「Notification」 | ScrapEngineer
サンプル 通知ボタンをクリックすると以下のように通知許可を求められるので許可してください。 許可された後、デスクトップに通知が表示されます。 通知 ソース サンプルで使用したソースの紹介。 <script> function show() { // Notificationを取得 var Notification = window.Notification || window.mozNotification || window.webkitNotification; // Notificationの権限チェック Notification.requestPermission(function (permission) { // console.log(permission); }); // 通知インスタンス生成 var instance = new Notification( "お知らせタイ
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference
今話題のReact.jsはどのようなWebアプリケーションに適しているか？ Introduction To React─ Frontrend Conference 外村 和仁（株式会社 ピクセルグリッド） 本記事は、2015/2/21に行われたFrontrend Conferenceの「Introduction To React」の内容を紹介します。 当日の資料は以下にアップされていますので、こちらも参照してください。 Introduction To React // Speaker Deck React.jsとは何か React.jsはFacebook製のJavaScriptライブラリです。 http://facebook.github.io/react/ 公式サイトに、「A JavaScript library for building user interfaces」とあるように、R
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SLOBSERVER - L'actualité de Second Life