これは面白い！Photoshopで高性能なHTML/CSSエディタが使えるようになるプラグイン -HTML Block
PhotoshopのPSD上に、HTMLとCSSのコードでエレメントを作成できるPhotoshopのプラグインを紹介します。 外部スタイルシートにも対応した高性能で、Bootstrapのエレメントをといった使い方もできます。 HTML Block HTML Blockの特徴 HTML Blockのダウンロードとインストール HTML Blockの使い方 HTML Blockの特徴 HTML Blockは、Photoshop CC2015 for OS Xのみ対応で、Webkitエンジンを利用してHTMLとCSSのコードでエレメントを作成できます。 ↓左パネルがエディタに見えるかもしれませんが、Photoshop上でのHTML Blockです。
[JS]スクリプト初心者でも簡単！レスポンシブ対応のナビゲーションやコンテンツを横から表示するスクリプト -Slidebars
最近よく見かけるトレンドの一つ「Off Canvas」、コンテンツの横からナビゲーションやコンテンツをアニメーションでスライド表示するjQueryのプラグインを紹介します。 デモページ：幅780pxで表示 Slidebarsの使い方 Step 1: 外部ファイル 当スタイルシートをhead内に、jquery.jsと当スクリプトを</body>の上に記述します。 <head> ... <link rel="stylesheet" href="slidebars.min.css"> <head> <body> ... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="slidebars.min.js"></script> </body> St
レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」:phpspot開発日誌
レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 2013年05月29日- samsono/Easy-Responsive-Tabs-to-Accordion GitHub レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 よくあるタブ型のUI、スマホではちょっと幅が足りない、ということでアコーディオンに変更してしまえるプラグインです。 次のようにアコーディオン式に。スマホでも困りません タブにするんじゃなくて、UIのタイプそのものを変えてしまうというところがいいですね。 関連エントリ レスポンシブでクールなドロップダウンメニュー実装例 アイコンフォントを使ってレスポンシブかつRetina対応のUIメニューを作るチュートリアル レスポンシブ
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」:phpspot開発日誌
コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」 2010年10月29日- DivGrow jQuery Plugin ? Easily make your DIV containers expandable & collapsable (with animation) HibboBlog コンテンツの概要を好きな高さできっちりピクセル指定できデザインを崩させないjQueryプラグイン「DivGrow」。 ブログの記事の概要なんかを次のように画像の横に表示させるとして、このプラグインを使うことでピッチリと画像の高さをあわせてデザインをスッキリさせることが可能です。 通常こういうことをやろうとすると結構めんどくさいですがjQueryプラグインなので高さを渡してあげるだけで綺麗にそろいます。 で、「Show More」という部分
[CSS]モバイル端末にも対応、ブラウザごとに異なるデザインのフォームを美しくするフレームワーク -Formalize CSS
既存のフォームにも簡単に適用できる、各ブラウザ、各OSや各モバイルごとのフォームの異なるデザインのギャップを埋め、美しくするフレームワークを紹介します。 Formalize CSS デモページ [ad#ad-2] サポートしているOSはWindow, Mac OS X, Linux、ブラウザはIE6/7/8/9, Firefox, Chrome, Safari, Opera、モバイルはAndroid, iOS(iPhone, iPad)などです。 下記のキャプチャは、Windows XP + Firefox 3.6のものです。 他の各ブラウザやモバイルでの表示は、元記事の下部「Screenshots」に掲載されています。 Formalize CSS Formalize CSS：ノーマル時の表示
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA