[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する
当ブログでも採用しておりますが、ブログなどでもよく見かけるようになった、ある一定量画面をスクロールするとサイドバーなどが固定されるﾔｰﾂ。 手順メモを晒しておきます:) 続きましてheadタグ内ないし外部読み込みスクリプトに以下を記述します。 [js] $(function($) { var tab = $(‘.hoge’), offset = tab.offset(); $(window).scroll(function () { if($(window).scrollTop() > offset.top) { tab.addClass(‘fixed’); } else { tab.removeClass(‘fixed’); } }); }); [/js] ↑のスクリプトは.hogeがtopの位置に行ったらfixedというclassを追加、それ以外はclass属性を削除する、と言う命令を
![[jQuery]画面を一定量スクロールした時にサイドバーなどを固定位置に配置する](https://cdn-ak-scissors.b.st-hatena.com/image/square/ac7ae56c20fc639b9d7e08f7f0da2fec804f6625/height=288;version=1;width=512/https%3A%2F%2Fozpa-h4.com%2Fwp-content%2Fuploads%2Fskitched-20121120-005330.jpg)
CSSだけで作るtableデザインテクニックVer.02(おまけ付き)
今日は土曜日なので、軽めの記事を投稿させていただきます。以前紹介した[CSSだけで作るtableデザインテクニック]の続編です。今回はCSSだけで作るテーブル2つと、おまけとしてCSS+ちょっとした画像で作るテーブルを紹介させていただきます！ こんなに朝早くから投稿した理由は、これから新潟に旅行に行くからです！！予約投稿すればよかったんですが、ちょっと手直しをしたかった所があったので、ついでに投稿しちゃいました！ 気に入っていただけましたら自由に使ってください。シンプルなデザインですのでカスタマイズもしやすくなっていると思います。ではどうぞ！ CSSテーブルデザインテクニック01 HTML テクニック01 <table> <tr> <th class="t_top">No.</th> <th class="t_top">table title01</th> <th class="t_top
[CSS]水平に配置したセクションを分けるスタイルのさまざまな素敵なテクニック
1ページに複数のセクションを水平に配置した際に、それらの区切りとなるさまざまなスタイルを紹介します。 縦長の1ページで構成されたプロモーションサイトやポートフォリオなどで見かけるものだけでなく、こんなこともできるのかとアイデアが素晴らしいものもたくさん！ デモページ 各デモと共にそのスタイルを紹介します。 まずはHTMLから。基本となるのは、2パターンです。 1つ目は、section要素にclassをつけるだけ。 <section class="ss-style-hogehoge"> コンテンツ </section> 2つ目は、svg要素を使用します。 <section> コンテンツ </section> <svg id="hoge"> SVGの中身 </svg> sctionだけの場合はclass、svgを使用するものはidになっています。 以下、各デモとそのスタイルです。 HTML/C
[JS]超軽量で設置も簡単！Facebook, Twitter, Google+のボタンを設置するスクリプト -SocialCount
デモページ：カウント付きで縦並び SocialCountの使い方 使い方のステップは、2つ。 これ以上ないくらいに簡単です。 Step 1: 外部ファイル スタイルシートとスクリプトを外部ファイルとして設置します。 まずは、スタイルシートをhead内に。 <head> <link rel="stylesheet" href="../src/socialcount.css"> </head> アイコンを使用する場合は、もう一つ外部ファイル（socialcount-icons.css）を加えます。 続いて、スクリプトをページの下の</body>の上に。 ... <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <script src="../src/socialcount.js"></script> </bod
テキストのサイズを調整し、両端をピッタリと揃えて表示するスクリプト・slabTextをWPプラグインとして日本語環境に対応・WP slabText
ご連絡頂いて、良さ気だったので ご紹介。以前記事にした、テキスト の両端を揃えるタイポグラフィ系 のスクリプト・slabTextを日本語 でも利用出来るようにし、且つWP で利用出来るようにしてくれました。 今年の1月くらいにご紹介したslabTextをWPで、且つ日本語で利用出来る、というプラグインです。slabTextに関しては以前の記事をご参照下さい。 テキストのサイズを自動調整して幅一杯に広げるレスポンシブWebデザイン対応のjQueryプラグイン・SLABTEXT 過去記事でも書いたように、普通に使っても日本語環境で使うのは若干微妙でした。（単語単位で半角スペースを入れる必要があった）これをうまく解消してくれているので需要も結構あるのでは無いかなと思います。 もともと目をつけていたスクリプトだったので日本語環境で利用出来るようになったのはとても嬉しいです。スクリプトの開発者さんは
jQueryMobileでiPad向けの2カラムのWebページをデザインする その１ - @thorikiriのてょりっき
なるべくネイティブ感を出したいので、jQueryMobileを使っているのですが、現状では2カラムのデザインってあんまり無いようなんですよね。 参考にしているデザインはiPadの設定アプリの画面の感じです。 jQueryMobileのバージョンは、1.1.1です。 骨組みを作る まずはHTMLファイルを書いていきます。基本はjQueryMobileのLayout gridsです。 sample.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1"> <title>jQueryMobileでiPadのような2カラムデザ
dl要素を美しくデザインするスタイルシートのまとめ | コリス
実用的なものからちょっとトリッキーなものまで、dl要素を使った美しいデザインのスタイルシートを紹介します。 In Defence of the Definition List HTML <dl class="wrapper1"> <dt>News Item 1</dt> <dd><div class="div1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum orci eu purus viverra imperdiet. Cras scelerisque commodo dictum. Mauris sed libero non justo adipiscing tempor tincidunt eget eros. Praesent eu cursus enim. Donec d
CSS3で作るシンプルなマウスオーバーアニメーション5種
Posted: 2011.06.15 / Category: HTML&CSS / Tag: CSS3, アニメーション css3はアニメーションもできてしまうわけですが、ここではわりと簡単につくれるマウスオーバーアニメーションをご紹介いたします。 Chrome、Firefoxで動作確認しております。 css3マウスオーバーアニメーションの基本 マウスオーバーアニメーションの前に通常のマウスオーバーをみてみましょう。 たとえばリンクの文字色をマウスオーバーしたときに変更したい場合はhover疑似クラスでcolorを指定しますよね。 css a { color: #3399FF; } a:hover { color: #FF6600; } これをアニメーションさせるには「transition」というプロパティを追加します。 transition: プロパティ名 時間 アニメーション方法 ;
.htaccess（Rewrite Engine）が使えない場合のスマートフォン振分け - HTMLコーダーブログ
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズを今購入したところで京アニ支援に繋がる事はないので売り文句等にだまされない注意が必要です。 京アニ高額転売がメルカリで確認される メルカリに京都アニメーションを絡めた高額転売が出てきた。 pic.twitter.com/xGekSI34GR — prajñā (@studytmp) July 18, 2019 京アニ火災を報じる新聞記事でさえも出品される メルカリで京アニの記事販売する無神経さ。最低。 pic.twitter.com/Ba62m9r9pZ — &A (@heijyo8710) July 18, 2019 転売に対するTwitterの声 https://twitter.com/mina_0331/status/11518796102057
拡大時にアコーディオンのように画像が広がるカルーセルを実装するjQueryプラグイン・Accarousel
クリックで画像を拡大する際に アコーディオンのように広がる カルーセルを実装するjQueryの プラグイン・Accarousel。機能 はシンプルですが、動きが好み だったので備忘録。 カルーセルを実装するjQueryプラグインです。 見た目は普通のカルーセルですが、画像をクリックすると以下のように拡大されます。 なんと言うか、横にブワッと広がる感じ。ブワッと。 頭悪いから上手く言えないのでサンプル見てください。 Sample コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script> <script type="text/javascript" src="jquery.cjAccarousel.min.js"></scri
1要素1クラス、画像を一切使わずCSSで実装するiPhone UI
1要素に1クラスを指定するだけで、画像も使わずさっと作れるiPhone風CSSライブラリを作ってみました。 最近Macがほしくてたまらないえどです。こんにちは。(降ってこないかな・・) ↓実際に動いているデモはこちら(iPhone向けに作っているため、iPhone/Safariでしか最適化されていません) 1要素1クラス、画像を一切使わずにCSSで実装するiPhone UI - jsdo.it - share JavaScript, HTML5 and CSS ちなみにiPhoneで実際に見るとこんな感じに見えます↓ iPhoneで実際に見るには、以下のURLから見れます↓ (jsdo.itだとviewportが使えないため、ブログ自体にデモをアップしました) http://goo.gl/s5fV 1要素1クラスで実現する 今回のサンプル作成でこだわったのは、1要素に1クラスを指定すること
CSS3を使ってできる画像まわりのエフェクトやスタイリング18
CSS3を使った画像のエフェクトやスタイリングについて、思いつく限り一挙にまとめてみました。 たくさん画像を扱うサイトなどを作る際に、CSSでできる表現のカタログとして使ってもらえたらと思います。 ※ 2/24 「2. めくれた風」を書き忘れていたので追記しました 目次 1. シャドウ 2. めくれた風 3. トイカメラ風トンネル効果 4. カラー調整 5. 回転 6. 角丸 7. 楕円のフレーム 8. 円のフレーム 9. 三角形フレーム 10. 重なった風 11. ぼかし 12. フェード（シャドウ編） 13. フェード（グラデーション編） 14. 反射 15. リボン 16. 差し込んだ風 17. フレームだけを傾ける 18. 半透明フレーム まとめ ※ 実際の表示はこちらから確認できます。 ※ この記事で掲載しているCSSは、シンプルにするためにベンダープリフィックスを付けていません
魅せる画像スライドショーJavaScript「jQuery GalleryView」
スライドショー的なJavaScriptは多いですが、ここまで魅せるものはなかったように思います。 jQuery GalleryViewはどこを見ているのか、次の画像は何かなど細かい点にも配慮しています。 sponsors 使用方法 jQuery GalleryViewからファイル一式をダウンロードします。 themesはjsと同じディレクトリにアップして下さい。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.galleryview-1.0.js"></script> <script type=
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
