カルーセル(スライダー)をおしゃれにするCSSスニペット12選。3Dもフルスクリーンも可能！ | KodoCode
スタイリッシュなデザインのカルーセルスライダー(carousel)のCSSサンプルをまとめました。デザインが美しいウェブサイト・ブログが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。目を引くデザインのメニューは利用者の興味を引き付けます。 カルーセル(スライダー)は限られたスペースで複数のコンテンツを回転表示するのに利用されていたり、フルスクリーンカルーセルでサイトデザインと一体化して利用するケース等、デザインのバリエーションを増やすことが出来る便利なパーツです。 本記事ではフォームの中でも「カルーセル」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。 なお、「カルーセル」という呼び方が馴染まない方もいるでしょう。「スライダー」という名称のが一般的かもしれません。以下のように回転してコンテンツを表示するパーツのことを示します。 S
【jQuery】ページ内リンクでスムーズスクロール（固定ヘッダーがあったら） | 125naroom / デザインするところ（会社）です。
JavaScript固定のヘッダー（ナビ）がある場合はヘッダー分の高さを調整しなければなりません。レスポンシブだと高さが変わってしまいます。そんな時には『ヘッダー』のクラスやIDを指定してあげれば面倒な調整は不要になります。ちなみに今回の『ヘッダー』は『header』を使っています。 ▽jQuery（必須） <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> ▽簡単な説明を記載しています。 $(function(){ var headerHeight = $('header').outerHeight(); // ヘッダーについているID、クラス名など、余白を開けたい場合は + 10を追記する。 var urlHash = location.hash; // ハッ
【jQuery】上からヌルヌル出てくるドロワーメニューを一から自作するには？？ | KUSU'S SITE
以前、「【jQuery】スマートフォンサイトで使える！上からヌルッと出てくるドロワーメニューの実装方法」にてjQueryプラグインを使ったドロワーメニューの設置方法についてご紹介しましたが、今回はプラグインを使わず自分でjQueryを設定してドロワーメニューを設置する方法についてご紹介したと思います！ なお作成する流れとしては デモページ まずはデモページはこちらになります！ デモページ HTMLを記述する それではまずHTMLを記述していきましょう(^^) 今回は上のデモページと同じソースで解説したいと思います！ <div class="head-bar"> <a class="menu-btn"> <span></span> <span></span> <span></span> </a> </div> <ul class="sp-menu"> <li><a href="">メニュー<
div要素にして画像もテキストもリンクもまとめてスライドさせる「jQuery Slider2」
jQuery Slider² 【注意】2019/10 こちらの記事は、古くなったため記事をリライトして引越ししいたしました。→ 最新の情報はこちらをご覧ください。 「jQuery Slider2」は、簡単に画像や文字をスライドさせる軽量のJavaScriptです。 <div>～</div>で囲んだdiv要素ごとにスライドさせるという便利なスライダーです。 サンプルはこちら → 「jQuery Slider2」サンプルページ 「jQuery Slider2」の設置方法は続きをご覧下さい。 まず、jQuery Slider2のサイトから、「Download stable（安定版）」をクリックして jquery.slider.min.jsとjquery.slider.cssを一式ダウンロードします。<head>部分には <script type=”text/javascript” src=”js
背景に動画を使ったWebサイトの作り方
2023年5月12日 jQuery, Webサイト制作, Webデザイン 2012年後半あたりから少しずつ目にする機会が増え、今では海外サイトを中心に世界中に広まった、背景に動画を用いたWebサイト。サイトの雰囲気や、サービスの具体的な内容を背景に流すことで、よりユーザーの視点をスクリーンに注目させることができます。今回はそんな背景動画の実装方法を、実例サイトと共に紹介していこうと思います。 ↑私が10年以上利用している会計ソフト！ KINS WITH 動物病院のWebサイトでは、かわいいわんちゃんの動画とともに院内の様子がよくわかる動画を掲載しています。 AquallのWebサイトでは画面全体ではなく、動画の一部をくり抜いたような形で動画を掲載。背景の装飾としてよく溶け込んでいます。 動画を用意する まずは背景に表示したい動画を用意します。動画を用意する方法は大きく分けて4通り。 自分で
HTML5 × CSS3 × jQueryを真面目に勉強 – #9 CSS3アニメーション（Transition） | DevelopersIO
この順序で指定するのが必須というわけではありませんが、durationとdelayの順序だけは決まっており、逆にすることが出来ません。 記述例) transition /* * @transition-duration * @transition-property * @transition-timing-function * @transition-delay */ transition: .3s background ease .5s; 当記事執筆時点（2012年11月）では、このプロパティに対してベンダープレフィックスをつけて指定することになります。 ベンダープレフィックスをつけてみた - transition -webkit-transition: .3s background ease .5s; -moz-transition: .3s background ease .5s;
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ヘッダを固定している時のページ内リンクのズレ補正 | Webとデザインのキタック
http://e0166nt.com/blog-entry-904.html