【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー | 東京のホームページ制作 / WEB制作会社 BRISK
TOPブログ【最新】Swiperの使い方・カスタマイズを解説！サンプルやオプション15個付き ー基礎から応用までー Webサイトのコーディングをするなら必修とも言えるスライダー。 スライダー実装用のJSプラグインはいろいろありますが、本記事ではその中でもSwiperを使用した実用的なカスタマイズ例をご紹介します。 デモページを見る まずはこちらのデモページをご覧ください。 片方だけはみ出しているスライダー、サムネイルと連動するスライダー、SPだけスライダーにする方法などなど、実際によく必要になる機能を網羅できるようなデモを厳選してご用意しました。 初心者さん向けのかなり初歩的な内容から、いろいろカスタマイズを加えた応用編まで解説していきます。 メインビジュアルの作例5つ（#11 ～ #15）については、Swiperのカスタマイズ方法だけでなく、アニメーションやデザインの参考になればと思い様
Vanta.js - 3D & WebGL Background Animations For Your Website
Why? Can interact with mouse / touch Customize colors & style to match your brand No pixelation – Canvas runs at full resolution Smaller filesize than background videos and large background images – three.js is ~120kb minified and gzipped Runs fast (60fps) on most laptops/desktops What's the catch? Some WebGL effects are slow on older computers. Don't use more than one or two in a single page! Not
サイトを高速化したらロード時間は1.6秒に、Lighthouseは100を獲得、その際に実施した手順を解説
サイトのロード時間とパフォーマンスを改善するために再構築した結果、ロード時間が1.6秒に短縮され、Lighthouseのスコアで100を獲得した際に、実施した手順を紹介します。 HTMLとCSSベースの改善が主で、ロード時の数ミリ秒間の表示、スマホ用CSSファイルの分割など、いろいろなサイトやブログの改善にも役立つと思います。 当ブログにも改善すべき点があるのが分かったので、対応したいですね。 I rebuilt my portfolio🌻 Now it loads in 1.6s 🎉 Here's how I did by Saurabh Daware 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 要約 改善方法 1: リソースのプリロード 改善方法 2: CSSファイルの分割 改善方法 3: 画像の最適化 ボ
軽量のイメージギャラリー「Spotlight.js」:phpspot開発日誌
Spotlight.js Demo 軽量のイメージギャラリー「Spotlight.js」 画像を拡大したりスライドショーしたりという豊富な機能がありつつ軽量なギャラリーがつくれます 関連エントリ おしゃれなギャラリー風ページを作るデモ シンプルなグリッドベースのギャラリー実装jQuery「sampGallery」
Webページにドラッグでページスクロール可能なミニマップを生成するスクリプト・「pagemap」 - かちびと.net
pagemapはWebページにドラッグでページスクロール可能なミニマップを生成するスクリプトです。非依存型 単体で動作します。 上デモ右端にあるやつです。Atomなど、テキストエディタにもよくあるミニマップをWebぺージで自動生成してくれます。 ミニマップはマウスドラッグでページ内をスクロール可能で、ぱっと見でもどんなコンテンツがあるかもある程度分かるようになっています。 <canvas id='map'></canvas> canvasを用意します #map { position: fixed; top: 0; right: 0; width: 200px; height: 100%; z-index: 100; } 生成されるマップを固定します <script src="pagemap.js"></script> <script> pagemap(document.querySelec
web制作者（フロントエンド・マークアップエンジニア向け）がブックマークしておきたい、便利なチートシートやリソースのまとめ - NxWorld
普段制作している上でうっかり忘れてしまったときにさっと確認することができる便利なチートシートや特定の情報がわかりやすくまとめられているリソースなどまとめてみました。 主にフロントエンドやマークアップエンジニアの方が日頃から利用することが多いと思うHTML・CSS・JavaScriptに関するものが中心で、他には各ブラウザのバグ情報を検索したり様々なデバイスの情報がまとめられたサイトなどもあります。 普段から多用している言語はもちろん、頻繁に調べてるとかまだまだ勉強しつつ使っているというものがあれば、それに関するチートシートをブックマークしておくことで不明点が出る度に検索する手間も省けて制作時間の短縮にも繋がると思います。 また、基本的にはweb上で確認するものになっていますが、中にはわかりやすく1枚のイメージでまとめられていたりPDF形式で用意されているものもあるので、それらを印刷して手元
Masonry系の最強スクリプト、レスポンシブ対応のレイアウトが簡単に実装できる -Muuri
カードやパネルをレンガ状に配置し、ドラッグして配置をアニメーションで変更、ソートやフィルタリング機能も可能なグリッドレイアウトが簡単に実装できるスクリプトを紹介します。 マウスで操作しても、タッチデバイスで操作しても、非常に快適です。 Muuri Muuri -GitHub Muuriのデモ Muuriの使い方 Muuriのデモ デモはモダンブラウザ、IE9+でご覧ください。スマホやタブレットでも動作します。 ※スマホだと各パネルが大きいので、操作しにくいかも。
TinySummarizer
概要 TinySummarizer は自動要約プログラムです。 詳しくは README.md をご覧ください。 特徴 TinySummarizer は自動要約プログラム Shuca を JavaScript に移植したものです。 HTML 文書などから本文抽出されたテキストを対象に要約を行うことを想定しています。そのため、 Shuca とは異なり、様々な文書ドメインにおいて比較的頑健であると思われる単語頻度のみを用いて重要文の抽出を行っています。 TinySegmenter による前処理を想定しているため、品詞による内容語と機能語の選別を行っておらず、内部に保持したストップ・ワードのリストに基づいて重要文の抽出に利用する単語の選別を行います。 TinySegmenter と TinySummarizer によって完全にクライアント・サイドのみで自動要約処理が可能です�。 文分割用に簡単な文
AMPページに＃development=1を付けて開くブックマークレット | q-Az
AMP の HTML が間違っていないかをチェックするときに AMP ページの URLの末尾に #development=1 を付けてあげるとブラウザのデベロッパツールで確認をすることができます。 ただ「#development=1 って書くの長いし面倒くさい」と思ったので自動でハッシュをつけて AMP ページを開いてくれるブックマークレットを作りました。 以下のような条件で3つに分岐させています。 AMP ページが存在する通常ページ ・・・AMP ページに #development=1 を付与してページを開く 開いているページがすでに AMP ページ ・・・URL 末尾に #development=1 を付与してページを開く AMP ページがない ・・・その旨をアラート #development=1 ブックマークレットブックマークレットの登録の仕方は割愛します。わからない方は「ブックマー
input要素の入力をサポートする非依存スクリプト・「Cleave.js」
Cleave.jsはフォームでのinput要素の入力をサポートするスクリプトです。jQuery等のライブラリに依存せず、単体で動作してくれます。上記の動作サンプルのように、クレカの自動認識、右寄せ入力、電話番号入力のサポート、任意のプレフィクス、任意のキーワードを区切り文字にする、これらを組み合わせる、などが主な特徴になります。尚、電話番号に関しては国別に別スクリプトが用意されています(日本ならcleave-phone.jp.js)。結構使いやすくて応用もききやすい印象でした。ライセンスはApache 2.0。 Cleave.js
Excel2Js紹介ページ - リーサ制作物の部屋
どんなソフト？ ExcelのシートをHtml+Css+Javascriptに変換するフリーソフトです。 数式も変換できるので、Excelで作ったツールをWebで公開する時などにご利用下さい。 サンプル1 サンプル2 DQ10『魔法使い火力シミュレータ』はフィオルさんが作成したExcelシートをExce2Jsで変換することで作成されています。 ダウンロード Excel2Js（本体）ダウンロード ヘルプ（マニュアル）のページはこちら 更新履歴 2016/01/03 ver.0.1.3 数式結果をコピーできるように改善 2016/01/03 ver.0.1.2 表示形式が適切に変換されないバグを修正 2016/01/03 ver.0.1.1 ROUND関数・CHAR関数の追加、テンプレ選択周りのUI改善、バグ修正 2016/01/03 ver.0.1.0 アルファ版公開 主な機能 基本機能 数式
APIの使い方 | widgetoon.js & count.jsoon
APIの使い方 count.jsoonのAPIの使用方法 widgetoon.jsの使用方法 count.jsoonのAPIの使用方法 countoon.comが登録を受け付けると利用可能になります。APIのアクセス先は以下のURLです。 API Endpoint http(s)://twitter.countoon.com/count.json Parameters このAPIに対して、GETパラメータを利用することができます。 url=URIエンコードされたカウントするURL (必須) callback=jsonp関数名([a-zA-Z0-9_\.]+) (非推奨) カウント数はキャッシュされており、1時間程度の間隔で更新されます。count.jsoonをクローラー等から利用している場合、1時間以上のサイクルで回収することでカウント数を正確に更新することが可能です。 callbackパ
[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ
コンテンツの邪魔にならず操作も快適な画像拡大、スクロールすると一旦ヘッダが隠れるけど上にスクロールすると出現、サーチアイコンをクリックするとにょい～ん伸びて検索ボックスになるなど、ユーザビリティ・アクセシビリティに配慮され、タッチデバイスやレスポンシブ対応にも一役買う優れもののスクリプトを紹介します。
![[JS]Webサイトの使いやすさ・かっこよさを向上させる、チェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/0bc338c3b019bd35cf84848dd648330728cc081c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015082406.png)
highlight.js
The Internet's favorite JavaScript syntax highlighter supporting Node.js and the web. 192 languages and 498 themesAutomatic language detectionWorks with any HTML markupZero dependenciesCompatible with any JS frameworkSupports Node.js and DenoCurrent release: 11.9.0 #!/bin/bash ###### CONFIG ACCEPTED_HOSTS="/root/.hag_accepted.conf" BE_VERBOSE=false if [ "$UID" -ne 0 ] then echo "Superuser rights r
slick - the last carousel you'll ever need
Features Fully responsive. Scales with its container. Separate settings per breakpoint Uses CSS3 when available. Fully functional when not. Swipe enabled. Or disabled, if you prefer. Desktop mouse dragging Infinite looping. Fully accessible with arrow key navigation Add, remove, filter & unfilter slides Autoplay, dots, arrows, callbacks, etc... Single Item
シンプルでかつ最高のJavaScriptプロファイラ sjsp を作りました！ ― Webアプリケーションが複雑化する中でプロファイラに求められるものとは何か - プログラムモグモグ
あらすじ Web技術が複雑になる中で、JavaScriptのプロファイリングをとる方法とは。 プロファイリングを取るためのコードを手で書いてみましょう。 とてもシンプルで、かつ最高のJavaScriptプロファイラ sjsp を作りました。 本当にあった怖い話 上司 「とにかくJavaScriptのコードを速くしてくれ」 私 「分かりました、速くします」 (次の日) 私 「いいプロファイラがないなら作ればいいじゃない」 同じチームの人 「えっ？」 私 「最高のJavaScriptプロファイラ作ったよ」 同じチームの人 「「えっえっ？？？」」 私 「早速使ってみたらこことここが遅いって分かったよ」 同じチームの人 「「「この子は一体…」」」 JavaScriptのプロファイリングの難しさ 近年、Webブラウザーの処理速度は著しく向上し、その可用性の高さから、アプリケーションのプラットフォーム
Google Analyticsのコードがコピーされても動かないようにする方法
Web関係のブログをやっていると、なぜかページ内の JavaScript などがそのままコピーされて中小企業のWebサイトにペーストされ、Google Analytics に見知らぬWebサイトの URL が混じってくることがあります。 これで困っている方がいたので、自分のサイト以外に自分のサイト用の Google Analytics コードが使われても動かないようにする方法を考えてみました。 JavaScriptで、表示されているページのホスト名を取得する JavaScript では、location.hostname プロパティを使用すると、今表示しているページのホスト名（example.com など）を取得することができます。 参考: window.location – Web API インターフェイス | MDN たとえば、このページを表示している時に Chrome の開発者ツール
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
headに<base target="_blank">１行入れるだけで、全リンク�のデフォルトを_blank化できた - Qiita
ブラウザで動作するHTML5製の軽量パノラマ写真ビューア・「Pannellum」 - かちびと.net
appgiga.jp