最新版！あらゆるWebページを作成する時に使える、必要最小限をまとめたHTML5のテンプレート
HTML5でWebページを作成する時のベースになる必要最小限の構成で実装されたHTML5のテンプレートを紹介します。 スニペットに登録しておくと、便利ですね。 HTML5 Boilerplate -GitHub イラスト: Girls Design Materials HTML5のテンプレート HTML5のテンプレートの解説 HTML5のテンプレート HTML5 Boilerplateのテンプレートを日本語化しました。 ライセンスはMITライセンスで、商用利用、修正、配布、サブライセンス可です。 <!doctype html> <html class="no-js" lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>タイトル</title
[JS]シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装するスクリプト -Unslider
シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装する超軽量のjQueryのプラグインを紹介します。 キーボード操作やスワイプ操作、そしてマニュアル操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 オープンソース ライセンスは「WTFPL」で、個人・商用問わずどんな風に使ってもOK。 超軽量 スクリプトは6KBで、超軽量です。 実装は簡単でクリーンなHTML 数分で実装でき、非常にシンプルでValidなHTML。 スライドの方向は多彩 通常の水平方向は左右どちらにも順向きで対応、垂直方向のスライドも可。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートし
![[JS]シンプルなHTMLで、レスポンシブ対応のかわいいデザインのスライダーを実装するスクリプト -Unslider](https://cdn-ak-scissors.b.st-hatena.com/image/square/08bc7be458afe18c7e32cf5b8ed94c85bcfb1cd0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201504%2F2015120302-03.png)
各コンテンツがカーテンを上げるように表示される縦長ページを簡単に実装できるシンプルなテンプレート -OnePageR
div, section要素で配置したパネルをブラウザいっぱいに表示にし、スクロールするとカーテンを上げるようにパネルを次々に表示させるスクリプトを使ったテンプレートを紹介します。 キーボード操作、タッチ・スワイプ操作対応、ナビゲーション装備、コードが非常にシンプルなので縦長ページのテンプレートとして活躍する優れ物です。 デモページ：スマホで表示 OnePageRの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/main.css"/> </head> <body> ... コンテンツ ... <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
FICC | デジタルエージェンシー
LEADING BRANDS TO DIGITAL WE ARE A DATA-DRIVEN MARKETING AGENCY FICCはデータに基づく論理的なマーケティングを提供するデジタルエージェンシーです。 消費者に価値あるコンテンツと体験を届けるため、戦略立案から施策実行まで一貫して提供しています。
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 2013-03-14 / 2014-03-12 Webサイトの表示速度を気にすると、CSSやJavaScriptのminify、gzip、CSS Sprite、画像の最適化などの面倒な作業が発生します。 Grunt.jsとは？ Grunt.jsは、サーバーサイドJavaScriptのNode.jsを使用したCUIのビルドツールです。 タスクを設定しておき、それらを自動化します。 コマンドプロンプトやターミナルなど、いわゆる「黒い画面」を使います。 Grunt.jsの現在のバージョンは0.4.1です。 バージョンが0.3から0.4になったことで、大きく仕様が変わりました。 Grunt.js v0.4ではgrunt-cliをインストールしてプロジェクトごとにGruntやプラグインをインストールして使用します。 プラグイ
JQuery版LightboxをMT5.1に導入 - 今桐彰宏::LABO
MovableTypeで本文に画像を表示させようとすると、上のように画像そのものを本文に表示するか、右のように本文にはサムネイルを表示してクリックされたら元のサイズの画像を表示する方法があります。 試しに右のサムネイルをクリックしてみてください。 このサムネイルには別ウィンドウで画像を開くようにしてありますが、通常は画像のみが表示されてブラウザの戻るボタンでしかブログに戻れません。 これはイマイチ。 とは言え、できるだけ大きなサイズで見ていただきたい画像や、画像がたくさんある時は、サムネイルで表示しておいた方がページが見やすくなります。 そこで導入したのがLightbox。 画像をカッコ良く表示してくれるエフェクトのプラグインです。 以前にもprototype.jsベースのLightboxをこのブログにも導入していたことがありますけど、MT5にアップグレードしてテーマを新しいものに変えた時
enchant.js - A simple JavaScript framework for creating games and apps.
enchant.js is … カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワークです。 2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。 オープンソース (MITライセンス) で、無料で利用できます。 ドキュメント・書籍・チュートリアルサイトが充実しています。 たくさんのプラグインで機能を拡張できます。 UEI/ARC を中心としたメンバによって開発・メンテナンスされています。 プログラミング教育のためにも利用されています。 Features オブジェクト指向: 表示されているものはすべてオブジェクトです。 マルチプラットフォーム: iOS, Android, Mac, Windows のブラウザで動作します。 Windows 8: Windows 8 対応のHTML5アプリケーションを開発できます イベント駆動
IE8 で実装された Selectors API とは何か？ - IT戦記
はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ 簡単に説明すると getElementsByTagName や getE
[JS]ブラウザの種類を検出して、CSSのセレクタで実装できるスクリプト | コリス
jQuery Browserは、スクリプトでブラウザの種類を検出して、CSSのセレクタとして実装できるスクリプトです。 jQuery Browser jQuery Browserは、ブラウザのもつplatformやuserAgentから、OSやブラウザの情報を取得し、セレクタを利用して、ブラウザごとのスタイルシートを適用することが可能です。 jQuery Browserでのスタイルシートの記述例 <textarea name="code" class="css" cols="60" rows="5"> div#browser-test{ border: 2px solid #000; padding: 10px; } ■Internet Explorer用 div#browser-test.msie{ background-color: #f00; } ■Firefox用 div#brow
JavaScriptライブラリの先駆け「prototype」を勉強しなおすサイト20
twitter facebook hatena google pocket 現在JavaScriptライブラリは数多くリリースされていますが、それらのさきがけとなったのは「prototype」でした。 またNASAのサイトでも使用されているように、その実力は広く認められています。 今回はprototypeの価値を見直し、勉強できるサイトを紹介します。 sponsors Reference ・prototype.js リファレンス（v1.4.0,1.5.x,1.6.0） ・prototype.js の開発者向けメモ：（v1.5.0） ・prototype.jsリファレンス HowTo / Review ・第１回：Prototypeライブラリの内部 ・いまからはじめるPrototype.js ・第１回：Prototype.jsを使う準備 ・Prototype.jsとは何か ・Prototype
[JS]パネルをフェードや加減スクロールで切り替えるスクリプト -wSide
wSideは、パネルの切り替えにフェードや加減スクロールなど多彩なアクションを実装するスクリプトです。 wSide, plugin jquery wSideはjQueryのプラグインで、動作にはjquery.jsが必要です。 切り替え時の多彩なアクションは、デモページを参照ください。 シンプル デモ 縦方向・横方向への加減スクロール、フェード エフェクト付き デモ 反動付きスクロール、縦横斜めのスクロール アドバンス デモ CSSを利用して、さまざまな効果を狙ったパネルの切り替え
【連載】いまからはじめるPrototype.js (1) Prototype.jsの概要と$で始まるメソッド | エンタープライズ | マイコミジャーナル
Prototype.jsとはなにか Prototype.jsは、Sam Stephenson氏を中心とするチームによって開発されているAjax対応JavaScriptライブラリだ。単体でもAjaxian.comの2006年と2007年の調査で最もよく知られたAjaxフレームワークに選ばれるほどの人気を得ているが、実はWebアプリケーション・フレームワークRuby on Railsのプロジェクトで開発されているプロダクトであり、同フレームワークに同梱されているため、Ruby on Rails経由で使用されるケースも多い。 ライブラリはMITライセンスで公開され、ドキュメントはクリエイティブ・コモンズ(Creative Commons)ライセンスのAttribution-Share Alike 3.0で公開されている。詳細はライセンスのページで確認していただきたい。 これから6回にわたって、こ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
モバイルアプリの為のUIフレームワーク・「Touchstone.js」