Responsive Web Design用のHTML5+CSS3のテンプレート素材
iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。 サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。 デモページ：幅480pxで表示 [ad#ad-2] HTMLの構造 テンプレートはブログを想定して作成されています。 ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。 HTML: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Onextrapixel - Responsive Web Design Template</title>
[JS]さまざまな要素をダイナミックなアニメーションでズームさせるスクリプト -Zoomooz
画像だけでなく、ページ内のさまざまな要素をダイナミックなアニメーションでズームイン・アウト、回転させるjQueryのプラグインを紹介します。
Zoomooz.js
Zoomooz is: 6KB gzipped and 18KB minified. This includes everything but jQuery. Make any web page zoom. Download ZIP File Download TAR Ball Fork On GitHub Latest version: 1.1.9 (Nov 11, 2013, hacky fix for the back and forward buttons #66) Zoomooz is a jQuery plugin for making web page elements zoom. It can be used for making Prezi like slideshows and for zooming to images or other details. Quirky
ドメインも無料｜無料でビジネスwebサイトを15分で作れる波が襲ってきた
制作にかかるコストを極限までスリム化したビジネスサイト作成ツール。 「みんなのビジネスオンライン」 なんとドメインも1年間無料というふとっぱら。 制作→Googleの広告であるアドワーズの利用を促すものではないかと。 襲ってきたと書きましたが、それほど危惧するほどのモノでもないような気がします。 結局誰かの手が必要な気がします 無料で制作と言うものに凄く夢がありますが、現実問題そんな簡単そうではなさそうで。 これまでも結局webサイトは、作成も重要ですが、作成後の運営のほうがはるかに重要であると言う事を書いてきました。 実際にwebサイトには、つくるまえ、つくるとき、つくったあと、という3つのステップの説明がされています。 本当に簡単に説明されていますが、これこそがサイト作成前にめちゃくちゃ考える事であって、web屋とweb屋じゃない人との、埋める事のできない溝じゃないかと思います。なので
iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Roto」:phpspot開発日誌
Roto | jQuery Plugins iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Roto」 PCオンリーでも使えるのですが、iPhoneでもスワイプで画像をドラッグ＆ドロップで送れるプラグインです。 PCで見るとボタンが表示されて画像を送ることができますし、iPhoneでアクセスするとボタンは非表示で画像をカルーセルできます。 横に一列というだけじゃなくて、縦にもスライドできます。 HTML5アプリとしてphonegapなんかを使ってiPhoneアプリを作る場合なんかにもいいかもしれません。 関連エントリ スマフォサイト作成時に超便利な画像タッチでタッチ位置をズームできる「Cloud Zoom touch」 ソーシャルな活動を１個にまとめて配信できるjQueryプラグイン「LifeStream」 オープンソースのマルチタッチ用ジェスチャーアイコンセ
新しめのPhotoshopによる写真加工のチュートリアル集:phpspot開発日誌
iPhone等でもスワイプで画像を送れるカルーセル実装jQueryプラグイン「Ro... 次の記事 ≫：2011年9月13日 管理人のブックマーク
はじめてのjQueryMobile - WCAN 2011 Autumn フォロー記事
当日のスライド さる2011年9月10日に，WCAN 2011 Autumnのセッション2-Cで，jQuery Mobileについて紹介させていただきました．jQuery Mobileを都合良く取り回して，モバイルサイトに役立てようという主旨でございます． WCAN 2011 Autumn ~ はじめてのjQuery Mobile HTMLスライドですが，なるべくWebKit系のフルブラウザでご覧ください．（FirefoxやIEは閲覧を確認できておりませんので...） 当日の要点 当日は，下記のように各トピックにフォーカスをあてて，jQuery Mobileの光と闇（嘘）について紹介させていただきました． スマフォサイトを取り巻く背景 jQuery Mobile自身の特徴・メリット 実装のデモンストレーション jQueryMobileを活用している国内外の事例 使い所を選びつつも，モバイル
Html5 Css3 is under construction
Thank you for being patient. We are doing some work on the site and will be back shortly.
Photoshopの合成で創り出す空想世界チュートリアル集「30 Breathtaking Surreal Photoshop Tutorials」
TOP > Photoshop > Photoshopの合成で創り出す空想世界チュートリアル集「30 Breathtaking Surreal Photoshop Tutorials」 Photoshopを使った写真加工は、いろいろな素材やパーツを組み合わせることで、無限の表現を可能にしてくれます。そんな中今日は、Photoshopの合成で創り出す空想世界チュートリアル集「30 Breathtaking Surreal Photoshop Tutorials」を紹介したいと思います。 （Create a Surreal Turtle Image – Photoshop Tutorial – Pxleyes.com） 幻想的な雰囲気のビジュアルをどのように表現したのか、詳しく解説されています。写真加工の技術はもちろん、組み合わせた写真同士のなじませ方、光の入れ方など、勉強になるものば
流行のキレイなアニメーションGIFの作り方（初心者向け）※一部写真閲覧注意 | Maka-veli.com
前提ですが、動画データが無いときついです。 静止画からでも出来なくは無いですが、同ピン同ポジの画があれば割と楽です。 ※あとページ下部、写真がホラーなので閲覧注意です アニメーションGIFの作り方。 動画があれば簡単です。 Ginfninja http://gifninja.com/animated-gifs/create など、動画データからアニメーションgifに変換するサイトがあります。 Gifsoupなんてのもありましたが、クローズされちゃったみたいです。 コツ コツは色合いです。 GIFは256色構成です。 変換すると微妙な色は間引かれ、 色のコントラストが強いと汚いだけの画像になってしまいます。 例えば、このようにキレイなアニメーションGIF http://www.hangingupthemoon.com/#home 恐らく変換前に、色を調整していると思
HTML5とjQuery Mobileを使い、わずか1週間でできたモバイル版Publickey
昨日、Publickeyのモバイル対応版「Publickey Smart Edition」を発表しました。Publickeyのモバイル対応はずっと課題だったのですが、jQuery Mobileが登場したとき「これで簡単にモバイル対応ができる」と思い、jQuery Mobileが安定するタイミングを待っていました。 8月に「そろそろ大丈夫だろう」と思って開発を始めたところわずか1週間程度でモバイル対応ができあがってしまい、今週jQuery Mobileのβ3が出てフィーチャーフリーズになったのに合わせて試験運用を開始しました。 Publikceyのモバイル版の開発は、おおむね3つのステップ「モバイル用HTMLの生成」「jQuery Mobileによるタッチインターフェイスの構築」「小さな画面に合わせた画像縮小」から構成されています。ここではその裏側を少し紹介しましょう。 CMSでモバイル用H
ホワイトスペース使ったウェブデザインの考え方
ウェブサイトの要素をレイアウトをする際に非常に重要な ホワイトスペースの考え方について、すこしまとめてみました。 私が人にウェブデザインを教えるときは、まずここから始めます。 boxとboxとの空間の開け方、要素と要素の「間」は、音楽でいうところの「リズム」だと考えています。 リズムが整っていれば、他の要素が主張したことが上手に伝わります。 リズムが整っていなければ、けんかしあい、不協和音＝見づらい状況を作り出します。 自分なりのリズムを見つけていけば、それが個性・ジャンルになるのです。 どれが間違っている、というお話ではなく、どんな風に感じたかを大事にして読んでみてください。 とてもとてもシンプルな例を出してみます。 AとBを比較してみてください。 どちらのほうが読みやすいように感じますか？ どんなふうに感じましたか？ この例では、Bのほうに大きな余白を与えました。 ４隅すべて同じぐらい
みんなのビジネスオンライン
みんなのビジネスオンラインは中小企業、個人事業主様を対象とした無料ウェブサイト構築サービスサイトです。みんビズのとはなにか、みんビズの心得、みんビズで作られたサイトの制作事例、ヘルプ＆サポートなどを掲載しております。インターネットは、すべてのビジネスを変える力を秘めています。 ウェブサイトを活用して生まれる新しいつながりが、 あなたのビジネスを豊かに進化させるはずです。 「みんなのビジネスオンライン」とともに、 ビジネスは次のステージへ。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
企業がFacebookページを始める時に押さえておきたい28個の手順 【準備&プランニング編】 | Facebookページ活用 実践ガイド