【jQuery】ダイナミックな動作がカッコいいスライドショー［Tilted Content Slideshow］の使い方
投稿日：2015年12月21日 更新日：2015年12月21日 CSS, JavaScript 2334文字：約4分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/4786 カッコいい動作のスライドショー［Tilted Content Slideshow］を見つけてきました！ アニメーション部分にCSS3のTransformsとAnimationsを使用した高機能スライダーです。 画像をCSS3の「transform-style:preserve-3d;」でナナメに配置して、スライドショーが切り替わるタイミングで時間差で……と、言葉で説明するのが難しいので、百聞は一見に如かず。まずは公式サイトのデモをご覧ください。 Tilted Content Slideshow : http://tympanus.net/Tutorials/TiltedCo
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版）
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。（改訂版） ウェブページ読み込み時に「フワっ」とした感じのエフェクトでフェードインしながら表示させる方法です。 ここでは「これ以上簡単にはできないよ！」というくらい、ほんの僅かなコードで実装するテクニックを紹介します。 まずは HTML の記述方法から…。と言いたいところですが、今回紹介する方法では何も考えずにフツーにHTMLを書いてしまっても大丈夫です。 スタイルシートも使いません。 すべてをjQueryのコードだけで賄います。 というワケでjQueryの記述方法です。 「fade.js」とでも名付けた JavaScript のファイルを用意して、その中に以下のように記述します。 $('head').append( '<style>body{display:none;}' ); $(window
【Icon】計1001種類のデザインが揃った［Linearicons］が素敵！
投稿日：2015年11月25日 更新日：2015年11月25日 CSS, Font, Icon 2154文字：約4分 ONZE 株式会社 オンズ ONZE https://on-ze.com/archives/4862 このアイコン使いたい！ 合計1,001種類のデザインが揃ったアイコンフォント［Linearicons］が可愛くて素敵です。 基本は有料になりますが、このうち170種類のアイコンをピックアップした無料版［Linearicons Free v1.0.0］も同時にリリースされていますね。 有料版 : Linearicons無料版 : Linearicons Free v1.0.0全アイコンのプレビューはコチラのリンク先からご覧いただけます。 データ形式はウェブフォント（アイコンフォント）用のファイル一式と、PDF版、SVG版の３種類が梱包されています。 Linearicons を
【Font】使い勝手の良いオススメの Google Web Fonts サンセリフ系 × 11選。
今日は、誰でも無料で利用できる Google Fonts の中から、オススメのサンセリフ体のフォントを11個まとめて紹介します。 サンセリフ（仏: Sans-Serif）とは、セリフのない書体の総称である。セリフとは、文字の線の端につけられる線・飾りで、「うろこ」、「ひげ飾り」、「ひげ」とも呼ばれる。旧来のセリフのついた活字書体（セリフ体・ローマン体とも呼ぶ）と区別するために用いられる用語。「サン」とは、フランス語で「〜のない」という意味で、「セリフのない書体」を表している。グロテスク体とも呼ばれる。 Wikipedia サンセリフ体で有名なものでは『Heveltica』や『Gill Sans』や『Futura』などのフォントが挙げられます。 残念ながらこれらのフォントは版権などの事情があり Google Fonts では扱っていません。しかし似たような書体ならウェブフォントで無料で利用す
【jQuery】これだけで完璧に導入できる［Lightbox］の実装方法。
一時期、多くのサイトで導入され大流行した jQuery プラグイン［Lightbox］の使い方を紹介します。 皆様もうご存知でしょうけれど、念のために動作のサンプルを以下のURLに置いておきます。 画像をクリックすると背景が暗くなり、指定された画像がズームして再表示されます。 Lightbox：サンプル・デモ まずは公式サイトより、［Lightbox］のデータ一式をダウンロードしてきます。 Lightbox：ダウンロード ダウンロードした zip ファイルを展開すると、いくつかのフォルダとファイルが解凍されます。 基本的に、使用するのは「js」フォルダの中にある［lightbox.js］と、「css」フォルダの中にある［lightbox.css］、それと「img」フォルダの中の、ベースとなる画像４点（close.png、loading.gif、next.png、prev.png）になります
レスポンシブ対応のjQueryスライダー系ライブラリ × 11選 - ONZE
レスポンシブ・デザインに対応したスライダーやスライドショー系のライブラリをまとめました。ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。オプション設定で多数のエフェクトの中から好みの動作のものを選択できたり、自動スライドやサムネイル表示やフリック入力に対応するなど、そのタイプも様々。 初心者の方でも上級者の方でも、目的に合ったjQueryスライダーを見つけられるはずです。 bxSlider 最初に紹介するのが［bxSlider］です。 設定が簡単で初心者にも扱いやすく、本当に初めてjQueryに触れるなら一番初めに試してみることをお勧めするスライダーです。 ただしカルーセル化するとレスポンシブ機能に不具合があるのが残念なところ。 ダウンロードURL
【jQuery】緊急案件：Google Feed API が廃止になっているので代替案を紹介します。 - ONZE
昨日、2015年12月2日未明より Google Feed API が403エラーを返すようになり、特にニュースサイトを中心とした各方面で混乱が発生しています。けっこう大変な事態のようですね。 未だ公式サイトでもアナウンスが無く、廃止になったのか否かもわからない状況です。 弊社のクライアント様でも『外部サイトのRSSフィードを読込→表示』しているサイトがいくつかありますが、もともと Google Feed API は使用せず、すべてPHPベースでプログラムを組んでいるので被害は皆無。 しかし困っている方々が大勢いらっしゃるようなので、ここで Google Feed API の代替となるテクニックを紹介していきます。 解決策はいたってシンプル。単にjQueryを利用してRSSの情報を取得して、任意のテンプレートに整形して出力させるだけ。 つまり基本的には Google Feed API のと
【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。
【jQuery】iPhone や Android の反応速度向上のために「タッチイベント」を活用する方法。 スマートフォンサイトを作るとき、ちょっとした一手間を加えるだけで、驚くほどユーザビリティーが向上しますよ、というおハナシです。 その一手間とはズバリ、jQuery の「タッチイベント」を活用すること。 タッチイベントとは、その名のとおりスマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことで、以下の４つのタイプの機能が用意されています。 touchstart ： タッチしたときに発生する touchmove ： タッチしたまま動かしたときに発生する touchend ： タッチ状態から離れたときに発生する touchcancel ： タッチ中に電話がかかってきた場合などに発生する（通常は使わない） 具体的にわかりやすいように、ここではスマートフォン用のサイトでよく使
けっきょく、文字コードは何を使うべきか？
コンピューターに疎い方は「文字コード」と言われてもピンとこないかもしれませんが、ハナシは単純です。 コンピューターはすべての情報を『0』と『1』に置き換えて処理しますが、その『0』と『1』の組合せと日本語の文字との対応表が文字コードというワケです。 ネットサーフィンをしていると、ごく稀に文字化けを起こしているホームページに辿り着くことがあります。 これはブラウザーが誤った文字コードを使って表示させたために起きている現象で、原因は多くの場合、『どの文字コードを使っているのか明記していない』ことがほとんどです。 そこで、文字化けを防ぐためにHTMLにどの文字コードを使っているのか記述しましょう…ということになるのですが、そもそも、数種類ある文字コードの中で、どれを選択すべきでしょうか？ …お勧めはズバリ、『UTF-8』です。 UTF-8は全言語（日本語はもちろん、英語、フランス語、ドイツ語、中
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オンズ
【CSS】html に記述した［br］タグを無効にして改行させない方法。