【HTML5】マリオのコインの音をブラウザで出そう【ファミコン】 - Qiita
で、上記の通り「矩形波、三角波」って見たらアラフォー以上の人は「ファミコンじゃん」ってなったり、むしろ、コナミ矩形波倶楽部を思い出す方も多いかもしれません。 技術的なこと まぁ、ソースを見て貰えば特に難しいことはしていない（いつものように殴り書きだし…）のでコインであれば「♪シミー」という音を鳴らせばできるわけです。 const AudioContext = window.AudioContext || window.webkitAudioContext const audioContext = new AudioContext() const gainNode = audioContext.createGain() gainNode.connect(audioContext.destination) gainNode.gain.value = 0.1 const oscillator =
2024年版、ファビコン画像の作成方法と設置方法、さまざまなデバイスに対応させるには6種類のファイルが必要
最近のデバイスやブラウザに対応させる最小限のファビコンセットには、6種類のファイルで対応できます。ブラウザはもちろん、スマホやタブレットにも対応し、さらにSVGも含めて6種類だけです。 ファビコンに必要な6種類のファイル、ファビコンの設定方法、ファビコン画像を作成する方法について紹介します。 How to Favicon in 2024: Six files that fit most needs by Andrey Sitnik Sitnik氏は、PostCSS, Autoprefixer, NanoIDの制作者です。 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 2024/2/28: 元記事がアップデートされたので、当記事もアップデートしました。 はじめに ファビコンの設定方法 -ショートバージョン ファビコンの設定方法
この実装方法は巧い！ コンテンツが少ない量でもフッタを一番下に配置するCSSのテクニック
ページのコンテンツが少なくても、フッタを一番下に配置するCSSのテクニックを紹介します。コンテンツが多ければ、成り行きで配置されます。 フッタの高さは自由で、CSS GridやFlexboxやcalc()は使用せず、追加のラッパーも必要ありません。シンプルなHTMLに、数行のCSSで簡単に実装できます。 A Clever Sticky Footer Technique by Chris Coyier 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに コンテンツが十分な量でなくてもフッタを一番下に配置する方法 はじめに 「スティッキーフッタ」というと、ページをスクロールした時にぴたっと固定表示されるposition: sticky;を思い浮かべる人が多いと思います。 しかし、それはここで話すこととはすこし異なります。 「ス
【閲覧注意】身の毛がよだつホラーコンテンツ7選｜MEFILAS
MEFILASメンバーがキュレーターとなって体験性の高いWebサイトを紹介するシリーズ「MEFIMEMO」。今回は「ホラー」をテーマに紹介していきます。 残暑もヒヤリと涼しくなるホラーなWebコンテンツを集めました。いかにユーザーを怖がらせるか…その一心で制作された作品ばかりです。一体どんな演出が施されているのでしょうか。どうぞ【閲覧注意】でお楽しみください。イヤホン、ヘッドホン推奨です。 01. 株式会社 闇 ホラーと言えば…でお馴染み、ホラーコンテンツ専門制作会社「株式会社闇」のコーポレートサイト。テクノロジーを駆使してた新感覚恐怖体験を生み出しています。 💡 POINT 怖いながらもワクワクする、エンタメ性の高い新感覚ホラー。伝統的なホラー要素を抑えつつ今までにはなかったデバイスに特化した体験型の演出が面白い。隅々までこだわって作られており、ソースコードまで怖い。ホラー×テクノロジ
📃 Webページをそのままの状態でローカルに保存するツールを作った話 - Qiita
はじめまして。yamaimo (@yarnaimodev) です。Qiita 初投稿...というかネット上にちゃんとした記事を上げるの自体初めてな気がします。 1998 年生まれで、プログラミングとか Web デザインは独学で 3 年ぐらいやってます。TypeScript / Firebase / Node.js / React あたりが特に好きです。 この前 coliss で紹介された Can't Unsee を試してみたら 1 回目が 7,630 点、2 回目が 7,930 点でした。1 小規模ですが Mastodon インスタンスを管理してます。あと Helix キーボード をこの前組み立てた2んですがキー配列を変えたのがなかなか覚えられなくて死んでます。 開発環境は基本的に WSL + Hyper + fish shell と VSCode です。 今回 Puppeteer を使っ
PWAをもっと簡単に初めてみる - Qiita
はじめに PWAって知っていますか？（自分は最近知りました👱） では、実際に使ったことがある、あるいは触ってみたことがある方はどのくらいいらっしゃるでしょうか。 色々なPWAの初学者用の記事を見たのですが、どれも丁寧に書かれていてとりあえず使ってみたい私にとっては難しいとかんじてしましまいました…😵 そんな自分のような方向けに、もっと簡単にPWAを初めてみようという主旨で書きました！ 今回は、自分が最近触っているvue.jsを利用して組み合わせてみました。 PWAとは そもそもPWAとはなんでしょうか？ PWA（Progressive Web Apps）はグーグルがモバイルユーザーのユーザー体験向上を目的とし、今までのWebアプリ（サービス）にWebとアプリの両方の利点を兼ね備えた仕組みのことです。 Googleが取り組むWebのアプリ化プロジェクト「PWA」とは？- WPJ この記事
HTML5で、オフラインでも使えるiPod/iPhone超簡単アプリっぽいものを作ってみた － Publickey
HTML5にはオフラインアプリケーション機能があり、オフラインに対応したWebサイトを作ることができます。Webブラウザでいちど表示させれば、あとはネットワークとの接続が切れてもそのままエラーを起こさずに利用し続けられるWebサイトです。 iPod TouchやiPhoneに搭載されているWebブラウザの「Safari」はHTML5のオフラインアプリケーション機能に対応しているそうなので、HTML5を使っていつでも参照できる超簡単なアプリを作れるのではないか、そう思ってお正月休みに試してみることにしました。 単に路線図を表示するだけのアプリ iPod Touchを僕は利用しているのですが、いつでも参照できる地下鉄の路線図があるといいなと思っていました。iPod TouchはWifi機能しかないため、外出中はずっとオフラインでの利用なのです。 そこで、起動すると路線図の画像を表示するだけの超
Webサイトを「HTTP」から「HTTPS」へ切り替える際に行う一連の作業をまとめました｜今村だけがよくわかるブログ
Googleが「HTTPS everywhere」を提唱していることなどが影響して、HTTPSで通信できるようにWebサイト全体を独自ドメインに対してSSL/TLSによる暗号化を行い、運用をスタートしている様子がちらほら私の周りには増えてきました。 Google ではさらにもう一歩踏み込んで、数か月前の Google I/O では、「HTTPS everywhere」をウェブで提唱しました。 ユーザーがもっと安全にサイトを閲覧できるよう、すべてのサイト所有者の皆様に HTTP から HTTPS への切り替えをおすすめしたいと考えています。 （Google ウェブマスター向け公式ブログ: HTTPS をランキング シグナルに使用しますより） 私はしばらく動向を伺っていましたが「Webサイト全体をHTTPSへ切り替える流れは今後はより加速すると考えてもいい」と判断をし、このブログも全体をHTT
iPhoneのSafariブラウザにおける、色んな制限 | FINE lab.FINE lab.
カテゴリー スタッフのネタ帳 (37) iPhone/Android (8) iPhone Webコンテンツ (2) iPhone インターフェース (3) iPhone ネイティブアプリ開発 (3) RIA/Ajax/Flash (2) Adobe Air (2) ファイン魂！ (27) 【ファイン魂！】とは？ (1) こんなんできます！ (21) デバッガの独り言 (5) プロジェクト (31) スマートフォン・ゲーム (23) -タイトル＆ビジネス- (5) Fine Shot! (7) RagingGEAR (1) キセキどろっぷ (8) 端末情報 (1) デスクトップアクセサリ (5) ミニメモ電卓 (5) ブログパーツ (1) ハメコミブログパーツ (1) モバイル/PCサイト構築 (1) FINEライブラリ (1) やはり、デスクトップ版Safariにはない制限が色々あります
Web制作関連記事の復習メモ
今年も色々と情報が発信されました。 後で試そう、とか後で見よう、と思った まま何もしていない自分がいたので ちょっと復習用にメモ。来年の勉強用です。 個人的なメモですが参考になれば幸い。 内容はWeb制作に関わる記事ですが、まとまりがありません。単なるメモなのでご了承いただければと思います。順不同。 JPEG画像をより美しく、より軽量に最適化するテクニック 理屈に沿った軽量法でした。これは癖を付けてナンボのテクニックですね。頭に叩き込んでおきたい。PNGも合わせて。 JPEG画像をより美しく、より軽量に最適化するテクニック とっても使えるoverflowプロパティ。その使い方色々。 凄く便利。こんなに役に立ってくれるプロパティだとは知りませんでした。これも覚えておくと便利そう。 とっても使えるoverflowプロパティ。その使い方色々。 商用無料で使える写真素材サイトまとめ2009年度初版
Luxury Beach Resort in Bali | AYANA Resort Bali
Luxury Resort with Healing TouchThe award-winning AYANA Resort Bali is committed to providing world-class service to each guest. Offering the best highlights of Balinese culture, breathtaking scenery and unparalleled spa and wellness facilities, AYANA is a rejuvenating and wellness-giving destination getaway and hideaway. RoomsWith views across lush tropical gardens toward the Indian Ocean, the su
チェックボックスを綺麗に並べるCSSサンプル:phpspot開発日誌
Checkbox alignment in IE and Firefox | Xinotes チェックボックスを綺麗に並べるCSSサンプル。 次のように、チェックボックスの横に、改行入りのテキストを入れても綺麗に配置するサンプルです。 簡単そうでなかなか難しいテクニックかもしれないので覚えておくとよいかも。 サンプル IEでもFirefoxでも動作。Chromeでも試してみたところ動作しました。 関連エントリ クリーンなデザインでピュアＣＳＳなフォームを作るサンプル CSSでクールなINPUTフォームを作成するサンプル CSSベースのクールなフォーム、サンプル集 CSSでフォームデザインをする際のチュートリアル
IE6問題に対処する10のテクニック | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers 既報のとおり、IE6のシェアは純減を続けている。2009年2月のNet Applications調査によればIE6のシェアはFirefox 3に抜かれて3位に落ちた。今後も下落の傾向は続くとみる向きが多い。しかし、依然として19%を越えるシェアはその次のシェアを獲得している4.5%弱のSafari 3.2を大きく上回る。IE8のリリースが控えている状況ではあるが、WebデベロッパやWebデザイナは依然としてIE6対応を継続しなければならない。 IE6固有の問題を回避する方法はいくつもあるが、それらテクニックをまとめたドキュメントがSitePoint: 10 Fixes That Solve IE6 Problemsとして公開されたので注目しておき
URLを指定するとリンク切れしているページをチェックしてくれる『Dead-Links』 | 100SHIKI.COM
地味に便利なツールのご紹介。 Dead-LinksでURLを指定すると、そのURL以下のページでリンク切れをしていないかをチェックしてくれる。 リンク切れがあると恥ずかしかったり、ユーザーや顧客を逃したりしてしまうだろう。 すでに似たようなツールもあるが、ドメインがわかりやすいし、インターフェースもシンプルなので覚えておいてもいいだろう。 ちょっとチェックに時間はかかるが、定期的にこのサイトで自分のブログなり自社サイトなりを調べてみるといいだろう。
崖っぷちWEBデザイナーブログ | hostsファイル設定のメモ
hostsファイルってなに？ hostsファイル（ホスツ-）とは、TCP/IPを利用するコンピュータにおいて、ホスト名とIPアドレスの対応を定義するためのテキストファイル。 テスト環境を本番環境と同じホスト名で表示したい時に便利。 注）FTPのIPアドレスとは異なるらしいので注意。アイルを使用した時にMovable Typeのインストール絡みでhostsファイルを設定したんですが、IPに関しては問い合わせしてくださいとのこと。 hostsファイルがある場所 XP,Vistaともに↓にあるはず。 C:\Windows\System32\drivers\etc テストしてみる http://www.yahoo.co.jp/を開くとgoogleのページを開くようにする ↑をhostsファイルに記入 ※64.233.167.99はgoogle.co.jpのIP Vistaにてhostsファイルを開
HTTPステータスコード - Wikipedia
HTTPステータスコードは、HTTPにおいてWebサーバからのレスポンスの意味を表現する3桁の数字からなるコードである。RFC 7231等によって定義され、IANAがHTTP Status Code Registryとして管理している。以下に一覧を示す。 リクエストは受け取られた。処理は継続される。 100 Continue 継続。クライアントはリクエストを継続できる。サーバがリクエストの最初の部分を受け取り、まだ拒否していないことを示す。 例として、クライアントがExpect: 100-continueヘッダをつけたリクエストを行い、それをサーバが受理した場合に返される。 101 Switching Protocols プロトコル切替。サーバはリクエストを理解し、遂行のためにプロトコルの切り替えを要求している。 102 Processing 処理中。WebDAVの拡張ステータスコード。処
会員登録フォームを構築するポイント | ランサーズ社長日記
いいね！ 11 ツイート B! はてブ 734 Pocket 58 ここ2・3日、ひたすら色々なサイトの会員登録フォームやコマースサイトの購入フローを見ていました。 また、フォームのユーザビリティについて語っているブログやサイトをみて研究していました。 こうすれば登録数が劇的に上がる！とか、売上が上がる！といった方法はありませんが、少しだけユーザーに安心感を与えたり、ストレスを取り除いたりする方法はたくさんありますし、見ていたサイトでも登録しやすいサイトには共通点が多くありました。 少し量が多いですが、自分で意識的に行ってきたこと、登録しやすいサイトの共通点、ブログやサイトをみて参考になる点をまとめてみました。 1つ1つはよく言われていることで、大したことありませんが、こういった小さなディティールにこだわって行きたいと思います。ケースバイケースの側面も強いのですが、何かの参考になればと思い
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www2.nissan.co.jp/SP/NOTE/SPECIAL/index1.html
Download details: Windows Server 2003 Resource Kit Tools
Googleが教えるSEOでやってはいけない30の事 - 海外のSEO対策・SEOツールをわかりやすく解説するブログ