twitter facebook hatena google pocket ページ遷移の際に何らかのエフェクトが発生するサイトがありますが、今回紹介するjQuery Animated Pageswitch Pluginを利用することで、それを簡単に再現可能です。 sponsors 使用方法 jQuery Animated Pageswitch Pluginからファイル一式をダウンロードします。 <script type="text/javascript" src="jquery-1.4.3.min.js"></script> <script src="jquery.pageswitch.js" type="text/javascript"></script> <script> $(function() { $('#id名 a').pageswitch({ url: '/test/', //
イギリスのチェスタートンという批評家の名言に好きな言葉がある。 「なぜフェンスが建てられたのかわかるまで、決してフェンスをとりはずしてはならない 」 高級なクラブなどに行くと気づくのは、そこにある灰皿が極端に小さいことだ。小さく造形された灰皿はそれだけで独特な美しさを持っているが、ここには原作者の粋なアイデアが詰まっている。小さな灰皿は、一本でもたばこを吸えばいっぱいになってしまう。そうすると、スタッフが灰皿を新しいものに替える。そうするとことで、客への細やかなサービスを演出できるし、スタッフに自然と客へ細かく注目させることを可能にしている。 もちろん、これを違うやり方で実現することもできる。たとえばマネージャーが、スタッフに「客を細かく見ろ。灰皿は、客が一本たばこを吸ったら必ず変えろ」と言えばいい。そういうマニュアルを作ってもいいし、バックルームに貼り紙をしてもいい。なんらかの指示や号令
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
以前、画像不使用で吹出しを作るチュートリアルで紹介した方法を改良し、HTMLに手をつけずに吹き出しを作ることができます。こちらのほうがHTMLとして美しいのでこちらの方法をお勧めします。 HTMLは以下のようになります。 1 <div class="baroon">吹き出しのサンプル</div> 以前紹介した方法と決定的に違うのが、HTMLに手を入れなくていい、ということです。空要素をレイアウトのために使用することはHTML文書としても推奨されていません。 CSSは以下のようになります。 1 .baroon { 2 position: relative; 3 margin-left: 20px; 4 background-color: #fff; 5 } 6 .baroon:after { 7 position: absolute; top: 20px; le
float プロパティで設定したテキスト等の回り込みを、CSS の after 擬似要素を用いて解除する方法を紹介します(通常の解除方法も併せて掲載しています)。 1.「回り込み」とは 例えば、画像の左(または右)にテキストを表示することを「(テキストの)回り込み」と呼びます。 マークアップ <p> <img src="hogehoge.jpg" alt="image" style="float:left" /> 回り込みテキスト~(略)~回り込みテキスト </p> 表示 回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト回り込みテキスト (X)HTMLでこのような表示を行う場合、先に出現する要素(ここでは img 要素)に対して float プロパティを与えます。float プロパティは、指定された要素を左または右に寄せて配置する際に使用しま
ウェブページに表示した文字や画像を回転したり、歪めたりすることができれば便利なのに――そう考えたことはないだろうか。CSSのトランスフォームの機能を利用すれば、「回転」「拡大・縮小」「スキュー(シアー)」「移動」の4種類の変形処理を簡単に適用することができる。 トランスフォームの機能を利用する トランスフォームの機能を利用するには、transformプロパティを利用する。現時点ではSafari 3.1以上とGoogle Chrome、Firefox 3.1(ベータ版)が対応しており、SafariとGoogle Chromeでは-webkit-transform、Firefoxでは-moz-transformと記述する。 たとえば、次のようなサンプルを用意してトランスフォームの処理を適用してみよう。ここでは、横幅300ピクセルの黄色いバーの中央に文字を表示している(サンプル01)。
透明度を指定するopacityプロパティとrgba()の違い 今回は、これまでの連載の中で出てきたCSS3の表現を使って、画像をちょっと素敵に装飾してみましょう。opacityプロパティで画像を半透明にしたり、box-shadowプロパティで画像枠に影を付けたり、Webフォントで写真にタイトルを付けたりと、画像装飾の例を紹介します。また、CSS3のtransformプロパティを使って、JavaScriptを使わずに画像を回転/拡大する方法も紹介します。 まずはボックスやカラーの透明度を変えて遊んでみましょう。CSS3では、opacityプロパティやrgba()で透明度を指定できます。opacityプロパティは、要素の透明度を指定する際に使用します。透明度は、0(完全に透明)~1(完全に不透明)の数値で指定します。 rgba()は、RGBカラーモデルのred、green、blueに、透明度の
CSS で横のセンタリング(中央揃え)は margin : auto や text-align : center などで事足りると思うのですが、縦のセンタリング(中央揃え)は何を使えば良いかご存知ですか? 私はつい先日まで知らなかったのですが line-height プロパティで縦のセンタリングが可能です。方法はとても簡単で、ボックスの高さと line-height の値を同じにするだけで縦のセンタリングが行われます。下のソースを参考にしてください。 div.hajime { width : 400px; height : 50px;/*ボックスの高さ*/ line-height : 50px;/*縦のセンタリングの為に指定*/ } 簡単な上、Macのモダンブラウザ、Winのモダンブラウザで縦のセンタリングが適用されます。 個人的には何故か素通りしていた部分だったのですが、少し調べたらあっ
去年の年末、Facebookで以下の様な画像が流れてきて自分もついついシェアしたんだけど、久々に、というか、自分にとってのここ最近の課題をドンピシャで突かれたような気がして、しばらく頭から離れなかった。 出展: 中村 修治 - 中村 修治さんの写真アルバム | Facebook 「プロ」か「アマチュア」か、というのはこの際どうでも良くて、この図の、上の曲線が、目指すべきところだなって話なだけなので、とりあえずその話をまとめてみることにする。 けど、まぁ、だいたい、こういう話をまとめるのは苦手だし途中で面倒になってしまうので、以下サブセクションだけ先に作ってみたものの、ちゃんと書くかどうかわからない... が、まあ、いい!あと、なんかグダグダ書いてしまいそうだけど、結局、サブセクションのタイトルにしたことをこねくりまわしているだけです。 作ってみるまでわからない 何にも言えることだけど作って
今までもgithubにpushするためだけにgitは使ってたんだけど、最近他人と共同作業するようになって、真面目にgitを学び始めた。 とりあえず今日わかったこと。 困ったら git reflog しろ! ということで終わりなんだけど、一応以下にメモ的に書いておく。 ツッコミ大歓迎というか、いろいろ教えて欲しいのでむしろツッコンでください。。 自分の作業はこまめにcommitしたいけど、共同リポジトリには意味のある単位でpushしたい こんな風にやればいいのかなという感触を持った。 作業ブランチ(branch1)を作る。 $ git branch branch1 ブランチを切り替える $ git checkout branch1 で、作業ブランチでいろいろ作業してコミットを積み重ねた後、 master に切り替える $ git checkout master 作業ブランチの変更をマージする
女性Webデザイナーの皆さん、今まで付き合った人と感覚が合わないな〜とか 理解してくれないなーなどお困りじゃありませんか? そんなあなたにオススメの彼氏職業があります。 それは 「エンジニア」です なんか社内で話題になってたので、まとめてみました。(ネタ投稿です) その1:無料でWebサービスが作れます これが一番オススメの理由です。うまくいけば起業も出来ます。 その2:快適な家庭内ネットワーク環境を作ってくれます 頼まなくても作ってくれるでしょう その3:HTMLやCSSなどコーディング技術を教えてくれます 教え方は厳しいかもしれませんが分からないの?と聞くとムキになって教えてくれるでしょう その4:色んな環境でデバッグできます なぜかガジェットがテスト端末くらいあるので、利用させてもらいましょう その5:あなたの時間を拘束しません あなたが制作で忙しい時は彼もプログラミングをしていてく
2011年10月6日木曜日 なぜiPhone「5」ではなく「4S」だったのか。 ジョブズが亡くなった。大きな喪失感。 昨日、ずっと雨だった横浜は今日は気持ちのよい秋晴れ。 この秋晴れの青空が、ぽっかりと何かが抜け落ちた心を表しているようで、寂しい。 昨日、iPhone4Sが世界に発表された。 巷では、iPhone「5」でなかったことに対するがっかりの声とブーイングがわき起こった。 しかし、その翌日のジョブズの死去とともにAppleがiPhone5ではなく「4S」と命名した理由が明らかになってきた。 そう、「4S」は 「for Steve」なのだ。 Appleという会社が、会社を挙げてジョブズに感謝と尊敬の念を込めて、今年のiPhoneをジョブズに捧げたのだ。 Twitter上では、「4S」をfor jobs という解釈について 「ほう、そうもよめるね」的な意見もあるが、そ
Android搭載のスマートフォンでは、多種多様なアプリケーションをAndroid Marketから手軽にダウンロードして利用できます。様々なアプリケーションを利用しているうちに、「自分でも作ってみたい!」と考える人は多いでしょう。 ただし、いざ作ろうとすると結構大変です。Androidアプリを開発するためには、Javaプログラミングや統合開発環境Eclipseの知識が必要です。覚えることが膨大なので、なかなか開発が進まず、途中であきらめてしまった人もいるのではないでしょうか。 こうしたAndroidアプリの開発に不慣れな人にお勧めの開発ツールがあります。それが、「App Inventor for Android(以下、App Inventor)」です。 App Inventorは、米Googleが無償で提供する開発ツールです。2010年7月から登録者向けにリリースしていましたが、2010
「ソフトウェア見積り」を読んだ後に「アジャイルな見積りと計画づくり」を読み直したら、とても理解しやすかった。 理解できたことをメモ。 間違っていたら後で直す。 ※追記:一部修正した。 ※追記:Velocityの計算方法を「塹壕よりScrumとXP」から参照するようにした。 【元ネタ】 Twitter / @akipii: 見積について色々考えている。1.0MD(人日)という単位は規模・出来高・工数という複数の意味を持ち混乱しやすいから、ソフトウェア開発の計画づくりに支障をきたしているのではないかという仮説を考えている。その考えを深めるとScrumのストーリーポイントはよく考えられた概念だと思う。 アジャイルサムライで一番難しくて面白い概念~Velocity: プログラマの思索 ソフトウェア開発に特有な技術~ソフトウェア見積り: プログラマの思索 チームは加速するのか~Velocityの使い
三井住友海上火災保険はこのほど、セブン-イレブン・ジャパンと提携し、11月中旬よりセブン-イレブン全店で「自転車向け保険」を販売すると発表した。 健康志向の高まりから自転車利用者が増加している一方、自転車事故やそれに伴う高額賠償が社会問題となっている。同社は今回、「自転車保険に手軽に加入したい」という自転車利用者の声と社会のニーズに応えるために、「自転車向け保険」の発売を決定したという。 「自転車向け保険」は、保険期間1年の掛け捨て型。特長は、交通事故などによるケガを補償する傷害保険に、他人の物を壊したり、他人にケガをさせてしまったりした場合に補償する日常生活賠償特約をセットしたこと。 契約タイプは、「個人型」「夫婦型」「家族型」の3種類で、保険料は「個人型」が4,760円、「夫婦型」が7,000円、「家族型」が1万1,720円。補償内容は、傷害死亡・後遺障害保険金額が400万円、傷害入院
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く