CSS3のtransition-timing-functionの値、cubic-bezier()に関して | KnockKnock
フォームの入力必須項目のマークアップ | Accessible & Usable
公開日 : 2013年4月12日 (2020年8月30日 更新) カテゴリー : アクセシビリティ / ユーザビリティ Web サイトのフォームの中には、入力必須の項目があります。大抵の場合、その項目が必須である旨を、ラベル (<label> 要素の中) に盛り込むことが多いでしょう。 <label for="name">お名前 (必須)</label> <input type="text" id="name" name="name" /> 上記のように、<label> 要素の中に「必須」と書かれていれば、たとえばスクリーンリーダーを使いながら [Tab] キ―でフォーカス位置を移動させている場合、フォーム入力要素 (<input> 要素、<textarea> 要素、<select> 要素) にフォーカスが当たるとその入力要素に紐づいたラベルが音声で読み上げられ、ラベルに包含された「必須」
モバイルブラウザからアプリを開くには - console.lealog();
あいも変わらずモバイル情報です。 成果物はこちら。 leader22/app-opener 事の発端 よく見ますよね、モバイルサイトの至る所にある「Twitterでシェア」、「Facebookでシェア」ってボタン。 よく見るんですけど・・・押しますか？アレ。 TwitterもFacebookも、もちろんアプリを使ってますよね。 ブラウザでなんて、誰もログインしてないですよね。 てことは誰も押さないですよね？！！ ネイティブアプリ全盛期にブラウザWebでシェアしてね！ったって、 わざわざログインしてまでやってくれる人が、果たしてどれくらいいるでしょうか。 うー、Webつらい！アプリ強い！ せめてこのボタンを押すとアプリが起動し・・たら素敵ではありませんか？！ どうにかなるのか 別に目新しい技術ではないのですが、実は"URIScheme"っていうものがあります。 URLスキーマって言われたりス
CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用する｜javascript｜POPSブログ｜POPS WEB KOUBOU
「Google Webフォント」もよろしいのですが、自分用の好みのWebフォントを作り、複数のWebフォントをサイトにUploadしてCanvasでの使用表示を試してみました。 表示方法としてCSS3、@font-face を使用する方法と、WebFont Loader を使用する方法の2種類にどんな違いがあるのでしょうか、実際にテストしてみます。 CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用するテスト 「Google Webフォント」は便利ですが、今回はWebフォントを作り、複数のWebフォントをサイトにUploadしてCreateJSで使用する方法について調べ、実際にテストして問題があるか考慮してみます。 ▼[ 簡単な説明の目次に進む ] DEMO ▼[ 目次 ] CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用す
Vuex actionでローディングアイコンを表示する
actionでajaxを行うときにローディングアイコンを表示させます。Vuexのstoreにloadingの状態を持つようにします。また、mutationでloadingの状態を変更でするようにします。コンポーネントでloadingがtrueのときだけロード中のメッセージを表示するようにします。action`の最初でloadingをtrueにするmutationを実行し、最後でloadingをfalseにするmutationを実行します。
HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法 [ホームページ作成] All About
HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法HTMLのaudio要素を使って、Webページ上で音楽を再生したり効果音を鳴らしたりする方法を解説。ブラウザ内蔵の音楽再生コントロール（再生ボタンがあるプレーヤー）を表示させてMP3ファイルなどの音楽を流す方法や、JavaScriptを使って音を鳴らすタイミングを制御する方法を解説。autoplay属性で自動再生させたり、source要素で複数のファイル形式に対応させたりできます。 audio要素を使えば、ブラウザ内蔵プレーヤーで音声や音楽を再生できる HTML5で使える要素の一つに、音楽・音声ファイルを再生できるaudio要素があります。短いHTMLソースを記述するだけで、Web上に置いたMP3形式などの音楽ファイルをブラウザ内蔵の機能で再生できます。何らかのプラグインを用意する必要はなく、HTMLの記述だけで下図のようなブラウ
![HTML5のaudio要素で、音楽の再生や効果音を鳴らす方法 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/20994e181d472d8ecf11e07d404af555274d83f1/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F3%2F8%2F5%2F1%2F8%2F7%2F201806071155%2Ftopimg_original.png)
[CSS3] TextShadowで作る文字の色々なデザイン（グロウ、エンボス、ベベル、袋文字、ぼかし、3D） - YoheiM .NET
[CSS3] TextShadowで作る文字の色々なデザイン（グロウ、エンボス、ベベル、袋文字、ぼかし、3D） こんにちは、最近はソーシャルゲーム開発中の@yoheiMuneです。 最近のWeb開発でCSS3を使って文字の装飾をすることが多くなってきました。 その中で今日は、CSS3のTextShadowを使った色々な文字装飾をブログに書きたいと思います。 CSS3のTextShadowとは TextShadowとは、その名前の通り、文字に陰を付けることが出来るCSSです。 例えば以下のような指定をCSSをすることで、文字の陰が付きます。 <style type="text/css"> .text1 { text-shadow: 2px 2px 2px rgba(30,30,30,1); -webkit-text-shadow: 2px 2px 2px rgba(30,30,30,1);
![[CSS3] TextShadowで作る文字の色々なデザイン（グロウ、エンボス、ベベル、袋文字、ぼかし、3D） - YoheiM .NET](https://cdn-ak-scissors.b.st-hatena.com/image/square/2e5cd8ce43c2de67cb958af6808208fc2f9083f6/height=288;version=1;width=512/https%3A%2F%2Fwww.yoheim.net%2Fimage%2F173.jpg)
Vue.js初心者向け：Vue.jsとaxiosでJsonを取得してコンポーネントに反映するメモ - Qiita
はじめに Vue と Ajax を組み合わせて非同期で Json を取得するサンプルは意外と見付かりません。今回の実装もものすごく初歩的な方法ですが、自分的には丸1日悩んだ結果なので今後のためにメモを残しておきます。 むしろエレガントな方法を教えてください。 やりたいこと Vue インスタンス作成前ではなく、作成後にコンポーネント側で Json を取得したい。 データは専用のストアを用意して複数のコンポーネントで使い回したい。 しかし Vuex は制約がキツいので使いたくない。 Json を取得したらコンポーネントに反映したい。 コンポーネントは単一ファイルコンポーネント（.vue）を使いたい。 jQuery ではなく axios を使う axios とは Vue のドキュメントで推奨されている Ajax通信ライブラリです。jQuery を使ってもいいのですが、せっかくなので試してみました
babel-polyfillとbabel-runtimeの使い分けに迷ったので調べた - Qiita
2018/03/20追記 この資料はbabel-preset-envにuseBuiltIns: usageなどが入るより前の資料になります。詳しくは最新版のbabel-preset-envをご確認ください https://github.com/babel/babel/tree/master/packages/babel-preset-env#usebuiltins 2016/11/30追記: 更に詳細に調べた続編を書きました => babel-polyfill / babel-runtime の代わりにcore-jsを直接使うのはアリかナシか babelの変換において、古いブラウザでもある程度動かすようにしてくれるためのbabel-polyfill。 しかし、調べてみるとbabel-plugin-transform-runtimeというのもあった。 あまりドキュメントも充実しておらず何が違
jQueryからAmazon API Gatewayを使用する - Qiita
概要 AWSから新サービス API Gateway がリリースされました。Lambda (あるいは外部のHTTP) と連携させることで、他のAWSシステムやバックエンドシステムが提供する機能をREST APIとして公開することが可能となります。 Gateway APIを使った最も分かりやすい例は、下のフローのようにLamdaファンクション (Node.jsやJava) を介してバックエンドのDBからデータを取得したり更新する構成かと思います。 ここでは手始めに、jQuery経由でAPI Gatewayをコールする方法について説明します。 ※2015年8月1日時点、Gateway APIのTokyoリージョンは提供されていません。ただしリージョンブリッジが可能なため、Lambda以降のシステムをTokyoリージョンで構築することは可能です。 実装 jQuery側はいつも通り$.ajax()を
複数ディスプレイを使っている時に「Command + Tab」が意図していないディスプレイに表示される時の対処法 | ゴリミー
僕はMacでアプリケーション同士を切り替える場合、「Command + Tab」を利用することが多い。複数ディスプレイを使っている時でも当然利用しているが、トリプルディスプレイ環境にしてから意図しないディスプレイに切り替えメニューが表示されてしまうことに悩まされていた。 例えばメインのディスプレイで作業をし、サブディスプレイの方で別の作業をしてから「Command + Tab」で他のアプリケーションに立ち上げようとした時に、切り替えメニューがなぜかサブディスプレイの方に表示されてしまっていた。 色々と試した結果、どうやらDockの表示状態と配置が関係していることが分かった。困っている人がいたら参考にどうぞ！ Dockの位置と「自動的に隠す」の有効・無効が関係 まず複数ディスプレイを利用する場合、Dockの位置、そしてDockが自動的に隠れるようしているか否かによって挙動が異なる。話が複雑に
PHP5.1でjson_encode()関数が使えない場合の対処法 : shooblog
外部のアプリケーションとデータの受け渡しをしているシステムを別のサーバーに移さなければならなかったので、淡々と慎重にでも味噌汁をすすりながら移行作業を終わらせ、テストで動かしてみたらFatal errorが返ってきました。 PHP Fatal error: Call to undefined function json_encode() ・・・ json_encode()関数が定義されていない・・・？ というわけでサーバーのPHP環境を確認してみると（最初に確認しろっと）PHPのバージョンは5.1でした。どうやらjson_encode()関数は5.2以降で定義されてる関数とのこと。 ・・・自前でなんとかしろってことですかね(´・ω・｀) 代用処理を書くとしたらかなり骨が折れるし、ここに工数を割くわけにもいかないので、jsonまわりの情報を探してみたらPEARのサイトでjson関数ファイル
JSだけでソーシャルボタン設置 - Qiita
はじめに いいねボタン（シェアボタン）、Twitterツイートボタン、LINEボタン、Google+ +1ボタンをJSだけで読み込む方法を試行錯誤しました。 基本的には、 各SNSのボタン設置用スクリプトを動的に読み込み ページのロードのタイミングで公式の設置コードをHTMLに埋め込み 各SNSの動的更新コマンドを実行 という流れです。 ソース 雛形のHTMLはこんな感じです。OGPを仕込んで自前のCSS・JSを読み込む以外は、何の変哲もないソースです。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>JS share button</title> <meta property="og:title" content="XHTML like"> <meta property="og:type" con
CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
2021年12月28日 CSS 大きさの異なる複数のボックスを隙間なく並べてタイル状に表示したい！そんな時もありますよね。モザイクレイアウト、Masonryレイアウト、Windows 8 Metroスタイルレイアウト…などなど、さまざまな呼び方のあるこのレイアウト。今回は display: grid という新しい配置方法を使ってレイアウトを組んでみますよ！もちろんレスポンシブにも対応させたいと思います！ ↑私が10年以上利用している会計ソフト！ CSSグリッドの基本の書き方は動画で確認！ 基本的な記述方法は動画でも紹介しています。初めてCSSグリッドに挑戦するよという方はまずはこちらで基礎を覚えておきましょう！ 1. どんなレイアウトにするか書き出す グリッドレイアウトは少し複雑で、何も考えず組んでいくとどこの要素がどうなっているのか…こんがらがってきちゃいます。ご利用は計画的に！慣れるま
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
iPhoneのブラウザ上のvideoタグで動画再生後に元の画面に戻る方法 – tatsuaki blog
Vue.jsで画像がロードされるまでローディングgifを表示するサンプル
vuejs/core · Discussions
http://chibinowa.net/note/vuejs/vue-14.html
http://old.haxe.org/manual/using?lang=jp
Will It Shuffle?