CSS3で画像の一部をiOS（曇りガラス）風にぼかす方法：レスポンシブ対応
Posted: 2015.05.07 / Category: HTML&CSS, javascript / Tag: CSS3, jQuery iOS風のぼかしは画像が全画面表示だったら色々jQueryプラグインがあったのですが、今回は一部の要素の背景に重ねたかったのでちょっと試してみました。 確認環境： Chrome42, Firefox37, Safari7, iOS8, Android 4.4 均一の余白で配置するバージョン paddingのみでぼかすパネルを配置する方法です。これならCSSオンリーでいけます。 html&cssは下記のようにします。 html <div class="panel"> <div class="panel-in"> <div class="panel-main"> 内容文が入ります。 </div> </div> </div> css *::before,
コピペが出来るなら誰でも出来る、Web制作タスク自動化ツール「Grunt」導入手順
なんだか、Web制作の際に起こる様々な面倒くさいタスクを自動化してくれるGruntというツールがあるらしく、私の周りのWebデザイナーさんやコーダーさんがこぞって導入されておりました。 はじめは「へぇ…あちきは別に興味ないからいいでありんすよ」と指をくわえて傍観していたのですが、便利便利の声を聞くにつれやっぱり羨ましくなってきました。だから導入した。使った。良かった。 そんな訳で今回は、Grunt.jsの導入から簡単な使い方までを紹介したいと思います。私のような黒い画面に抵抗を持っている初心者の方でも導入できるよう、コピペさえ出来ればGruntが使えるようになる記事にしてあるつもりです。 なお、今回導入した私のPC環境はOS X 10.9.1です。Windowsでの導入手順は今更だけどやるgrunt入門編・インストールから基本的な使い方｜WEB Drawerをご覧下さい。 Gruntで何が
ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」:phpspot開発日誌
Clusterize.js ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ブラウザ内のDOMに５０万件を読むといくら高速なブラウザでもハングしたりしそうですが、こちらを使えば問題なく50万件のデータも読み込んで表示が出来ます DOM構造を50万件作るのではなく、スクロールに応じてDOM内を書き換えているのがその仕組のようです。 大量のデータをブラウザ上で一気に表示したい場合に便利そうです 関連エントリ 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 レスポンシブに要素を消さずに変形するテーブル
嵐のコンサートがあるとダブルブッキングしてしまうホテル予約システムを作ってみた
今年の5月1日に、仙台市内のホテルで多重予約のトラブルが発生したと報道されています。 部屋数２０３室の仙台市のビジネスホテルで、９月１８～２３日の宿泊予約を数千件受け付けるトラブルがあった。アイドルグループ「嵐」のライブが宮城県内で開催される期間だった。インターネットでの申し込みが殺到し、システム障害が起きたとみられるという。 トラブルがあったのは、仙台市泉区の「ホテルルートイン仙台泉インター」。ホテルなどによると、９月１９、２０、２２、２３日に宮城スタジアム（宮城県利府町）で嵐がライブを開くことが明らかになった後の５月１日午前５時ごろ、ネットを使った予約申し込みが殺到していることに気づいたという。 ２０３室のホテルなのに「予約」数千件 嵐公演で殺到か：朝日新聞デジタル より引用 5月1日の朝に何があったのか調べてみると、この日の早朝にテレビや新聞でコンサートの情報が流れたようですね。 お
モバイルでも使いやすさを実現できる 10種のレスポンシブライトボックス「10 Must have Lightbox Libraries For Mobile Responsiveness」
モバイルでも使いやすさを実現できる 10種のレスポンシブライトボックス「10 Must have Lightbox Libraries For Mobile Responsiveness」 写真が若干小さめに配置されていても、クリックなどのアクションを起こすことで大きく表示させることができるライトボックスは、webの世界では非常に重宝されている存在。今回はそんなプラグインの中でも、モバイルでも使いやすさを実現できる、10種のレスポンシブライトボックス「10 Must have Lightbox Libraries For Mobile Responsiveness」を紹介したいと思います。 Featherlight – The ultra slim jQuery lightbox. シンプルな動きで使いやすさがありながらも、それぞれに個性をもったプラグインが紹介されています。 詳しくは以下
サイドからクリックで展開するスライドナビを作成する【jQuery連載10】 | HTML5でサイトをつくろう
ウェブサイトでスクリーンサイズ目一杯の大きな画像を使用したり、海外の画像共有サイトPinterestのように大量の画像をコンテンツとして敷き詰めるようなサイトでは、画像やコンテンツの魅力や迫力を損なわないように、余計な文字情報やユーザーが操作するメニューを小さくあつかったり、普段は隠しておいて必要なときに表示するようにしている場合が多くあります。 また、モバイル環境でのサイト閲覧も年々増加していることから、限られたスクリーンサイズの中でいかにユーザーが情報を見やすく、且つ使いやすいインターフェイスを提供するべきかを考えると、モバイルアプリのUIにならって、ウェブサイトでも主なメニューを通常隠しておいて、必要なときに出現させて利用できる仕組みを提供することは１つの解決方法として必須になるだろう。このような仕組みを提供する場合は、ユーザーに隠れているメニューの存在を気付かせると同時に、直感的な
横からスライドするドロワーメニューのjQuery、JS、CSS3のプラグインまとめ！
こんにちは。 今回は横からスライドするドロワーメニューのjQuery、JS、CSS3のプラグインまとめ！です。 サイト制作する上で、もうスマホサイトやレスポンシブなサイトが当たり前になってきましたね。 今回はそんなスマホサイトやレスポンシブなサイトによさそうなドロワーメニューのプラグインを集めてみたので紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
