意図していない横スクロールの原因を一瞬で特定する方法
投稿日：2021年11月25日 更新日：2021年12月6日 CSS, JavaScript 1671文字：約3分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/9030 ウェブサイト制作時。初心者のかたにありがちですが、「知らないうちに横スクロールバーが発生したけど消し方がわからない！」という問題があります。 そんな意図しない横スクロールが発生しているとき、問題となっている要素を一瞬で特定するテクニックを紹介します。 「CSSを使う方法」と「JavaScriptを使う方法」の2種類があります。 「JavaScriptを使う方法」は具体的にはブラウザのデベロッパーツールのConsoleを使う方法になります。 問題の原因と解決方法は？そもそもブラウザで意図していない横スクロールが発生するのは、CSSで横幅の計算を間違えて表示領域を超えてしまうこと
JavaScriptとCSS Spriteを組み合わせてアニメーション·MovieCrop.js MOONGIFT
MovieCrop.jsはCSS Spriteを使ったアニメーションライブラリです。 Sprite画像を使うとマウスオーバーと連携させてボタンの押し下げによる配色変更を行ったりできます。それと似たような仕組みを使ってアニメーションを実現してしまうのがMovieCrop.jsです。 例。単純にくるくる回転し続けます。 再生、停止、逆再生もサポート。 コールバックを使って順番にアニメーションさせることもできます。 アニメーションの素材になる画像はSprite画像になっている必要があります。それをJavaScriptを使って順番に変更していくことでアニメーションのように見せることができます。カスタマイズもできるので色々な見せ方に使えそうです。 MovieCrop.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る Web上でアニ
Webブラウザ上でCSS Sprite画像を作成·InstantSprite MOONGIFT
InstantSpriteはWebブラウザ上でSprite画像を作成するソフトウェアです。 複数の小さな画像をくっつけて、それをCSSで切り分けるのがSprite画像です。画像編集ソフトウェアやサーバサイドで行うソフトウェアがありますが、今回はWebブラウザのクライアントサイドで行うInstantSpriteを紹介します。 ファイルをアップロードしました。実際にサーバにアップロードされる訳ではなく、クライアントサイドで処理されるようです。 くっついた画像です。 CSSのSprite設定も出力されます。 InstantSpriteは画像をまとめてアップロード（ドラッグアンドドロップ）するだけで自動でくっつけた上でCSSの設定が出力されます。定期的な更新には向かないかも知れませんが、これまでの画像を一気にSprite化したいといった時にはぴったりかも知れません。 InstantSpriteはJ
gruntで快適JS/CSSビルド生活
programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + / ※ この記事はgrunt version 0.2.x のもので、grunt 0.3 からはAPIが変更されています grunt というJS/CSSのビルドツールが便利だったので紹介します。(Mac/Linux) cowboy/grunt - GitHubこのgruntってのは、JS,CSSを全部まとめて繋げる、まとめてJS lintする、minifyする見たいのをタスクとして登録しておくと、それ実行すればちゃちゃっとやってくれちゃうやつです。さらにwatchっていう機能使えば、ファイルが更新されたらそのタスクをやってくれるみたいなのも。 似たモノで、MakeとかRakeとかCakeとかそういう
JavaScript/CSSを使ってスクロールによるアニメーションを実現·skrollr MOONGIFT
skrollrはCSSを使ってスクロールによってアニメーションを実行するライブラリです。 最近プロジェクトやアプリ紹介ページで見られるようになったスクロールアニメーション。それを実現するライブラリがskrollrです。 デモです。スクロールを開始します！ 回転しながら飛んでくる文字！ 下から上がってくる文字！ 横からスライドも。 色が変わりました。それに合わせてテキスト色も変わっています。 上下からボックスが迫ってきます。 終了です。逆に上に上がっていくとアニメーションが逆に展開されていきます。 デモ動画です。スクロールすると次々と内容が変わっていきます。 実用性という意味ではあまり大きくなさそうですが、インパクトは強烈です。サイト全体を作るというよりも、ランディングページや紹介ページで使うと効果的でしょう。 skrollrはJavaScript/CSS製のオープンソース・ソフトウェア（M
JavaScript CSS Helpers
I spend a good amount of time looking at JavaScript framework source code. Regardless of which frameworks you have allegiance to, you can learn an awful lot by looking under the hood of widely used code collections. One of many handy snippets can be found within the MooTools source code: functions to camelize and hyphenate strings so that your own min framework can accept either form of CSS setter
Colorpicker and Datepicker for Twitter Bootstrap - Stefan Petre
Add color picker to field or to any other element. can be used as a component alpha picker multiple formats: hex, rgb, rgba, hsl, hsla Download & docs Add datepicker picker to field or to any other element. can be used as a component formats: dd, d, mm, m, yyyy, yy separators: -, /, . Download & docs eyecon.ro is using cookies to personalise content and ads, to provide social media features and to
PrefixFree: Break Free From CSS Prefix Hell — Smashing Magazine
A solution for when prefixes cause maintenance troubles, bloat CSS files, and make it harder to tweak values. In this article, Lea Verou presents her recent tool: prefixfree. Editor’s note: This article is the first piece in our new series introducing new, useful and freely available tools and techniques presented and released by active members of the Web design community. Lea Verou is well-known
MacVimでHTML,CSS,JavaScriptの文法チェック | Free Writing
鹿児島在住のエンジニアです。Webシステムの受託開発に携わってます。 Playframework/ExtJs/Sencha Touch/Backbone.jsをよく使います。
Web開発周りのVimの設定
HTML/CSS/JavaScriptを書くために行ったVimの設定やインストールしたスクリプト等をざっとまとめてみた。「VimでWeb開発を100倍効率的にする方法」といったような生産性を上げるための設定の類ではない。 HTMLファイルを:makeで文法チェック tidy.vimが用意されているので、HTML Tidyをインストールし、.vimrcに以下のように書くだけで良い。 autocmd FileType html :compiler tidy autocmd FileType html :setlocal makeprg=tidy\ -raw\ -quiet\ -errors\ --gnu-emacs\ yes\ \"%\" tidy.vimのmakeprgでは日本語が化けるので-rawを追加する。 HTMLファイルのインデントをやり直す gg=G ノーマルモードではggでファイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://cssrefresh.frebsite.nl/
GitHub - MacGapProject/MacGap1: Desktop WebKit wrapper for HTML/CSS/JS applications.
Google Code Archive - Long-term storage for Google Code Project Hosting.