第5回 タブ切り替えで快適に読めるインターフェースを作るには | gihyo.jp
見せたいもののメリハリをつけるのがコツ 「限られたスペースに複数の情報を入れたい。でも別ページにするほどでもない……」 そんなとき、タブでコンテンツを切り替えられると便利です。タブ切り替えは、Yahooのトップページで使われているように、かなり浸透してきています。 このUIを使うポイントは、以下のように重点的に見せたいコンテンツとそうでないもののメリハリをつけて使うことです。 特集などの一部のコンテンツに使う ニュースであれば一番見せたいカテゴリーのものをはじめに見せておいて、重要度の低いものは別のタブコンテンツとする サイドバーに置いたトピックスを、アーカイブと最新のもので分ける また、以下のようなデメリットがあるので、UIの見栄えとのバランスを念頭に置いて使う必要があります。 ソースが1ページに書かれるため、ページを分ける場合と違ってSEO効果が薄れる場合がある タブを移動してもページ
animatedModal.js
animatedModal.js is a jQuery plugin to create a fullscreen modal with CSS3 transitions. You can use the transitions from animate.css or create your own transitions. DOWNLOAD VERSION 1.0
Macaw: The Code-Savvy Web Design Tool
Stop writing code, start drawing it. Macaw provides the same flexibility as your favorite image editor but also writes semantic HTML and remarkably succinct CSS. It's time to expect more from a web design tool. "The superhot web design tool of the future." Built for today's web designer Responsive Set breakpoints and optimize your site for all devices. Typography Pull in web fonts or use system fo
マテリアルデザインをベースとしたフレームワーク『Materialize』使ってみた - tmlife
Google が発表してからちょこちょこ話題に上がっているマテリアルデザイン. 今回はそのマテリアルデザインをベースとしたフレームワーク『Materialize』使ってみたのでそのメモです. 毎回 bootstrap じゃ飽きちゃいますしね♪ Materialize って？ 公式より A modern responsive front-end framework based on Material Design 「マテリアルデザインをベースとしたモダンでレスポンシブなフロントエンドフレームワークです.」 的なことが書かれてますね. ざっくり言うと bootstrap のマテリアルデザイン版です. less ではなく sass 使ってるとことか若干インターフェースが違ったりしますが, 基本的には同じ感じで使えます. Reference Official Github cdnjs Mater
綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
フォントジャンプ率のセオリーを考える | フォントの話 | つみきブログ
株式会社つみき UI/UX事業終了のお知らせ 拝啓 時下ますますご清祥のこととお喜び申し上げます。 平素より格別のご高配を賜り、厚く御礼申し上げます。 この度、弊社は創業以来続けて参りましたUI/UX事業（受託制作事業）につきまして、2024年4月30日をもって終了することを決定いたしました。 今後は、弊社の主力事業であるFilmarksをはじめとした、映像関連事業に注力して参ります。 ご愛顧を受け賜りました皆様には、深く感謝申し上げますとともに、ご理解賜りますようお願い申し上げます。 敬具 株式会社つみき 代表取締役社長 鈴木 貴幸 事業終了予定日：2024年4月30日 biz@tsumikiinc.com
Caheo | Link Xem Trực Tiếp Bóng Đá Caheo Tv - Full Hd Blv
Caheo TV là web gì ? Caheo TV, trang web trực tiếp bóng đá hàng đầu hiện nay tại Việt Nam, luôn được coi là sự lựa chọn hàng đầu của fan hâm mộ khi muốn thưởng thức những trận cầu đỉnh cao với chất lượng tuyệt vời. Theo dõi trực tiếp bóng đá từ Caheo TV mang đến trải nghiệm không thể ngờ tới, khiến cho anh em không bao giờ biết đến cảm giác thất vọng. Chắc chắn rằng, không ai có thể phủ nhận sức h
第12回 jQueryでセレクトボックスをデザインする | gihyo.jp
デザインされたセレクトボックスを実装する セレクトボックスはCSSでほとんどスタイルを当てることができないので、フォームをデザインするときに苦労する方が多いのではないでしょうか。今回は、HTMLとCSS、そしてjQueryを利用して疑似セレクトボックスを作成してみましょう。 作成方法はとても簡単なので、覚えておけば色々なシーンで流用できるでしょう。 まずは、完成サンプルを見て作成するセレクトボックスのイメージを掴んでください。 疑似セレクトボックス そもそもデフォルトのセレクトボックスの挙動は クリックするとプルダウンが表示 プルダウンの項目をクリックする セレクトボックスの中身が選択した項目に置き換わる というようになっているのでこれを実装していきます。 セレクトボックスはselect要素とそれに内包されるoption要素（プルダウン部分）で構成されるので、それらを代替要素で構成し、プル
実践 jQuery Mobile
TOPICS Programming , Web , JavaScript 発行年月日 2013年01月 PRINT LENGTH 288 ISBN 978-4-87311-592-4 原書 jQuery Mobile: Up and Running FORMAT PDF jQuery Mobileによるモバイルアプリ開発の入門書。実践的な例を通して、jQuery Mobileフレームワークで用意されているUIコンポーネントを使ったマルチプラットフォーム対応のモバイルアプリ開発について学びます。本書を読み終える頃にはjQuery MobileとセマンティックなHTML5コードによるモバイルアプリ開発手法を身につけ、さまざまなスマートフォンやタブレットに対応するAjaxベースのレスポンシブなウェブアプリを作れるようになっているでしょう。対象読者は、iPhoneやAndroidといったスマート
Create an apple style menu and improve it via jQuery - Kriesi.at - Premium WordPress Themes
Create an apple style menu and improve it via jQuerySince I wrote my last tutorial on how to create a CSS only multilevel dropdown menu I got a lot of visitors who wanted to know how I created the main navigation of kriesi.at. (a so called kwicks menu) The interest in extraordinary menus seems to be high nowadays, so today I will teach you how this is done. Since the Apple-flavored Leopard-text-in
Masonry
What is Masonry? Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Install Download CDN Package managers Getting started HTML CSS Initialize with jQuery Initialize with Vanilla JavaScript Initialize in HTML Next MIT Lice
私がよく使っているjQueryプラグインまとめ（スライダー、モーダルウィンドウなど）
こんにちは、暑いですね。脇汗すごいですね。僕が。 さて今回はWebページ作成時に、私がよく使っているjQueryプラグインをまとめてみました。（たまにjQueryが必須でないものもあります。） ※紹介しているプラグインを使用する際、ライセンスは各自で再度確認してくださいませ。 Owl Carousel 個人・商用利用可能。レスポンシブでいい感じに動作してくれるカルーセルスライダーです。動作もシンプルで綺麗だし、マークアップも簡単。テキストもOK。お気に入りのプラグインです。 Owl Carousel bxSlider 個人・商用利用可能。シンプルなスライダープラグインです。レスポンシブで動作し、カスタマイズもしやすく重宝します。 jQuery Content Slider | Responsive jQuery Slider | bxSlider Glide.js デモページがカッコイイス
スクロールアニメーションによる立体コンテンツの見せ方 (1/2)
スクロールによって立体的に浮かび上がるサムネイル サムネイルに視点をフォーカスさせる仕掛けが目を引く、動画のポートフォリオサイト「MANUEL RUEDA」。ページ中央にあるサムネイルには奥行きが設定されており、スクロールによって手前に起き上がってくる動きが斬新だ。サイドナビにもスクロールに合わせたギミックが用意されており、コンテンツを何度も行き来してしまうおもしろさがある。 今回は、このサイトをヒントに、CSS3の3D表現とjQueryを使ったスクロールアニメーションを制作する。 STEP 1：スクロール値を取得する スクロール値を基にCSS3のプロパティを変化させるため、スクロール値を正しく取得することから始めよう。 スクロール値は jQueryのscrollメソッドを使って取得する。以下のようにして現在のスクロール値を取得できる。 ■ソースコード（HTML） <p id="posy"
SVGアニメを手軽に作れるLazy Line Painter｜こうめの“これから使える”jQueryプラグイン
「Lazy Line Painter」 は、最近流行のSVGを使ったパスアニメーションを手軽に作れるプラグインです。自分で描いた線画をSVG形式で読み込み、手で描いたような動きをつけて表示できます。 あまり複雑な動きはできませんが、「Tatenaga GIF」のiPhoneの線画のように、さりげなく取り入れるにはぴったりのプラグインです。 ライセンスはMITです。ライセンスに従って著作権表示は削除せずに利用しましょう。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、Lazy Line PainterをGitHubからダウンロードします。ページ右下の「Download ZIP」ボタンからダウンロードできます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS, JavaScript, jQuery, WordPressなどのよく使うコードをまとめたスニペット集
第2回 楽にリストをストライプ模様にする | gihyo.jp
HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集
10年以上Java屋してたおっさんが 今年からフロントエンジニアやっている話
Under construction - Awesome site in the making!
Bootstrap Templates and More on WrapBootstrap