手っ取り早くグラデーションやパターン背景を用意したいときに便利なリソース・ジェネレータ 10
ワイヤーでデザインなどで使用するグラデーション背景やパターン背景を手っ取り早く用意したいときに便利なリソース・ジェネレータのまとめです。 中にはCSSコードで出力してくれるものもあるので、それらは既にコーディング済みのページに適用させるのも楽だと思います。 本格的に使用する場合は有償だったりライセンスに注意すべきものもありますが、多くはフリーで使用できて且つ自分好みにカスタマイズしたものをダウンロードできるようになっています。 ※サイトによってはライセンスに注意が必要なので、使用する際は各自で再度確認してください。 CSS3 Patterns Gallery CSSで再現できるパターン集で、少し変わった見栄えもlinear-gradient()やradial-gradient()を用いて表現しています。 実装に必要なコードは、それぞれパターンサークルをクリックすると確認できます。 Grad
スタイル作成の時間短縮や勉強にも使える、CSS関連の便利ジェネレータ 20 | NxWorld
用意された項目を数値入力や操作していくだけで簡単に見栄えが再現でき、必要なCSSコードなどを出力してくれるCSS関連のジェネレータのまとめです。 CSSが苦手な人は上手く利用すればスタイル作成の時間短縮になりますし、CSSを勉強中またはこれから勉強しようと思っている人の学習ツールとして使えるものもあります。 ツールによってはもう少しシンプルに実装できると感じるコードが出力されるので、その辺を判断できる人はそのまま出力コードを使うのではなくベースとして使用するのが良いかもしれません。 また、公開されてからしばらく経っているなどの理由で、現在ではほとんどの場合で不要なプレフィックスが出力されるものもあります。 各プロパティのプレフィックス有無の判断が難しい人は、「Can I use...」などと併用して試してみてください。 Neumorphism/Soft UI CSS shadow gene
console.log()だけじゃない、覚えておくとデバッグ効率の向上に繋がるConsole API - NxWorld
JavaScriptのデバッグ時などにconsole.log()を利用する人は多いと思いますが、Console APIには他にも呼び出された回数カウントや経過時間確認などといった便利なものが複数用意されています。 覚えておくとデータの中身を把握しやすくなったりデバッグ効率の向上に繋がると思うので、普段からJavaScriptを触ってはいるけど使ったことがないという人は試してみてください。 ログレベルについて記載していないものは、Chromeが「info」に、FirefoxとSafariが「ログ」に出力されます。 console.assert()以降で紹介している出力イメージはChromeのものになります。 また、ブラウザによっては使用できなかったり出力内容が紹介しているものとは異なっている場合があります。 console.log()
イメージホバー時に複数枚あることを伝えるCSSアニメーションサンプル - NxWorld
パッと見は1枚のイメージなのですが、そこにホバーすると複数枚のイメージがあるように見せるアニメーションをCSSで実装したものです。 リンク先でイメージが複数枚あるとかクリックすると複数枚表示するイメージモーダル（ライトボックス）が開くのを伝えたいときに使えるかと思います。 共通のHTML・CSS ここで紹介しているサンプルは基本的に下記のようなHTMLをベースに使用しています。 CSS次第ではあるので厳密にその順番である必要はないですが、img要素は1つ目で初期表示で表示させたいものを指定し、2つ目以降はホバー時に表示させたいものを指定していく想定になります。 <a href="#" class="images-preview"> <img src="img01.jpg"> <img src="img02.jpg"> <img src="img03.jpg"> <img src="img0
ラジオボタンとCSSを使ってソート機能を実装する - NxWorld
ラジオボタンとCSSを使って、特定の規則に従ってデータを並び替えるソート機能を実装するサンプルです。 ソート機能を実装しようと思ったらとりあえずJSを利用するのを考える人も多いと思いますが、本当に簡易的なものであればCSSでもそれっぽい動きが実装できます。 デモのようにページ上部にある「Reset」「Red」「Blue」「Yellow」をそれぞれ選択することによって、その下に並んでいる赤や青の要素が並び替えられる動きを実装していきます。 以前にもラジオボタンとCSSを組み合わせてちょっとした動きを実装するものとして「ラジオボタンとCSSを使ってレイアウトを切り替える」を紹介したのですが、今回も同様でラジオボタンの:checkedと間接セレクタ（~）を利用します。 まず、HTMLでソートの切り替えやリセットに利用するラジオボタン（<input type="radio">）とソートの対象となる
追従ヘッダー実装時に使える動作・デザインパターン例 - NxWorld
常にユーザーの視線に入るようにしておきたいとかサイトの回遊率をあげたいなどの理由で実装を頼まれることが多いと追従ヘッダー。 単純に基本となる見栄えを維持してそのまま追従させることも多いですが、少し変化を加えてほしいという要望をもらうことも少なくないので、そういった場面で提案しやすいようによくある動作・デザインのパターン例をまとめました。 紹介しているサイトの動きや見栄えは、いずれもPCでの表示確認時のものになります。 変更を加えずにそのまま追従 スクロール時にデザイン・位置とも特に変更を加えず、単純にファーストビューでの見栄えをそのまま維持して追従させるパターンです。 少しCSSを書くだけで容易に実装できる�点がメリットですが、ヘッダーの領域が広いデザインの場合は�その分コンテンツが見える領域が狭くなるというデメリットがあるので、仕様やデザイン上でどうしてもヘッダー領域が広くなってしまう場
WordPress：ログイン後にダッシュボードには移動せずに、他ページヘリダイレクトさせる方法 - NxWorld
フォーラムで見かけて個人的にも覚えておきたいと思う内容だったので備忘録。 デフォルトのWordPressはログイン後にダッシュボードに移動しますが、それを任意のページにリダイレクトさせる方法です。 また、ダッシュボードへ移動できないのにメニューに「ダッシュボード」の項目が表示されているのはアレなので、これを非表示にする方法も併せて紹介します。 ログイン後に任意のページヘリダイレクトさせる 「ダッシュボード」にアクセスしようとした際に別ページへリダイレクトさせるには、functions.phpに下記のように記述することで実装できます。 add_action( 'admin_init', 'redirect_dashiboard' ); function redirect_dashiboard() { if ( '/wp-admin/index.php' == $_SERVER['SCRIPT
WordPress：お問い合わせフォームを簡単に設置できるプラグイン「Contact Form 7」の備忘録 - NxWorld
「Contact Form 7」はお問い合わせフォームを簡単に設置でき、様々なカスタマイズも可能なので、多くのサイトで紹介・使用されているプラグインのひとつだと思います。 公式サイトでも多くの情報がありますし、人気のあるプラグインなので検索でもいろいろと出てはくるのですが、これだけ見れば良いっていう自分好みの感じのものを作りたかったので、使う頻度が高い使用方法やカスタマイズなどを備忘録としてまとめてみました。 紹介している内容は、WordPress Ver 3.5.1 と Contact Form 7 Ver 3.4.1 で確認等行ったものです。 Contact Form 7について フォームを作成する際、ほとんどの場合PHPなどのプログラミング知識が必要になってきます。 よほどの知識・技術がある人であれば容易に作ってしまうのかもしれませんが、ゼロからのフォーム作成は結構面倒ですし、知識が
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
NxWorld
CSSグラデーションで作った背景パターンのサンプル - NxWorld