gulp：とりあえず覚えておきたい、よく利用する基本タスクの記述サンプル - NxWorld
主にこれからgulpを使い始めよう（使い始めた）という人向けに、とりあえず覚えておきたいよく利用するタスクの基本的な記述例やプラグイン・モジュールを使った使用例をいくつかまとめてみました。 実際に使用する時はここで紹介しているような簡易的なものでなく、もっと複雑なタスクだったり様々なプラグイン・モジュールを組み合わせたりすることがほとんどですが、ファイルの移動や削除をはじめ、リネーム・結合・圧縮・監視など基本となるような処理の記述方法や動きを知りたい人は参考にしてみてください。 gulpの基本的な使用方法（環境準備やインストールなど）については割愛しています。 また、以下はいずれもgulpfile.jsに記載した例になり、ファイル指定のディレクトリは/src、出力先のディレクトリは/publicという想定になります。 ここで紹介している内容は、gulp Ver 3.9.1を使用した場合にな
ちょっとしたエフェクトやアニメーションを付けたい時に参考になるCSSテクニックのまとめ - NxWorld
既に多くの方がご存知だとは思いますが、ちょっとしたエフェクトやアニメーションなどもわざわざJavaScriptを利用しなくとも実装できるようになったりと、CSSを利用して様々な見せ方や動きを実装できるようになりました。 そこで今回は主にCSSを利用してエフェクトやアニメーションを付けたいときに参考になりそうなのもので、且つ使用頻度が高そうなデモやテクニックをまとめてみました。 一部紹介しているものの中にはクラス付加などの動きについてJavaScriptを利用してはいますが、基本的な動きはいずれもCSSを用いて表現しているものになります。 image hover 63 effects イメージにhoverするとキャプションが表示されるというエフェクトが多数まとめられています。 HTMLもシンプルでエフェクトはすべてCSSで実装されています。 Css3 Transform rotate, sc
テキスト周りのスタイリングに使えるCSSプロパティやスニペット - NxWorld
スタイリングといっても見栄えを大きく変えるとかではなく、ほとんどがただのプロパティ説明みたいな感じになっていますが、サイト制作時に覚えておくとテキスト周りをいろいろと変更できるCSSのプロパティや使用する頻度が高そうなスニペットみたいなものをひと通りまとめてみました。 紹介するもの全てがひと通りのブラウザで自由に使えるわけではありませんが、上手く利用すれば今まで画像を使用していた見栄えをCSSだけで再現できたり、複雑な組み方をしたりJavaScriptを使って実装していたりしたものがCSSのみでシンプルに実装できたりします。 November 27, 2015 追記 前川（@maepon）さんが、このエントリーでは記載していなかった各種プロパティのブラウザ対応状況についてまとめてくださいました。 OS・ブラウザの種類やプレフィックスの有無、Can I useの各種プロパティページへのリンク
見やすく綺麗なPSDをつくるためのポイントや覚えておきたい便利機能 10 - NxWorld
自分が普段からどちらかといえばデザインよりもコーディングなどの作業が多いので、中にはただのコーダー側の意見や愚痴っぽいのもあるかもしれませんが、Photoshopでデザインする際に見やすく綺麗なPSDにすることができると思うポイントや知っておくと便利だと思う機能をいくつかあげてみました。 最近だと特にレスポンシブが関連してIllustratorやSketchを使ってるという人も多いとは思いますが、デザイン制作時にPhotoshopを愛用しているという方は参考にしてみてください :) あくまで個人的に思ったことなので、バリバリのデザイナーさんとかで「もっとこうしたら良くなるよ！」とか「それはしない方が良いのに...」みたいな意見があればアドバイスやツッコミ大歓迎です。 ここで紹介している内容やキャプチャは「Adobe Photoshop CC 2017」を使用した想定のものになり、バージョン
テキストリンクのホバー時に使えるエフェクト・デザインサンプル 15 - NxWorld
文章内のテキストリンクやテキストのみで実装しているようなナビゲーションリンクなどで使えそうなホバーエフェクト・デザインのサンプルです。 文字数が変化したり改行が頻繁に入るような場所などでは正直使い辛くて利用できる場面が限られてしまうものも多いのですが、シンプルなHTMLとCSSで様々な見せ方ができます。 サンプルの中で特にdisplay: inline-block;を記述しているタイプのものが意図しない箇所で改行されたり、逆にされなかったりということがあるので注意して下さい。 実際にどのような動きになってしまうのかはブラウザを縮めて確認してもらったり、または自身で環境を用意して実装・確認をしてもらうとよりわかりやすいと思います。 ここで紹介するエフェクトは、基本的に<a href="#">リンク</a>のようなHTMLに対して実装したものになります。 また、サンプルコードに含まれていません
jQuery：ページトップへの動きに使えるエフェクト 5 - NxWorld
閲覧ページの先頭まで移動できるように設置しているところも多い「ページトップ」や「ページの先頭へ」といったページ内リンクで、移動する際の動きにjQueryを使ってエフェクトをつけたサンプルです。 よく見かける単純なスムーススクロールを含めた全5種類で、少しいじればその他の場所へのページ内リンクの動きとしても実装できます。 紹介している方法はいずれもjQueryを使用しており、サンプルによってはjQuery Easingも使用しているので予め読み込ませてください。 jQueryの記述はいずれもセレクタにa要素を指定しているため、特定の要素にのみ適用させたい場合などはidやclassを用いるなどして指定してください。 使用するHTML・デモ サンプルで使用しているHTMLは下記のようなa要素のhrefには#を記述したシンプルなものになっています。
WordPress：手軽にアンケートフォームを設置できるプラグイン「WP-Polls」 - NxWorld
見かけたことはあるものの、自分で実際に試したことがなかったので使い方など備忘録。 「WP-Polls」は、アンケートフォームを手軽に設置することができるWordPressプラグインで、やろうと思えば見栄えなども自分好みにいろいろカスタマイズできたり、集計結果もフィルタリングして確認することができます。 紹介している内容やキャプチャなどは、WordPress Ver 3.8.1で使用した際のものになります。 インストール・有効化 管理画面のプラグインから「WP-Polls」を検索してインストール、もしくは「WP-Polls」からファイルをダウンロードして環境にアップロード。 プラグインを有効化するとメニューに「Polls」という項目が追加され、そこで作成したアンケートの確認や設定などを行う。 日本語化する 記事内の説明時の項目名やキャプチャなどはプラグインをそのまま使用しているために全て英語
レスポンシブ対応されたLightbox系プラグイン・ライブラリ 10 - NxWorld
レスポンシブ対応されたLightbox系のプラグインやライブラリのまとめで、ほとんどがjQueryプラグインになりますが、中には単体で動くものもあります。 また、対応コンテツやエフェクトが多数あるもの、オプションがひと通り揃っているもの、動きや見栄えは少し簡易的になりますがIE7・8といったブラウザまで対応しているものなどタイプも様々です。 紹介時に対応ブラウザやデバイスに関しても記載している内容は、基本的に各配布先で記載されているものになります。 ただ、特にIEの場合は対応しているが他のブラウザに比べ動きが簡易的になってしまっていたり動きが怪しいものなどもあるので、対応しているという記載があっても使用前に自身で動きの確認をおすすめします。 Swipebox プラグイン名にもあるようにスワイプで画像を切り替えることができ、ギャラリーやビデオにも対応しているjQueryプラグインです。 オプ
WordPress：投稿一覧でアイキャッチ画像を次々登録することができるプラグイン「Easy Featured Images」 - NxWorld
Twenty Fifteen使って簡単に試しただけですが、すごく便利な感じがしたので備忘録兼ねて紹介します。 WordPressでアイキャッチ画像を指定していく際、通常なら各記事の編集ページから設定していくと思いますが、この「Easy Featured Images」というプラグインを使うことでわざわざ編集ページに飛ばなくても投稿一覧の画面のみで次々登録していくことができます。 紹介している内容やキャプチャなどは、WordPress Ver 4.2.2で使用した際のものになります。 インストール・有効化 管理画面のプラグインから「Easy Featured Images」を検索してインストール、もしくは「Easy Featured Images」からファイルをダウンロードして環境にアップロード。 特に設定なども必要ないので、プラグインを有効化するだけで使用できます。 使い方 プラグインを有
CSSのみで実装できる、画像と相性が良さそうなホバーエフェクト 15 - NxWorld
自分用にひと通りの動きを一覧化したものが欲しくて作ったのでシェアします。 リンクやボタンのホバー時にエフェクトを付けるのと同じように、画像にもホバー時に何かエフェクトを付けたいというときに使えそうなエフェクトのサンプルです。 CSS3を多用しているので全ブラウザで実装できるわけではありませんが、いずれもCSSのみを使用して実装したもので、拡大縮小・スライド・白黒・ブラー・フラッシュなど全15種類です。 共通のHTML・CSS サンプルはいずれも下記のようなHTMLを使用しており、CSSについても共通スタイルとしてそれぞれに指定しています。 CSSでは幅や高さを指定している部分もあるので、参考にされる際はこれらを自身の環境に合わせて調整してください。
プログラミング言語・webサービス・ファイルタイプ・ブラウザなど、web開発関連のアイコン・アイコンフォント 15 - NxWorld
プログラミング言語やフレームワークのロゴ、多くの開発者に利用されているwebサービスやツールのロゴ、シンプルでわかりやすくデザインされたファイルタイプ、フラットデザインで表現されたブラウザなど、いずれもweb開発に関連していると思うアイコン・アイコンフォントです。 普段のデザイン業務などにはほとんど使わないと思うものが多いですが、技術系ブログとかポートフォリオなんかでは便利そうです。 紹介しているアイコンを使用する際は、ライセンス等は各自で再度確認してください。 Devicons 言語・フレームワーク・Webサービス・ブラウザなど、Web開発関連のアイコンフォントセットで、見かけることの少ないツール系のロゴも多数用意されています。 Freebie: SVG Developer Icon Set SVGとAIの2形式が用意されている全17種類のアイコンセットで、見た目もカラーとモノクロの2タ
WordPress：最初・最後・奇数・偶数の記事にそれぞれclassを付けたり、表示内容を変更する方法 - NxWorld
実装方法を教えてもらったので、復習も兼ねた備忘録です。 WordPressで記事を表示する際に、特定の件数時にclassを付けたり表示する内容を変更させる方法です。 やろうと思えばスタイルの調整とかclass付ける程度であればCSSやjQueryで疑似classを使って実装することも可能ですが、中身をガラッと変えるときや特定の件数後に何かを表示させたいというときなどに非常に便利です。 最初とそれ以外とでclassを変更する たまに実装しているブログを見かけることもある、記事一覧などで最初の記事だけ背景色や文字サイズを変更するといったことをやりたいときに便利な方法です。 実装にはまずfunctions.phpへ下記のように記述します。
WordPress：body_class()に独自のclassを追加する方法＋代替で独自のidやclassのみをbodyに指定する方法 - NxWorld
body_class()はbody要素に使用するWordPressのテンプレートタグで、これを使うことで表示されるページによって様々なclassがbody要素に付加されて非常に便利なのですが、たまに「このclassもほしい」というときがあるので、そういった際に使えるbody_class()に独自のclassを追加する方法です。 また、いっそのことbody_class()を使用せずに、その代替としてbody要素に完全に独自のidやclassのみを指定するという方法も備忘録を兼ねて併せて紹介します。 body_class()の使い方 Twenty Fourteenなどデフォルトテーマのheader.phpを見ると確認できますが、body_class()の基本的な使い方は下記のように記述するだけで使用できます。 上記を記述して各ページのソースを確認するとbody要素に様々なclassが付加されて
WordPress：カスタマイズするなら覚えておきたい条件分岐について - NxWorld
WordPressを使ってサイトやブログを構築する際、例えば「一覧と詳細でサイドコンテンツを変えたい」とか「カテゴリーによって表示内容をガラッと変えたい」のように「○○の時に○○する」といったことをしたい場合に用いるのが条件分岐です。 WordPressには便利な条件分岐タグが沢山用意されており、それらを用いることで様々なことができるので、先述したように特定の条件で何か処理を行うカスタマイズをしたい方は参考にしてみてください。 条件分岐の使い方 条件分岐とは、簡単に説明すると「指定された条件に合うか・合わないかを判断し、判断に応じて処理を行う」というものになり、例えばWordPressの場合であればこれを利用することによって、同じテンプレートを使用していても条件に応じて全く違う見栄えにしたり、処理を行うといったことが可能です。 条件分岐にはswitch文というものもありますが、ここで紹介し
Pure CSSでアイコンを実装できるスタイルシート「icono」 - NxWorld
「icono」は、画像を使用せずに擬似要素や様々なプロパティを使用してCSSのみでアイコンを表現したスタイルシートです。 使い方も簡単で必要なファイルを読み込んでクラスを指定するだけで表示させることができ、CSSなのでカラー変更なども容易にできます。 アイコンは上のイメージのような見栄えで用意されており、これら全100種類のアイコンをCSSのみを使用して実装することができます。 使い方は必要なCSSを<link rel="stylesheet" href="icono.min.css">で読み込み、あとは要素に表示させたいアイコンのクラスを記述するだけで簡単に実装できます。 どのクラスでどのアイコンを表示させられるかはデモ画面で確認することができ、各アイコンをクリックすると表示される.icono-xxxをクラスとして各要素に記述していきます。 デモではi要素を使用していますが、下記のように
Sublime Text：Emmetでダミーテキストを出力する方法＋オリジナルダミーテキストをスニペット登録で作成・出力する方法 - NxWorld
普段からEmmetを多用している方ならご存知の方が多いと思いますが、Sublime Text使用時にEmmetを使って簡単にダミーテキストを出力させる方法です。 また、Emmetのスニペット登録を使ってオリジナルの日本語版ダミーテキストを作成・出力できるようにする方法を紹介します。 紹介している内容はSublime Text 3とEmmetを使用した結果を元に書いています。 エントリー内で「展開」としているのは、TabもしくはCtrl + Eを使用時を指しています。 Lorem Ipsum（ダミーテキスト）を表示する ダミーテキストとして有名なLorem ipsumですが、Emmetにはこれを簡単に出力してくれる機能がついています。 出力方法はloremとlipsumで2パターンあり、どちらかを記述して展開すると「Lorem ipsum dolor sit amet, consectetu
WordPress：お気に入り登録機能を実装できるプラグイン「WP Favorite Posts」 - NxWorld
「WP Favorite Posts」は、サイト独自のお気に入り機能を実装できるプラグインで、ECや不動産などの会員を絡めるようなサイトをWordPress使って作る際に便利なプラグインのひとつだと思います。 以前から気になっていたので少し触ってみたら良い感じだったので、その時の備忘録も兼ねて使い方など簡単に紹介します。 きっかけはかちびと.netさんの「「この記事をお気に入りに追加」を実装できるWordPressプラグイン・WP Favorite Posts」というエントリーで知ったんですが、このエントリーでも紹介されているようにECサイトであれば「気になる商品一覧」とか不動産サイトであれば「気になる物件一覧」みたいな会員サイトとかでよく見かけるお気に入り登録機能のようなものを簡単に実装できます。 お気に入り登録したい際のデータは、ログインユーザーに関してはデータベースに保存、そうでない
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Page Not Found - NxWorld
手書き風デザインにピッタリなデザイン欧文フォント - NxWorld
今年気になったハイクオリティなデザインUIキット − 2014 - NxWorld
