CSSのclass名やJavaScriptの関数名を付けるときに役立つ単語リストのまとめ -Classnames
CSSのclass名やJavaScriptの関数名を付けるときに悩んだり、ネタ切れになったことはありませんか？ BEM, OOCSS, SMACSSで命名する場合はそれを使用すればよいのですが、特定のテーマ別にグループ化された単語のリストが必要になるときもあります。そんなときに役立つ単語リストをまとめたClassnamesを紹介します。 Classnames Classnamesは、CSSのclass名やJavaScriptの関数名を付けるときに便利な単語をリスト化したものです。MITライセンスで、商用プロジェクトでも無料で利用できます。
【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 =
ブックマークしておくと便利！Web制作に役立つさまざまなツールが一箇所で利用できる -SmallDev.tools
CSSやJavaScriptのミニファイ（軽量化）、HTMLやCSSやJavaScriptやSQLのフォーマッター、各種エンコード・デコード、ダミーテキスト・ダミーデータ・ダミー画像・クレジットカードのジェネレーター、diff（ファイル比較）など、Web制作に役立つツールがまとめて利用できるSmallDev.toolsを紹介します。 いろいろなツールが揃っているので、ブックマークしておくと便利です。 SmallDev.tools smalldev-tools -GitHub SmallDev.toolsの特徴 SmallDev.toolsは、Web制作に役立つさまざまなツールが一箇所でまとめて利用できる便利サイトです。完全に無料で利用でき、登録など面倒なことは一切ありません。 最小限のインターフェース🤩 電光石火の速さ⚡ 広告はなし💩 プライバシーフリー🔐（データはすべて、サーバーに
JavaScriptのイベントの仕組みが一発で理解できるウェブアプリ「Explore DOM Events」レビュー
JavaScriptには、特定の動作が発生した際にそれに応じてコードを実行する「イベント」という仕組みが存在しています。そのイベントがDOM内でどのように伝わるのかについて、「Explore DOM Events」というウェブアプリがイベントのオプションに応じて視覚的に表示してくれるとのことなので、実際に使って分かりやすさを確かめてみました。 Explore DOM Events https://domevents.dev/ ページにアクセスすると、「親(PARENT)」「子(CHILD)」「孫(GRANDCHILD)」というDOMの親子関係が表示されており、そのうち1つめの孫(オレンジ)がイベントのターゲットに設定されていることが分かります。このまま「Dispatch」をクリックしてみると…… イベントが伝わっていく様子がアニメーションで表示されました。まだ何もイベントリスナーを追加して
JavaScriptとは？基本的な書き方や勉強方法～入門～ | AKKODiS（アコーディス）コンサルティング株式会社
JavaScriptとは？基本的な書き方や勉強方法～入門～ 公開日：2019.07.09 スキルアップ JavaScript（ジャバスクリプト）とは、Webサイトやシステムの開発に使われているプログラミング言語のこと。私たちが普段使っているスマホやパソコンで見るサイトの多くは、JavaScriptが使われて作られています。今回は、JavaScriptは具体的にどのような言語なのか、JavaScriptを使うとできること、基本的な記述方法、学習方法まで解説します。 JavaScriptとはブラウザを「動かす」ためのプログラム言語のこと。例えば、Webサイトを訪問したとき、ポップアップ画面やカルーセルのように、Webサイト上でアニメーションが動いているのを見たことがあるのではないでしょうか？あのようなブラウザが「動く」ために、指示を出しているプログラミング言語がJavaScriptなのです。ま
これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス
最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。 そんなLazy Loadを外部ファイルとimg要素にclassを加えるだけで、簡単に実装できる超軽量JavaScriptライブラリを紹介します。 Lazyestload.js -GitHub Lazyestload.jsの特徴 Lazyestload.jsのデモ Lazyestload.jsの使い方 Lazyestload.jsの特徴 Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。 画像はビューポート内にある時、およびスクロールが停止した時にロード。 ロード前の状態は、CSSで簡単にス
今の時代、ウェブページは一瞬で表示するべき！ 画像の遅延読込に役立つamp-imgの使い方 - ICS MEDIA
ウェブページの表示速度は、離脱率やコンバージョン率にもっとも影響する重要なポイントです。Googleが公表した調査結果では、「表示に3秒以上かかると、約53%のユーザーは離脱する」「表示速度が1秒から6秒に落ちると、直帰率は106%上昇する」というデータが出ているようです。 表示速度を改善する施策は色々とありますが、本記事では「AMPアンプ（Accelerated Mobile Pages）」を作成する際に利用するJavaScriptライブラリーを使って、簡単に表示速度を改善する手法を紹介します。 AMPとはウェブページの読み込みを高速化させる技術 「AMPアンプ（Accelerated Mobile Pages）」とは、名前の通りモバイルでのウェブページの読み込みを高速化させる技術です。 本サイト（ICS MEDIA）では以前「AMPの利点と対応HTMLの作り方」で導入方法を紹介していま
Bookmarklet という一番身近な自動化技術 | blog.jxck.io
Intro 「毎回やるなら bookmarklet にでもすれば?」と言ったら、後輩が「そんな便利なことできたんですね、知りませんでした」と言っていた。 そんな時代にこそ、今更だれも解説しないであろう、 bookmarklet という技術についてもう一度書いておく。 Bookmarklet 簡単に言えば、 JS を書き、それを Bookmark として登録すれば、クリックするだけで現在のページでそれが動くというものだ。 ブラウザ上で何かを自動化したいと思うなら、最も簡単に実現できる便利な技術だろう。 似たような手法ではブラウザの Extension などもあるが、 Bookmarklet の良いところは一切誰にも邪魔されないというところだ。 開発者登録も、ストアへのアップロードも、難解なドキュメントを忖度して煩雑な設定ファイルを書く必要もない。 開発者ツールで、「こんなことできないかな」と
【2017年版】ブラウザ上で使えるJavaScript開発＆実行環境Webサービスの厳選まとめ - paiza times
どうも、まさとらん（@0310lan）です。 今回は、これからJavaScriptを学習しようという人や、ちょっとしたプロトタイプを開発したい人に向けて、オススメの「オンラインコードエディタ」を厳選してご紹介しようと思います！ 選んだ基準としては…、 SSL対応のWebサービス JavaScriptの実行環境が備わっている 作成した「コード」や「作品」の公開が可能 面倒なログイン不要ですぐに使える 無料で利用できる …などの点を重視しながら、誰でも「ブラウザ」さえあれば今すぐ使えるモノをまとめてみたので、ご興味ある方はぜひ参考にしてみてください！ ■Webページとしても公開できる実用的なエディタ！ 【 PLAYCODE 】 「PLAYCODE」は、まだ新しいサービスですが、JavaScriptプログラミングの学習はもちろんのこと、ちょっとしたプロトタイプの開発に最適なコードエディタと言える
2017年版、5分でわかるJavaScript入門(ES6対応版) - paiza times
こんにちは、吉岡([twitter:@yoshiokatsuneo])です。 今、一番身近なプログラミング言語といえば、間違いなくJavaScriptです。 JavaScriptは、インターネット利用に必須のウェブブラウザ上で動作する唯一のプログラミング言語です。 プログラミングを学ぶ時も、いつも使っているブラウザ上で動作させることができて結果が見えるため、興味を持って始めるやすい言語かと思います。 JavaScriptには、広く使われていること、活発な開発、インターネットとの相性の良さ、非同期プログラミング、仕様が標準化されていること、オープンソースでの実装があること…などなどの特徴があり、今や以下のような様々な用途でも使われるようになっています。 ウェブブラウザ(Chrome, Firefox, Internet Explorer...) サーバアプリケーション(Node.js, Ex
空から女の子が降ってくる - ぼくはまちちゃん！
こんにちはこんにちは！！ はてな見てたら、こんなのがありました！ 【降臨賞】空から女の子が降ってくるオリジナルの創作小説・漫画を募集します - 人力検索はてな 条件は「空から女の子が降ってくること」です。要約すると「空から女の子が降ってくる」としか言いようのない話であれば、それ以外の点は自由です。 字数制限 : 200〜1000 字程度 締め切り : 2009-01-12 18:00 で募集を止めます。 優勝賞品 : もっとも稀少な(と質問者が判断する)作品を書いてくださった方に 200 ポイントを贈ります。 面白そうですね！ さっそくぼくも応募してみたよ！ 応募した内容はこれ！ javascript:(function(){scroll(0,0);H='http://hamachiya.com/';D=document;F=Math.floor;R=Math.random;Q=new I
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
JavaScript入門
JavaScript はクライアント側で実行されるオブジェクト指向型のスクリプト言語です。 JavaScript を用いることで、動的にWebページの内容を書き換えたりフォームに入力された内容をクライアント側でチェックしたりできます。ここでは JavaScript の使い方として JavaScript のプログラミングの方法をサンプルを用いて解説していきます。
JAVASCRIPT::BOOKMARKLET
JavaScript::Bookmarklet スクリプト集:このページで紹介しているスクリプトは自由にお使いください。 更新日：2006.10.27 [blog] このページは様々な用途で利用できるBookmarkletをご紹介しています。もしこのページで紹介しているBookmarkletが気にいったら是非このページをあなたのホームページとリンクしてください。そしてもっと多くの人にBookmarkletのおもしろさを伝えてください。リンクに許可は必要ありません。またこのページで紹介しているBookmarkletの多くは海外サイトで紹介されているコピーフリーなものです。ですから自由にコピーして使ってください。 ニュース＆お知らせ 6月27日：「カウンタ」を追加しました。 3月18日：「DOMのソースを見る」を追加しました。 1月26日：「nofollow属性のリンクを強調」を追加しました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
たった256文字のJavaScriptコードで描かれた街の風景アニメがスゴ過ぎて訳がわからない／解説ページを見てもわからないorz【やじうまの杜】
かんたん作成.com【HTML,CSS,JavaScript,CGI】
Rocomotion - CGI,PHP,MySQLスクリプトをお探しのあなたに
【HTMLタグの簡単検索】TAG index - ホームページ作成情報
JavaScript++かも日記/Ajax,Google Maps,etc...
SiMPLE*SiMPLE - ウェブ職人のための小粋なネタ帳
