デザイン制作が捗る、個人的におすすめなAdobe XDの便利プラグイン 20 - NxWorld
デフォルトでも便利な機能が多数用意されており且つ定期的にアップデートも行われているAdobe XDですが、プラグインを利用することでより効率よくデザイン制作を進めることができます。 そこで、今回は便利なプラグインが数多く公開されている中でも個人的に特におすすめなプラグインを紹介します。 エントリー内では基本的にMacで使用した場合の見栄え・メニュー・ショートカットで紹介していますが、Winでもそこまで大きな違いはないので適宜置き換えてください。 プラグイン紹介時のキャプチャや挙動については、このエントリー公開時点のものになります。 プラグインのインストール・アンインストール・実行について インストール プラグインのインストールは、公式のものであればアプリから簡単にインストールができます。 イメージ内①のようにサイドにあるプラグインアイコンをクリック後に表示されるメニューの右上にあるプラスア
CSSでアンダーラインが追従するメニューを実装する方法 - NxWorld
以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。 また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と
Flexboxを利用してよくあるレイアウトを実装したサンプル集 - NxWorld
一部ブラウザ（特にIE）で若干挙動が違ったりすることもあるものの、Flexboxを利用することで今までCSSだけでは難しかった見栄えが実装できたり、よりシンプルなHTML・CSSで実装できるレイアウトが増えました。 そんなFlexboxを利用してサイト制作時によく出てくるレイアウトを実装したサンプルをいくつか紹介します。 紹介するものは基本的にプレフィックスを省略しているので、必要があれば各自で追記してください。 基本的に各実装に必要なFlexbox関連の最小限のコードのみ紹介していますが、サンプルによってはわざわざ初期値（flex-wrapやalign-itemsなど）を指定している場合があります。 それらは挙動を把握しやすくするために記述されているものなので、不要であれば記述する必要はありません。 表示確認のデモはPCでの閲覧推奨です。 要素を両端に寄せる 特にヘッダーやフッターで利用
UIデザインの引き出しを増やしたいときや悩んだときに参考になるデザインギャラリー 20 - NxWorld
webサイトやアプリなどのUIデザインに悩んだときに参考になるデザインギャラリーを全20サイト紹介します。 よくあるコンポーネントのデザインや配置の仕方、カラーの組み合わせ方を眺めるだけでなく、ギャラリーによってはクールなものからユニークなものまである様々なアニメーションをまとめているところもあるので、デザイン以外の部分でも参考になるギャラリーもいくつかあります。 また、悩んだ・困ったときに見るだけでなく、お気に入りのギャラリーがあればブックマークやフィード登録などして普段から空いた時間に目を通すことでデザインの引き出しも増やせますね。 Calltoidea 細かいコンポーネントからページ全体のレベルまで様々なデザインがまとめられています。 カテゴリーを表すアイコンもわかりやすく参考デザインのキャプチャも大きくて見やすいので、個人的によく見るギャラリーサイトのひとつです。 Collect
gulp：とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル - NxWorld
主にこれからgulpを使い始めよう（使い始めた）という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基本的な使用方法（環境準備やインストールなど）については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな
CSSで実装するハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクト 10 - NxWorld
画像は使用せずにCSSのみを使って実装したハンバーガーメニューアイコンの見栄えやクリック・ホバー時のエフェクトサンプルなど全10種類です。 以前にもハンバーガーメニューをクリックした時のエフェクトを紹介しましたが、あれからまた備忘録として残しておきたいものが幾つか出てきたのでシェアします。 共通のHTML・CSS サンプルで使用しているHTMLとCSSは下記をベースとして使用しています。 スタイルの中には幅や高さを指定している部分やラインの色を指定している部分などあるので、紹介しているものを使用する場合はこれらを自身の環境に合わせて調整してください。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { dis
CSSで実装するハンバーガーメニュークリック時のエフェクト 10＋ - NxWorld
ハンバーガーメニューは「メニューだとわかりづらい」と言われることも多いですが、特にスマートフォンサイトなどでは実装する機会はやはり多くはなってきているので、今回はそのハンバーガーメニューをクリックした時（メニューが展開しているときなどのアクティブ時）のエフェクトをCSSで実装したサンプルをまとめました。 よく見る「×」のようなクローズボタンに変化するものから矢印に変化するものまで全12種類あります。
jQuery Snippets #7 - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの第7弾です。 動きをすぐ確認できるデモなどは基本的に用意していないので、実際の動きを確認したい場合などは自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して確認してください。 画像のアスペクト比を割り出して、値によって処理を加える 例えば複数の画像を並べて表示したいという時に、同じサイズや同じ縦横比であればCSSなどで容易に調整可能ですが、それが横長や縦長など異なるサイズ（アスペクト比）で且つどのようなものが入ってくるのかを限定できない時などに利用できます。 jQueryを下記のように記述することでアスペクト比によってそれぞれ別の処理を実装することができ、例えばCSSのposition: absolute;とネガティブマージンを組み合わせることで、ど
CSSで実装できる可愛いデザインに使えそうなボタンデザインやホバーエフェクト 10＋ - NxWorld
自分用に一覧化したものがほしくて作ったのでシェアします。 あくまで個人的に思ったものなので多少合わないと思うものもあるかもしれませんが、可愛らしいデザインや遊び心あるような感じのサイトで使えそう・相性が良さそうだと思ったボタンデザインやホバーエフェクトです。 いずれも画像やJavaScriptなどは使用せずに見た目から動きまで全てCSSで表現しており、CSSなのでカラー変更やフォントサイズの変更なども容易にできます。 閲覧の際にChrome又はFirefoxで見てもらえるとほぼ問題なく動きの確認ができると思いますが、ブラウザによって動きや見栄えが説明と異なる場合があります。 基本的に必要だと思う記述は全て掲載しておりますが、例えばfont-familyやfont-sizeなどのように環境によって大きく記述が異なるようなものは省略して紹介しているので、場合にはよって実装してみたものと紹介して
CSSの:nth-childと:nth-last-child擬似クラスの使用例 - NxWorld
今さらな内容になりますが、未対応だったIEのサポート終了によって今後ますます使う場面は増えるでしょうし、恥ずかしながら指定方法によっては一瞬どう記述するかど忘れしちゃうことがたまにあるので備忘録も兼ねて。 CSSの擬似クラスにある:nth-childと:nth-last-childの使用例を自分が見たい時にすぐ確認できるようひと通りまとめました。 説明時に利用しているサンプルイメージやコードは、ul内に10個のli要素を記述してデフォルトで青いボックスが並んでいる見た目になるようCSSを指定しています。 それを:nth-childと:nth-last-childを使って指定されたものを赤いボックスに変化させており、実際のブラウザ表示を見たい場合はCodePenにデモをアップしておいたのでこちらをご覧ください。
jQuery Snippets - NxWorld
基礎的なものからちょっとした機能の実装方法など、jQueryに関する個人的なメモ・スニペットリストの一覧です。 May 08, 2017 追記 「jQuery Snippets #10」を追加しました。 May 07, 2017 追記 「jQuery Snippets #9」を追加しました。 September 16, 2016 追記 「jQuery Snippets #8」を追加しました。 April 25, 2016 追記 「jQuery Snippets #7」を追加しました。 February 04, 2016 追記 「jQuery Snippets #6」を追加しました。 January 05, 2016 追記 「jQuery Snippets #5」を追加しました。
jQuery：ページトップへの動きに使えるエフェクト 5 - NxWorld
閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。 よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。 jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。 使用するHTML・デモ サンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。
CSSのみでフルスクリーンの動画背景を実装する方法 - NxWorld
ここ数年で見かけることも多くなった動画をフルスクリーンで背景表示するのをJavaScript等は使用せずにCSSのみで実装する方法です。 古いIEなども対象ブラウザとなる場合は使用できませんが、モダンブラウザであればCSSのみで簡単に実装できます。 実装にはHTMLとCSSをそれぞれ下記のように記述します。 <body> <video autoplay loop poster="img.jpg"> <source src="movie.mp4" type="video/mp4"> </video> </body> body { margin: 0; padding: 0; background: url(img.jpg) center center fixed no-repeat; } video { position: fixed; top: 0; left: 0; min-width:
ヒーローイメージにCSSで実装するグラデーションを組み合わせたサンプル - NxWorld
ヒーローイメージとはファーストビューでドーンと表示される大きなイメージのことで、海外だけでなく国内でも取り入れているサイトを見かけることが多くなってきました。 そんなヒーローイメージにCSSで実装したグラデーションを組み合わせたサンプルです。 グラデーションを重ねる 単純に画面いっぱいに表示した背景画像の上にグラデーションを重ねたものです。 HTMLは.heroを指定したdiv要素のみを使用し、CSSは下記のように記述します。 .hero { height: 100vh; background: linear-gradient(-45deg, rgba(229,93,135,.7), rgba(95,195,228,.7)), url(background.jpg) center center / cover no-repeat; }
フォーム周りで覚えておくと便利なCSS Snippets - NxWorld
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ（特にIE9以下）によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
WordPress：カスタマイズするなら覚えておきたい条件分岐について - NxWorld
WordPressを使ってサイトやブログを構築する際、例えば「一覧と詳細でサイドコンテンツを変えたい」とか「カテゴリーによって表示内容をガラッと変えたい」のように「○○の時に○○する」といったことをしたい場合に用いるのが条件分岐です。 WordPressには便利な条件分岐タグが沢山用意されており、それらを用いることで様々なことができるので、先述したように特定の条件で何か処理を行うカスタマイズをしたい方は参考にしてみてください。 条件分岐の使い方 条件分岐とは、簡単に説明すると「指定された条件に合うか・合わないかを判断し、判断に応じて処理を行う」というものになり、例えばWordPressの場合であればこれを利用することによって、同じテンプレートを使用していても条件に応じて全く違う見栄えにしたり、処理を行うといったことが可能です。 条件分岐にはswitch文というものもありますが、ここで紹介し
CSSで括弧を表現したサンプル - NxWorld
丸括弧（） 頭から微妙な見栄えですが、**丸括弧（）**を表現してみたものです。 HTMLとCSSはそれぞれ下記のようになっており、擬似要素を使って生成したものにborder-radiusを指定します。 <div class="parenthesis"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. ... </p> </div> .parenthesis { position: relative; width: 500px; padding: 15px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; } .parenthesis::before, .parenthesis::after { position: absolute; top:
使い勝手の良いシンプルなテクスチャ・パターン素材 30＋α - NxWorld
素敵なデザインをつくるポイントはいろいろとありますが、その中でも重要だと思うひとつが背景です。 もちろんただ使えば良いというわけではありませんが、上手く取り入れることでデザインをグッと良くさせることができます。 今回はそんな背景デザイン時に使える素材で、特にミニマルデザインや背景にほんの少しだけ質感を与えたいときなどに便利だと思うシンプルなテクスチャ・パターン素材をまとめました。 また、ここでご紹介しているような使い勝手の良いシンプルなテクスチャ・パターン素材を数多く配布しているサイトも併せてご紹介します。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS：ホバー時のアンダーラインアニメーションの実装サンプルとmixinを用いた実装方法 - NxWorld
CSSやSVGで実装するローディングアニメーション - NxWorld
