今日はSVGデータを使用してアニメーションさせてみましょう。 SVGデータとは何かといいますと、端的に言うとXML形式で書かれた画像です。 SVGの基本 例えばこのSVGデータをテキストで開くとこんなかんじ。 イメージマップのように頂点の座標が数値で記述されています。 テキストで描画情報を持った画像ってところでしょうか。ベクトルデータなので拡大縮小してもボケることはありません。 pointsの部分、頂点の座標をちょっと増やしてやると、簡単に移動させることができます。 ↓ この […]
毎度おなじみ怖くないシリーズです。そろそろ年の瀬ですし、カウントダウンとか作って遊びたくなりますね。 今日はnew Date()を使用して、日付で遊んでみましょう。 日時取得の基本 new Date()を使用すると、現在の日付時刻を取得することができます。 始めの日時の値は「 Fri Dec 04 2015 11:24:37 GMT+0900 」といった形で取得されます。 そこから「年だけ」「年と月だけ」と必要なデータだけ抜き出していきます。 Step1：まず下準備 まずいつ […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 かゆい所に手が届くような、ニッチなjsをどんどん作っていきたいと思います。 「今回はウィンドウサイズに合わせてメイン画像のサイズを変えるjs」を作ります。 ファーストビューは維持したいんだけどメイン画像はウィンドウサイズに合わせて大きく取りたいと要望があった時には最適です。ウィンドウをリサイズした時の処理も入れて行きます。スマホにもちょっとだけ配慮します。 仕組みとしては、全体のウインドウのhei […]
こんにちは、工藤です。 Android4系の標準ブラウザのバグで引っかかったことがありましたので書き留めておきます。 前回：Androidでつまずいたバグについてのまとめ 画像をcssで丸く切り抜ぬくと標準ブラウザでのみ表示が異なる ここ最近よく見る画像の丸い切り抜きです。 ユーザーさんが登録したアイコンなどはcssで切り抜く（ように見せる）のが手っ取り早いですね。 今回は下の画像のように表示させるつもりでcssを設定しました。 IEの古いバージョンなどは今回は置いておいて… […]
今回は素敵なCSS3アニメーションを用意してくださっているサイトをご紹介します。 2016年1月にIE8のサポートが切れる…とのことなのでいつかバンバンつかえる日が来たらいいなと思います。 Hover.cssサイト・デモ 主にボタンにカーソルを当てた時に使えそうなCSSライブラリです。 綺麗にまとめてくださっているので使いたいものがすぐに見つかりそうですね。 CSSのみで実装するボタンデザインやホバーエフェクト 20＋α 目次 サイト・デモ 使い勝手のよさそうなエフ […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は、マウスオーバーで注釈を表示させるjsを作ります。 デモ 実際に動かしてみるとこんな感じになります。 ボタンにマウスを載せてみてください。 デモを別ページで開く ファイル一式ダウンロード Step1：まず下準備 こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascriptのファイル（今回は tips.js とします）を読 […]
ある正円形の要素にマウスオーバーをすると、角丸四角になるような効果をつけたくて、jQueryの.hover()使用してborder-radiusが変化するアニメーションを設定した所、一旦正方形に戻ったうえで角丸にアニメーションしていくという動きをして調査したので記事に。（正しい動きと言えば正しいのでしょうが…） ▽やりたい動き ▽現実 まずマウスオーバーして実際の動きをご確認ください。 デモを別窓で開く 対策しても、ページ表示後の初回のアニメーションのみ未対策の時と同じ動きを […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は、スクロールに合わせてついてくるメニューを作ります。 デモ 実際に動かしてみるとこんな感じになります。 フレーム内を縦にスクロールすると、ナビゲーションが途中から上部に固定になります。 デモを別ページで開く ファイル一式ダウンロード ナビゲーション要素のid、切り替えるスクロール位置の高さがそれぞれ変更できます。 そのままでもお使い頂くこともできますが、下記に動作の解説です。 Step1：ま […]
こんにちは。 今回はスマホサイト作成の時に使えそうなjqueryやJS、CSS3で作成されたプラグインを集めました。 jquery Slidebars サイトへ 設置がかなり簡単にできます。 ドロワーメニューはAndroidで不具合が起きることが多い印象なのですがこのプラグインはそういったことはあまり聞かないですね。 Drawer サイトへ よく使いそうなオプションが豊富で便利。 SlickNav サイトへ こちらも簡単に設置できるのが良いですね。 Off-Canvas Me […]
<!–なぜか無いと動かない–> Webサイトを閲覧している時、右クリックして「ページのソースを表示」とすると、そのサイトのHTMLソースが見ることができます。 全く分からない方の為にものすごくざっくり説明すると、「ここに画像を表示する」「ここにハイパーリンクをはる」などと、Webサイトに必要な機能が全部書かれているんです。 その中で、コメントアウトというメモのような記述があります。 <!– ナビゲーション –& […]
こんにちは、工藤です。 背景を効果的に魅せることができるjqueryプラグインをまとめました。 スライド関係 Skippr サイト 指定した背景いっぱいに画像が表示、スライドされるプラグインです。 軽量でレスポンシブにも対応しているのがうれしいです。 MaxImage2 サイト こちらも背景いっぱいに画像が表示、スライドされるプラグインです。 オプションの種類が豊富で 自動でフェードイン/アウトするスライドショー 矢印付のスライドショー 動画再生 など様々なことができます。 […]
こんにちは。 またほとんど自分用ですがCSS3生成してくれるジェネレーターを整理したくてまとめました。 うった方がいいのは分かりつつ、やっぱり頼っちゃいますよね…。 グラデーション Ultimate CSS Gradient Generator サイトへ 以前からこちらを使用させていただいています。 使い勝手のいいサンプルが揃っています。 CSS Gradient Generator サイトへ 操作性がだいぶシンプルで使いやすいです。 CSS Sample サイトへ グラデー […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は画面サイドにくっついてくる、折りたためるサイドメニューを作りました。 デモ 実際に動かしてみるとこんな感じになります。 デモを別ページで開く ファイル一式ダウンロード 各要素のid、メニューの横幅、ボタンの中身、アニメーションの速さがそれぞれ変更できます。 そのままでもお使い頂くこともできますが、下記に動作の解説です。 Step1：まず下準備 こちらはいつもと同じですね。まず必要なファイルを […]
仕事柄、WEBに関することをプライベートでも聞かれることが多いです。 一番多いのが「WEBサイトってどうやって作るの！？」というものなのですが、説明する際にHTMLソースを見せて「ここに画像を表示して、ここに文章を書いて、って表示の指示を延々と書いていくの」と伝えると、大抵の方が「そっか…」と少し悲しそうな顔をします。 英数記号の羅列を見ると拒否反応を示してしまう方が多く、そこで話が終わってしまいます。 実際にHTMLタグを学ぼうとして他のサイトを見てみるも、何だか難しそうだ […]
システム開発をしていると必ずバグが発生します。 人間がやっている作業なのだから当然と言えば当然ですが、許されるものではありません。 「ちゃんと確認をしているの？」「テストした？」 あまりにバグが多いとこういった物言いで上司や先輩から問い詰められた経験のあるエンジニアも多いのではないでしょうか？エンジニア本人にとってみると確認した「つもり」なのですが、どうして気が付かなかったのだろう、というバグが発生するものです。 システムのテストをしたことのある方なら分かると思うのですが、た […]
こんにちは、工藤です。 今回はパララックス効果を表現できるjQueryプラグイン・スクロールでアニメーションさせるjQueryプラグインについてやそれに関する記事を集めました。 ここ最近はパララックスが１番流行っていた時期の物より、アニメーションの表現がさりげないものが主流なのかなという印象を受けます。 Nikebetterworld Parallax Effect Demo [配布サイト][DEMO]パララックスのプラグインでも代表的なものの1つ、とい […]
毎度おなじみ、[怖くないJavaScript + jQuery]シリーズです。 今回は時間で画像が切り替わるスライドショーを作りました。動作は一番シンプルで、クリックの処理は入っていません。TOPページでイメージ画だけ切替表示したい時に便利ですね。 合言葉は「jQuery こわくない」です。 デモのファイルはこちらからダウンロードできます。 デモ ▼サンプルでは、3枚のスライドがフェードのアニメーションで切り替わります。 別ウィンドウで開く Step1：まず下準備 こちらはい […]
今日は、サイトを訪問したデバイスによってタグを追加するjsを書こうと思います。 タブレットやスマートフォンなど、CSSを追加したい時になんか便利ですね。 合言葉は「jQuery こわくない」です。 デモのファイルはこちらからダウンロードできます。 デモ ▼div（id=”apArea“）にデバイスに応じてテキストが挿入されます。 Step1：まず下準備 こちらはいつもと同じです。まず必要なファイルを読み込みます。 headタグの中に、jQueryと、自 […]
今日はjQueryで、tableのチェック項目などでよくある「全てチェックする」のチェックボックスを作りたいと思います。要素の指定さえ合わせれば簡単に作れます。 合言葉は「jQuery こわくない」です。 デモのファイルはこちらからダウンロードできます。 デモ 実際に動かしてみるとこんな感じになります。 別ウィンドウで開く Step1：まず下準備 こちらはいつもと同じですね。まず必要なファイルを読み込みます。 headerの中に、jQueryと、自分で作ったjavascrip […]
こんにちは、工藤です。 今回はテーブルデザインについて参考にしたいものを集めました。 簡単なようで結構悩んでしまうんですよね・・。 テーブルデザイン Oranges In The Sky http://icant.co.uk/csstablegallery/tables/39.php 名前の通りグレーを基調にリンクにオレンジと青を使ったテーブルです。 こちらのサイトでは右上にあるデザイン名からCSSを参照することができます。 Nimbupani http://icant.co […]
こんにちは、工藤です。 モーダルウィンドウについて調べるがあり、いい機会なのでまとめてしまいたいと思います。 モーダルウィンドウとは？ ちなみにモーダルウィンドウとは図で説明するとこんな感じです。 なんとなく見たことがあります・・よね？詳しい事はwikipediaで。 jモーダルウィンドウ プラグイン lightbox2 http://lokeshdhakar.com/projects/lightbox2/ モーダルウィンドウと言ったらコレかなと思います。 完全に初心者だった […]
こんにちは、工藤です。 今回はjQueryのスライドショーを集めさせていただきました。 ひとえにスライドショーといっても表現がまったく違うのでみてるだけで面白いです。 bxSlider http://bxslider.com/ 「jQuery bxSlider」で検索すると上位に出てくるスライドショーです。 私も何回か使用せさせていただきましたが、レスポンシブ対応しており、様々なオプションが用意されているのが非常に便利なのでスライドの動きに悩んでいるならこれがお勧めです。 F […]
ウィンドウの高さに対して、コンテンツの内容が少ない場合、footerより下の部分が真っ白になってしまう…しかし邪魔だしfooterをfixedにはしたくない。そんな時ってありますよね。 Sticky footerなど他にも手はありますが、内容が動的の場合使えなかったりするんですよね。 そんな時に便利な、コンテンツの高さを自動調整してくれるjsを作ってみましょう。実はとっても簡単なんです。 コンテンツ部以外（headerとfooterなど）の高さが固定であることが条 […]
今日は要素の追加・削除のパターンをご紹介します。 分かりやすいものだけ集めてみました。今回のデモファイルはこちら。 prepend：要素の内部の先頭に追加（子要素） ▼クリックでspanが追加 prepend p 「prepend()」は要素の内部の先頭に()内のタグを追加します。記述はこんなかんじ。 【HTML】 今回はbtn_demoAをクリックした時で処理しています。 demoAとidをつけたdivにpタグを入れ子にしています。idやタグはjsに合わせていれば自由に書き […]
なるべくcssで表現したいなと思うのですが、そういえばIEで使えないんだった…となることがよくあります。 良く使うものでたまに引っかかるCSSプロパティー・セレクタをまとめてみました。 CSSプロパティー border-radius IE8以下で× 指定した要素の角を丸くするプロパティーです。 box-shadow IE8以下で× 指定した要素のまわりにシャドウをつける事ができるプロパティーです。 text-shadow IE9以下で× テキストにシャドウをつける事ができるプ […]
運営会社:株式会社8bit
制作サービス
運営サービス
