サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
www.webantena.net
jQuery ベースのコンテンツスライダーには色々ありますが、今回紹介させていただく「bxSlider」は設置が簡単で、自動再生やフェードインによる画像切り替えなどのカスタマイズも手軽にできる便利なプラグインです。 また、レンスポンシブWEBデザイン対応なのでスマフォやタブレットでも使える所も嬉しいですね。 bxSlider の設置 jquery.bxslider.min.js ファイルと jQueryファイル、CSS ファイルを <head> 内に設置します。 <link href="./bxslider/jquery.bxslider.css" rel="stylesheet" /> <script src="./jquery.min.js"></script> <script src="./bxslider/jquery.bxslider.min.js"></script> <scr
ボックスに影を付ける(ドロップシャドウ)ことができる CSS3 のプロパティが box-shadow です。 IE8以下には対応していないものの、影はボックスの「内側」「外影」に付けることができますし、影の色やぼかし具合などを調整することで質感のあるボタンをCSS だけで表現することもできますので、個人的には使用頻度の高いプロパティです。
ページ内の文字列を削除、置換したい場合に、jQueryで replace() を使えば便利です。 要素を指定すれば特定の箇所のテキストを削除、もしくは別の文字列に変換、なんてことも出来ますし、カスタマイズ次第では「ブラウザの幅が320px 以下でのアクセス時には 特定の要素を削除する」という具合に色々な場面で利用できると思います。 まずは今回は基本的な replace() による文字列の削除と置換方法を紹介させていただきます。 <script src="./jquery.min.js"></script> <script> $(function(){ //.replace 要素内の文字列を除去 $('.replace').each(function(){ var txt = $(this).html(); $(this).html(txt.replace(/jQueryで /g,''));
Apache、MySQL、PHPがパッケージになった便利なアプリケーションMAMP ですが、MAMP をインストールしてスタートページを開くと「localhost:8888」にアクセスします。 「localhost」だと他のパソコンからはアクセスできませんので、複数の端末からアクセスできるようにするためにも、MAMP を localhost ではなくIPアドレス で動かす方法をご紹介します。 Wi-Fi経由でWindowsやスマフォからでもアクセスできるようになるので、WordPressやホームページをローカル環境で構築する上でも作業が捗ります。 MAMP のダウンロード まずは以下のサイトへアクセスします。 MAMP のソフトは2種類あるのですが、左側グレーのアイコンの「MAMP: One-click-solution for setting up your personal webse
サイトの中で、HTTPS でアクセスさせたいディレクトリ「secure/」があるとして、HTTP アクセスを強制的に HTTPS でリダイレクトする方法のまとめです。 サーバがSSLに対応しており、.htaccess 、mod_rewrite が使えれば HTTP アクセスを SSLでリダイレクトすることが可能ですし、またその逆(SSL → HTTP でリダイレクト)も可能です。 secure/ディレクトリを HTTPS でリダイレクト まずは secure/ディレクトリを SSL に対応させるための .htaccess です。 secure/ディレクトリに以下の .htaccess を設置します。 <IfModule mod_rewrite.c> RewriteEngine on RewriteCond %{HTTPS} off RewriteRule ^(.*)$ https://%{
WordPressで WP_Query を使うとどうしても「ページ送りが上手くいかない…」とハマっていた所、有り難い記事を発見したのでシェアさせていただきました。 ページ送りには「WP-PageNavi」プラグインを使い、WP_Query で新着記事の一覧を10件表示させるという処理をしていたのですが、どうやら WP-PageNavi の使い方 に問題があったみたいです。 WP_Query でページ送りが上手くいかない場合 今回わたしがハマッた問題の解決法がズバリ紹介されていました。 WP-PageNavi は 1,2,3… と番号でページングしてくれるプラグインです。これにはクエリを渡せるので、… [WP] posts_nav_link が WP_Query のループで動作しない理由と解決策とスニペット なるほど… という訳で、WP-PageNavi にクエリを渡せば問題は解決しそうかな
吹き出しやバルーンとも言いますが、CSS だけで実現できるのでまとめました。 上下左右の4方向に対応した吹き出しサンプルです。 「下向き」吹き出しの作り方 まずは「下向き」からです。 <style> /*親*/ .parent1 { width:100%; background:#dd0000; padding:0; position:relative; } /*子*/ .parent1 .child1 { background:#dd0000; position:relative; /*テキストの補正*/ color:#fff; padding:10px 0 } /*擬似要素:after*/ .parent1 .child1:after { content: ' '; width:0; height: 0; position:absolute; border:10px solid tra
<a>タグをクリックして何も起きないようにする、ということをしようと思います。 一番簡単な方法は、CSS3の pointer-events を利用することですが、CSS3なのでIEでの動きは微妙。 スマフォサイトなら気にせずに使えるのかなという印象。 pointer-events:none でリンクを無効化する <a>タグのリンクを無効にするには、CSSファイルで以下のように記述します。 a.nav { pointer-events: none; } 上記例だと、<a class="nav" href="#"> のリンクをクリックしてもアクションが起きません。 応用としては、CSSで pointer-events:none とリンクタグを無効化することにより、「:target疑似クラス」を利用したLightbox 的な動きをさせるなんてことに利用できそうな印象です。 IEでの利用は厳しそう
サイトにアクセスしたら、ページ全体をボワ〜ッと徐々にフェードインで表示させる方法です。 jQuery の fadeIn() を使うだけの簡単な処理ですし、フェードインの微調整(時間調整)次第で効果的な演出も可能になるかと思います。
指定した要素を「ふわふわ」動かすjQueryプラグイン「jquery.yurayura」 の記事でも、要素を「ふわふわ」と動かすjQueryプラグイン jquery.yurayura.js について紹介させていただきましたが、今回紹介させていただく「jqFloat」プラグインでも同様の動きを実現できます。 プラグイン提供先でも動きを確認できますが、jqFloat により複数の要素を同時に縦にも横にも動かすことができるので、特に可愛いイラスト中心のサイトとかだとかなり使えるプラグインではないかと思います。 プラグイン提供サイトに jqFloat を利用したデモ画面がありますので、実際の動きを確認することができます。 jqFloat の設置 jQuery ファイルと一緒に jqfloat.js を設置します。 <script src="./jquery.min.js"></script> <s
Lightboxの ように画像をオーバーレイで拡大表示できるjQuery プラグイン Fancybox。 この手のプラグインは他にも色々ありますが、Fancybox の魅力は画像以外にもYoutube 動画もLightbox風に表示できるという「汎用性の高さ」と、画像拡大時のエフェクトを調整できたり、サムネイル付きのイメージギャラリーができるなどの「カスタマイズのしやすさ」かなと思います。 Fancybox の設置 jquery ファイルと一緒に Fancybox のjavascript ファイルとcss ファイルを <head> 内に設置します。 ※オーバーレイ用の画像ファイルや、動画を扱うための別途プラグインファイルなどもありますので、 fancybox/ のようなフォルダに一式まとめてサーバへアップされることをオススメします。 <link rel="stylesheet" href=
jQuery で a タグのリンクを無効 <a> タグ全部、もしくは a class="disabled" のような特定のリンクに対して、jQuery でクリックを無効化するという方法です。 <script src="./jquery.min.js"></script> <script> $(function(){ $('a.disabled').click(function(){ return false; }) }); </script>
display:table-cell は以下のような使い方をします。 /*CSSの記述*/ <style> ul.nav { display:table; } ul.nav li{ display:table-cell; vertical-align:middle; text-align:center; } </style> /*HTMLの記述*/ <ul class="nav"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> </ul> 親要素に display:table を指定し、テーブル扱いとする display:table-cell は display:table とセットで使う事が多いです。 親要素(ul.nav)に display:table を指定することで「表(<table>)」の扱いになりますので、子要素
Pinterest風のタイルを敷き詰めたようなレイアウトを実現するために、jQueryプラグインの「The Wookmark jQuery plugin」を使う方法は以前にも紹介させていただきましたが、やはり「jQuery Masonry」の方が有名かな。 と言うことで、基本的な使い方になりますがザックリとご紹介。 公式サイトでも多数のデモが掲載されている通り、画像中心のギャラリーやポートフォリオ以外でも、色んなサイトに対応しやすい万能なプラグインだと思います。
<head> 内に jquery ファイルと一緒に jquery.backgroundSize.js ファイルを設置しますが、IE8 以下に対応させるので <!–[if lte IE 8]> で括るようにします。 <script src="./jquery.min.js"></script> <!--[if lte IE 8]> <script src="./jquery.backgroundSize.js"></script> <script> $(function() { $("div.contents").css({backgroundSize: "contain"}); }); </script> <![endif]--> .contents の要素に対してCSS3 の background-size:contain を適用させる例です。 <style> .contents { w
入力フォームの確認フェイズなどでも使えそうな、Bootstrap の Modal 機能のご紹介です。 普段はモーダルボックスは display:none で隠しておき、ボタンをクリックしてモーダルボックスを起動(表示)させるイメージになります。 Bootstrap Modal の使い方 Bootstrap でモーダルウィンドウを起動させるに当たり、以下が必要なファイルです。 Bootstrap Modal の設置 各ファイルを、<head> 内か </body> の直前に設置します。 <link rel="stylesheet" href="./bootstrap.css"> <script src="./jquery.min.js"></script> <script src="./bootstrap-modal.js"></script> <script src="./bootstra
Bootstrap を使ったシンプルなタブメニューの実装方法です。 今回はタブメニューの基本的な設置方法と合わせて、jQuery Cookie を利用して現在閲覧しているタブの情報を Cookie に保存する方法も合わせて紹介させていただきます。 これにより、ページをリロードしたり離脱して戻ってきた場合でも、タブの情報を保持できるようになります。 Bootstrap のタブメニュー実装 まずは Bootstrap によるタブメニューを用意します。 bootstrap-tab.js ファイルの設置 jquery ファイルと一緒に、bootstrap-tab.js を設置します。 <link href="./assets/css/bootstrap.css" rel="stylesheet"> <script src="./jquery.min.js"></script> <script sr
グローバルナビのメニューリンクを横並びにしたり、ギャラリー型サイトで画像をタイル状に横に並べたりと、サイト構築時に要素を横並びにするに当たってCSSの float や display を使うことが多いと思います。 float と display とでは見え方にどのような違いがあるか?について、サンプルも交えて紹介いたします。 float:left の場合 まずは float:left で要素を横並びにするサンプルです。 <style> .navi { width:100%; margin:0 auto } .navi li { float:left; border:1px solid #ccc; padding:5px 10px; text-align:center } </style> <ul class="navi clearfix"> <li><a href="#">リスト1</a>
チェックボックにチェックを入れることで、指定した要素の文字の色や幅(width の値)を変えたり、表示非表示を切替えたりする方法のご紹介です。 サイトやブログにも馴染むように、チェックボックスのデザインをボタンっぽく変更する方法も合わせて紹介させていただきます。 チェックボックスのデザイン変更 まず最初に、チェックボックスのデザインをボタンのイメージへと変更してみます。 CSS の記述例はこんな感じです。 input[type=checkbox] { position: absolute; left: -9999px; } label { display: block; width:200px; text-align:center; font-weight: bold; color: #fff; background: #e54040; border:1px solid #dd0000;
jQuery を利用して画像を動かす方法には色々ありますが、指定した要素(画像など)を「ふわふわ」浮いているように見せるためのプラグインが jquery.yurayura.js です。 縦方向に「ふわふわ」動くイメージですが、移動距離とスピードの設定次第では面白い動きも実現できるかもしれません。
WordPressではテンプレートタグ wp_tag_cloud() を利用して、サイドバーなどに「タグクラウド」を表示させることができます。 タグ一覧のデザインも変更しやすく便利です。 今回はタグクラウドの基本的な使い方に加えて、簡単なカスタマイズもまとめて紹介させていただきます。
jQuery を利用して、ページのアクセス毎に複数枚の画像の中からランダムで1 枚の画像を表示させる方法です。 今回は <img> タグの画像を使う場合と、CSS の background-image に背景画像を指定する場合の2種類の方法を紹介させていただきます。 jQuery で <img> タグの画像をランダム表示 今回は全部で5 枚の画像ファイルの中から、アクセスするたびに1 枚の画像をランダムで表示させてみます。 Javascript の記述 jquery ファイルと一緒に <head> 内に以下のように記述します。 <script src="./jquery.min.js"></script> <script> $(function() { var array = [ "images/images01.jpg", "images/images02.jpg", "images/i
Bootstrap のモーダル機能ベースの「Bootstrap Lightbox」は、画像をクリックしてオーバーレイで拡大表示させるシンプルなLightbox 系プラグインです。 Colorbox や Fancybox のようにあれもこれも出来るという訳ではなさそうですが、今後使う可能性もあるので簡単に設置方法をまとめました。 Bootstrap Lightbox のダウンロード 以下のページから Bootstrap Lightbox のファイルをダウンロードします。 各ファイルを、<head> 内か </body> の直前に設置します。 <link rel="stylesheet" href="./bootstrap.css"> <link rel="stylesheet" href="./bootstrap-lightbox.css"> <script src="./jquery.mi
Pinterestのようなサイトをよく見るようになりました。 この手のサイトは jQuery Masonry を利用することが多いのですが、今回は The Wookmark jQuery plugin を使ったPinterest 風のタイル状サイトを構築しましたので、その備忘録です。 The Wookmark jQuery plugin の特徴 タイル状にコンテンツを横に並べていく分けですが、CSSの float: や display:inline-block で並べても、各要素の高さが異なるとその分隙間が出来てしまいます。 そこで jQueryプラグイン jquery-wookmark.js を利用することで、高さが異なる要素をタイル状に並べても、隙間を埋めて表示してくれるようになります。 ブラウザの幅を伸縮しても親要素の幅に合わせてコンテンツが上手く配置されますし、レスポンシブWEBデ
CSS3 の transform プロパティを使って要素を斜めに傾けて表示させることが可能です。 テキストだけでなく、もちろん画像ファイルを斜めに傾けることも可能です。 写真をちょっと傾けて表示させることで、デザインの幅が広がるかもしれませんね。 文字を斜めに傾ける まずはHTML側ですが、以下のようなコードがあるとして、 <ul> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> <li><a href="#">リスト</a></li> </ul> これに CSS で文字を傾ける処理をしてみます。 ul { transform: rotate(-10deg); -moz-transform: rotate(-
WEbページを印刷する場合、 「なんでここでページ分割されるの??」 なんてことがよく起こりますが、CSS の page-break-before や page-break-after を使えば、ページ分割(改ページ)位置を指定してあげることができます。 page-break-before 直前で改ページさせるには page-break-before を使います。 <style> .page-break-before { page-break-before:always } </style> … <div class="page-break-before"> <p>この文章の直前で改ページさせる</p> </div> page-break-before の値auto
[WP]WordPressのテーブル用プラグイン「TablePress」の使い方と、レスポンシブWEBデザイン対応について <table> タグを使ったコーディングはまだまだ多いですが、例えばWordPressで作った企業サイトで「会社概要」のような表組を掲載する場合に便利なプラグインが、今回紹介させていただく「TablePress」です。 TablePress は、例えば「企業情報で使うテーブル」「会社沿革で使うテーブル」「商品情報で使うテーブル」のように、コンテンツ毎にテーブルを複数管理でき、投稿記事や固定ページでショートコードを使ってフロント画面に表示させることができる便利なプラグインです。 また、拡張機能を使えばテーブルコンテンツをレスポンシブWEBデザイン対応することができますので、<table> を使うサイトであれば是非導入しておきたいプラグインではないかと思います。 Tabl
jQuery Marquee のダウンロード 以下より javascript ファイルをダウンロードして、jquery.marquee.js のようにリネームします。 jQuery Marquee の設置 jquery ファイルと一緒に ダウンロードした jquery.marquee.js ファイルを設置します。 <script src="./jquery.min.js"></script> <script src="./jquery.marquee.js"></script> <script> $(function () { $('p.ticker').marquee(); }); </script> jQuery Marquee でマーキーっぽく文字を流してみる HTML 側の記述例ですが、マーキーのようにスクロール表示させる要素に ticker のクラスを当てます。 <p class
レスポンシブWEBデザインへの対応で頻繁に使うCSS の Media Queries ですが、条件分岐のやり方をよく忘れるので整理しました。 「iPad」「iPhone」「iPhone 5」の端末別に加えて、「ブラウザ幅」での条件分岐もまとめています。 横向き、縦向き横向き@media only screen and (orientation:landscape) { } 縦向き@media only screen and (orientation:portrait) { } 端末別(iPad、iPhone)iPad 横向き/*1024px*/ @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:landscape) { } iPad 縦向き/*768p
次のページ
このページを最初にブックマークしてみませんか?
『WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く