ウェブのための次世代決済法 The new and open payment for the web 24th Sep 2017
![[HTML5 Conference] ウェブのための次世代決済法](https://cdn-ak-scissors.b.st-hatena.com/image/square/046f7ff4cd4a3c13660691be03c73a7ac23181ab/height=288;version=1;width=512/https%3A%2F%2Flh7-us.googleusercontent.com%2Fdocs%2FAHkbwyJt1WXyWIR-fmeE7xVlC3iyv9V95kSlGfDLK-xfYo-YruZ04bN_cTbJSHeGFDydBIEIYHRVb_8rGMnFdn2xxJZ-cLNy_GwUp4ZPaCKkKZvnlAKvzao%3Dw1200-h630-p)
[HTML5 Conference] ウェブのための次世代決済法
ウェブのための次世代決済法 The new and open payment for the web 24th Sep 2017
Introduction to Service Worker: How to use Service Worker - HTML5 Rocks
Service workers essentially act as proxy servers that sit between web applications, the browser, and the network (when available). They are intended, among other things, to enable the creation of effective offline experiences, intercept network requests and take appropriate action based on whether the network is available, and update assets residing on the server. They will also allow access to pu
IE9+ならスクリプト無しで、タブやカルーセルなどさまざまなコンポーネントがスタイルシートで実装できる -Pure CSS Components
最近のウェブページでよく見かけるカルーセル、アコーディオン、ドロップダウン、モーダルウインドウ、タブコンテンツなど、さまざまなコンポーネントをHTML5+CSS3で実装するライブラリを紹介します。 HTML5の「aria-hidden属性」とラジオボタン・チェックボックスをうまく使い、スクリプト無しで実装されています。 Pure CSS Components Pure CSS Components -GitHub ダウンロードできるCSSファイルには、通常のスタイルシートのほかにLESS版も含まれています。 Pure CSSで実装するカルーセル Pure CSSで実装するアコーディオン Pure CSSで実装するドロップダウン Pure CSSで実装するモーダルウインドウ Pure CSSで実装するタブコンテンツ 各コンテンツはHTML5対応ブラウザ、IEは9+でご覧ください。 Pure
レスポンシブ対応で無料！ウェブ制作を高速化できるHTMLテンプレート24選 2017年1月度
ウェブサイトの閲覧方法は、モバイルやタブレットの普及によって大きく変わってきており、あらゆる端末へ対応することがウェブデザイン制作では必須となってきています。このややこしい問題を解決する、もっとも一般的な方法のひとつが、レスポンシブWebデザインです。 レスポンシブWebデザインとは、デスクトップやタブレット、スマートフォンなどさまざまな画面サイズごとにデザインを調整でき、あらゆるデバイスに最適化したWebサイトを、1つのHTMLで実現できる制作手法を指します。 今回はレスポンシブWebデザインに対応した、無料ダウンロードできるHTMLテンプレート素材をまとめてご紹介します。どれも文字テキストや画像イメージを編集するだけで、すぐに高品質なウェブサイトを作成できます。またBoostrapなど人気フレームワークを利用した素材も多く、柔軟にカスタマイズできる点もポイントです。 サイト設計の手間を
マージンやパディングでもう悩まない、モジュール式WebデザインにおけるHTMLとCSSの新しい実装方法
Webページを制作にする時に、マージンやパディングをどのようにつけるか悩むことがあります。2カラムの隙間は、左パネルの右マージンorパディングなのか、右パネルの左マージンorパディングなのか。 Web制作の今までの考え方がきっと変わる、モジュール式のアトミック デザインにおけるHTMLとCSSの実装のロジックを紹介します。 Learning from Lego: A Step Forward in Modular Web Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、著者様・元サイト様にライセンスを得て翻訳しています。 最近のWeb制作の手法は、数多くあるフレームワークやUIキットからあらゆる種類のコンテンツのブロックを組み立てています。しかしながら、モジュール性と汎用性はまだWeb要素レベルでは達成されていないと言えるでしょう。 LEGOブロックの考え方を
React vs Angular 2ガチ対決！エキスパートたちによるハイレベル対談 (1 / 2) ー TechFeed Live#2レポート
React vs Angular 2ガチ対決！エキスパートたちによるハイレベル対談 (1 / 2) ー TechFeed Live#2レポート 白石 俊平（HTML5 Experts.jp編集長） こんにちは、編集長の白石です。 本記事は、2016年9月に開催されたTechFeed Live#2 「React vs Angular 2」の模様をお伝えする記事の前編です（後編はこちら）。 TechFeed Live#2とは、「TechFeedを地上に出現させる」ことをコンセプトとした、テクノロジーの最新トレンドをエンジニア向けに紹介するというイベントです（TechFeedとは、「最先端が、ここにある。」をキャッチコピーとしたエンジニア向け情報収集アプリです）。本イベントは、ReactとAngularをより楽しく深く学ぶため、現代のWebアプリに求められる各種要件についてそれぞれを比較する…と
How to vertically center a container in Bootstrap?
I'm looking for a way to vertically center the container div inside the jumbotron and to set it in the middle of the page. The .jumbotron has to be adapted to the full height and width of the screen. The .container div has a width of 1025px and should be in the middle of the page (vertically center). I want this page to have the jumbotron adapted to the height and width of the screen along with th
HTML5で作ったiPhoneのWebアプリで上下のスクロールを無効にする
HTML5で作ったiPhoneのWebアプリで上下のスクロールを無効にする iPhoneのWebアプリというのは「ホーム画面に追加する」でインストール、というかブックマーク、するものです。HTML5でもそこそこアプリっぽく作れます。 さて、HTMLのタグで、ズームなどは無効にできます。例えば、次のようにします。 <meta name="viewport" content="width=device-width initial-scale=1, user-scalable=no" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> ところが、これだけだと、縦に
Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう
Web Componentsを簡単・便利にするライブラリ「Polymer」を使いこなそう 泉水翔吾 この記事は、連載「基礎からわかる Web Components 徹底解説 〜仕様から実装まで理解する〜」の第3回目になります。連載の第3回目となる今回は、Googleが中心となって開発を進めるPolymerというWeb Componentsのライブラリについて解説します。 Web Componentsをより柔軟に、そして強力にするライブラリ Polymerは素のWeb Componentsにおいて、煩雑である部分を簡略化し、機能をより強力なものにし、基礎となるコンポーネントを提供します。BSDライセンスのもと、オープンソースで開発が行われており、ソースコードもGitHubにて公開されているので、Pull Requestを送るなどのかたちで私たちも開発に貢献することが可能です。 Welcome
can I use... Support tables for HTML5, CSS3, etc
Test a feature Our partnership with BrowserStack now lets you test your website for compatibility across 2,000+ real browsers and devices. Test on: Did you know? Next If a feature you're looking for is not available on the site, you can vote to have it included. Better yet, if you've done the research you can even submit it yourself! You can import usage data from your Google Analytics account and
スマートフォンで数字キーボードに変更する（2015/01版) - Qiita
※サーバサイド/JavaScriptで切り替える想定 type="number"はブラウザ・バージョンごとに挙動が違う 数字を入力する項目にはtype="number"を使えばよさそうですがiOSで問題があります。 iOS6以下では数字ではなく数値の属性として使用するよう設計されてるようです。 ●iOS5以下 1000を入力する ⇒ カンマが入った1,000になる （pattern="\d" を設定することで回避可能？） ●iOS6以下 0123を入力する ⇒ 先頭の0が削られた123になる これでは郵便番号の入力には使えません。 （type="tel"は本来の対象と違いますし、ブラウザ側の仕様が変わる可能性があるので使いません） iOS7のバージョンシェアが90%に達したとはいえ、iOS6以下が10%もあるならば対応したいところです。 pattern="\d*"で数字キーボード以外に切り
働クリッカーという JS を学べるゲームを作りました。
どんなゲームなの？ 働クリッカーは、身も蓋もない言い方をすればクッキークリッカーがつまんなくなったやつです。 画面左側の『働く』ボタンを連打してお金をためて、資格やプログラミングスキルを買って一働きの単価を上げ、アフィリエイトや土地、株を買って不労所得(働くを押さなくても入ってくる金)を増やしていくというゲームなのですが、このゲームの肝はそこではなく、どれだけ高速にゲームクリア実績や全実績解除を達成できるか、というプログラミングによる攻略が本質的な所です。 俺が、俺達が TAS さんだ Tool Asisted Speedrun(or Superplay) という、ツールによる補助を受けたスーパープレイの動画は、多分見たことがあると思います。あれはエミュレーターそのものにそういう機能があったりするんですが、このゲーム、働クリッカーの場合は、ゲームそのものにツール機能が組み込まれています。と
Emmetのカスタマイズ - Atom講座 - [SMART]
スニペットの拡張 Emmetに用意された多数のスニペットは変更や削除、追加が可能でです。 スニペットの設定ファイルを直接変更することもできますが、この方法だとバージョンアップで設定が上書きされてしまったり、設定の共有がしにくいという欠点があります。 Emmetには別途拡張ファイルを用意して、拡張したい項目のみ記述することができますので、今回はこちらを紹介します。 拡張用のファイルを作成する前に、そのディレクトリの場所を指定する必要があります。 変更方法は以下の通りです。 [Ctrl] + [,] で設定画面を開き、左メニューの「パッケージ」をクリックして「インストール済みのパッケージ」画面を開きます。 テキストボックスに emmet と入力します。 検索結果に表示された emmet の枠内にある[設定]ボタンを押します。 Settingsの[Extensions Path]に任意の拡張用デ
![Emmetのカスタマイズ - Atom講座 - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
MacでSublime Textを導入してみた[HTML5+JavaScript+Node.js+Markdown] - Qiita
動機 MacVim、Mou、Kobitoなどいろいろ使っているが、イマイチぴんと来ない… //Vim派閥だけど.vimrcを公私で共有している縛りがあるので、思ったカスタマイズができない。 なので今回はSublimeTextを導入してみました。 Node.js、Emmet利用できる点にちょっと興味しんしん。 会社の先輩、NetBeansでやるって言ってごめんなさいｗ ファイル構成はちゃんとNetBeans用でプロジェクト作りますｗｗｗ だってやっぱりスタバ()でドヤリングできないですやん。。。 インストール まずは本体のインストール。今回は2.0.2 http://www.sublimetext.com/ パッケージ管理ソフトの導入 プラグインとでもいう拡張機能Packageを導入する。 View - Show Consoleを選択。 SublimeText2の場合は以下を記載。 impo
![MacでSublime Textを導入してみた[HTML5+JavaScript+Node.js+Markdown] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/d17b55095633a131495d5298a1977bae0106dd0f/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-9f5428127621718a910c8b63951390ad.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9TWFjJUUzJTgxJUE3U3VibGltZSUyMFRleHQlRTMlODIlOTIlRTUlQjAlOEUlRTUlODUlQTUlRTMlODElOTclRTMlODElQTYlRTMlODElQkYlRTMlODElOUYlNUJIVE1MNSUyQkphdmFTY3JpcHQlMkJOb2RlLmpzJTJCTWFya2Rvd24lNUQmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPTk0NDI0ZjJiZGMxZGQ5NDEwNmU0ZTc1MzVkODJiYTQz%26mark-x%3D142%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYnVkb3VndW1pMDYxNyZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NThiMDEwMmUwYzk1ODZhN2IyYTRkMzk1OGUxMGMxM2I%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D4c37c259668a97dc2e1aeb06a39cc37f)
<input>－HTML5タグリファレンス
<input>タグは、フォーム（<form>～</form>）を構成する様々な入力部品を作成する際に使用します。 ■フォーム部品の種類を指定するtype属性 type属性は、フォーム部品の種類を指定する際に使用します。 <input>要素は、type属性にどのような値を指定するかによって、 一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、 フォーム部品の種類を指定し分けることができます。 type属性の初期値は、type="text"（一行テキストボックス）です。 ■type属性の値 type="hidden" 画面上は表示されない隠しデータを指定する type="text" 一行テキストボックスを作成する（初期値） type="search" 検索テキストの入力欄を作成する type="tel" 電話番号の入力欄を作成する type="url" URL
HTML5の新規タグ「section、article、header、footer」の使い方 | それからデザイン スタッフブログ
さて今回は、HTML5で追加されたタグ、section/article/header/footerの使い方を改めて復習しようとおもいます。 Web制作の現場でも、HTML5がだいぶ普及してきたことによって、使う機会が多くなっている実感があります。 さて、HTML5とこれまでのXHTMLの違いを簡単に説明すると、『HTML構造がより明確に区別され簡略化された』ということでしょう。 HTML4やXHTMLのタグ要素だけでは対応しにくいことを再定義したものが、HTML5です。 つまり、「HTML5とは、現在のWeb制作者の悩みを解決してくれるもの」といってもよいでしょう！ なので、みんなで使いましょう…ってことですね。 さて、HTML5の目玉の一つである。新規タグですが、「これどういう場面で使ったらいいの！！！」とか「sectionとかarticleとか、意味わかんねーよ！」とか、そういう心の叫
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Why is there a vertical scrollbar on my svg at 100%?
DevDocs