HTML5, CSS3, jQueryを使用したフロントエンド開発用のフレームワーク -G5 Framework
CSSのキャッシュ対策 クロスブラウザ対応の角丸、ボックスシャドウ、不透明 ショートハンドCSS、再利用可能なclass ページ下部に固定表示されるSticky Footer CSS（Reset関連） リセットはHTML5ベースのEric Meyer's Reset Reloaded フォントのノーマライゼーション Webkit系ブラウザのフォントのスムージング フォーススクロールバー ラベルの一列化 クリック可能なインプット要素 スクリーンリーダー対応 IE7のイメージリサイジング 印刷時のスタイル X(HTML) クリーンなコード構造 コンテンツ幅は940px F型レイアウト 古いバージョンのIEからイメージツールバーの削除 最新のIEのレンダリングエンジン jQuey 1.5.2ベース（1.4.4も可） ページ上部へスムーズにスクロール HTML5のプレースホルダー機能 ナビゲーショ
コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ＆チュートリアル:phpspot開発日誌
How to Build a Kick-Butt CSS3 Mega Drop-Down Menu | Nettuts コンテンツがたっぷりつまって使いやすそうなドロップダウンメニュー実装デモ＆チュートリアル。 ドロップダウンメニューというとテキストリンクだけの羅列をイメージしがちですが、次のようなリッチなドロップダウンを実装するデモです。 ソースのDLが可能なのでカスタマイズして使うことが出来ます。 画像なんかも入ってリッチなドロップダウン。 ５カラムから構成される複雑なレイアウトもタブの中に入っちゃいます。 ４カラム。シンプルだけどカテゴライズされていて押しやすい。 ドロップダウンメニューの大項目は必要最小限にして、下位でこういう感じに広げれば、基本のシンプルさは保ちつつ、沢山ページのあるサイトであっても比較的迷うことないナビゲーションを実現できるのかも。 関連エントリ ドロップダウン
Polaroid Photobar Gallery with jQuery | Codrops
In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop […] In this tutorial we are going to create an image gallery with a Polaroid look. We will have albums that will expand to sets of slightly rotated thumbnails that pop out on hover. The full image will slide in from the bottom once a th
コンパクトでクールなニュース表示ウィジェット実装デモ＆サンプル:phpspot開発日誌
Compact News Previewer with jQuery | Codrops コンパクトでクールなニュース表示ウィジェット実装デモ＆サンプルが公開されています。 次のようなクールなUIでニュースを表示することが可能。 自サイトのニュースや、話題のニュースなんかを表示させても面白そうです。 アニメーションもいい感じで動きます。 jQueryとCSS3を使ってデザインされており、サイトの解説記事を読むことで勉強にもなります。 関連エントリ jQueryとCSS3で作るカラフルなスライダーウィジェット 画像やHTML、動画等何でもスライドできちゃウィジェット実装jQueryプラグイン「Sudo Slider」 キャンバスを使ったお絵かきウィジェットが実装できるjQueryプラグイン「DrawBox」 PHPで作るメッセージが流れるTwitterウィジェット クールなデジタル時計ウィジ
jQueryとCSS3、HTML5でここまで出来るホバーインタフェース:phpspot開発日誌
WanderWall ? A jQuery, CSS3 & HTML5 Hover-Based Interface | AddyOsmani.com | Where User Interface Ideas Grows jQueryとCSS3、HTML5でここまで出来るホバーインタフェース。 jQueryで様々なことが出来るようになっているのはご存知だと思うのですが、更にCSS3とHTML5も組み合わせるともっとすごいよ、という１つのデモです。 まだまだインタフェースは進化するのだな、という可能性を感じるものになっているので一回見ておいたらよいかも。 WanderWallのデモ とにかく実際にHTML5対応のブラウザで見てみもらうのが一番分かりやすいです 上のメニューにカーソルを合わせると画面がアニメーションしながらクールに切り替わります。 HTML5ブラウザがデフォルトになり、こうした技
AppleのRetinaディスプレイの説明風エフェクト実装jQueryサンプル。:phpspot開発日誌
Apple-like Retina Effect With jQuery ? Tutorialzine AppleのRetinaディスプレイの説明風エフェクト実装jQueryサンプル。 Retinaの説明のような虫眼鏡で拡大したようなエフェクトをCSS+jQueryで実装するサンプルです。 次のように、マウスのカーソル位置が拡大されます。 デモページを見てみましょう 既成のプロダクトがあって、ディテールを見せたいような場合に使えるUIになってますね。 アイデア次第で面白いことができるかも。 関連エントリ 画像をスムーズに拡大できるjQuery版FancyZoom 特定ブロックの文字のみ拡大縮小できる便利機能実装jQueryプラグイン「fontScaler」 マウス位置を拡大して表示できるjQueryプラグイン「zooma」
Google Maps Slider | CSS-Tricks
Get affordable and hassle-free WordPress hosting plans with Cloudways — start your free trial today. Google Maps has a JavaScript API now in it’s third version. I remember playing with some version of the API back in v2 and thought it was kinda cool but a bit obtuse. For one thing, v3 no longer requires applying for an API key which is nice. I’m sure it’s partly me getting better at JavaScript, bu
[CSS]画像に美しい角丸とボックスシャドウを適用する方法
img要素で配置した画像にCSS3の角丸とボックスシャドウを適用をすると、Firefoxで角丸が反映されなかったり、Webkitブラウザでボックスシャドウが欠けたりします。 これを解消するCSSのTrickを紹介します。 CSS3 Rounded Image With jQuery デモページ FirefoxとWebkitブラウザ（Safari）のそれぞれにCSS3の角丸とボックスシャドウを適用すると、上記のように美しく表示されません。 それを下記のように美しく適用されるようにします。 角丸とボックスシャドウをこういう風にしたい 左：角丸と外側にシャドウ、右：角丸と内側にシャドウ CSS3で素直にスタイリング Firefoxでは角丸が適用されず、Safariではボックスシャドウが適用されません。
MacOS X風のJavaScriptオフでもなんとか動くドック風UI実装サンプル:phpspot開発日誌
Mac-like icon dock (v2) - using jQuery - JavaScript/CSS Projects - APL Web Development MacOS X風のJavaScriptオフでもなんとか動くドック風UI実装サンプルが公開されています。 JavaScriptがONであればjQueryでスムーズなアニメーションをしながら動かすこともできるのですが、CSSを使ってオフでも動くみたいです。 JavaScriptを使わない環境でもDock風にしたいという場合に使えそうですね。 XHTMLとCSS, jQueryで実装されています。 関連エントリ prototype.jsでMacOSXのDock風ＵＩを作るJavaScriptライブラリ 超絶クールなMacOS X風ドックメニュー「CSS Dock Menu」 JavaScriptでMacOS XのDock機能
CSV形式のデータを簡単にテーブルに出来るjQueryプラグイン「csvtotable」:phpspot開発日誌
jquerycsvtotable - Project Hosting on Google Code CSV形式のデータを簡単にテーブルに出来るjQueryプラグイン「csvtotable」 DBから取り出したようなCSV形式のファイルを読み込んでテーブルにしてくれるプラグインです。 単にCSVのファイルを出力すれば、<table><tr><td> といった面倒な処理を書かずにテーブルを構築出来てしまうので非常に便利です。 album,artist,price "lateralus","tool",13.00 "aenima","tool",12.00 "10,000 days","tool",14.00 "down in it","nine inch nails",3.00 "broken","nine inch nails",6.00 出力した場合は次のようなテーブルになります。 初期化
チェックボックスでアイテムを選んだ後のアクションをスムーズに選べるナビゲーション実装チュートリアル:phpspot開発日誌
チェックボックスでアイテムを選んだ後のアクションをスムーズに選べるナビゲーション実装チュートリアル 2010年06月14日- Sliding Checkbox Actions Menu with jQuery | Codrops チェックボックスでアイテムを選んだ後のアクションをスムーズに選べるナビゲーションをjQueryで実装するチュートリアルです。 チェックボックスが多数あって、削除なのか、OKなのかというアクションを複数選ぶようなインタフェースがある場合は参考にしてみるとよさそう。 なかなかカッコよくて合理的なナビゲーションになっています。 沢山チェックボックスがあるとして、ページの上部にアニメーションしながらナビゲーションメニューが追従してくれます。 スキンのCSSがなかなかカッコよくていい感じです。カッコいいだけではなくて、機能性にも優れています。 左部分にはチェックしたアイテム
jQueryによってカスタマイズされたCSSボタン２０:phpspot開発日誌
20 Awesome jQuery Enhanced CSS Button Techniques - Speckyboy Design Magazine jQueryによってカスタマイズされたCSSボタン２０としてエントリがあがっていたのでご紹介。 ボタンデザインのサンプル集として覚えておけばかなり使えそうなサンプル集になってます。 ボタンでクリック率は大きく変るということもあるので、クリック率を高めたい場合はこだわってみるとよいかも。 関連エントリ iPhoneのON/OFFスイッチっぽいcheckbox、radioボタン実装jQueryプラグイン「LightSwitch」 綺麗にデザインされたCSS3ボタンのまとめ PhotoShopで美しいボタンを作るチュートリアル39個 CSS3なボタンをWEB上で作れる「Button Maker」
jQueryとCSS3を使ったカラフルなレーティングシステムのサンプル:phpspot開発日誌
jQuery quickie: Colourful rating system with CSS3 jQueryとCSS3を使ったカラフルなレーティングシステムのサンプルが公開されています。 点数によって色を変え、アニメーション表示するもので、視覚的にわかりやすい投票のUIが作れますね。 動きをみたい方は以下のムービーでも見ることができます。 こうした投票のUIとしては★が一般的ですが、こういうUIも慣れるとなかなか使いやすそうですね。 関連エントリ jQueryのAjax機能を使った投票システムのサンプルプログラム reddit風のGoodかBadの投票機能実装サンプル Ajax+PHP+MySQLな投票ウィジェット jQueryとPHPでダイナミックな投票スクリプトを作成
CSS3を使った凄いアニメーション集４７:phpspot開発日誌
CSS3を使った凄いアニメーション集４７ CSS3を使った凄いアニメーション集がまとまったエントリが公開されています。 注意点としてCSSだけで実現しているわけでなく、jQueryなども使っている部分があります。 ただ、こういうことも出来るのか、という物が沢山で見ていて楽しく学習できます。 CSS3/jQuery Clock 一見Flashかと思えるような綺麗な時計のサンプル Multiple 3D Cubes with animation using CSS 3Dのキューブがなめらかにアニメーションします。 CSS3 Matrix Animation マトリックスアニメーション OS X Dock Mac OS X風になめらかに動作するドック 今の時期だと、CSS3で出来ることはまだ出尽くしていないと思うので、驚きのエフェクトを作れば世界をワッと驚かせることが出来るかもしれませんね。
[JS]Twitterのように残りの文字数をカウント表示するスクリプト -charCount
TwitterのUIのように、入力できるテキストの残りの文字数をカウントして表示するスクリプトをcss globeから紹介します。 Simplest Twitter-like dynamic character count for textareas and input fields デモページ 上記デモページではデフォルト版とカスタム版の二種類があり、デフォルト版は残りの文字数をカウントして表示し、カスタム版は設定した残りの文字数を超えると表示が強調されるようになっています。 スクリプトのオプションでは入力可能な文字数、強調表示する文字数の設定と、カウンターを配置する要素やクラス名やテキストデータを設定できます。 charCountはjQueryのプラグインのため、実装にはjquery.jsが必要です。
FullCalendar - JavaScript Event Calendar
npm install @fullcalendar/angular import { Component } from '@angular/core' import { CalendarOptions } from '@fullcalendar/angular' @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] }) export class AppComponent { calendarOptions: CalendarOptions = { initialView: 'dayGridMonth', events: [ { title: 'event 1', date: '2019-04-01' }, { title: 'e
そのまま編集が可能なテーブル実装用jQueryプラグイン「Zentable」:phpspot開発日誌
そのまま編集が可能なテーブル実装用jQueryプラグイン「Zentable」。 次のように、クリックでその場で編集できるテーブル実装用のjQueryプラグインです。 以下のような特徴があるようです。 ajaxによるデータ読み込み マウスホイールやキーボードによる操作 カラムやテーブルのリサイズ機能 並び替え、フィルタ機能付き ツールチップ機能付き コンテンツにHTMLを入れることも可能 CSSによるテーマデザインが可能 以下のエントリを参照してください。 Zentense: Zentable 関連エントリ スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」 わずか2.5KBでテーブルにソート機能を提供する「TinyTable」 テーブルの列でソートするJavaScriptライブラリ
Appleのようなデザインをするためのコーディングチュートリアル15 – creamu
Appleのサイトのような、かっこいいインターフェースを実装したい。 そんなあなたにおすすめなのが、『15 Incredible Apple Webdesign Style Coding Tutorials』。Appleのようなデザインをするためのコーディングチュートリアル集です。 かなりかっこいいのが揃っていますよ。 A Beautiful Apple-style Slideshow Gallery With CSS & jQuery Appleの製品紹介で使われているような、スライドショー。jQueryで動作し、PHPやDBは必要ない Apple style Accordion Menu Appleのサイドバーで使われているような、アコーディオンメニュー How to: Recreate apple.com menubar Appleのグローバルメニューはデザインがよく、ソースも綺麗。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HtmlDrive - Free Dhtml scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library
動きがかわいいcss3+jQueryのコンテンツスライダー・Pretty Simple Content Slider - かちびと.net