CSSのみでcheckboxの装飾とチェック時アニメーションを実装したものをまとめた「Switcher styles collection」

Read More

CSSのみでcheckboxの装飾とチェック時アニメーションを実装したものをまとめた「Switcher styles collection」

ひと通り揃っていて良いなと思ったので備忘録兼ねてご紹介。「Switcher styles collection」は <input type="checkbox"> と<label> を組み合わせて作成したスイッチスタイルをまとめているもので、装飾やチェック時のアニメーションなどすべてCSSのみで実装されています。

  • Posted on
  • Tips
EditorConfigでプロジェクト・チーム間のエディタ設定を統一させる

Read More

EditorConfigでプロジェクト・チーム間のエディタ設定を統一させる

ひとりで行っているものであれば自分の中でルールが決まっているし使用するエディタがそのような設定になっていることがほとんどだと思うので特に必要ないと思いますが、逆に複数人で行うプロジェクトだったり自分とは全く異なるルールでコーディングしなければいけないとなると、毎回そのプロジェクト毎に設定を変更したり、他のメンバーにどのようなルールなのか説明するのが面倒です。そんな時に便利なのが「EditorConfig」というもので、例えばインデント設定や文字コードといったエディタ設定を自動で適用してくれるので、先述したようなプロジェクト・チーム間のエディタ設定を容易に統一させることができます。

  • Posted on
  • Services & Resource
WordPress:管理画面の各設定画面内に項目を追加する方法

Read More

WordPress:管理画面の各設定画面内に項目を追加する方法

備忘録。タイトル通り、WordPressの管理画面にある「一般」「投稿設定」「表示設定」といった各設定画面内に項目を追加する方法です。例えばデフォルトでタイトルやキャッチフレーズを入力できる項目が用意されており、それらをテンプレートタグで呼び出して表示みたいなことをよくすると思いますが、この方法で同じような項目を追加して上手く利用することでそれらと同じようなことも実装できます。

  • Posted on
  • WordPress
WordPress:レスポンシブイメージ(srcset・sizes)を無効化する方法

Read More

WordPress:レスポンシブイメージ(srcset・sizes)を無効化する方法

WordPress 4.4から実装されたレスポンシブイメージを無効化する方法です。この機能自体は今後ますます利用することが増えていくだろうし良いとは思いますが、場合によってはこれが原因となる不具合や最悪表示が大きく崩れるといったことが起きることもあるので、そのような時にこの方法を使うことで無効化できます。

  • Posted on
  • WordPress
WordPress:カテゴリー周りをカスタマイズする際の備忘録

Read More

WordPress:カテゴリー周りをカスタマイズする際の備忘録

記事でいうアイキャッチのようなカテゴリーイメージを設定できるようにしたり、説明文を自由に装飾できるようエディタを実装したりなど、WordPressのカテゴリー周りのカスタマイズでよく利用するコードやプラグインの備忘録です。カテゴリーのカスタマイズと言っても表示カテゴリーのID指定とか特定のカテゴリーの記事を出したいとかそういう系の内容ではなく、主に管理画面の入力周りを変更といったもの中心です。

  • Posted on
  • WordPress
日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15

Read More

日付・時刻入力を手助けしてくれるデートピッカー・タイムピッカーを実装できるスクリプト 15

ユーザーに日付や時刻を入力してもらう際に手助けするデートピッカー・タイムピッカーを実装できるスクリプトのまとめです。日付であればカレンダーを、時刻であれば時計を表示させるといったように選択しやすい感じの見栄えにしてくれるものもあれば、シンプルな見た目で入力・選択させるといったものもあり、使いたいデザインのテイストに合わせて選べると思います。

  • Posted on
  • Tips
いざという時に便利そうな、珍しいタイプのアイコンセット 30 #13

Read More

いざという時に便利そうな、珍しいタイプのアイコンセット 30 #13

ここ最近見かけた珍しいタイプのアイコンセットのまとめです。これまで紹介してきたものと同様であまり見かけないものや汎用性が高いUIアイコンなどと比べて使う場面は少なくても、いざ使いたい時に便利そうなものや個人的に面白いと思ったデザインアイコンです。今回も様々なものをモチーフにしたデザインアイコンがあります。

  • Posted on
  • Material
Brackets Snippets (by edc)を使って、Sassの&(アンパサンド)をより楽に記述する方法

Read More

Brackets Snippets (by edc)を使って、Sassの&(アンパサンド)をより楽に記述する方法

Sassといえばネスト・extend・mixinなど、効率的にCSSを記述することができる機能が多数あります。その中のひとつに親セレクタの参照や疑似クラスを指定するために使用する機会も多いと思う&(アンパサンド)というものがありますが、これをBracketsのエクステンションと組み合わせて疑似クラス指定をより楽に記述していく方法を紹介します。

  • Posted on
  • Services & Resource
最近気になったハイクオリティなUIキット #17

Read More

最近気になったハイクオリティなUIキット #17

ここ最近気になったUIキットのまとめです。見た目や各パーツ・カラーの組み合わせ方などデザインの参考にするだけでなく、それぞれ実際に作成されたファイルをダウンロードすることもできるので、どのようなレイヤースタイルで作られているかを参考にしたり、ライセンスが問題なければデザインで利用させてもらうこともできます。今回はアプリやモバイル系のもの中心で、他にはダッシュボードデザインやシンプルなワイヤーフレーム素材などがあります。

  • Posted on
  • Material
Vanilla JavaScriptのプラグインをまとめた「Vanilla List」

Read More

Vanilla JavaScriptのプラグインをまとめた「Vanilla List」

覚えておきたいと思ったので備忘録兼ねて。「Vanilla List」はその名の通り、Vanilla JavaScriptで作成されたプラグインが多数まとめられているサイトです。現時点で105種類あるのでよく使いそうな動きのものはひと通り揃っている印象で、タグ付けや検索機能なども用意されているので目的のプラグインも探しやすいと思います。

  • Posted on
  • Tips

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。