レスポンシブ対応でjQuery不要の高機能スライダー「Swiper」 | Will Style Inc.｜神戸にあるウェブ制作会社
こんにちは、デザイナーの奥田です。 最近フロントエンドでは「脱jQuery」なんて言われていますね。 まだまだjQueryバリバリ書いてますって方もちょっとずつ「脱jQuery」していくとこの先もスキルが活かせると思います。 さて、今回は「もう最近の案件はこれしか使っていないんじゃないか？」というぐらい高機能で便利なスライダーをご紹介いたします。 Table of contentsSwiperの使い方カルーセル表示にするレスポンシブに対応するPC時はグリッド表示、スマホ時にスライドにするサムネイル付きカルーセル表示その他オプションまとめSwiperの使い方まずは普通に使ってみましょう。下記よりファイルをダウンロードするかCDNでの使用でも実装できます。 SwiperCDN CSSとJSを読み込みます。 <html> <head> <link rel="stylesheet" href="h
JavaScript/HTML5でプレゼン用スライドをつくる方法まとめ - Qiita
勉強会で発表資料を作る際などに プレゼン用スライドを作る方法は たくさんあります。 この前、ふとしたきっかけで Reveal.jsを使ってみたところ とても好評だったので、類似のライブラリを 探してみました。 デフォルトのテンプレートから綺麗なものが 多く、すぐに勉強会の発表資料などに 作れるものがたくさんありました。 個人的には ・Impress.js ・Reveal.js ・Jmpress.js 合わせて読みたい 【Tig全まとめ】Gitを自由自在に操るための必殺ツール 【おすすめ】MacのFinderをカスタマイズする魔法のコマンドたち たった一行でブラウザをメモ帳に変える不思議なコード ライブラリ一覧 1. Deck.js Demo http://imakewebthings.com/deck.js/#intro GitHub https://github.com/imakeweb
Reveal.js、Markdown、Githubでスライドを作成する。 - Qiita
PowerPoint2003から2013になってちょっと戸惑いを隠せない。。。 ありきたりなスライドテンプレートもなんか嫌だし。。。 と思っていたところ、markdownでWebスライドが作れることを発見しました。 GithubでWebページを公開する方法を発見、SublimeTextも入れたので、ちょっとWebスライドを作ってみます。 完成サンプル http://budougumi0617.github.io/reveal.js-myMaster/ 作り方 Reveal.jsというJavaScriptライブラリを利用します。 GitHubからreveal.jsのプロジェクトzipをGET index.htmlをテキストエディタで開く。 <div class="slides">タグ内の<section>内容を削除 後述のオプション付き<section>を記載する <section>内にMa
SQLインジェクションについてのスライドを作成した - Kentaro Kuribayashi's blog
社内で、SQLインジェクションについてあらためて原理・原則から議論したいねという風潮がにわかに起こったので、ひとまずは叩き台として僕の方でまとめて皆で議論しましょうというわけで、以下のような資料を作成した。 社内勉強会用の資料なのだけど、僕は別にセキュリティに詳しいわけでもないし、ましてやPHPのことは素人なので、外部の識者にレビューしていただいて、できるだけ正しい知識に基づいて議論できればと思い、まずスライドを先行公開することにした。そうしたところ、Twitter上で多数の識者よりいろいろとご指摘いただいて、少くとも決定的におかしな内容にはなっていないものになったようだ。ありがとうございます。 僕らの職務のひとつに「セキュリティ関連」というものも謳われているので、そのあたりの知識普及・基盤整備についても、仕事のひとつとして行っている。先にも書いた通り、僕自身がその点についてよく理解できて
【動画あり】５分でわかる「LTの作り方とポイント」あるいはウケるプレゼンのコツ - 941::blog
YAPC::Asia とか、勉強会とかの運営とか司会とかをしょっちゅうしている人の視点で書いてみる。 基本的には「伝える」ことが目的なので、必ずしもウケる必要はないんだけど。 LTとは 基本的には技術的なネタをわーっと喋って５分で退場する電光石火のトークのこと。 Lightning Talk （ライトニングトーク）略してLT。 ・利点 ５分という制約があるのでダラダラしない 興味のない話でも５分ならば飽きない ・デメリット とくに無し。あえて言うなら５分のトークを準備するのに１週間かかったりする。 俺調べによると、喋る時間が短くなればなるほど内容が洗練されていくため準備に時間がかかる。 ・歴史 こちらを参照。YAPC発祥。 ライトニングトーク - Wikipedia 構成 基本的にはなんでもOKだが、オーソドックスにはこう ・自己紹介（１０秒くらいでいい、あなたが誰かなんて興味ない） ・ト
40分濃縮 PHP classの教室
PHPカンファレンス関西2012で使用したスライドです。完全な内容は下北沢で開催した際のスライドと動画を御覧ください。
[JS]かなりかっこいいアニメーションを使ったスライドショーを実装するチュートリアル
スライドを単に次々と見せるだけでなく、切り替わる時に3Dのダイナミックでかっこいいエフェクトを与えたスライドショーを実装するチュートリアルを紹介します。 Slideshow with jmpress.js [ad#ad-2] デモ 実装 デモ まずは、そのダイナミックな3Dのアニメーションをご覧ください。 スライドは5枚あり、それぞれアニメーションが異なります。 デモページ：別レイアウト 実装 実装に使用しているスクリプトは先日当サイトで紹介した「jmpress.js」です。 紹介記事はこちら。 広大なカンバスを使って次々にコンテンツをスライドさせるスクリプト -jmpress.js HTML jmpress.jsのイメージは一枚の広大なカンバスにパネルを設置し、それをアニメーションでスライドする感じです。 実装は一枚の広大なカンバスとなるルート（section要素）に、各パネル（div要
impress.jsでド派手なスライドをつくろうぜ！
“HTML5アプリ作ろうぜ！”連載がスタートしました！ デジタルハリウッドの現役アプリクリクリエイター専攻講師が、最近はやりの「HTML5・JavaScriptライブラリ・CSS3・API」の紹介、またそれらを組み合わせた「sampleアプリケーションの紹介と解説」を厳選し執筆していきます。 最近、セミナーでこの「impress.js」を利用する機会が多いのですが、その際に参加者から評判が良いので、まずはこれを紹介します。 impress.jsとは？ CSS3を活用したオープンソース（ライセンスMIT）のプレゼンテーションJavaScriptライブラリです。 対象ブラウザ Safariブラウザが現状では最もスムーズに動作します。一応、Chromeも推奨ブラウザです。 特徴 【1】ド派手なスライド動作 最大の特徴は派手でイケイケなスライド。始めてみた人は必ず見入ること間違いありません。シンプ
jQueryで背景画像をフルスクリーン表示してスライドショーに出来るやつ色々
気が向いたのでメモ。背景に配置した 画像をフルスクリーンで表示して、更 にスライドショー化できるjQueryのプ ラグインとか。さほど数は無いですけ ど・・・使う可能性があるかもなので 備忘録的にまとめておきます。 タイトル考えるの結構面倒くさいので適当になってきました。語彙が中学生レベルですが気にしないで下さい。 さて、フルスクリーンにした背景をスライドに出来るjQueryいろいろです。ほぼ択一っちゃ択一なんですけど・・・ちょっと出来上がりすぎていじりにくいので他もチェックしたい、という事で調べたものを羅列しておきます。触ったこと無いのもあるのでその程度の記事という事で。 Supersized 定番の高機能プラグインです。IE6では動作しません。スマートフォンでも大丈夫っぽい。多数のオプションも用意されており、FlickrAPIにも対応してるくさいです。ライセンスはMIT/GPLのデュア
MacのKeynoteでプレゼンする際に気をつけていること
先日の WordCamp KOBE では、Mac の「Keynote」というプレゼンテーションソフトを使ってプレゼンしたのですが、その際「なつきさんは iPhone をタップしながらプレゼンしてる？」など気になるツイートがあったため、どうやってプレゼンしていたかここで回答させていただきます。 Keynote は、Apple 社製のプレゼンテーションソフトで、Steve Jobs 氏が Mac や iPhone などの新製品の発表の際に使用していることでも有名です。 Mac 版と iPad 版がありますが、ここでは Mac 版について書いています。 どちらも、App Store でダウンロード版を購入 するか、Amazon などで購入できる iWork パッケージ からインストールすることができます。 PowerPoint との違い プレゼンテーションソフトといえば Microsoft の
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
正しい箇条書きスライドの作り方
パッケージslidify - 浅井拓也 研究室用ページ
Slide Transitions and Navigation – RStudio Support
HTML5時代のWebデザイン
cmmntr.com
RPubs - different theme in why slidify
Webデザイナーが読んでおきたい、最近公開されたWeb系のスライド