jQueryでスクロールすると表示する系いろいろ
jQueryでスクロールすると表示する系いろいろ 最近はスクロールするときにいろいろ仕掛けをするのが流行なようです。 ここではシンプルにある要素の位置とか最下部までスクロールしたら何か表示するということをやってみます。 投稿日2012年03月08日 更新日2019年12月19日 ちょっとスクロールするとフェードして「トップへ戻るボタン」を表示を表示します。 ボタンは下の方にこんな感じで配置します。 html <p id="page-top"><a href="#wrap">PAGE TOP</a></p> fixedにすると固定配置されます。 css #page-top { position: fixed; bottom: 20px; right: 20px; font-size: 77%; } #page-top a { background: #666; text-decoration
jQueryでスクロールすると上部に固定されるナビゲーション
jQueryでスクロールすると上部に固定されるナビゲーション グローバルナビゲーションはロゴの下に配置されていることが多いですが、スクロールするとナビゲーション部分だけが上部に固定されるようなものをjQueryでやってみたいと思います。 投稿日2012年02月21日 更新日2012年05月10日 html & css htmlです。 html <h1><a href="#">タイトル</a></h1> <div class="nav"> <ul class="clearfix"> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">NEWS</a></li> <li><a href="#">LINK</a></li> </ul> <!-- /#nav --></div> <div id="
URLを簡単にパースできるjQueryプラグイン「jQuery-URL-Parser」
URLを簡単にパースできるjQueryプラグイン「jQuery-URL-Parser」 「jQuery-URL-Parser」は現在のURLや指定したURLをパースして簡単にパラメータやディレクトリ名などを取り出せるjQueryプラグインです。 投稿日2011年07月05日 更新日2011年07月05日 プラグインのダウンロードとインクルード 「jQuery-URL-Parser」は下記URLからダウンロードできます。 jQuery-URL-Parser – GitHub jQueryプラグインですのでjQueryも忘れず読み込みます。 html <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script> <script type
CSSをシンプルに書くことができるLESS使ってみた
CSSをシンプルに書くことができるLESS使ってみた CSSはシンプルなのでとてもわかりやすい言語ではありますが、その分サイトが肥大化していくとメンテナンス性が悪くなりますね。 LESSを使えばプログラム的な書き方ができるので、ムダなく効率的に管理できるみたいです。 投稿日2011年12月13日 更新日2011年12月13日 ネスト（階層）化できる たとえばこんなCSSがあります。 css div.section { width: 500px; margin: 0 auto; border: solid 1px #999; padding: 1px; } div.section h3 { background: #999; font-size: 131%; padding: 10px; } div.section h3 a { color: #fff; } div.section h3 a
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ
jQueryで画面遷移のないサイトを作ろうとしたときのちょっとしたメモ jQueryを使って画面遷移のないサイトを作ろうとしたときのちょっとしたメモです。 サーバーとやり取りをする、Ajax的なことは書いていないのであしからず。 投稿日2012年02月03日 更新日2012年02月03日 リンク（href）を無効にする 画面遷移のないWebサイトでもJSのない環境やSEOも考慮して href にリンク先を設定したいときがあります。 hmtl <a href="hoge.html" id="btn">ボタン</a> このような場合だと #btn にイベントを設定しても画面遷移してしまいます。 click イベントに「e.preventDefault()」と記述すればhrefを無効にになり画面遷移が行われません。 javascript $('#btn').click(function(e){
jQueryでTwitterの自分のつぶやきを表示する
jQueryでTwitterの自分のつぶやきを表示する すでに多くのTwitterライブラリがあるので必要があるかは微妙なところですが、jQueryを使用してTwitterの自分のタイムラインを表示してみます。 文字情報だけを取得することができれば、自由にスタイルが設定できるのでデザインとかも統一できるじゃないですか！？ 投稿日2010年07月04日 更新日2012年10月12日 ※2012.10.11現在Twitter API変更によりこの方法は使用できなくなりました。 新API（var1）に対応した方法は下記をご覧ください。 2012年10月 Twitter APIの変更によりjQueryでつぶやきが表示できなくなったので解決策 まずは読み込むべきデータの確認をしてみましょう。 下記のURIで自分のタイムラインの情報を見ることができます。[USERNAME]には自分のアカウント名に置き
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
