CSSで六角形（ハニカム）のリンクボタンを作る方法｜BLACKFLAG
Webページ上のリンクボタンは四角いものが主でしたが、CSSの進化によっていろいろな形状でのリンクボタンを簡単に作成することができるようになってきています。 そんな中でも最近Webページ上の表現でよく見かける六角形のリンクボタンをCSSを使って構成する方法について、2パターンの形状で紹介してみます。 「CSSで六角形（ハニカム）のリンクボタンを作る方法」サンプルを別枠で表示 リンクの形状を四角でも丸でもなく六角形の形で整形して、クリックできるエリアもその範囲のみとしています。 六角形の形状は頭が尖ったパターンと頭が平坦なパターンがあるので、その2通りの方法を紹介します。 頭が尖った六角形パターン まずはサンプル画面左の頭が尖った六角形パターンから。 HTMLにはクラスを付けたリンクタグを設置します。 ◆HTML <a href="#" class="hexagonA"><span>Link
CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法｜BLACKFLAG
情報量が多く縦に長いWebページではページ内をスクロール移動させるアンカーリンクを設置することはよくあります。 その際、Webページ内のヘッダー要素を固定していると、アンカーリンクをクリックしてスクロール移動した位置と固定ヘッダー要素が被ってしまう、という事象に陥ることがあります。 アンカーリンクで移動した位置に固定ヘッダーが被ってしまう動作サンプル この固定ヘッダーを被らないようにするには、スクロールさせる位置の要素の上部に固定ヘッダーの高さ分の余白を付けておくなど、画面構成において余白の対策が必要になったりするのですが、そのような煩わしい調整をせずにCSSのbefore疑似要素を使って簡単に解消する方法があったのでご紹介してみます。 「CSSのbefore疑似要素を使ってページ内アンカーリンクでスクロールした位置と固定ヘッダー要素が被らないようにする方法」サンプルを別枠で表示 冒頭で紹
jQueryでマウス動作がストップした時を判別して処理する方法｜BLACKFLAG
jQueryを使ってのマウス操作の判別処理は「hover」「mouseover」「mousemove」「mouseout」などといった、マウスが要素に乗った時や、動いた時、要素から外れた時といったものがありますが、マウス動作が止まった時「mousestop」のようなものは存在しません。 そんな要素の上でマウス動作が止まった時を判別して判別処理を行うサンプルを作ってみたので紹介してみます。 「jQueryでマウス動作がストップした時を判別して処理する方法」サンプルを別枠で表示 サンプルではページ上にある灰色の四角のエリアを配置し、その上でマウスカーソルの動きがストップした時を判別します。 灰色の四角のエリアの上にマウスを移動させ、移動させている間（マウスカーソルが動いている間）は何も起こらず、灰色の四角のエリアの上でマウスの動きを止めると同時に背景が黒に変わります。 この様にマウス動作が止ま
マテリアルデザイン風ボタンをjQueryとCSSで実装する方法｜BLACKFLAG
Webサイト上の要素の動きや操作によってユーザーに「触覚」を生み出すマテリアルデザイン。 そんなマテリアルデザインの一種として ボタンをクリックした際に、そのクリックしたポイントから波動を出す動作があります。 その動作をjQueryとCSSを使って実装する マテリアルデザイン風ボタンを作ってみたので紹介してみます。 「マテリアルデザイン風ボタンをjQueryとCSSで実装する方法」サンプルを別枠で表示 画面上にあるボタンをクリックすると そのクリックしたところをポイントとして 円形の波動が広がるアニメーションを実行させます。 クリックしたポイントからアニメーションを実装することで 「ボタンをクリックした」ということと クリックした場所が視覚的に明確に分かるようになる効果があります。 このボタン動作の全体構成について まずはHTMLから。 ◆HTML <div id="linkArea">
CSSでのロールオーバーアニメーションのチュートリアル集まとめ｜BLACKFLAG
古いIEのバージョンのサポートが終了したことやプログレッシブエンハンスメントの考えから、 CSS3を使ってのレイアウトやアニメーションを気兼ねなく使えるようになってきました。 画像やボタンにロールオーバーした際にCSSアニメーションを使っての さまざまな演出方法についてまとめているサイトも多々あります。 そんなCSSロールオーバーの演出をさまざまなアニメーションを加えるやり方の チュートリアルを紹介しているサイトの中で 個人的に参考になりそうだったものをまとめて紹介してみます。 Some More Subtle Hover Effect Ideas | Codrops Some More Subtle Hover Effect Ideas | Codrops 画像にロールオーバーすることで 重なり合うキャプション等のテキスト情報を さまざまなアニメーションで表示します。 デモは「SET1」
jQueryで横スクロールのパララックスサイトを作成する方法｜BLACKFLAG
マウスホイールを使ってスクロールした際に 縦にスクロールするのではなく、画面全体を横（水平）にスクロールさせることで ページ全体に流れるような演出を加えているWebサイトを最近よく見かけます。 そんなマウスホイールでの横スクロールに加えて ページ上の要素をレイヤー状に重ね合わせて、 奥行のあるパララックス効果もつけてスクロールさせる動作を jQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。 「jQueryで横スクロールのパララックスサイトを作成する方法」サンプルを別枠で表示 サンプルではページ上に3つのブロック要素をレイヤー状に重ね合わせて 画面上をマウスホイールでスクロールさせることで 各レイヤーを左右に水平スクロールします。 ※レイヤー状に重ね合わせているブロック要素を「パネル要素」とします。 マウスホイールでスクロールする距離を 各レイヤーによって制御する
jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法｜BLACKFLAG
レスポンシブWebデザインでのサイト構築において、 PCのような大きな解像度の画面向けの場合ではタブ切り替えで実装しているUIを スマートフォン向けの小さめの解像度の画面ではアコーディオン方式のUIに 切り替える動作を見かけることがあります。 それぞれの画面解像度によって最適なUIに切り替える手段になりますが そんなレスポンシブ対応のタブとアコーディオン切り替えUIを jQueryを使ってできるだけシンプルに作ってみたのでご紹介してみます。 「jQueryでレスポンシブ対応のタブとアコーディオンを切り替えるUIをシンプルに実装する方法」サンプルを別枠で表示 サンプルではウィンドウサイズが768px以上ならばタブ切り替え、 768px以下だったらアコーディオン動作に切り替わります。 タブ切り替えではボタンクリックでコンテンツ要素がフェードで切り替わり アコーディオンではボタンクリックで付随す
jQueryで「window．open」タイプのポップアップウィンドウ方法｜BLACKFLAG
jQueryでのポップアップウィンドウといえば、ThickboxやLightBoxの様なモーダルウィンドウタイプが主流になってきていますが、そうではない単純な『target=”_blank”』『window.open』タイプのブラウザ別枠型ポップアップウィンドウ（ウィンドウサイズの指定やウィンドウリサイズ指定有り）をjQueryで実現させる方法の紹介。 サンプルでは指定を加えるリンクに対してclassを付ける構成にしておきます。 （リンクに対してclass=”popup”を付けたものに対して指定を効かせます。） HTMLは以下のような記述に。 ◆HTML <a href="リンク先" class="popup">リンクテキスト</a> そしてスクリプトの記述は以下。 ◆SCRIPT $(function() { $(".popup").click(function(){ window.op
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
CSSアニメーションの終了イベントを取得してくれるJavaScript「Detecting CSS Animation and Transition End with JavaScript」｜BLACKFLAG
jQueryなどでアニメーションを実装した際には アニメーション終了時に処理を実行させるのは比較的簡単なのですが CSSアニメーション制御の場合は少々面倒だったりします。 そんなCSSアニメーションの終了イベントを取得してくれるJavaScript 「Detecting CSS Animation and Transition End with JavaScript」が とても便利そうだったのでご紹介。 Detecting CSS Animation and Transition End with JavaScript – Osvaldas Valutis Detecting CSS Animation and Transition End with JavaScript – Osvaldas Valutis デモページはこちら スクリプトはjQueryで使用するパターンと jQueryに
ブラウザウィンドウをリサイズした際のコールバックを設定可能にするjQueryプラグイン「ResizeEnd」｜BLACKFLAG
jQueryではブラウザウィンドウをリサイズした際に発生するイベント情報は取得できますが リサイズ動作完了時のコールバックの設定は用意されていません。 そのリサイズイベントのコールバック処理を可能にしてくれる jQueryプラグイン「ResizeEnd」が便利そうだったので自分用メモとしてご紹介。 Resize End | Github Pages | A jQuery Plugin by Erik Nielsen Resize End | Github Pages | A jQuery Plugin by Erik Nielsen 使い方もとても簡単で、 プラグインファイル「jquery.resizeend.js」を読み込んだ後、 「.resizeend()」メソッドにてリサイズイベントのコールバック設定が可能になります。 ◆SCRIPT $(window).resizeend(func
テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ｜BLACKFLAG
レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちら まず最初は「Basic Table」。 画面幅に応じて見出し要素を複製するかたちで テーブルを項目の並びを整えて収めてくれます。 様々なレイアウトパターンが用意されていて テーブルが長くなる場合にはスクロール制御する機能もあり、 いろい
簡単に多様なjQueryアニメーションを実装できるプラグイン「jQueryTween」｜BLACKFLAG
jQueryを使った複雑なアニメーションを実装しようとすると CSSのプロパティ値を細かく操作して設定することが必要になりますが 複雑なアニメーションからシンプルなものまで、 簡単かつ軽量なかたちで実装することができるプラグイン 「jQueryTween」がとても便利そうだったので紹介してみます。 jQueryTween – Lightest Tweening Engine for jQuery jQueryTween – Lightest Tweening Engine for jQuery 「jQueryTween」は「tween.js」と併せて使用し ハードウェアアクセラレーションを行って軽量かつ高機能なアニメーションを実現しています。 プラグインページのアニメーションデモでは ・Animating Object Size ・Animating Colors ・Transform T
jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
jQueryでスマートフォンとタブレットでviewportを切り替える実験（iPhone6 Plus対応）｜BLACKFLAG
Webサイトを作る際、最近では様々な画面サイズ（解像度）のデバイスが増えていることから レスポンシブで構築する際のviewport設定に迷うことがあります。 すべてのデバイスで画面幅に合わせて綺麗に表示させるには viewportの値を切り替えてしまった方が楽な場合もあったので スマートフォン［iPhone/Android］とタブレット［iPad/Android］それぞれで jQueryを使って、viewportを切り替えるサンプルを作ってみたので紹介してみます。 まずは別枠で動作サンプルから。 ※サンプル画面はスマートフォンまたはタブレットでご確認ください。 「jQueryでスマートフォンとタブレットでviewportを切り替える実験」サンプルを別枠で表示 見た目上は分かりませんが スマートフォン［iPhone/Android mobile］とタブレット［iPad/Android］で そ
JavaScript（jQuery）とCSSでiPhone6 Plusを判別するいろいろ｜BLACKFLAG
iPhone6 / iPhone6 Plusの登場により Webサイトを作る上で今まで以上に画面サイズのバリエーションを 数多く想定しなくてはならない状況になってきました。 中でも「iPhone6 Plus」は解像度が1920×1080と大きく、 タブレットに近いサイズにまでなっており この先、Webページを作成する際に「iPhone6 Plus」だけに 特定の処理を加える必要性が出てくることが多くなりそうなので JavaScriptとCSSそれぞれで「iPhone6 Plus」を判別する方法をあれこれメモ書きしてみます。 まず初めにJavaScriptで「iPhone6 Plus」かどうかを判別させる処理から。 「iPhone6 Plus」ではデバイス上で1pxが何pxでレンダリングされるかを表す 「devicePixelRatio」の値が「3」になるので、その値を見て判別させます。 ※
jQueryでページの最上部に位置固定したフルスクリーンスライドショー（クロスフェード）を設置する方法｜BLACKFLAG
最近のWebサイトでは写真をフルスクリーンでダイナミックに見せる技法や演出が多く見られます。 背景画像のフルスクリーン表示やフルスクリーンのスライドショーなど様々ありますが、jQueryを使って、ページ最上部（ページヘッダー）にフルスクリーンでのスライドショーを設置し、スクロールすると下から通常のコンテンツが表示される、というページ構成を実装するスクリプトを作ってみたので紹介してみます。 少々言葉では説明しずらいのでまず動作サンプルから。 「jQueryでページ上部にフルスクリーンスライドショーを設置する方法」サンプルを別枠で表示 ページの最上部にフルスクリーンサイズにて画像がクロスフェードで切り替わるスライドショーを設置し、ページをスクロールさせるとページ上部にフルスクリーンスライドショーが固定されたまま下からコンテンツ要素が出現します。 スライドショー全体はブラウザサイズを変化させても
jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法｜BLACKFLAG
以前にテキストを1文字ずつタイプライター風に表示するjQueryプラグインを紹介しましたが、 HTMLもスクリプトもシンプルでもっと扱いやすい構成で同様の動作が実現できないか 試しに作ってみたので紹介してみたいと思います。 まずは動作サンプルから。 「jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法」サンプルを別枠で表示 ページロードするとテキストが 1文字ずつタイプライターのように表示されます。 この動作の全体構成について まずはHTMLから。 ◆HTML <p class="split">jQueryでテキストを一文字ずつ読み込むサンプルテキストです。</p> HTMLでは通常の文章を構成する時と同じように テキストを＜p＞タグで囲ってあります。 サンプルでは＜p＞タグにクラスをつけていますが 特にクラスをつけることが必須ではありません。 もちろん＜p＞タグ以外で
jQueryプラグインを約1000個まとめて紹介しているサイト「Unheap – A tidy repository of jQuery plugins」｜BLACKFLAG
jQueryプラグインをまとめて紹介している記事やWebサイトは数多くありますが 約1000個のjQueryプラグインを収集している「Unheap – A tidy repository of jQuery plugins」が プラグインを探す際にとても活用できそうだったので自分用メモとしてご紹介。
jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法｜BLACKFLAG
Webページ内に並べられた要素の高さを揃えるスクリプトサンプルや jQueryプラグインを今までもいくつか紹介してきましたが、 並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形での スクリプトサンプルを試しに作ってみたので紹介してみます。 まずは動作サンプルから。 サンプル画面でウィンドウサイズを伸縮させてみてください。 「jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法」サンプルを別枠で表示 MediaQueriesでウィンドウサイズによって1行ごとに並ぶ要素数を変えてありますが それぞれ1行ごとの最大の高さに要素の高さが揃うようになっています。 全体構成についてまずはHTMLから。 ◆HTML <div class="listarea"> <ul> <li>このテキストはサンプル用のダミーテキストです。このテキストはサンプル用のダミーテキストです。このテキ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
