超高速CMS実行環境”KUSANAGI”の技術により、システムはもちろんWeb担当者、情報システム担当部門、Web制作会社、CMSなどのWebサイトの保守・運用の運用に携わる皆さまのビジネスを加速します。 KUSANAGI関連サービスをご利用いただくことで、運用負荷の改善、Google PageSpeed Insightのスコア向上など多くの効果が期待できます。ぜひ一度、事例集をご覧ください。
Webページの表示を遅くする要素としてJavaScriptがあります。Webページは縦長になりがちで、表示されていない部分も含めて処理を行ってしまうと使えるようになるまで時間がかかってしまいます。 そこで使ってみたいのがin-view.jsです。指定したDOMが表示されている、または非表示になったタイミングでイベントが実行できます。 in-view.jsの使い方 例えば表示されたタイミングでは次のように指定します。 inView('.someSelector').on('enter', doSomething); 逆に消えた時には次のようにします。 inView('.someSelector').on('exit', doSomething); ソーシャルボタンなど、一度だけ実行されればいいものはonceを使います。 inView('.someSelector').once('enter'
YouTubeやVineなどの動画サイトはとても良いコンテンツで、ブログやWebサイトに埋め込んでいる人は多いかと思います。しかし厄介な問題として、単純に埋め込むとレスポンシブなWebサイトの幅変更に追従できないという問題があります。 それを解決してくれるのがSuperEmbed.jsです。モバイルからデスクトップまで、一つの埋め込みコードで対応できるようになります。 SuperEmbed.jsの使い方 使い方はとても簡単で、ただJavaScriptを読み込むだけです。 <script src="superembed.min.js"></script> これだけでYouTube、Vimeo、Vime、VideoPress、DailyMotionなど(他にも)の動画を自動的に可変にしてくれます。 SuperEmbed.jsはIE9以上で使えます。jQueryなどの依存ライブラリはありませんの
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました モーダルウィンドウを表示するWebサービスは多々あります。そうした時にはJavaScriptでイベントをフックして、モーダルコンテンツを表示するというものが多いかと思います。つまりJavaScriptがオフになると使えない機能です。 そこで使ってみたいのがPure CSS modalです。なんとスタイルシートだけで実現されているモーダルウィンドウです。 Pure CSS modalの使い方 モーダル表示の一例です。 フルスクリーン表示もできます。 実行例です。表示される際のアニメーションもサポートされています。 スタイルシートだけ、ということを聞けばピンと来るでしょうが、実体はチェックボックスやラジオボタンです。そのchecked指定によってモーダルの表示と非表示を切り替えています
UIデザインで使う、フォント、背景、ボーダー、ボタンなどのカラーを効果的にするグレーと基本の12色から展開されたカラースキームを紹介します。 Open Color Open Color -GitHub カラーは、グレーと12色をベースに彩度に変化が与えられたもので、すべてのカラーは色覚異常(特に第二色覚異常と赤色覚異常)のユーザーでも知覚可能なように配慮されています。 Swatch -Open color カラースキームは、以下の形式でダウンロードできます。 Adobe CC ライブラリ Photoshopのスウォッチ Illustratorのスウォッチ Sketchのカラーパレット ソースコード(.scss) ダウンロードは下記ページの下部から。
2016年9月23日 便利ツール 今年になってこれまでに増してプレゼンをする機会が増えてきました。あまり使うことのなかった、Mac付属のKeynoteというスライド作成ツールを使うようになり、周りの人からアドバイスを受けながらよりよいスライドを作ろうと勉強してまいりました。そこで今回はKeynoteの基本機能や便利機能を紹介しようと思います。 ↑私が10年以上利用している会計ソフト! KeynoteはWindowsユーザーでも使えます まずはじめに。KeynoteはMac用のアプリではありますが、iCloudのサイト上でも使えるので、Apple IDを作成すればどのOSからでも利用可能! ブラウザーでの画面はこんな感じ。Macのアプリとほぼ同等の機能を利用できます。 基本的なスライドの作り方 Keynoteは直感的に作っていけるツールなので、詳しい説明なしに始められるかと思います。まずはK
The latest Free Multicolor iPhone 7 mockup is here to help you showcasing your current design project. Now you can present many different design works, from Mobile UI, logo and branding design, bootstrap design and a lot more. Comes in editable PSD and Sketch format, you can flexibly edit it the way you want. Available in five different phone color that you can change easily. Thanks to Lstore Grap
海外サイトUXPin Studioで公開された「Web Layout Best Practices: 12 Timeless UI Patterns Analyzed」の著者 Jerry Cao より許可をもらい、翻訳転載しています。 ウェブサイトを訪れるユーザーの多くは、コンテンツを楽しみにしており、デザイン目的で訪れているわけではありません。 この記事では、いつの時代にもマッチする、12種類の黄金ウェブレイアウトパターンを問題点や解決法、具体的な使い方のポイントと一緒に見ていきましょう。 コンテンツ目次 01. カード型レイアウト 02. グリッドレイアウト 03. マガジンレイアウト 04. 枠なしレイアウト 05. スプリット・スクリーンレイアウト 06. 単一ページレイアウト 07. F型パターンレイアウト 08. Z型パターンレイアウト 09. 水平方向の左右対称パターンレイア
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く