作成者別アーカイブ: Coding_team

jQueryで外部にあるHTMLを読み込む

tecmemo1609

こんにちは、ウェブラボ技術メモです。 今回は、jQueryで外部HTMLの指定した部分を読み込んでみたいと思います。 具代的には、外部にあるお知らせ一覧ページから、指定した件数だけ読み込んで表示するDEMOを作ります。 外部にあるお知らせ一覧ページは以下のようなものを作りました。 →お知らせ一覧ページ|外部HTML ■外部ページの読み込みたい部分のHTML …続きを読む

  • このページを共有する

Flexboxでコンテンツを入れ替える

tecmemo1608

こんにちは、8月ももうすぐ終わり、宿題を溜め込んだ子どもたちには憂鬱な時期ですね。 混雑しない9月にしたり顔で夏休みを取ろうと企てているコーダーがお送りします。 技術メモです。 今回はCSS3のFlexboxについて少し紹介したいと思います。 Flexboxとは、要素のサイズが不明なものでも変化するものでも、柔軟なレイアウトを実現できるCSS3の新しいレイア…続きを読む

  • このページを共有する

コードを公開共有できるWebサイト「CodePen」を活用してみる

tec1607_01

こんにちは、ウェブラボ技術メモです。 今回は、HTML、CSS、Javascriptなどの様々なコードを公開共有できるWebサイト「CodePen」を活用してみたいと思います。 ■CodePen http://codepen.io/ このWebサイトの便利なところは公開されているコードをその場で編集できたり、Webサイトに埋め込んだりすることができます。 ア…続きを読む

  • このページを共有する

instagramの写真をWebサイトに埋め込む

tec1606_02

こんにちは!ウェブラボ技術メモです。 みなさんはinstagramを利用した事はありますか? instagramとは写真や動画を撮影、加工、共有できるサービスの事で、今もっとも人気のあるSNSといっても良いでしょう。 今回はいつもとは少し趣向を変えて、instagramで投稿した写真をページに埋め込む方法をやっていきたいと思います。 埋め込みにあたって、ここ…続きを読む

  • このページを共有する

写真をちりばめた感じのギャラリーを実装する

1605tec

こんにちは、ウェブラボ技術メモです。 今回は、一味違ったギャラリーを実装できる「Photopile JS」を実装してみたいと思います。 まずはどんなものなのか作成したDEMOをご覧ください。 写真をちりばめたような変わったもので、ドラッグ&ドロップで見たい画像を探すような感じですね。 しかもリロードするたびにランダムで画像が配置されます。 一見すると導入が大…続きを読む

  • このページを共有する

白黒画像をマウスオーバーでカラーに

1604tec

こんにちは。ウェブラボ技術メモです。 画像のマウスオーバー時のエフェクトはこれまでもいくつか紹介してきましたが フォトギャラリーなどにぴったりなエフェクトを今回はご紹介します。 まずは下記ページからファイルをダウンロードします http://gianlucaguarini.github.io/jQuery.BlackAndWhite/ 1.外部ファイル読み込…続きを読む

  • このページを共有する

簡単にフリップコンテンツを実装する

memo1603

こんにちは、ウェブラボ技術メモです。 今回は簡単にフリップコンテンツを実装できるプラグイン「jQuery.Flipster」を紹介したいと思います。 フリップコンテンツと聞くと導入に敷居が高そうに聞こえますが、全然そんなことはありません!!すごい簡単に実装できてしまうんです!! では早速実装していきます。 プラグインは下記よりダウンロードしてください。 ・G…続きを読む

  • このページを共有する

レイアウトを二分割してスライドさせるプラグイン

multiscroll

こんにちは。 ウェブラボ技術メモです。 今回は少し動きのあるWebサイトで使えそうなプラグインをご紹介します。 どんなプラグインか、説明するより見て操作してみるのが一番でしょう。 ということで、まずはデモをご覧ください。 レイアウトが左右に分割され、スクロールすると別方向にコンテンツがスライドしていますね。 何か対比したいものを左右に並べても良いでしょうし、…続きを読む

  • このページを共有する

印刷用CSSを使わずに特定の要素のみを印刷する

印刷用CSSを使わずに特定の要素のみを印刷する

こんにちは。 第20回目ウェブラボ技術メモです。 今回は特定の要素のみを印刷するプラグイン「printThis」を紹介したいと思います。 普段なら特定の要素のみを印刷する場合には、その印刷箇所に応じたCSSを作らなければいけません。 しかも、印刷したい箇所が同一ページ内に複数ある場合にはかなり面倒な処理が必要となります。 ですが、このプラグインを使えば、もう…続きを読む

  • このページを共有する

画像をパズルにしてくれるプラグイン

santa

こんにちは。 第19回目になりました。 クリスマスですね! クリスマスと言えばサンタですね!! サンタといえば、パズルですね(?) ということで、画像をパズルにしてくれるプラグインを紹介します。 jqPuzzle – Customizable Sliding Puzzles with jQuery http://www.2meter3.de/jqPuzzle…続きを読む

  • このページを共有する