サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
大谷翔平
makasete-web.net
最近よく見かける上部固定メニュー。今、ユニクロサイトでも採用されていますね。 先日、サイト制作で実際に上部固定メニューを実装したので、作り方を紹介したいと思います。意外と簡単にできました。 上部固定メニューのサンプルはこちら jQueryをHEAD内に記述 まずは、HEAD内に「viewport」を記述。viewportはスマホでもサイトが適切に表示されるようしているので忘れずに。次に、jQueryを呼び込みます。最後に上部固定されるようにjavascriptを記述します。 <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></s
制作中のサイトで毛筆フォントが欲しかったのでまとめてみました。高品質のフォントがいっぱいありましたが、これだけあるとどれ使用するか迷いますよね?利用に関しては各フォントのライセンスをご確認の上ご利用ください。 筆ペンで書いた手書きフォントです。!?と()は全角・半角共に同じものが出ます。ひらがなのみ対応しています。 ダウンロード先:毛筆フォント 商用:商用OK OS:Windows / Mac 毛筆太文字 筆ペンで少し太めに書いた文字です。ひらがなとカタカナ収録されています。※漢字は一部のみしか入っていません ダウンロード先:毛筆太文字 商用:商用OK OS:Windows / Mac 大甘書道体 アニメ銀魂で次回予告に使われていた文字をデジタルフォント化。ひらがな、カタカナ、英字5文字、第一水準漢字1,324文字、第二水準漢字782文字、その他の漢字1,380文字 ダウンロード先:大甘書
メニューの階層を一気に表示できる事が出来るドロップダウンメニュー。ユーザーが目的ページまでたどりやすく、最近では多くのサイトがドロップダウンメニューを採用しています。 そのドロップダウンメニューを今回はjQueryをたった7行書くだけで簡単に設置できる方法を紹介します。よかったら活用してください。 ドロップダウンメニューのサンプルはこちら HTMLファイルのHEAD内にjQeryを記述 $(function(){ $('#menu li').hover(function(){ $("ul:not(:animated)", this).slideDown(); }, function(){ $("ul.child",this).slideUp(); }); }); ドロップダウンメニューにするHTMLを書く CSSでドロップダウンメニューのデザインを整える 背景色などは自由に変えてサイトのイ
←戻る スクロールでトップに戻るボタンをjQueryで実装 デモ/サンプル 下へ少しスクロールすると右側に「トップへ戻る」ボタンが出てきます。 JavaScript $(document).ready(function() { var pagetop = $('.pagetop'); $(window).scroll(function () { if ($(this).scrollTop() > 100) { pagetop.fadeIn(); } else { pagetop.fadeOut(); } }); pagetop.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); CSS .pagetop { display: none; position: fix
WEB制作はスピードが命!作るなら簡単ですぐ作れるほうが良いに決まってますよね。 私はこのjQueryスクロールを約7分で実装する事ができました。jQueryの知識はほとんどいりませんでした。 難しくありません7分後にはゆっくりとページトップへ戻るボタンが完成します。 では、早速実装していきましょう。 jQueryスクロールのサンプルはこちら まずはjQueryのライブラリ追加 HTMLの<head>内にjQueryのライブラリを追加します。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> 次はHTMLファイルにトップに戻るボタンを追加 肝心の「トップに戻る」ボタンを追加しましょう。 トップ リンク先は「#wrap」
(注*2014年1月24日に公開された記事を再編集したものです。) jQueryの知識はほぼ必要なし! ホームページにスライドショーを10分で設置できる方法。 サイトのトップページや作品集にスラドショーをつけてみたいけど、ほどんどjavaやjQueryの知識がない! 「それにjQueryって面倒臭そうだし!」 けど、10分もあればスライドショーが完成します。 最初はコピペで大丈夫!ファイルをダウンロードしてHTMLとCSSにタグを少し追加すれば完成!さっそく簡単にスライドショーが設置できる方法を紹介します。 1.bxSliderサイトからファイルダウンロード bxSliderの公式サイト(http://bxslider.com/)に行き、右上の「Download」ボタンをクリックして必要なファイルをダウンロード。 ZIPファイルの中 この中から今回は3ファイルだけ ※心配ありません。上記の
このページを最初にブックマークしてみませんか?
『ホームページの作り方・WordPress・jQuery・SEO』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く