商用無料でしかも高品質！レスポンシブ対応の美しくデザインされたHTML5/CSS3のテンプレートのまとめ今時の繊細でかっこいいエフェクトを備え、美しくデザインされたレスポンシブ対応のランディングページ、プロダクトページ、縦長ページ、ポートフォリオ、ブログなど、HTML5/CSS3で作成された商用利用無料のテンプレートを紹介します。 最近のデザインやインタラクションの勉強にもいいですね。
[CSS]見出しや文章の読みやすさを重視してデザインされたレスポンシブ対応のグリッド -Sassline
見出しや文章など、テキストの読みやすさを重視して設計されたレスポンシブ対応のグリッドを実装するスタイルシートを紹介します。 Sassline Sassline -GitHub Sasslineはテキストが読みやすく、美しいタイポグラフィを実現するために開発されたもので、ブログでも企業サイトでも開発中のプロトタイプでも利用できます。単位には「rem」を使っており、ベースラインのグリッドからタイポグラフィのスタイルが機能するように設計されています。 テキストをデザインする際に、気を付けるべきことは「縦のリズム」。 Sasslineでは、ベースラインのグリッドに基づいて正確な縦方向のリズムを使うことができます。 レスポンシブ用に各サイズでの表示には、モジュール式のスケールを採用しています。これはブレイクポイントごとにテキストのサイズを簡単に設定でき、そのままベースラインのグリッドと連動して、美し
![[CSS]見出しや文章の読みやすさを重視してデザインされたレスポンシブ対応のグリッド -Sassline](https://cdn-ak-scissors.b.st-hatena.com/image/square/326599f01a29f1985c237ea13213cdb051872389/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201502%2F2015060301-01.png)
Parallax-Scroll by Aen
Parallax-Scroll is a jQuery plugin to create elements with background images that behaves as if their background-attachment property is between scroll and fixed, similar to the parallax scrolling effect you see on Spotify and is loosely based on Peder Andreas Nielsen’s Parallax ImageScroll. It makes clever use of background-position and background-size properties instead of CSS3 tranforms. It runs
Bouncy Navigation in CSS and jQuery | CodyHouse
Bouncy Navigation A full-screen navigation, with floating menu items. There are cases when you want to present the user with a choice, with the focus of the web page being the different options. Whether it is a modal navigation, or a list of categories, todays nugget gets you covered! We used CSS animations and a pinch of jQuery to animate navigation items, and let them bounce in and out the scree
Bootstrap向けのレスポンシブなダッシュボード用テンプレ:phpspot開発日誌
Dashboards by Keen IO Bootstrap向けのレスポンシブなダッシュボード用テンプレ。 次のようなカッコいいデザインのダッシュボード用テンプレがDLできます レイアウトがダッシュボード用に複数用意されています 関連エントリ Bootstrap標準のModalを進化させた「Bootstrap-modal」 Bootstrap用、横スライド式メニュー等の追加コンポーネントが使える「Jasny Bootstrap」 Bootstrap用の星型レーティング実装「Bootstrap Star Rating」 Bootstrapなサイトで使えそうなカラーピッカー「jQuery MiniColors」 Bootstrapのポップアップを強化する「WebUI Popover」
横メニューの作り方
レスポンシブに対応した横メニューを作る機会があったので、せっかくですし作り方を紹介したいと思います。お役に立てばうれしいです。 【追記 2014.03.19】 元々のタイトルは「レスポンシブWebデザインに対応した横メニューの作り方」でしたが、よく考えるとスマホ対応になったら縦メニューになりますのでタイトルを変更しました。 id名「toggle」の部分は横幅が480px以下の場合に表示するボタンです。481px以上の場合表示させません。その他はごく普通の横メニューです。 CSS 続いてCSSです。まずは全体を載せます。 #menu{ width: 100%; max-width: 960px; margin: 0 auto; padding: 0; } #menu li{ display: block; float: left; width: 12.5%; margin: 0; paddi
レスポンシブなサイトのワイヤーフレームを作る際に使えるWEBツール「Responsive Wireframes」:phpspot開発日誌
Responsive Wireframes レスポンシブなサイトのワイヤーフレームを作る際に使えるWEBツール「Responsive Wireframes」 画面上にエレメントを配置して、レスポンシブなレイアウトの設計に使うことができます。実際にコードを書く前に動きを作っておくと色々便利そう 作成したレイアウトのHTML出力等はできないようで、あくまでレイアウト設計に使うツールのようです 関連エントリ レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」 リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 フラットデザインが美しいレスポンシブなLightbox「Nivo Lightbox」 スマホでも多階層のメニューが作れる
レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」:phpspot開発日誌
Glide.js | Simple, Lightweight & Fast jQuery Slider レスポンシブでタッチフレンドリーなスライドを作れるjQueryプラグイン「Glide.js」 スライド用ライブラリは多数ありますが、PCでも当然使えて、レスポンシブでタッチフレンドリーとなると選択肢は狭まりますね。 そんな場合に１つの選択肢となるライブラリです。 スライドの幅もブラウザに応じて適切なサイズにリサイズされるので、ほとんどの端末に対応できます。 関連エントリ 色の細かなカスタマイズが可能なスライド式カラーピッカー「jQuery Color Picker Sliders」 Youtube動画とSlideshareのスライドを同期して再生できる「Presentz」
レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」:phpspot開発日誌
S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」。 次のようなオシャレなギャラリーを作ることが出来ます。シンプルかつ必要十分な機能を備えています ギャラリー実装の際の１つの選択肢としてご紹介。 関連エントリ HTML5＆CSS3なクールでレスポンシブが良い感じのイメージギャラリー実装jQueryプラグイン「least.js」 画像を細長切りにしたオシャレなギャラリーを作れるjQueryプラグイン「Stripte」 Google画像検索っぽい画像ギャラリーが作れるjQueryプラグイン「Superbox」 ギャラリー、スライダー等、複数画像の見せ方を色々提供するjQueryプラグイン「Rondell」
汎用性の高そうなjQueryイメージスライダー・Fotorama
よさ気だったので備忘録。jQueryで作るスライダーです。画像や動画にも対応、レスポンシブWebデザインにも対応しており、マークアップもシンプルで済みます。 なかなかいいスライダーでした。タッチイベントにも対応しているのでスマフォでも使えますね。 見た目はよくあるスライダーですが、汎用性は高い印象です。タッチイベント、レスポンシブWebデザイン、ハッシュタグ対応、動画も可能、フルスクリーン化も可能で、マークアップも画像を書けば良いだけ。 動作サンプルがいろいろ用意されています。 Sample コード<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="fotorama.js"></script>本体とプラグインとCSSを読み込みます。 <div class="fotorama"> <
レスポンシブなアイコングリッド作成チュートリアル:phpspot開発日誌
Blueprint: Responsive Icon Grid | Codrops レスポンシブなアイコングリッド作成チュートリアル パネル型のタブレット風UIでレスポンシブにしたい場合に参考にできそうなデモとサンプルです。 １つのグリッドがマウスオーバーでハイライトされるあたりもいい感じに動作してます。 スマホ、タブレット向けのサイトなんかで使えそうなUIになっているので、こうしたデザインのサイト制作の時に使えそう 関連エントリ HTML5＆CSS3で作成されたレスポンシブかつフリーなテンプレートが入手できる「HTML5 Up」 レスポンシブでクールなドロップダウンメニュー実装例 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 HTML5＆CSS3なクールでレスポンシブが良い感じのイメージギャラリー実装jQue
ベクターでレスポンシブな地図を描画できる「jQuery-Mapael」:phpspot開発日誌
neveldo/jQuery-Mapael GitHub ベクターでレスポンシブな地図を描画できる「jQuery-Mapael」 ブラウザを伸縮してもクオリティそのままでインタラクティブにハイライトしたりする地図を描画したい場合に使えそうです デモページ 日本のデータはなく、フランス、アメリカ、世界地図のデータのみです。 元データさえあればJSに変換して使うこともできそうです 関連エントリ 世界地図でデータをビジュアライズする際に使えるJSライブラリ「DataMaps」 動画/地図/画像のポップアップが可能でレスポンシブなLightBox実装jQueryプラグイン「MagnificPopup」 地図と共に使えそうな２００のフリーベクターアイコン集
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
無料でしかも高品質！レスポンシブ対応の美しいWebページを作るためのHTML5/CSS3のテンプレートのまとめ
新着記事