36歳でFIREしたデータサイエンティストが、資産形成に役立てた3つのチャートを共有してくれた

2024/05/01 258 users データサイエンティスト チャート 資産形成 Variable

上のチャートには、2024年の1月と2月の支出が記録されていて、このチャートをゴールドシュタイン氏は毎朝確認する。 まず、ゴールドシュタイン氏は支出を｢固定費（Fixed）｣と｢変動費（Variable）｣の2項目に大別する。その下に食費、家族、娯楽、罪悪感のある楽しみなどといったカテゴリーを設けている。 それぞれのカテ... 続きを読む

11月末のChrome 108でビューポートのサイズ変更動作が変更、position: fixed;は配置がずれる可能性があります

2022/11/15 100 users クロスブラウザ ビューポート position 挙動 配置

11月末にリリース予定のChrome 108で、ビューポートのサイズ変更動作が変更されます。簡単に言うと、Android版Chrome 108の挙動はiOS版Safariと同じになり、より一貫性のあるクロスブラウザの動作が実現されます。 サイズ変更動作の内容とサイズ変更の仕組み、Chrome 108のリリースまでに何を準備しておけばよいのかを紹... 続きを読む

CSSで上下左右の中央に配置する時の「position: fixed;」での新しい記述方法 | コリス

2021/07/12 313 users モーダル コリス position パーセンテージ CSS

中央揃えの古典的なテクニックの一つ、モーダルやメッセージなどを表示する時に適したposition: fixed;での新しい記述方法を紹介します。 古い記述方法では、負のパーセンテージを使用していたり、あまり直感的ではない...記事の続きを読む 続きを読む

Mozillaの報奨金制度で100万円ほど稼いだ話

2015/02/07 69 users Mozilla 報奨金制度 Transcript 1

Transcript 1. Mozillaの報奨金制度で 100万円ほど稼いだ話 SECCON CTF 2014全国大会カンファレンス 2015年2月7日@東京電機大学 Welcome to the Black Hole of Bug Bounty Program –RESOLVED FIXED- 2. にしむねあ Weekend Bug Hunter Lecturer of Security C... 続きを読む

レスポンシブWebデザインで必要な配置の仕組みがよく分かるアニメーションを使った解説 | コリス

2015/01/26 104 users コリス absolute static スタティック 配置

レスポンシブWebデザインを使用する際、Webデザインの配置がどのような仕組みになっているかを理解することは非常に重要です。PhotoshopやIllustratorなどのデザインツールに比べてそれは複雑で、スクロールやスクリーンサイズなどさまざまな要因に依存します。 さらに複雑しているのが配置の名称。 Static, Absolute, Relative, Fixed、、、スタティックとはどこが... 続きを読む

スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」:phpspot開発日誌

2013/11/22 66 users position jQueryプラグイン ナビゲーション

スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 2013年11月22日- stickUp - a free jQuery Plugin スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 最初からposition:fixedではなく、一定以上スクロールした段階でfixedにしてくれるプラグインです。 シームレス... 続きを読む

jQueryを使った一定以上スクロールすると上に固定される横メニュー｜Webpark

2013/03/04 244 users jQuery Webpark position 上部 一定以上

最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したH... 続きを読む

[CSS]ページに美しいシャドウを加え、奥行きを与えるスタイルシート -Depth | コリス

2013/02/19 213 users コリス Depth 奥行き position CSS

ブラウザ上枠のすぐ下、ページの上部に、いい感じのシャドウを加えるスタイルシートを紹介します。 Chrome, Safari, Firefox, Operaでご覧ください、IEは9+で。 Depth 実装は簡単で、HTMLは特に変更することなく、下記のスタイルシートを加えるだけです。 position: fixed;なので、スクロールしてもシャドウが表示されています。 [css] body:befo... 続きを読む

コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」:phpspot開発日誌

2013/01/30 182 users STICK jQueryプラグイン phpspot開発日誌

jQuery Stick ’em: Make Content Sticky on Scroll, to a Point | Viget コンテンツ毎にサイドバーを固定配置できるjQueryプラグイン「Stick ’em」。 最近よくある、ページをスクロールしてもついてくるサイドバー。position:fixedなどを応用して綺麗についてくるようにできますが、コンテンツが大きく３つに分かれている場合... 続きを読む

gitのコミットログなんて"fixed"だけで十分だろ！エンジニアならコード読め！ - hogehoge @teramako

2012/11/21 92 users コミットログ hogehoge Git teramako

ソース: https://twitter.com/mattn_jp/status/271117577693044736 続きを読む

スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」:phpspot開発日誌

2012/09/10 85 users position Jquery Plugin 感じ

スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」 2012年09月10日- stickyMojo contained fixed position sticky sidebar jquery plugin スクロールしてもposition:fixedでウザくない感じのナビゲーション実装ライブラリ「stickyMojo」。 一昔まえだ... 続きを読む

[CSS]サイズが分からない要素を真ん中に配置するテクニック | コリス

2011/11/01 493 users コリス mar CSS position Left

下記は各ポイントを意訳したものです。 要素のサイズが分かっている場合 要素のサイズが分からない場合 まとめと対応ブラウザ 要素のサイズが分かっている場合 「真ん中に配置するエレメント」と「その親エレメント」両方の高さと幅のサイズが分かっているのであれば、エレメントを真ん中に置くのは簡単です。 「真ん中に配置するエレメント」を「position: fixed;」にし、topとleftを50%、mar... 続きを読む

ウェブページに固定表示させるエレメントの効果的な使い方 | コリス

2011/09/09 291 users コリス エレメント ウェブページ ヘッダ 固定

「positon: fixed;」などで配置した、スクロールしても固定位置に表示されるエレメントの効果的な使い方を紹介します。 下記は各ポイントを意訳したものです。 はじめに ウェブページで固定表示されたエレメントは、最近多く見かけるようになりました。これはページで表示されていない箇所へスクロールした時に、特定のエレメントのみ表示を残すものです。最もよく見かけるのは、ナビゲーションを含めたヘッダで... 続きを読む

新しいスマホ版Googleにみる、スマホサイトの未来 « H2O Blog.

2011/07/07 97 users 未来 H2O Blog スマホサイト position CSS

大げさなタイトルをつけてみましたが、先日Googleが本家のスマホ版サイトをリニューアルしました。主に「Google+」の追加が主ですが、面白いロジックが仕込まれていて、スマホサイトの未来を垣間見る気がします。いくつか紹介しましょう。 固定ツールバー これまで、スマホサイトの構築では「要素を固定できない」というのが常識でした。 CSSの「position:fixed」が効かない上に、スクロール中は... 続きを読む

position: fixed;でサイドに固定してjQueryでスライドして現れるメニュー｜Webpark

2011/04/12 67 users jQuery Webpark position head内

では、設置方法を説明してみます。 固定されたスライドメニューの作成 まず、head内でjQueryを読み込みます。もちろんjQueryは自分のサーバーにアップしてもかまいません。 ... 続きを読む

YUIライブラリのScrollViewウィジェットを使ってiPhoneでもposition:fixed;が効いてるっぽく見せる - かちびと.net

2011/03/02 56 users iPhone jQueryMobile position

今日もスマートフォン関連。飽きてたら ごめんなさい。iPhone/iPadでは、css のposition:fixed;がサポートされていま せん。現状では、方法にかなり限りが あり、検索しても殆ど出てきませんので 選択肢を増やしてみようと思います。 先日、jQueryMobileを使ってのスマートフォンサイトの構築メモという素晴らしいまとめ記事がありました。その中でposition:fixed;... 続きを読む

CSSレイアウトの肝！ 表示・配置のプロパティ、14選 - ＠IT

2010/11/25 428 users プロパティ CSSレイアウト 配置 relative 表示

positionプロパティ positionプロパティは、ボックスを画面上にどういった方法でレイアウトしていくかを設定するプロパティです。 値には、絶対配置の「absolute」、相対配置の「relative」、特に配置方法を指定しない「static」、スクロールしても位置が固定される「fixed」があります。 詳しくはコチラ　position ボックスのレイアウト方法を指定するpositionプ... 続きを読む

CSSでフッタ位置をレイアウトする （CSS Sticky Footer） - youmos

2007/06/18 407 users youmos ブッダ CSS position スクロール

CSSテクニックで非常にシンプルだが、是非実践したいのがフッタ位置の調整。フッタの表示位置をCSSのみで調整して、画面の下に表示してくれるようにするテクニック。 画面下に固定表示（position:fixed）ではなく、コンテンツ量が多いときは、スクロールした一番下に表示する。逆にコンテンツ量が少なく、スクロールが発生しない場合でも、きちんと画面の下にフッタが表示される。わかってしまえば、簡単に実... 続きを読む

IEで固定座標を指定する方法

2005/09/21 149 users position つなぎ CSS 方法 手法

さて、アナウンスしていたようにIEでposition: fixed;を実現する手法について簡単にまとめておきます。まぁこのテクニックもIE7が出るまでのつなぎです。やり方は大まかには2通りあって、純粋にCSS(スタイルシート)のみで指定する方法とJavaScript(正確にはMS独自のDynamic property ダイナミックプロパティーと呼ばれるもの)を使うやり方です。まず、1.CSSのみの... 続きを読む