漢字も使えて高品質！商用利用も可能な日本語フリーフォント 20 - NxWorld
数年前まで少ない印象だった日本語フリーフォントですが、最近では少し探すだけでひと通り漢字も利用できて高品質なのにも関わらず商用利用可能というフォントも数多く出てきます。 今回はそんな数ある日本語フリーフォントの中から、商用利用も可能で個人的によく利用させてもらっていたり覚えておきたいと思ったものを紹介します。 紹介しているフォントはいずれもエントリー公開時点では商用利用可能となっているものですが、今後変更される場合もあるので、実際に使用する際はライセンス等を各自で再度確認してください。 ロゴたいぷゴシック ロゴデザインや見出し向けのフリーフォントで、漢字も含まれています。 文字の角が多少丸まっていることで、キッチリしすぎてないのも特徴です。 スマートフォントUI 全体的に長体（約90%のコンデンスド）になっており、グリッドを意識したシステマチックなデザインになっています。 漢字もIPAex
WordPress：メタボックスの開閉機能やドラッグ機能を無効化する方法 - NxWorld
WordPressの管理画面にあるメタボックスが、デフォルトで開閉して中身の表示・非表示を切り替えたりドラッグして表示位置を変更できるのを無効化する方法です。 メタボックスとは、例えばWordPressの記事投稿画面で抜粋やカテゴリーの入力・選択を表示しているボックスのことで、これはボックスを開閉したりドラッグして移動させることができるようになっています。 ただ、この開閉できる機能やドラッグできる機能があることによって、入力欄が消えてしまったとか勝手にボックスが移動しているみたいな連絡を（そんなわけないと思いつつ...）まれにですが受けることがあるので、そういったクライアント向けの対策としてメタボックスの開閉機能やドラッグ機能を無効化していきます。 実装にはfunctions.phpに下記を記述します。 add_action( 'admin_footer-post-new.php', 'd
Sass：eachやforを使って繰り返し記述する手間を省く - NxWorld
Sassには@eachや@forといった制御構文があり、それらを利用することでCSSで繰り返し記述していたような手間を省くことができます。 そこで今回は基本的なものでありますが、その制御構文を使って繰り返し記述するようなものを楽に出力するサンプルをいくつか紹介します。 例えばクラス名の一部と背景画像名だけ変更したものをいくつも記述するとか連番付きクラスをいくつも記述しながら一部プロパティだけ変更するなど、普段からCSSを書くことが多い人であれば、ほとんどの人が先述したような同じようなものを繰り返し記述していくということをしたことがあると思います。 そういったときにSassを使っていれば、@eachや@forといった制御構文を利用して繰り返し記述する手間を省くことができます。 ここで紹介しているものはいずれも簡易的なものですし、実際に使ってみたりコードを少し見ればわかるようなものばかりだと思
対応形式も豊富で、約200種類のツールやジェネレータがまとめられている「Beautify Converter」 | NxWorld
これは便利だと即ブックマークしたのでご紹介。 「Beautify Converter」は圧縮・整形ツールやコンバーターをはじめ、様々なツールやジェネレータが用意されているサイトです。 とにかく様々なツールやジェネレータが用意されており、対応している形式もよく利用されるようなものはひと通り揃っていると思います。 サイト内での一覧は大きくわけて5つにグループ化されており、それぞれ下記のような形になっています。 また、スクロールしたり探すのが面倒であればサイト右上にアンカーが用意されているので、そちらで目的のツールや形式に辿り着きやすいと思います。 Beautifier And Minifier tools 「Beautifier And Minifier tools」は圧縮ツールや整形ツールが用意されており、HTML・CSSはもちろん、JavaScript・JSON・XMLなども用意されていま
WordPress：previous_posts_link()とnext_posts_link()に任意のクラスを付加する方法 - NxWorld
WordPressで前後のリンクを表示するprevious_posts_link()とnext_posts_link()を使用した際に出力されるaタグに任意のクラスを付加する方法です。 また、併せてprevious_post_link()とnext_post_link()を使用した際のクラス付加についても紹介します。 previous_posts_link() と next_posts_link() にクラス付加 実装には下記をfunctions.phpに記述し、記述後に表示確認すると前ページへのa要素に.prev-linkが、次ページへのa要素に.next-linkというクラスがそれぞれ付加されているのを確認できます。 function add_prev_posts_link_class() { return 'class="prev-link"'; } add_filter( 'pre
jQuery：スクロールしたらヘッダーやナビゲーションを固定・変化させる動きを実装するサンプルコード 5 - NxWorld
一度は見かけたことがあると思う、スクロールしたらヘッダーやナビゲーションを固定表示させたり見栄えを変化させたりする動きをjQueryで実装するサンプルです。 途中から要素を固定させたり、スクロールした方向によって表示・非表示を切り替えたりなど全5種類です。 使用HTML 特にこのようにしなければいけないというものではないですが、今回のサンプルで使用しているHTMLはいずれも下記のようなもの（サンプルによってはnav要素がないものもあります）になっており、このHTMLにあるheaderやnav要素に対してjQueryで処理していくといった感じになります。 <header> ...</header> <nav> ... </nav> <main> ... </main> <footer> ... </footer>
WordPress：テンプレートタグや関数などを外部で使用する方法 - NxWorld
主に独自のプログラムで書かれていて且つそれがWordPress外に設置されているファイルだけどWordPressのテンプレートタグや関数を使用したい、サイト全体をWordPress化するわけではないけどヘッダー・フッターなどの共通部分をテーマ内で使用しているものにしたいなど、WordPressのテンプレートタグや関数などを外部ファイルで使用したいときに使える方法です。 WordPress外でもテンプレートタグや関数などを使用したい場合は、下記のようにwp-load.phpを読むように記述することで使用可能になります。 /path/の部分は環境によって変更し、例えばルートディレクトリにWordPressとは関係ないファイルAとWordPressの各ファイルが格納されている/wpというディレクトリがあるとき、WordPress配下ではないファイルAでも下記を記述することでWordPressのテ
医療・ヘルスケア関連のデザインアイコンセット 30 - NxWorld
医療器具からお医者さんまで、様々な医療・ヘルスケア関連のデザインアイコンセットのまとめです。 可愛らしい見た目や色合いのものが多く、その他にもシンプルなものやフラットデザインなものまであります。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。
CSSで装飾されたボタンを手軽に使いたいときに便利なボタンライブラリ 5 - NxWorld
特定のCSSを読み込み、適応したい要素にclass指定をするだけで簡単に装飾されたボタンを実装できるボタンライブラリを5つ紹介します。 カラーやサイズ指定をはじめ、中には20種類以上のデザインが用意されているものもあります。 そのまま利用させてもらうのはもちろん、特に中規模〜大規模サイトではボタンを共通コンポーネントのひとつとして用意することも多いと思うので、その際の参考にすることもできます。 Buttons 指定時の共通接頭辞は「button」 カラーは6色、サイズは6サイズ分用意されており、3D・ロングシャドウ・グローといったデザインタイプや角丸指定もできるようになっているボタンライブラリで、通常の見栄えだけでなくホバー時やクリック時の見栄えもカバーされています。 基本的には必要なCSSを読んで、適用したい要素に対して特定のclassを付与するだけですが、ドロップダウン使用時はjQue
gulp-load-pluginsを使ってプラグインの読み込みを簡素化する - NxWorld
タスクの記述 次に実際にタスクに記述していきますが、今回はサンプルとして下記のようなCSS関連のタスクが記述されているgulpfile.jsを用意し、ここに「gulp-load-plugins」を使ってみる形で紹介していきます。 var gulp = require( 'gulp' ), autoprefixer = require( 'autoprefixer' ), sass = require( 'gulp-sass' ), postcss = require( 'gulp-postcss' ), plumber = require( 'gulp-plumber' ), notify = require( 'gulp-notify' ); gulp.task('css', function() { return gulp.src('./src/scss/**/*.scss') .pi
Sass：連番付きid・classをゼロパディング（ゼロ埋め）で出力する方法 - NxWorld
Sassを利用してて連番付きのidまたはclassを一気に出力したいときに、item1, item2, item3 ... のように単純に1から始まる連番をつけて出力するのではなく、item01, item02, item03 ... のようなゼロパディング（ゼロ埋め）な連番で出力させる方法です。 ゼロパディングとは ゼロパディングとは、足りない桁数の分だけ「0」を追加して埋めるというものです。 具体的な例としては、1, 2, 3, 4, 5という数字の場合であっても桁数を2桁にする必要があるときは01, 02, 03, 04, 05にするというものになります。 単純な連番付きで出力する 違いを見るために、まずは単純な連番付きで出力してみます。 今回はサンプルとして.item ＋ 連番のようなclassを出力するというもので、連番は1～10まで出したいという場合は@forを利用してSCSS
gulp：タスク一覧表示に説明文も表示させる方法 - NxWorld
gulpではあるコマンドでどのようなタスクが定義されているかを一覧表示して確認することができますが、その際にタスク名だけでなくそのタスクの説明文も一緒に表示させる方法です。 「gulp：タスクやインストール済みプラグイン・モジュールの一覧を表示する方法」で紹介しているように、gulpは$ gulp --tasks または $ gulp -Tのコマンドを実行することでタスクの一覧表示ができ、その際は下記のような感じのツリー形式で表示され、現在どのようなタスク定義されているかやどのようなタスクが組み合わさっているかなどを確認することができるようになっています。 [00:00:00] Tasks for ~\path\gulpfile.js [00:00:00] ├─┬ default [00:00:00] │ ├── task1 [00:00:00] │ └── task2 [00:00:00
web制作に関する様々なリソース・ツールをまとめているサイトのまとめ - NxWorld
役立つリファレンスやスニペットサイト、様々なコードを容易に出力してくれるジェネレータ、デザイン制作に使えるテクスチャ・アイコン・フォントといった各種デザイン素材の配布サイト、SEOやマーケティングに関する便利ツールなど、インターネット上にはサイト制作時や運用時の手助けをしてくれるサイトが沢山あります。 今回はそういった便利なリソース・ツールサイトをまとめているサイトを集めてみました。 頻繁に使用するものであれば多くの人はそのサイトをブックマークしておき、必要なときにすぐ閲覧できるようにしておくとは思いますが、例えば覚えておきたいけれど正直使う機会は少ないみたいなサイトが多数あるようなときで且つブックマークをあまりごちゃごちゃさせたくないときなどに、場合によっては以下で紹介しているサイトをひとつブックマークしておくだけでブックマーク周りをスッキリさせることができると思います。 いずれも海外の
Sass：cubic-bezierを使った各種イージングを変数化しておき、簡単に指定できるようにする備忘録 - NxWorld
CSSでイージングを使用する際、easeやlinearの場合はそのままその名前を値に記述すればいいですが、例えばeaseOutCubicやeaseOutExpoなどを使用したいときはcubic-bezierを用いて記述する必要があります。 ただ、それぞれの指定数値をいちいち覚えておくのは面倒なのと単純にイージング名で使用できたらいいなと思ったので、簡単に指定できるように変数化してみた備忘録です。 紹介しているイージング名やcubic-bezierの各値については、「Easing Function 早見表」を参照しており、それに加えease, linear, easeIn, easeOut, easeInOutも含めてあります。 単純な変数化 $ease : cubic-bezier(0.25, 0.1, 0.25, 1); $linear : cubic-bezier(0, 0, 1, 1
Sass(SCSS)のmixinを使って、Media Queries（メディアクエリ）を使いやすくするスニペット - NxWorld
ブレイクポイントや使用回数が増えるに連れてどんどん管理などが面倒になってくるMedia Queries（メディアクエリ）を、Sassのmixinを使って利用しやすく且つ管理もしやすいようにしたスニペットを紹介します。 ここで紹介する以外にも方法はあるとは思いますが、個人的に過去に使っていたとか普段から使っているものを3パターン紹介します。 条件分岐を使う ひとつ目は条件分岐を使ってひとつずつブレイクポイントを指定したものです。 ブレイクポイントの追加をしたい場合は同じように条件分岐を追記し、逆に不要なものがあれば該当の条件分岐を消せば変更できます。 また、各ブレイクポイントは数値での指定ではなく「small」や「large」という形でそれぞれ用意しており、使用時はこれらを引数に指定します。 こうしておくことで後で数値を変更することになった場合でも、mixin内で記述している数値部分のみ変更
クリスマスデザインに役立つ素材まとめ - NxWorld
12月に入りクリスマスまでもうすぐということで、まだまだこれから素敵なものが出てくるとは思いますが、クリスマスデザイン制作時に役立ちそうな素材を少し古めから最近のものまで一気にまとめました。 紹介している素材を使用する際は、ライセンス等は各自で再度確認してください。
Sass(SCSS)のマップを利用したカラーコード管理 - NxWorld
Sass(SCSS)でのカラーコード管理方法として、マップを用いたら良さそうと思い試してみたものです。 もっと便利な感じにできそうで正直そこまで使いやすいと感じたわけでもないですが、そのまま消すのもあれだったので備忘録として残しておこうと思います。 Sassでカラーコードを管理しときたいなってとき、自分の場合はそれ用のSCSSファイルとか用意し、そこに下記のような感じで各カラーを変数定義しておくことが多いです。 $color-red : #e74c3c; $color-red-light : #f09188; $color-red-dark : #b82617; $button-color : #333; $button-hover-color : #888; $button-active-color : #2ecc71; $sns-twitter : #55acee; $sns-face
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
洋服・靴・小物など、ファッション関連のデザインアイコンセット 15 - NxWorld
今年気になったハイクオリティなデザインUIキット − 2016 - NxWorld
Page Not Found - NxWorld
