CSSで実装するハンバーガーメニュークリック時のエフェクト 10 - NxWorld
いずれも同じような動きだったり過去に紹介したものに少し動きを加えたレベルにはなりますが、ハンバーガーメニューをクリックしてクローズボタンへ変化する動きをCSSで実装したサンプル集です。 今回もメニュークリック時にJavaScriptを使って.activeというクラスが追加・削除する動きを実装想定になっています。 共通のHTML 紹介するサンプルはいずれも下記のようなHTMLを使用しており、クリック時にこのbutton要素に対して.activeというclassが付与されるという想定でCSSの実装コードを紹介していきます。 <button class="menu-trigger"> <span></span> <span></span> <span></span> </button> .menu-trigger, .menu-trigger span { display: inline-blo
CSSで複数行に対応したアニメーション付きアンダーライン（下線）を実装する方法 - NxWorld
ホバー時に左から右へ下線が伸びるアニメーションを実装したい場合、以前このブログでも紹介したことがある擬似要素を用いた実装方法では、例えば文章内にあるリンクなどで複数行にまたがるときに意図した見栄えになりません。 1行・複数行関係なく使えるアニメーション付きアンダーライン（下線）を実装したい場合は、以下のようにlinear-gradient()とbackground-sizeを組み合わせることで実装できます。 擬似要素を用いた下線アニメーションの実装については下記エントリーの一部で紹介しており、どちらも見栄えはほとんど一緒ですが前者はtransform: scale()を、後者はwidthを変化させる違いがあります。 実装方法 実際の動きは以下デモのようになり、リンク箇所（文字色が濃い部分）にホバーすると1行・複数行関係なく左から右へ下線が伸びていくのを確認できると思います。 実装にはCSS
追従ヘッダー実装時に使える動作・デザインパターン例 - NxWorld
常にユーザーの視線に入るようにしておきたいとかサイトの回遊率をあげたいなどの理由で実装を頼まれることが多いと追従ヘッダー。 単純に基本となる見栄えを維持してそのまま追従させることも多いですが、少し変化を加えてほしいという要望をもらうことも少なくないので、そういった場面で提案しやすいようによくある動作・デザインのパターン例をまとめました。 紹介しているサイトの動きや見栄えは、いずれもPCでの表示確認時のものになります。 変更を加えずにそのまま追従 スクロール時にデザイン・位置とも特に変更を加えず、単純にファーストビューでの見栄えをそのまま維持して追従させるパターンです。 少しCSSを書くだけで容易に実装できる�点がメリットですが、ヘッダーの領域が広いデザインの場合は�その分コンテンツが見える領域が狭くなるというデメリットがあるので、仕様やデザイン上でどうしてもヘッダー領域が広くなってしまう場
CSSで長い文章を省略して省略記号を表示させる方法（1行 / 複数行 / mixin） - NxWorld
CSSを使って文章が長い場合に省略して末尾に省略記号（...）を表示させる方法のまとめです。 すべてp要素に対して適用するのを想定したコードで、全3パターンの実装方法と複数行対応させるスニペットを楽に使うmixinを紹介します。 1行の文章を省略 CSSで文章を省略させると聞くとまずこれを思い浮かべる人も多いと思います。 省略したい文章を括っている要素に対して下記のように記述することで、文章が長かったとしても1行に収まる形に省略され、文末に省略記号が表示されます。 複数行の文章を省略 #1 複数行の文章を省略して同じく文末に省略記号を表示させる方法で、省略したい文章を括っている要素に対して下記のように記述します。 省略させない行数は-webkit-line-clampの部分で指定し、このサンプルコードの場合は3を指定しているので文章が4行以上になってしまうときに3行目の文末で省略されて省略
WordPress：アイキャッチ設定や記事内の画像有無によって、記事内ひとつ目の画像や代替画像を表示させるスニペット - NxWorld
WordPressでアイキャッチを利用するテーマの場合、登録されなかったときの処理として記事内にあるひとつ目の画像やあらかじめ用意しておいた代替画像をアイキャッチとして表示させることが多いのですが、そのようなときに使えるスニペットの備忘録です。 基本的な動作 以下では2通りの方法をあげますが、いずれも大まかには下記のような動きになっており、最終的なゴールとしては画像とalt属性を条件に応じて出力するというものになります。 画像 アイキャッチが登録されていたらそのまま使用。 アイキャッチが未登録の場合、記事内の画像をアイキャッチとして使用。 アイキャッチが未登録且つ記事内にも画像がない場合、代替画像をアイキャッチとして使用。 alt属性 アイキャッチが登録されており「代替テキスト」があれば、そのままaltとして使用。 アイキャッチが登録されており「代替テキスト」ない場合、「タイトル」の内容を
WordPress：「Contact Form 7」でセレクトボックスやラジオボタンの選択項目によって送信先アドレスを変更する方法 - NxWorld
WordPressで問い合わせフォームを実装したいときに便利なプラグイン「Contact Form 7」で、セレクトボックスやラジオボタンの選択項目によってそれぞれ異なるメールアドレス宛に送信されるようにする方法です。 ここでは「type」という項目名があり、それぞれ選択された場合は下記のように異なるメールアドレス宛に送信する動きとします。 項目A → type-a@example.com 宛に送信 項目B → type-b@example.com 宛に送信 項目C → type-c@example.com 宛に送信 上のような動きになるようにセレクトボックス（select）を配置したい場合は、下記のようにパイプ（|）を用いてパイプ前にフロントで表示させる文言を、パイプ後に送信先に設定したいメールアドレスを記述します。 [select* type "項目A|type-a@example.c
CSSでホバー位置によって要素を傾けるチルトエフェクトを実装する方法 - NxWorld
チルトエフェクトと呼ばれる、イメージにホバーするとマウス（カーソル）の位置によってイメージが傾く動きをCSSのみで実装したものです。 普段こういった動きを実装する場合はJavaScriptを使っていますが、ふとCSSだけでできないかなと思い試してみたもので、全体的にもう少しシンプルにできそう感あったりHTMLがごちゃごちゃしてしまうのが気になるものの、CSSでもそれっぽい動きになっているかなとは思います。 チルトエフェクトやホバーで傾くと言われても動きにピンとこないという人は、以下のデモで実際にイメージをホバーをしてみてください。 HTMLは実際に表示させ傾けたい要素は.box-contentsになり、その上にある.hover-pointはそれぞれどこがホバーされているかの判別に使う要素になります。 <div class="box"> <div class="hover-point"></
Photoshopの作業効率を上げるために覚えておきたいショートカット - NxWorld
最近ではXDやSketchを使う人を目にすることも多いですが、まだまだデザインカンプをはじめ、使っている人も多いと思うPhotoshopで覚えておきたい便利なショートカットを紹介します。 基本的なものが中心なので、デザイナーでバリバリ使用しているという人よりも、全体的に普段はデベロッパーでたまに触ることがあるぐらいの人やこれからPhotoshopを使い始めたい人向けです。 全部を一度に覚えるのは難しいかと思いますが、普段よく使う操作や機能を少し覚えておくだけでも、Photoshopを使った作業の効率アップに繋がると思います。 ここで紹介しているのは「Adobe Photoshop CC 2017」を使用した想定のものになり、バージョンによっては紹介している動きと異なる場合があります。 USキーボードを使用している場合、紹介しているものをそのまま使用できない場合があります。 その場合は、Ph
class付与でインスタグラム風のフィルターを適用できるスタイルシート「Instagram.css」 - NxWorld
インスタグラムは用意されているフィルターを適用することでイメージの見栄えを変更できるようになっていますが、「Instagram.css」はそれをCSSを使って再現できるスタイルシートです。 デフォルトでは表示されていないものも含めた全41種類のフィルターをclassを付与するだけで適用することができます。 使い方はGitHubからダウンロードするなどしてCSS（instagram.css or instagram.min.css）を読み込み、あとは下記サンプルコードのように適用したいimgを括っている要素に特定のclassを記述することで、元イメージはそのままで簡単にインスタグラム風のフィルターを適用できます。 GitHubで記載されているサンプルコードではfigure要素に対してclassを付与していますが、下記のようにdivなど別の要素でも可能です。 classは.filter-{fi
ネガティブスペースを上手く使ったロゴデザイン 30 - NxWorld
ネガティブスペースを上手く使ったロゴデザインをまとめたデザイン備忘録です。 文字や要素を組み合わせて空間を上手く使うことで新たな文字やアイテムが見えてくるデザインで、参考にするのはもちろん、眺めているだけでも面白いです。
WordPress構築時のスピードアップに役立つジェネレータまとめ - NxWorld
WordPressでテーマやプラグイン作成時のベースとなるテンプレートをはじめ、カスタム投稿実装・カスタムタクソノミー実装・ウィジェット実装・管理画面のUI変更などのコードなどをダウンロードできたり表示してくれるジェネレータのまとめです。 普段からスラスラ構築できるとかある程度ベースとなるものが既にある場合は不要かもしれませんが、そうでない場合はこういったものを活用することで構築のスピードアップに繋げられると思います。 Underscores ベースとなるテーマをビジュアル下の「GENERATE」ボタンからダウンロードすることができます。 そのままダウンロードするだけでなく、Advanced Optionsでテーマ作成時にstyle.cssの上部にコメントで記述するテーマ情報を設定したり、Sass(SCSS)を同梱してダウンロードすることも可能です。 Child Theme Generat
WordPressで更新者が少しでも使いやすい・更新しやすいと感じてくれる管理画面をつくるヒントやカスタマイズ - NxWorld
個人的に普段から対応することが多いものを中心に、更新者（クライアント）が少しでも使いやすい・更新しやすいと感じてくれるようなWordPressの管理画面をつくるためのヒントやカスタマイズを紹介します。 サイト構成や更新者のスキルなどにもよると思うので全部が全部やるべきということでもないですが、紹介しているものをいくつか組み合わせるだけで不要なものはすべて取り除いたシンプルな管理画面にできたり、少し手を加えるだけでもデフォルトに比べて大幅に使いやすくすることも可能です。 管理画面に任意のCSSやJavaScriptを適用する CSSであればフロントのデザインに近い感じで管理画面を装飾したりデフォルトのレイアウトを使いやすい形に調整するなど、JavaScriptであればデフォルトにはない動きをちょっと付けたり逆にデフォルトで実装されている動きを無効化するといったように、管理画面をカスタマイズす
CSS Snippets #1 - NxWorld
CSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットを紹介する第1弾です。 以前であれば画像やJavaScriptを用いなければいけなかったものがCSSのみで表現できたり、上手く使えばよりシンプル且つ効率良く記述するのに役立つものもあるので、特にこれからCSSを学びたいという人や学び始めたばかりでもう少しレベルアップしたいという人は是非試してみてください。 サンプルコードは基本的にプレフィックスを省略しています。 デモが用意されていないものについては、自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して実際の動きを確認してください。 継承するbox-sizing指定 ボックスモデルのルールを変更できるbox-sizingを使用時にその指定が継承される形にしたい場合は、リ
CSSでアンダーラインが追従するメニューを実装する方法 - NxWorld
以前であればJavaScriptを利用して実装していた、メニュー下にあるアンダーラインをホバーしたメニューへスライドしながら追従する動きをCSSのみを使って実装する方法です。 どのようなものなのか実際の動きを見たほうが早いと思うのではじめにデモを紹介すると、このようにメニュー下にあるアンダーラインがホバーしたメニュー下へスライドしていくという動きになり、JavaScriptは使用せずにCSSのみで実装しています。 HTMLは下記のようなものを使用し、a要素は単純なリンクで.nav-underlineが追従してくるアンダーラインで使用する要素になります。 また、ハイライト表示している付与されているclassはよくあるカレント表示用に見栄えを異なるものにするのに使用するclassになっており、これをそのまま使用した場合は上のデモにあるように3つ目のメニュー下にアンダーラインがあるのが初期表示と
デザイン制作を助けてくれる国内外の素材サイトまとめ - NxWorld
見つけてはメモしていたものがかなり増えてきて自分用に整理したのでシェアします。 ベクター・ラスター・テクスチャ・パターン・アイコン・フォント・モックアップなど、デザイン制作をする際に便利な素材を配布しているサイトの一覧です。 中には条件付きで使用可能とか商用利用時は有償という素材が中心に配布されているところもありはしますが、紹介しているのは基本的にフリーで使用できるものが中心または多く配布されているサイトになります。 以下はいずれも五十音 → アルファベット → 数字の順で紹介しています。 また、下記目次に属する国内の素材サイトについては多くが「禁止事項を守れば個人・商用問わず利用可能で、クレジット表記や報告等も不要」になるので、基本的にそのようなライセンスに関する情報は別途記載しているもの以外は省略しています。 国内 - 全般・ベクター・ラスター 国内 - テクスチャ・パターン 国内 -
CSSを使ってテキストカラーを半々に表示させる方法 - NxWorld
CSSを使ってテキストカラーが左右または上下で異なるカラーで表示されている見栄えを実装する方法を紹介します。 以下でそれぞれ紹介しているCSSは必要な記述のみ抜き出した形で紹介しているので、デモと全く同じ見栄えにしたい場合はCodePenの表示を切り替えてCSSを確認してください。 また、position: relative;とdisplay: inline-block;の指定は使用箇所によっては別の値に変更したり不要なら削除してください。 疑似要素とdata属性を使う このデモで表示されているようにテキストのカラーが中央を境に半々になっているのを疑似要素とdata属性を使って実装する方法です。 まずHTMLは下記のようなものを使用し、その際に中に記述する内容と同じテキストをdata属性（data-split）にも記述します。
より効率よくPhotoshopを使うために知っておきたい便利機能 25 - NxWorld
主にこれからPhotoshopを使い始めようと思っているとか使い始めたばかりという人向けに、知っておくと便利な機能を紹介します。 ひとつひとつはちょっとしたことでも多用するのであれば覚えておくことでより効率よく作業することができますし、中には使いこなすことができれば大幅な作業時間の短縮に繋がるものもあります。 ここで紹介しているのは「Adobe Photoshop CC 2017」を使用した想定のものになります。 その他のバージョンを使用している場合は一部使用できない機能があったり、機能自体はあってもメニュー位置や設定方法などが若干異なっている可能性があります。 ショートカットを活用する 特定のキーでツールを選択状態にしてすぐ使えるようにしたり、メニューから選んで実行していくようなものを即座に実行できるようになど、Photoshopには様々なショートカットが用意されており、普段からよく利用
CSSで実装するオーバーレイ表示時のエフェクトサンプル 10 - NxWorld
初期表示では非表示になっているナビ表示時やモーダル表示時の背景などで利用されるオーバーレイを表示する際のエフェクトサンプルを自分用にほしくて作ったのでシェアします。 すべてCSSを使って実装しているので、カラーや透過率などのデザイン的な部分はもちろん、表示されるスピードやタイミングについてもCSSで調整可能です。 また、全体的にシンプルで使いやすいもの中心なのでそのまま利用するだけでなく、いずれかをベースにさらに手を加えてユニークなエフェクトにしたりもできると思います。 紹介しているのは基本的にオーバーレイ要素として下記HTMLのようなdiv要素をひとつ用意し、それに対してCSSでエフェクトを付けたものになります。 複数の疑似要素を組み合わせているものは無理だと思いますが、簡易的なエフェクトによっては例えばbody要素の疑似要素をdiv要素の代用にした形に書き換えれば実装できると思います。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS：ボタンホバー時に背景がスライドしたり領域を覆うアニメーションサンプル 10 - NxWorld
CSS Snippets - NxWorld