サイトやブログで使用しているスタイルシートをリファクタリングし、可読性・保守性を高めたCSS（Sassも）に変換してくれるオンラインサービスを紹介します。
スタイルシートの内容はそのままで、可読性・保守性を高めるオンラインサービス -CSS Trashman
サイトやブログで使用しているスタイルシートをリファクタリングし、可読性・保守性を高めたCSS（Sassも）に変換してくれるオンラインサービスを紹介します。
[JS]スクロールに追従するページの先頭へアニメーションで戻るボタンが簡単に設置できるスクリプト -scrollUp
HTMLは一切変更せずに、スクロールに追従するページの先頭へ戻るボタンが簡単に設置できるjQueryのプラグインを紹介します。 デモページ：タブ scrollUpの使い方 実装は非常に簡単です。 Step 1: 外部ファイル 「jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="js/jquery.scrollUp.js"></script> デザインをそのまま使用する場合は、スタイルシートもテーマごとに用意されています。 <link id="scrollUpTheme" rel="stylesheet" href="css/themes/link.css"> <li
Knyle Style Sheets · by Kyle Neath
December 5, 2011 Knyle Style Sheets So I’ve been writing CSS for somewhere around 13 years now. Some might think I’ve learned the right way to write CSS in that time — but if you ask me all I’ve learned is the most efficient way to drive someone insane. CSS is complicated. It’s not object oriented. It’s not hierarchical. It’s a specificity based cascade applied to a dynamic hierarchical data struc
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他
jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 （※ページをそのまま訳したわけではないと、思います） jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ： 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A
node.jsを使ってjQueryチックにWebサイトをクローリングする方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうも僕です。 今日は、サーバサイドJavaScript（node.js）でjQueryチックにDOMを操作して、Webサイトをクローリングする方法についてまとめようと思うよ！ 要は、既存のWebサイトから必要な情報を収集してきて、データベースに突っ込もうということ。 これができると何がうれしいかって、簡単にまとめサイトが作れるんだよね。 クローリングする方法は数々あれど、なにゆえサーバサイドJavaScriptのnode.jsを使ってこれをするかというと、「クローリング対象の部分をjQueryのセレクタで指定できる」のが大きいわけです。 みんな、好きだよね！jQuery！とっても便利だよね！jQuery！ 好みにもよるかと思うが、JavaScriptのようなふにゃふにゃした言語をあえて使う理由は、クライアントサイドプログラミングを組むか、JQueryの恩恵を受けるためといっても過言ではあ
H1一つでここまで出来るCSS見出しデザインのアイデア9個 / SQUEEZE - Web Design Studio -
HTMLはh1要素だけで、CSSの「border」や「box-shadow」「transform」「linear-gradient」、擬似要素の「:before」や「:after」を使った見出しデザインをご紹介します。まずはサンプルをご覧ください。 サンプルページ » 01.切り取り線 紙を切り取ったようなデザインです。 サンプルとソースを見る » ポイント垂直方向の影のオフセット距離を設定しただけでは、左右両脇にも影ができてしまうので、一旦5px下に影をオフセットしたうえで、広がり距離を負の値(-4px)にし縮小することで、上部の影のみを残しています。 border-top:1px dashed #aaa; border-bottom:1px dashed #aaa; background:#eee; text-shadow:1px 1px 0 rgba(255,255,255,1);
『Twitterカード』を設定してサイトへの質の良い流入を増やそう！1万6742文字に渡る開発者向けドキュメントの日本語訳まとめ。 « 株式会社ガイアックス
a]:flex [&>a]:flex-row [&>a]:justify-between [&>a]:py-[18px] [&>a]:border-t [&>a]:border-lightgray [&>a]:border-opacity-20 [&_li]:my-1 [&_li]:list-['-_'] [&_li]:py-[18px] [&_li]:border-t [&_li]:border-lightgray [&_li]:border-opacity-20 [&_.Label]:transition-all [&_.Label]:w-fit [&_.content]:transition-all [&_.content]:h-0 [&_.content]:pt-0 [&_.content]:px-5 [&_.content]:overflow-hidden [&_.toggle:
RequireJSでTwitter Bootstrap（jQuery）を非同期ローディングしてみる | DevelopersIO
こんにちは、すどーです。 RequireJSでjQueryやjQueryプラグインの非同期ローディングを試してみました。 最近は大規模な構成になると、「ちぢめる、まとめる、かためる（minify, combine, compress）」のが主流のようです。 ですが小中規模な構成や、依存関係にあるフレームワークなども多くあるので、簡単な使い方だけでも覚えておくと便利かと思います。 RequireJS： http://requirejs.org/ RequireJS API： http://requirejs.org/docs/api.html RequireJSの主な特徴 モジュール化（AMD APIをサポート） 非同期ローディング OPTIMIZERによる最適化 1. モジュール化（AMD APIをサポート） AMD(Asynchronous Module Definition)はComm
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
RubyJSを試しました - ちなみに
RubyJSをためしてたらこんな時間で明日が心配な今日この頃です。 RubyJSはUnderscore.jsやstring.jsみたいなJavaScriptのライブラリです。 特徴はRubyの機能をJSで実装しているところ。JS的な書き方を無視して、以下にRubyらしく書けるかに注力されています。RubySpecに準拠するように書かれているので、Rubyを普段使っている人には無意識に使えるようになっています。 使い方は簡単でライブラリを読み込んで、JSの任意のオブジェクトやプリミティブな値を RubyJS メソッドを使ってラップしてやります。この RubyJS メソッドが適切な RubyJS オブジェクトに変換してくれます。もちろん R というエイリアスが切られているので、こちらを使いましょう。 R 'hoge' #=> RubyJS.String R 1 #=> RubyJS.Fixnu
iPhoneも驚きの新発想アプリ10選 - RyoAnna
Image by Mike | Creative Mints App Storeではこれまで70万個以上のアプリがリリースされたが、ごく稀にあっと驚くアプリが登場する。タッチパネル、カメラ、バイブ、マイク、GPS、様々な特性を活かしたアイデアアプリ。こんな使い方があったとは。いつも一番驚いているのは、iPhone自身かもしれない。 1. フロントカメラを使う Wave Timer - ハンズフリータイマー 1.1（無料） カテゴリ: ユーティリティ, 仕事効率化 販売元: Augmented Minds, LLC iPhoneをキッチンタイマーとして使う事があるが、アラームを止める時に手を拭く必要がある。Wave Timerなら、手をかざすだけでフロントカメラが検知して、アラームを止めてくれる。 iPhoneに触れなくても手を振って止められるタイマーアプリ『Wave Timer』[原石No
日本では購入しにくい「外国から外国へ飛ぶ格安航空券」をチェック＆購入する方法 | ロケットニュース24
ほとんどの海外旅行者は、日本の旅行代理店にツアーを申し込むか、日本のインターネットサイトで航空券を購入して旅立っている。JTB、HIS、スカイゲート、いろいろな航空券販売サイトがあるので、日常的に使用している人もいるだろう。 だが、日本から海外に飛ぶ航空券は誰でも購入できるが、「外国から外国へ飛ぶ格安航空券」は入手しにくい。外国から外国へと飛ぶ格安航空券を販売している航空会社のサイトを見つけるのは、とても手間なのである。 しかし、世界各国の格安航空券を販売している航空会社を簡単に検索できるサイトがある。旅行情報サイト『タビィコム』（tavii.com）が提供している、ローコストキャリア検索だ。出発国と到着国を選択するだけで、その区間を飛んでいる航空会社のサイトを教えてくれるのである！ しかも格安航空券を販売している航空会社がメインなので、低予算で国から国へと移動したい旅行者にとっては非常に
JavaScriptのコード無しでWeb APIからデータ取得、表示まで実行·爆速JSONP MOONGIFT
爆速JSONPはJavaScriptのコーディングレスでJSONPで取得したデータを表示する処理を行うライブラリです。 去年くらいからのYahooはとりあえず何でも爆速をつけておこう的な雰囲気が感じられますが、ついにオープンソース・ソフトウェアまで爆速がつくようになりました。今回はJSONPを使った表示処理エンジンである爆速JSONPを紹介します。 サンプル。電力消費量を取得しています。 ソースです。取得したJSONデータをテンプレートとして当てはめています。 爆速JSONPはデータをJSONPを使って取得し、その結果を予め決められたテンプレートに埋め込んで表示する仕組みです。data-*要素を使っており、JavaScriptのコードを書かずに実装できてしまうのが利点です。 爆速JSONPはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFT
iOSデザイナーにオススメ！ 「iconsider」というアプリが便利すぎる！ | ナナメウエblog
iOSのデザインをやる時に一番大変なのが実機確認だと思います。 特にアイコンは実際にホーム画面に置いてみて、周りの他のアプリのアイコンに埋もれていないかなどを何度も検証します。 今まではiPhoneのホーム画面のスクリーンショットを撮って、その正確な位置に配置して画像として書き出したものをiPhoneに送信 → 確認という方法を使っていました。 一度ホーム画面のレイアウトを作ってしまうと難しくはないのですが、どうしてもiPhoneに送る手間がネックでした。 今回はそれを解消してくれる「iconsider」というアプリを発見したのでご紹介します。 こちらのアプリは、自分のDropboxにアイコン画像を入れるだけで自動的にiPhoneで確認することができるとても便利なもので、iOSデザイナーには必須になるんじゃないかと思います。 iconsider アイコンデザイン実機シミュレーター
JavaScript の this キーワードに結びつけられる値はどのように決定されるのか (言語仕様の説明) - ひだまりソケットは壊れない
最近 JavaScript の this キーワードについての記事をいくつか見かけて 「そういや自分も昔 this キーワードについて記事を書いたなー」 と思って 古い記事 を見返してみたのですが、関数呼び出しのことしか説明してなかったので改めて this キーワードの全般的な話を書いておこうかと思います。 本記事は ECMA-262 5.1th に基づいています。 初心者向けの this キーワードの使い方の指針を示しているわけでも JavaScript 処理系の実装の説明をしているわけでもなく、JavaScript 言語コアの仕様を説明していることに注意してください。 ECMA-262 5.1th : JavaScript の言語コア部分 (ECMAScript) の言語仕様 (バージョン 5.1) 初心者向けの this キーワード周りの指針 この記事の最後の 「まとめ」 に、自分が
黒髪キャラを「黒以外」の色で塗る場合のチェックポイント - ピアノ・ファイア
「自然の黒」は「絵の具の黒」じゃない 小中学校の美術の授業で習ったことがあると思うのですが、絵の具で人間の髪の毛を塗る場合、「黒の絵の具だけで色を出すな」と教わりませんでしたか？ ぼくの母校では、何も知らない生徒が真っ黒にベタ塗りしてから「なんか変だぞ」と悩んでいるところに、先生が「ちょっとだけ緑や茶色を混ぜればいいよ」と教えてくれていたものでした。 （同じように、「肌色」を真っ茶色やピンクに塗ってしまった生徒にも「ほんのちょっとだけ緑を混ぜよう」と教えていたのを良く覚えています。） 光の反射で色が変わる 専門的な絵画の技術としては「黒は三原色の混色で作れ、絵の具の黒は使うな」と指導されることもあると思います。 なぜ「黒の絵の具」をそのまま使わないのか、美術の基本から考えてみましょう。 美術史の発展にともない、「ものの色とは、もの自体に色があるのではなく、ものが反射する光の色なのだ」という
Androidアプリを開発する際のベースにどうぞ！·Android Bootstrap MOONGIFT
Android Bootstrapは多彩な機能が実装されたAndroidアプリ開発ベースです。 Webサービス開発時においてBootstrapが活躍しています。そういったベースがあると開発がとてもスムーズになるのではないでしょうか。そこで今回はAndroid Bootstrap、Androidアプリ開発のベースを紹介します。 ログイン画面。 ユーザ一覧。 ニュース。 タイトルをタップすると記事詳細が表示されます。 チェックイン。 タップすると地図が表示されます。 メニューはログアウトのみ。 紹介動画です。 Android Bootstrapはフラグメント、ページャー、アカウント管理などの実装に加え、Android Mavenプラグイン、RoboGuice 2、ActionBarSherlock 4、ViewPagerIndicator、http-request、GSON、Robotiumと
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
node.jsアプリのデプロイにやさしい grunt-rsync | DevelopersIO
はじめに ちょっとデプロイしてスマホで確認したい、皆に見てもらって感想が欲しい、とにかく直ぐにデプロイしたい。そんな時に便利なgrunt.js用のタスクのgrunt-rsyncです。 rsyncコマンド知ってますか？ 僕は知りませんでした（汗。ファイル群の同期を取る用途のコマンドです割と古くからあるみたいです。多くのUnix系環境にデフォルトで入っているようです。名前の通り、ファイルの同期を取るのがこのコマンドの仕事で、ローカル同士でもリモートともSCP経由などで同期を取れるようです。 詳しくはWikiで。 grunt-rsyncパッケージ rsyncwrapperというrsync用のパッケージを使用しているgrunt用タスクです。もっとシンプルにrsyncをラップしている grunt-rsync-2 というのも存在しますが、コピーに失敗してもがエラーが出なかったのでこちらの方がいいと思い
Amazon VPCを使ったミニマム構成のサーバ環境を構築する | DevelopersIO
よく訓練されたアップル信者、都元です。AWSにおいては、ネットワーク環境をあまり気にせず、数クリックで簡単にサーバを構築できるのは一つのメリットだと言えます。しかし、本格的に運用するシステムに関しては、ネットワーク環境をコントロールする需要も出てきます。AWS Virtual Private Cloud (VPC)を使えば、AWS上に仮想ネットワークを定義し、その上に各種サーバを配置することができます。 深く考えずに非VPC環境に構築してしまったAWSサーバ環境は、簡単にはVPC環境に移行することはできません。従って弊社では、小さなシステムであっても、最初からVPC環境にシステムを構築することを推奨しています。「非VPCが許されるのは小学生までだよねー」とボスが申しておりました。かといって、ネットワークの構成をゼロから考えて構築するのもひと苦労であるため、本エントリーでは、システムの初期段
Amazon Elastic Transcoder メディア変換サービス来た！ | DevelopersIO
Amazon Elastic Transcoderとは AET(Amazon Elastic Transcoder)は、映像・音声をユーザーが再生可能なフォーマットに変換するクラウドサービスです。 入出力の形式 重要だと思ったので最初に言いますが、入力形式としてサポートしている動画フォーマットは、3GP, AAC, AVI, FLV, MP4です。出力形式としてサポートしている動画フォーマットは、H.264/AAC/MP4です。音声データは、2-channel AACです。サンプルレートやビットレートは変更可能です。 変換可能な形式（プリセット）一覧 AETが変換可能なメディア形式は以下になります。これらはよくある形式として最初から登録されています。この他にも自分でエンコード形式を定義することも可能です。 System preset generic 1080p System preset
GitHub のプルリクエストを fetch しとくと便利 - HWPS別館
GitHub や GHE を使って多人数で開発していると，プルリクエストを横断して試す必要が頻繁に発生すると思います． プルリクエストを次々に試したり，#30 と #31 をマージした結果を試したい！なんてケースもあるのではないでしょうか． GitHub では git ls-remote すれば分かるように，プルリクエストの番号と対応したブランチがリモートに存在しているので，これを取得してみます． .git/config に追記（あるいは git remote add とかで適当に） [remote "pr"] url = git@github.com:yourusername/yourrepos.git fetch = +refs/pull/*:refs/remotes/pr/* あるいはこんな感じ（丸投げ）: https://gist.github.com/3342247 git fe
ghostwriter48.com - このウェブサイトは販売用です！ - ghostwriter48 リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
Windows 8に従来のスタートメニューを追加できる『StartMenu8』 | ライフハッカー・ジャパン
昨日もお伝えした通り、明日2013年1月31日（木）をもって、Windows 8へのアップグレード「優待版」の販売が終了します。これまでと異なるUIに「使いこなせるか不安だな...」と感じている人にとっては、このソフトが味方になってくれるかもしれません。 『StartMenu8』は従来のスタートメニューをWindows8のデスクトップ画面に追加します。起動設定で「Metro画面をスキップする」ことも可能。つまり、Windows 8であってもこれまでと同様に操作できるのです。 以前にもWindows 8にスタートボタンが復活する『Start8』を紹介しましたが、見た目も機能も、StartMenu8の方が従来のものに近いようです。 好きなプログラムをスタートメニューやタスクバーに置けるほか、スタートボタンのデザインや、Windows 8で追加されたメニューのオン／オフもカスタマイズできます。「
Latest topics > 「元のソフトウェアがGPLだから公開できない」という誤解について - outsider reflex
Latest topics > 「元のソフトウェアがGPLだから公開できない」という誤解について 宣伝。日経LinuxにてLinuxの基礎？を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能！ « Nexus 7とハードウェアキーボードの組み合わせを実用する Main 「コピーレフトとBSDスタイルではBSDスタイルの方が発展するのでは」という議論についての誤解あるいは言葉の裏にある欺瞞 » 「元のソフトウェアがGPLだから公開できない」という誤解について - Jan 30, 2013 会社のブログに掲載するつもりで書きましたが、タイミング的に発表が遅れてしまいそうということだったので、勢い重視でこちらで公開してみます。 1月31日16時台追記。hide氏の意向についてのこのエントリでの推測が全く
「augment5」の日本紹介映像がかっこいいと話題に
日本にはいい所が沢山あると言われているけど、実際にそれらが知られていない、伝わってこない。それは僕も日本を回っていて思うことだし、海外を回ってみて改めて実感することでもあります。 どれだけいいものであっても、届かなければ何も起こらないし、時代と合わなければ廃れて無くなってしまう。その届ける手段として、文章や写真、映像というものがあり、最近僕は映像というものに注目しています。 先日、友人の成瀬さん @YukiNaruse から、「青木君、この映像やばいよ！超かっこいい！見て！」と言われ、僕はその映像に釘付けになってしまいました。TwitterやFBで書いたところ、友人の中でも話題に。今回は、その映像チーム「augment5」から5本、いいなーと思うものを取り上げたいと思います。音楽もオリジナルで、まじで、いいです。是非、色んな人に見てもらいたいです。 草津（3：20） Kusatsu Oct
ゆーすけべー日記
サキとは彼女の自宅近く、湘南台駅前のスーパーマーケットで待ち合わせをした。彼女は自転車で後から追いつくと言い、僕は大きなコインパーキングへ車を停めた。煙草を一本吸ってからスーパーマーケットへ向かうと、ひっきりなしに主婦的な女性かおばあちゃんが入り口を出たり入ったりしていた。時刻は午後5時になる。時計から目を上げると、待たせちゃったわねと大して悪びれてない様子でサキが手ぶらでやってきた。 お礼に料理を作るとはいえ、サキの家には食材が十分足りていないらしく、こうしてスーパーマーケットに寄ることになった。サキは野菜コーナーから精肉コーナーまで、まるで優秀なカーナビに導かれるように無駄なく点検していった。欲しい食材があると、2秒間程度それらを凝視し、一度手に取ったじゃがいもやら豚肉やらを迷うことなく僕が持っているカゴに放り込んだ。最後にアルコール飲料が冷やされている棚の前へ行くと、私が飲むからとチ
金融機関が自分をどう評価しているかが一目でわかる「クレジットレポート」を実際に出してみた
自分自身の信用情報をグラフを使って一目でわかるように表示してくれるのが「クレジットレポート」です。住宅ローンを申し込んだ際などに金融機関は信用情報機関に照会し審査を行っているのですが、その評価方法は非常に複雑な仕組みになっており、一般的に評価を正しく読み解くことは困難。しかしクレジットレポートは金融機関の審査と同様の分析結果を誰でもわかりやすく加工してまとめており、金融機関が自分をどのように評価しているのかが簡単にわかるということで、実際に自分自身の信用情報がどうなっているのか確かめてみました。 個人の信用情報が10分でわかるクレジットレポート:マイクレジット 個人の信用情報が10分でわかるクレジットレポート:マイクレジット https://www.mycredit.jp/ クレジットレポートの購入手続きはトップページのオレンジ色のボタンから行います。 まず、手続きの際には電話で受付番号を
[JS]便利で簡単！スクリプトやスタイルシートをブラウザ・OSごとに分岐して利用できる超軽量高速のスクリプト -Conditionizr
IE6/7/8/9/10, Firefox, Chrome, Safari, Operaなどのブラウザだけでなく、Win, Mac LinuxなどのOS、iPadやiPhoneのRetinaディスプレイ用に条件分岐して、外部スクリプトやスタイルシートをロードさせたり、classを付与してHTMLで利用できたりする超軽量高速の単体で動作するスクリプトを紹介します。 Conditionizr Conditionizrの特徴 Conditionizrの使い方 Conditionizrの特徴 ConditionizrはjQueryより50%高速に動作し、条件付きのJavaScriptとCSSをサポートする3KBの超軽量スクリプトです。 条件付きのHTMLタグ 条件付きの外部スクリプトやスタイルシートのロード カスタマイズされたスクリプトにも対応 IE, Firefox, Chrome, Safar
JavaScriptのthisの覚え方 - Qiita
JavaScriptのthisは同じソースコードでも呼び出し元次第で意味が違ったりして複雑だと思われがちだけど、一回覚えてしまえば簡単だ。 JavaScriptにはthisが4種類ある これだけをしっかり覚えておけば、後は必要な時に 4種類って何があるんだっけ？ と考えれば容易に思い出せる。 ちなみに、下記のコードはブラウザ上で実行することを想定している。(なのでwindowを使う) トップレベルのthis グローバルオブジェクトを指す。 var hoge = "fuga"; window.foo = "bar"; // fuga+bar と表示される console.log(this.hoge + "+" + this.foo); (function(){ // 同じくfuga+bar と表示される console.log(this.hoge + "+" + this.foo); })(
コレを抑えておけばOK！スマホサイト制作に役立つ記事・サイトまとめ！ | PLUS
一般企業サイトでもスマートフォンに対応するサイトが増えてきました。ちょっと前までは提案しても、もうちょっと先でいいよという話に落ち着いていたんですが、ようやく身近なクライアントも導入をはじめています。そこで今回は実際にスマホサイトを作る立場から、役に立ちそうな記事やサイトをまとめてみました。 スマホサイトのギャラリー 絶対見ておきたい有名企業のスマホサイトまとめ 優れたiPhoneサイトデザイン集 – iPhoneデザインボックス スマートフォンサイト デザイン集 AGT thinkthing スマホ制作に役立つ情報 【スマートフォンサイト制作の総まとめ 第1弾】スマホサイトデザインの基礎知識 少しのコードで実装可能な15のスマートフォンサイト用小技集 200サイトのiPhoneデザインを見て感じたスマートフォンの最適化 Webサイトのスマートフォン対応 7つの基本ルール スマー
jQuery 1.9 のソースマップ対応で圧縮版でもデバッグが簡単になった話
jQuery 1.9 がリリースされました。1.9 の新機能の中ではあまり注目されていませんが、ソースマップに対応したのが地味に便利そうです。 というのも、圧縮版の jquery.min.js を使っていると 何か問題が起きたときにスタックトレースを眺めても jQuery の部分が意味不明 デバッガーで jQuery のソースにステップインしても意味不明 といった理由で、開発中には非圧縮の jquery.js を使うことが多かったわけです。 それが、1.9 からはソースマップに対応したので圧縮版のままでのデバッグが簡単になってます。 超簡単な使い方 ソースマップに対応したブラウザーは現時点では Google Chrome のみなので、Google Chrome の手順を説明します。 (Firefox はソースマップへの対応を計画中らしい) 事前準備を忘れずに Google Chrome で
Change Text Link Hover Effect Using CSS3
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
書籍代を大幅削減「その本、図書館にあります。」 - 着ぐるみ追い剥ぎペンギン
【連絡】 2019/4/23 : 修正版でver2.23を公開しました。 Facebookページを作ったので、こちらで動向とコミュニケーションとっていければ。 ついついamazonで本を購入してしまう 本を紹介しているブログなどを読むと「面白そうだな〜」とついamazonでポチッと購入してしまいます。おかげで毎月、結構な額をamazon様に支払っています。 その対策として最近はamazonの「ほしい物リスト」にまず保存して、突発的欲求を抑えています。 そして、その本が「すぐにでも読みたいか？」「長く読みそうなものか？」などを考えています。 もし一度読んでみたいだけならば、近所の図書館にその本がネットで検索しています。 最近の図書館は大体どこもネットで書庫検索ができるようになっているので便利です。 ただし、図書館の検索システムは洗練されていないので非常に使いにくいです。20世紀で時間が止まっ
[CSS]擬似要素の実用的な使用用途のまとめ
(個人的な)Graceful Degradationへのシフト webcre8はこれまでIE対応の必要な環境で仕事をしていた為あまりIE6,7で使えない技術には興味が湧かなかったんですが、(ずっと進んでない)ブログのリニューアルのことを考えていると、やはりどうしても擬似要素や過去ブラウザを無視(ざっくり対応)した形でのCSS3の使い方に魅力を感じてしまうわけです。 つまりプログレッシブ・エンハンスメント→グレースフル・デグラデーション的な考え方に気持ちがシフトしているんですね。そしてどうせCSS3を使用してディティールに凝るのなら、「空divや重ね使いで無理矢理作っていたものをさっくり作れる」ことに驚くより、「フォールバックを意識したコーディングをして過去ブラウザにはあっさりコンテンツを見せる」方がやっぱりいいなーと感じているわけです。 とりあえず擬似要素で そこで今回は自分が擬似要素を使
![[CSS]擬似要素の実用的な使用用途のまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/3a9afecaf0f148dfae555dc1a6b7979e3fdba29c/height=288;version=1;width=512/http%3A%2F%2Fwebcre8.jp%2Fwordpress%2Fwp-content%2Fuploads%2F2013%2F02%2Fcss-pseudo-elements-01-150x150.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今年のWebデザイントレンドはベタ塗り！フラットなデザインのWebサイト
BLOGTIMES｜ブロガーリレーションサービス
https://jp.techcrunch.com/2013/01/31/20130131microsoft-launches-modern-ie-to-help-developers-test-their-web-apps-for-legacy-and-modern-versions-of-ie/
「シュッ」とか「チン」とかのフリー音源集
conma.me
2013年のウェブデザインのトレンドを探るかっこいいUIデザインのまとめ
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久
