タグ

CSSとjQueryに関するsugi511のブックマーク (6)

  • CSSだけ!クリックでスムーズに開閉するアコーディオンメニュー

    この前「CSSだけで作る動きのあるドロップダウンメニュー|Webpark」という記事を書きました。jQueryでしそうなことをCSSのみで作ったのですが、これはマウスを乗せたとき動くようにしたいのでhoverを使いました。 今回はクリックで開閉するということで、hoverは使えません。では何を使うのか。 ラジオボタンを使います。ある項目にチェックするとそれまでチェックされていた項目のチェックが外れる。アコーディオンメニューと仕組みが一緒です。 今回もサンプルを用意していますのでご覧ください。 IE8以下の場合「:checked」が非対応なのでうまく表示されません。しかし、CSS3セレクタはSelectivizrを使えば簡単に対応できます。使い方は「CSS3を使うにあたって知っておきたいIE対策のまとめ|Webpark」をご参考に。 それではHTMLから紹介します。 HTML <div id

    CSSだけ!クリックでスムーズに開閉するアコーディオンメニュー
  • 少しのコードで実装可能な20のjQuery小技集

    2016年6月22日 jQuery 素敵な動きを手軽に実装できるJavaScriptライブラリ「jQuery」。jQueryには多くのプラグインが揃っていますが、以前書いた「少しのコードで実装可能な20のCSS小技集 」に続き、今回はプラグインなしで実装できるjQueryの小技を紹介します!「jQueryってなんだ?」という人もコピペで実装できますよ!サンプルも用意したのでぜひご覧ください! ↑私が10年以上利用している会計ソフト! 追記:この記事で紹介されているいくつかの方法が、今ではCSSのみで実装可能です!詳しくは「かつてはJavaScriptを利用していたものの、今ではCSSのみで実装できる10の小技」をご覧ください。 jQueryの基的な使い方 まずはjQuery家からjQueryファイルをダウンロードします。<head> 内に下記を記述し、jQueryファイルを読み込みます

    少しのコードで実装可能な20のjQuery小技集
    sugi511
    sugi511 2012/08/01
    簡単な学習をしたい人にはぜひ!
  • 3D Flipping Circle with CSS3 and jQuery | Codrops

    In this tutorial we will create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients. Today I would like to show you how to create a little component with a realistic touch. The idea is based on the sweet paper effect found in the video of the Google Developer Stories. Maybe you ha

    3D Flipping Circle with CSS3 and jQuery | Codrops
    sugi511
    sugi511 2012/07/25
    丸い冊子をめくるCSS3とjQuery
  • jQueryで奥行きのある背景スクロールを作ってみる

    画像を手前は早く、奥は遅く移動 デモを見て頂ければわかると思いますが、やってることは手前の背景画像を早く動かし、奥の画像を遅く動かしているだけです。 html + css 画像は当然ですが2枚以上用意しましょう。 ここでは3枚画像の画像を使用します。 なのでdivを3つ用意し、それぞれに背景画像を指定します。 html <div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --></div> <!-- /#bg02 --></div> <!-- /#bg03 --></div> css #bg01 { background: url(bg1.png); height: 3000px; } #bg02 { background: url(bg2.png); } #bg03 { background: url(bg3.png);

    jQueryで奥行きのある背景スクロールを作ってみる
    sugi511
    sugi511 2012/07/13
    スクロールするときに背景画像の前後によって移動させるスピードを変える。
  • 消費者金融借り入りが有りでも住宅ローンは組めますか

    近い将来、夢のマイホームを考えているのですが、その際にローンを組む予定です。私は過去に消費者金融から借入をした経緯があるのですが、そういったことがあっても住宅ローンは組めますでしょうか。 消費者金融を利用したからローンが絶対に組めないということはありません 確かに消費者金融の借入の情報は住宅ローンを組む際には有利には働きません。しかしこの借入情報は5年後に自動的に削除されるので、5年以上前に消費者金融を利用していただけで完済も済んでいるのでしたら特に問題はないです。 しかし、過去に消費者金融からの融資の返済に延滞があったことや、今も借入を行っている場合は住宅ローンの審査は難しい場合が多いですね。そもそも住宅ローン審査でチェックされることとしては、住宅ローンの借入が現状の収入の何倍の金額に該当するのかという点、収入に対しての返済比率がどうであるか。というところが見られます。そこをクリアしてい

  • CSSに関する本を執筆させて頂きました | CSS-EBLOG

    CSSに関するを執筆させて頂きました カテゴリ:執筆 2012年5月29日 10:00 「すべての人に知っておいてほしい スタイルシートデザインの基原則」というを執筆させて頂きました 最近めっきり更新が滞ってました・・。 さて突然ですが最近、すべての人に知っておいてほしい スタイルシートデザインの基原則というを執筆させて頂きました。 内容はCSSに関する書籍となっています(当たり前ですがw) そして自分が担当させて頂いたのは主に、HTML5の章とjQueryとCSSの連携についての部分になります。 具体的には「Chapter 6 これからのWeb制作HTML5の描く未来〜」全般と「Chapter 7 jQuery」の「7-02 jQueryとCSSの住み分けを明確にする」「7-03 jQuery animateを使って要素に動きを付ける」「Column Webアプリで使うjQu

    sugi511
    sugi511 2012/06/03
    これはどこかで立ち読みしたい。
  • 1