IDEA * IDEAドットインストール代表のライフハックブログ
CSSのtransformでクルクル回転するパネルのサンプル
CSSの【transform:rotate()】を使った回転するパネルのサンプルを作ってみました。 手法としては比較的知ってる人も多いかもしれませんが自分用備忘録として。 回転変形おもしろーい ベースとなるHTMLはこちら。 <p><a href="#">Sample Box 1</a></p> はい、1行ソースです、すみません。単純に【p】の中に【a】を内包しているだけ。これに p{ display:block; margin:10px; width:100px; height:100px; } a{ display:block; line-height:100px; text-decoration:none; text-align:center; color:#fff; border-radius:6px; background-color:#44f; transition:0.3s
爆速JSONPをオープンソース化しました
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog 先日、ブログパーツ作成フレームワーク 爆速JSONP をGitHubにて公開しました。2012年8月にYahoo! JAPANのソフトウェアガイドラインをライセンスとするバージョンを公開しましたが、オープンソース化に伴い、CDNで配布しているファイルもGitHub版に差し替えています。（インターフェースは互換性を保っています） yahoojapan/bakusoku-jsonp · GitHub CDN版： https://s.yimg.jp/images/yjdn/js/bakusoku-jsonp-v1.js CDN版(圧縮済み)： https://s.yimg.jp/images/yjdn/js/bakusoku-jsonp
-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
上級者向け：Ruby on Rails 勉強法 - ぶっそれんれ研究室
2013-02-13 上級者向け：Ruby on Rails 勉強法 こんばんは。最近ずっと朝から晩までRuby on Rails とイチャイチャしています。 @bussorenre です。セキュリティ・キャンプフォーラムお疲れ様でした。 さて、僕は普段から、実験とかお遊びでRuby on Railsを使っていたのですが、この度 Ruby on Rails でお仕事をいただきまして、RoRでシステム開発に勤しむ毎日です。遊びと違って、自分勝手な適当なコードが書けない、無茶苦茶なスキーマを定義できないなど、いつも以上に緊張して開発に当たっています。 そんな中で、僕なりに発見したRuby on Rails の勉強法を共有できたらなと思い記事に残そうと思います。 この記事はなんとなくRailsをさわろうとしている初心者向けの記事ではなく、ガチでRails でシステムを組もうと考えている人向けの記
CSSキーフレームアニメーションを使ったバナーの作りかた
広告バナーで多少動きのあるものを作ろうと思ったら現在でもアニメーションgif使うのが主流だと思うんですが、CSSのanimationプロパティとキーフレームを使ってそれっぽいもの出来ないかなぁと簡単なものを試作して見ました。 animationプロパティと@keyframes CSS3には【animation】というプロパティがあってこれを使うと【@keyframes】で指定したキーフレームに沿って時間的に他のプロパティを変化させることができます。これによりアニメーション的なものやコマ送り動画（パラパラアニメ）みたいなものが作れます。 …というのを言葉で説明してもイマイチよくわからないと思うのでまずはサンプル成果品をご覧下さい。 ちなみにこのプロパティ、当記事作成段階ではChrome,FireFox,Safariでのみ対応してますのでOperaやIEの方は対応ブラウザでご覧いただきたいと思
CSS3でChrome風ウィンドウを作成するチュートリアル:phpspot開発日誌
Creating a CSS3 Web Browser Window Inspired by Chrome CSS3でChrome風ウィンドウを作成するチュートリアル。 次のように、いや、ブラウザのキャプチャではありません。CSS3で描画されたChromeです。 どういう時に使うかはアイデア次第ではありますが、Chromeの中にChromeの中にChro......という感じで続いてたら面白い効果が作れそうな気がしました。 アイデア次第でよいプロモーション等に使えるかもしれませんね。 関連エントリ 使えない(?)CSS3ジェネレーター「Useless CSS3 Generator」 CSS3でボーダーを超かっこよくアニメーションするサンプル CSS3ベースのオシャレな価格表作成チュートリアル PhotoshopでデザインしたシェイプをCSS3に変換するプラグイン「CSS3Ps」 クールな円
タッチデバイスにも対応したシンプルなLightboxを実装するjQueryプラグイン・Swipebox
タッチデバイスに対応したLightboxを実装するスクリプトのご紹介です。jQueryに依存します。多機能なものではありませんが、使いやすくて良さそうです。ただ、実機での動作テストをしていませんのでその程度の記事。 タッチデバイスで使えるLightboxです。 見易くていいかも。CSSでカスタマイズできるらしいのでMedia Queriesを使うだけで対応できるなら楽でいいかも。 スマフォのスクショです。 $(".foo").swipebox();使い方はいつも通り。 <a href="big/bar.jpg" class="foo" title="My Caption"> <img src="small/bar.jpg" alt="image"> </a>マークアップもclassを振るだけ。 詳細は以下で確認できます Swipebox
jQueryの可能性は無限大！？プラグインまとめ番外編 - Webデザイン初心者向けのあれこれ
どうもこんばんは、僕です。 今まで何度かjQueryプラグインを紹介してきましたが、今日は番外編？と言った感じです。 一応今までのプラグインまとめ記事はこちらです。 ・ひと工夫でこんなことも！ユニークなjQueryプラグイン5つ集めてみました ・すっごい動くよ！テキストをアニメーションさせるjQueryプラグイン集めてみた ・今更ながらみんな大好き（？）「lightbox」プラグインを集めてみました ・jQueryを使ったスライド・ギャラリーのライブラリを7個集めてみた ・jquery-tubular http://code.google.com/p/jquery-tubular/ ページの背景にYouTubeの動画を指定することができます。 背景を考える幅が広がるのではないでしょうか。 ・jquery.snipe http://rayfranco.github.com/jquery.sn
マークダウン記法をマスターするためのサイト・チートシート・ツール。 - あなたのスイッチを押すブログ
「マークダウン記法」というのをご存知でしょうか。 例えばHTMLで文字を強調しようと思うと、文字をstrongで囲うと思います。ですが、いちいちコードを書くのは面倒ですよね。パソコンならスニペットを使えばいいでしょうが、iPhoneなどのモバイル端末では面倒極まりない作業です。 そこで「マークダウン記法」。これは、ある法則に従って記号を使えば、後からHTMLに変換される。文字装飾が行える。そんな簡易文字装飾フォーマットなのです。 ちなみにWikipediaによると… Markdown は、文書を記述するための軽量マークアップ言語のひとつである。「書きやすくて読みやすいプレーンテキストとして記述した文書を、妥当なXHTML（もしくはHTML）文書へと変換できるフォーマット」として、John GruberとAaron Swartzによって考案された。[1] Markdownの記法の多くは、電子
Perlの食えない事情 - 演算子編 - アリ
Perlの食えない事情 より おっと、そうです、Perlには演算子が多すぎるのでした。せっかくの機会なので、Perlの演算子を紹介します。 ビーナス演算子: 0+, +0 数値として評価してくれます。意外とよく見かけますね。 なぜこの演算子を使う必要があるのかというと、Perlは文字列と数値を明確に区別できないからです。scalarを文字列として解釈するならば文字列として、 print 0+ '10'; #=> 10 print 0+ '123b'; #=> 123 print '1.2e3' +0; #=> 1200 print [] +0; #=> 4303367864 ちなみに、文字列として評価するときにはこのようにするとかっこいいと言われています。 $obj.q(); 一見メソッド呼び出しのように見えますが $obj . ''; と等価です。 ベビーカー演算子: @{[ ]} 文字
Node.js チュートリアル | Node ビギナーズブック
本書について 本書は、Node.jsでのアプリケーション開発を始めようとする皆さんに、 ”高度な”JavaScriptについて知るべきあらゆることを解説します。 よくある”Hello World”チュートリアルの、はるか上をいくものです。 ステータス 貴方が読んでいるのは、本書のいわゆる最終版となります。 つまり本書は、間違いが見つかった場合や、 Node.jsの新バージョンにおえる変更点を反映する時のみ、改訂されます。 最終更新日は2012年2月12日です。 本書内のコードのサンプルは、Node.jsのバージョン0.6.10でテストしています。 ターゲット読者 本書は、Ruby、Python、PHP、Javaのような、少なくともひとつのオブジェクト指向言語を理解しており、 JavaScriptについてはあまり経験がなく、Node.jsについては全く経験がないという、 著者と同じようなバッ
25 Free Dropdown Menus in HTML5 and CSS3
With the advent of HTML5, jQuery and CSS3, designing and development were totally revolutionized. They are far more advanced and offer many features and various techniques can be applied using them. They are quite easy and quick to manage too. Using these languages you can create a plethora of amazing effects and looks with ease, which were extremely tough to achieve before them. Amateur and profe
簡単で便利すぎ！WEB制作を「楽」にする無料ツールまとめ
作成：2013/01/28 更新：2014/11/01 Tool > Webサービス フリーソフト、無料ツールなのにここまで使える 前回、無料素材をご紹介しました。 今回は無料で使える「ツール」をまとめます。フォント、画像、配色、htmlからエディター・アフィリエイトリンク作成補助まで。 エンジニア速報は Twitter の@commteで配信しています。 もくじ １．フォント ２．画像編集 ３．ロゴ作成 / ネタ ４．配色 ５．HTML5 ６．CSS ７．ブラウザチェック ８．エディター ９．アフィリエイトリンク作成 １０．フォーム作成 １．フォント PCにインストールされているフォント一覧をプレビュー Font picker イラスト等に使われているフォントを調べる WhatTheFont Windows上のテキストをくっきり、見やすく表示。 gdipp - ｋ本的に無料ソフト・フリー
Change Text Link Hover Effect Using CSS3
2020年2月25日 CSS どのサイトでも見かけるテキストリンク。リンクのついたテキストにマウスオーバーすると文字色を変更する、というシンプルかつわかりやすい効果を実装しているWebサイトが多いかと思います。この装飾をもう少し変更できないかな？と思いCSSのみでプラスすることができるエフェクトをいくつか紹介します。 ↑私が10年以上利用している会計ソフト！ 目次 ちょっと予備知識 文字色をふんわり変える 背景色をふんわり変える 文字をぼかす 光を放つグロー効果 背景を角丸に レインボーカラーに 拡大・縮小 角度を変える くるっと回転 1. ちょっと予備知識 今回はjQueryなどのJavaScriptを使わず、CSSのみで実装できる小技を集めています。その中でどの小技にも採用しているのが transition プロパティです。transitionプロパティは、時間の変化を操作するもので、
あっという間にFacebookアプリを立ち上げてみる！【あなたも今から】～Rails3＋ニフティクラウド C4SAで作る、Facebook画像検索アプリ～
せっかくのアイデア、眠らせたらもったいない！ 多くのウェブサービスが日々公開される昨今。ひとたび何らかのキッカケで着目されれば、あっという間に人気化し、一躍脚光を浴びてしまうのは、もう珍しい状況ではない。 アイデア次第で、誰もが支持される魅力的なサービスを開発・運営することが容易になった昨今の環境だが、まだまだアイデアを具体化する最初の一歩をなかなか踏み出せないという人が多いのも、もうひとつの現実だ。 一昔前に比べれば容易になったとはいえ、アプリケーションの開発・運営には、コーディング以外に、サーバーのセットアップや管理の手間暇といった相応のコストやスキルがどうしても求められる。準備の部分がとにかく手間になってしまい、せっかくの優れたアイデアが埋もれて終わってしまう--というケースは、実にもったいないことだ。 サービスを開発したいが、できれば開発のみに集中し、付随する環境整備やインフラ周り
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML5.JP - 次世代HTML標準 HTML5情報サイト
今風のWEBベースチャットを作れるオープンソースソフト「kandan」:phpspot開発日誌
mdlab.jp
【これは便利】あなたのWebサイト表示のどこが遅いかを一発で調べるブックマークレット | 初代編集長ブログ―安田英久
