静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に
静的サイトジェネレータ「Astro 2.0」正式リリース。新機能「Content Collections」で大量Markdown対応、「Hybrid Rendering」で静的と動的ページの混在可能に オープンソースで開発されている静的サイトジェネレータ「Astro」の最新バージョンとなる「Astro 2.0」が正式にリリースされました。 Astro 2.0 – our most exciting release yet!https://t.co/FPb5rBTRPT — Astro (@astrodotbuild) January 24, 2023 Astroは、ReactやVue、Svelte、Alpine.js、TypeScriptなどのさまざまなフレームワークやライブラリに対応した静的サイトジェネレータです。 ビルド時にWebサイト全体のHTMLが生成され、しかもそのHTMLには全
JavaScriptで水や波、パーティクル等、ふわふわゆらゆら系の動きを表現 | Webクリエイターボックス
2018年8月6日 JavaScript, jQuery Webサイトのアクセントに、ちょっとした動きをつけたい時ってありますよね。一から作り込むのは大変ですが、プラグインを使えば意外と簡単に実装できますよ。夏らしい涼し気なデザインになりそうです。サンプルがうまく動かない時はデモ画面右上の「EDIT ON CODEPEN」をクリックして別タブで表示してみてください！ ↑私が10年以上利用している会計ソフト！ wavify See the Pen wavify Demo by Mana (@manabox) on CodePen. GitHub wavifyはjQueryのプラグイン。ふよふよと動く波を表現できます。jQueryとTweenMax、wavifyのファイルを読み込み、SVGコードを用意すればOK。 HTML <body> コンテンツ ・・・ <!-- SVG --> <svg
Backbone.jsでつくるMVPなUIパターン【タブ】 | DevelopersIO
今回はBackbone.jsを使ってタブUIを作ってみたいと思います。デザインはTwitter Bootstrapをつかって以下のようにしました。 世界的に名高い企業の名前が並んでいますね。 デザインはhtmlを仮組みしてBootstrapで既にできていることにします。（本題と離れてしまうので…すみません＞＜） ボタンの部分に active というクラスをつけると選択中のデザインに変わり、 内容の部分におなじく active というクラスをつけると display: block; となり表示される仕組みです。 すべてactiveな状態 すべて非activeな状態 htmlはこちらです <div id='ui-tab'> <ul class='nav nav-tabs'> <li class="active"> <a href="#apple">Apple</a> </li> <li> <a
HTML5のCanvasに描かれる「アートスクリプティング」とにかく美しいJavaScript表現のまとめ28個！
動くぞ！きれいだぞ！ ﾍ(･_･ﾍ) とにかく痩せたい、HTMLファイ部のほんだです。 jsdo.it、nakamap、Paberish、HTML5実力テストといった自社運営Webサービスの HTML5エンジニアを担当している者です。 jsdo.it、ユーザー数 5万人突破！ 手前味噌ですが、このたび弊社運営のHTML5コード共有コミュニティ「jsdo.it」が、 ユーザー数 5万人を突破しました！（わーい！） 今回の記事では、jsdo.itのユーザー5万人を記念して、 HTML5 Canvas に芸術的な動きを表現しているJavaScriptコード「アートスクリプティング」を特集します！ あまり一般的ではないようですが、「アートスクリプティング」という言葉でくくってみました。 Canvasアートスクリプティング特集！ 説明不要！ 気になったコードは是非のぞいてみてください！
[JS]ページ全体をダイナミックに横にスライドし、コンテンツを表示するスクリプト -PageSlide
デモ PageSlideの使い方 外部ファイル スタイルシートをhead内に記述します。 <link rel="stylesheet" type="text/css" href="jquery.pageslide.css"> ページの下（</body>の上）にスクリプトを記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript" src="jquery.pageslide.min.js"></script> JavaScript PageSlideさせる要素を指定します。 <script type="text/javascript"> $('a').pa
jQuery UI Bootstrap
A preview of the jQuery UI Bootstrap themejQuery UI Bootstrap A Bootstrap-themed kickstart for jQuery UI widgets (v0.1) Welcome! This is a live preview of new the jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter's Bootstrap to jQuery UI widgets. With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter
多彩な表現をご覧あれ。JavaScriptによるデータビジュアル化ライブラリ·JavaScript InfoVis Toolkit（JIT） MOONGIFT
JITはJavaScriptを使ったデータビジュアル化ライブラリです。 JavaScriptを使ってWeb上でデータを多彩にビジュアル化するライブラリがJavaScript InfoVis Toolkit（JIT）です。その多彩な表現をご覧ください。 積み上げのエリアグラフです。表示の際にはアニメーションが実行されます。 実際のコードです。 棒の積み上げグラフです。 横向き、2Dのグラフです。 関連グラフです。マウスで動かせます。 マウスオーバーで説明が表示されます。 こんなグラフもあります。 星形。格好いいです。 カスタマイズにも多様に対応しています。 容量の表示などによく利用されるツリーマップです。 こちらもパターンが色々用意されています。 グラフを組み合わせたパターンです。 こんな表現も可能です。 派生していくアニメーションが格好いいです。 円グラフです。アニメーションやマウス操作に
Webデザイナー・開発者向けの３２個のチートシート集まとめてみた。
デザイナー向けのチートシートまとめ カラーシート Color Combination Cheat Sheet さまざまな色の基本原則がわかるカラーチートシートです。 使いたい色を直感的に選んで、その色のコードを調べることができます。 オンラインシートなので、ブックマークに保存しておくとすぐに調べられます！ Web Designer Color Reference Hexagon Mouse Pad Webデザイナー向けのカラーチートシートです。 拡大するとそれぞれのカラーのコードがわかります。 色彩バランスを把握しやすいので、デザイン時に重宝します。 ウェブ制作者向けのチートシートまとめ HTMLのチートシート HTML5タグ★チートシート HTML5のチートシートです。 かなり詳細にまとめられているので、辞書のように使うこともできます。 印刷して参照するのが向いているので、すぐに確認で
スマートフォンサイトの作成術 - 大川洋一
2011年4月2日に開催されたPHPカンファレンス関西で使用した「スマートフォンサイトの作成術」のスライドです。Read less
[JS]これFlashじゃないの？ってなるナビゲーションを実装するjQueryのチュートリアル
軽快なアニメーションが心地よいナビゲーションを実装するjQueryのチュートリアルを紹介します。 タイトルにある通り、Flashは使わないで実装されてます。 Animated Content Menu with jQuery デモページ [ad#ad-2] まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。 デモページ 実装 HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。 HTML：背景 背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 <div id="ac_background" class="ac_background"> <img class="ac_bgimage" src="images/D
jQueryMobileを使ってのスマートフォンサイトの構築メモ at HouseTect, JavaScriptな情報をあなたに
Captcha security check hisasann.com is for sale Please prove you're not a robot View Price Processing
Google Calendar風に使えるカレンダー実装jQueryプラグイン「jquery-frontier-calendar」:phpspot開発日誌
jquery-frontier-calendar - Project Hosting on Google Code Google Calendar風に使えるカレンダー実装jQueryプラグイン「jquery-frontier-calendar」がGoogle Codeにて公開されています。 広がるカレンダーをクリックで簡単に予定を追加し、次のように表示できます。ラインをクリックすれば予定が分かったり、ラインをドラッグ＆ドロップして予定をずらせたりすることが可能。 背景画像を指定したりすることも出来ます。 他にも同様のライブラリはありますが、仕様によって使い分けるとよさそうですね。 関連エントリ これで自前でGoogleカレンダーを持てる！jQuery＆PHPで実現されたプログラム GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calend
jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル:phpspot開発日誌
Moleskine Notebook with jQuery Booklet | Codrops jQueryでリアルな本をペラペラめくるＵＩ作成チュートリアル。 デザインの美しさも素晴らしいのですが、アニメーションしながらめくれる感じもちゃんと出てるところがすごいです。 デモページ jQueryベースというのはあまり見たことがなかったのですが、これを参考に作れそうですね。 CSS3なんかも使われているので、総合的に学習できる資料として役立ちそうです。 関連エントリ Flashで本をペラペラめくる感じのUIを実装する「Dynamic Page Flip v2」 Flashで本をペラペラするUI実装いろいろ
あなたのWebを入力しやすくするjQueryプラグイン10選
あなたのWebを入力しやすくするjQueryプラグイン10選：CSSの書き方も分かるjQueryプラグイン実践活用法（終）（1/5 ページ） jQueryと、そのプラグインの使い方を、UI効果（エフェクト）のテーマごとに紹介する連載。jQuery/JavaScript/HTMLコードだけではなく、CSSの書き方も解説することで、より実践的にjQueryプラグインを使うための参考ドキュメントになることを目指しています。 前回の「画像や動画を綺麗に回転/拡大するjQueryプラグイン」では、イメージを回転させたりズームインする「jCarousel」「Zoombox」プラグインの使い方を解説しました。今回は、フォームを使いやすくするための各種プラグインを、以下のようにチェックボックス／ラジオボタン、ドロップダウンリスト、テキストボックス／テキストエリア、フォームのカテゴリ別に分類して紹介します。
jQueryプラグインを探す際にだいたい見て回る巡回サイトまとめ - かちびと.net
個人的にjQuery関連のブクマ が分かりにくくなってきたので 整理も兼ねてシェア。プラグ インを探す時にだいたい巡回 しているサイトをまとめます。 かなり情報が多くなってきたjQuery。使いやすいし、知識の無い僕でも簡単に使えるので重宝してます。そんなjQueryですが、多すぎて探すのも大変ですね。以前ご紹介したサイトも兼ねて、ブックマークの整頓がてら、順回しているサイトをご紹介します。 codrops jQueryと言えば個人的にここを思い浮かべます。情報も新しく早い。英語OKならRSS購読推奨です。 codrops css-tricks こちらはWebデザイナー目線で情報を配信しています。有益jQuery情報多数ですが、タグやカテゴリが無い（あるかもだけど、見当たらない）のがおしいところ。/tag/等も404なんですよね・・最新記事はサイドバーに表示されます。 css-tricks
初心者さんのためのWebサイト制作に役立つリンク集
2017年6月29日 Webサイト制作 「Webサイト勉強するのにおすすめのサイトを教えてください！」との声が多いのですが、日本のWeb関連チュートリアルサイトをあまり見たことがなかったので、今までおすすめできませんでした…。ということでちょっとググって初心者さんによさそうなサイトをいくつか紹介します。小難しい単語が並んであるようなサイトは避けているつもりですが、わかりにくかったらすみません。他にもおすすめサイトがあればぜひコメント欄にて教えてください！ ↑私が10年以上利用している会計ソフト！ Webサイトを作る流れ まずはWebサイトを作る目的を考える 誰のため？何のため？Webサイトを作り始める前に。 サイトマップと呼ばれる構成図を作成 Webサイトの構成図を簡単に作れる便利ツール ワイヤーフレーム（Webサイトのレイアウト）を作成 Webサイトの骨組み: ワイヤーフレームを素早く・
web制作の現場で使うjQueryデザイン入門が激しくお勧めな件
『web制作の現場で使う jQueryデザイン入門』 jQueryを、プログラムとしてとらえるのではなく、デザインとしてとらえて解説している一冊。 つまりデザイナー向けの攻略本となっている。個人的に超お勧めの内容だったのでご紹介。 この作者は、西畑氏です。 何度か私のブログでもjQueryの記事かいてるのですが、そのときに色々教えてくれたto-Rのあの人です。 2010年2月15日発売予定で、書店では明日買えるようです。 「JavaScriptとしてjQueryに興味を持っている」という人よりも、「ウェブデザインをもっとクリエイティブに表現したい」という人のための一冊です。 目次 第1章 jQueryを始める前に。 ここでは、jQueryとは何なのか？あたりからきっちり説明されてます。 ある程度知ってる人は飛ばしちゃってもいいかも・・・。 第2章 サンプルで学ぶjQueryの基本 HTML
A Beautiful Apple-style Slideshow Gallery With CSS & jQuery
Introduction When speaking about design, there is one company that is impossible to go without. Apple values design - being a new product, a fancy catalog or their website - there is always something to admire. This week, we are making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases r
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
IDEA * IDEA
