【CSS3】アニメーション曲線を定義する transition-timing-function の「cubic-bezier()」の値をまとめてみた。 ご存知のとおり、CSS3の「transition-timing-function」では時間毎のアニメーションの変化を指定することができます。 標準では次の値が用意されています。 ease … 初期値 linear … 一定 ease-in … ゆっくり始まる ease-out … ゆっくり終わる ease-in-out …ゆっくり始まってゆっくり終わる cubic-bezier() … カスタムで指定可能 今日はこの中の「cubic-bezier()」に焦点を当てて、指定できる値をまとめてみました。 正弦曲線（Sine Curve） sineEaseIn（jQueryEasing : easeInSine） $easeInSine: cub

先日WordPressがアップデートされて「Version 4.4」がリリースされました。 いくつかの新しい機能が追加されましたが、今回から採用された「Embed」は比較的新しいシステムなのでご存じない方が多いと思います。 この機能は、他のウェブサイトで「oEmbed」に対応している記事を、自分のブログに埋め込み可能になるもので、WordPress4.4 以降からは記事のURLを貼るだけで簡単に引用表示できます。 なお「Embed」機能で引用表示される情報は以下のとおり。 アイキャッチ画像 タイトル 抜粋テキスト サイトロゴ サイトタイトル コメント数 共有ダイアログ また「Embed」対応のために、WordPress4.4にアップデートすると<?php wp_head(); ?>のときに下記のコードが自動で挿入されるようになります。 <link rel='https://api.w.or

「黒」×「ピンク」ってオシャレな色の定番の組み合わせのはずなのに、過激な印象が先行してしまうためか、ウェブデザインに限定して探してみると意外に人気がなく、採用しているサイトが少ないんです。 特に性的なイメージを喚起させる側面があるためか、企業サイトではほぼ使われることがありません。 しかし何と言っても「ピンク」は女性が好むNO.1の色ですし、できれば効果的に利用してウェブデザインに取り入れたいものです。 そこで今日は弊社スタッフが果てしないネットサーフィンの末に見つけ出してきた Black & Pink のオシャレなウェブサイトを11個、紹介していきます。 「黒」と一口に言っても濃淡があり様々な種類がありますが、今回はより濃い『リッチ・ブラック』と、同じ「ピンク」の中でも彩度が高い『ショッキング・ピンク』を組み合わせたサイトをメインにピックアップしました。 以下よりどうぞ！ RANA 00

斬新なポリゴン・スタイルの背景を描画する jQuery プラグイン［Geometryangle］を紹介します。 まずはサンプルをご覧ください。 ［Geometryangle］：実装サンプル 指定したボックス要素全体に幾何学的な模様を描画し、さらにマウスカーソルの位置に反応してインタラクティブに動きます。 似たようなjQueryプラグインでは以前も紹介した［Particleground］が有名です。 どちらも幾何学的なパーティクル・アニメーションを実装できますが、今回紹介する［Geometryangle］の方がクオリティが高いですね。 なおHTML5から導入された新要素「canvas」を使って描画しているので「IE」などの古いブラウザやスマートフォンでは何も表示されません。 最新のモダンブラウザの利用が必須になります。 実装方法は以下より。 ［Geometryangle］の導入方法 何はとも

今日は「リセット用スタイルシート」について、その概要と私たちの見解、またウェブサイト制作の現場で実際に利用しているオンズ独自のスタイルシート［ONZE Reset CSS］を紹介していきます。 「スタイルシート・リセット」とは？ 各ブラウザにはデフォルトのCSSが設定されていますが、このスタイルはブラウザによって大きく異なるため、注意深くコーディングをしていかないと後々に各ブラウザ毎の表示の違いに悩むことになり、作業が滞る原因になります。 「各ブラウザ毎の表示の違い」は無視できない重要な問題です。 HTMLとCSSでウェブサイトのデザインを構築していくとき、この相違点を考慮せずに作業ができることが理想です。 そこで、その後のコーディング作業が捗るように「各ブラウザのデフォルトのスタイルをあらかじめリセットしておこう」というのが「スタイルシート・リセット」の基本的な考え方です。 普及している

【jQuery】レスポンシヴ対応の高機能・高品質スライダー［slick］の使い方。Ver.1.8.1対応 高機能・高品質なjQueryスライダー［slick］の使い方を紹介します。 このjQueryスライダーは「FlexSlider」「BxSlider」「flickity」「Swiper」など、他の優良jQueryプラグインと並んで紹介されることも多く、公式サイトでは「the last carousel you’ll ever need.（訳：あなたが必要とする最後のカルーセル）」と謳われており、実際、オプションの豊富さや安定した挙動が評価され、多くの制作者様がオススメし、また実際のウェブサイトでもよく使われています。 公式サイトは以下。 公式サイト：slick 「get it now」というリンクを押した後、「Download Now」をクリックすると配布されているファイル一式をダウンロ

今さら……という感じがしなくもないですが、レスポンシヴ対応のグリッド・システムを作ったのでシェアします。 巷に出回っているものは横幅をピクセル単位で指定しているものが多いのですが、今回はパーセント単位で、ウィンドウサイズに合わせてフレキシブルに対応できるタイプのものを制作しました。 まずはサンプルをご覧ください。 レスポンシヴ対応 CSS グリッド・システム ボックス要素をグリッドに沿って配置したいとき、この［グリッド・システム］を使えば簡単に実装できます。 スタイルシートの記述は以下のとおり。 .grid {text-align:left; margin:0 0 20px 0;} .grid:after {content:""; clear:both; display:block; visibility:hidden; height:0;} .grid-1, .grid-2, .grid

高機能なスライドショーを実装するためのjQueryベースのプラグインと言えば、「FlexSlider」「CarouFredSel」「bxSlider」などが有名ですが、今後これらのプラグインに代わって定番になるであろう、秀逸なスクリプトが公開されていました。 はじめに。 ［flickity］と名付けられたコンテンツスライダーです。 他のスクリプトに代わって台頭するであろう、幾つかの理由があります。 ポイントは以下の点。 レスポンシヴ対応。 モバイル端末のタッチやフリック入力に対応。 スクリプト単体でも動く。 jQueryに依存しない。 デフォルトで［imagesLoaded］との併用が可能。 設定にはHTML5のデータ属性を利用することも可能。 スクリプト一式をダウンロードしてサイトに組み込み、任意のhtmlを記述するだけで動く点は初心者の方にも優しい仕様ですね。 また設定にHTML5のデ

星の数ほどあるWordPressのプラグインの中から、ほんとうに使うべきものを探すのはなかなか骨が折れる作業です。 大抵の情報が英語なので、翻訳する必要もあるでしょうし、実際に有効化して挙動を検証し、取捨選択していくのはかなり手間がかかります。 さて。そこで今日は、オンズが制作しているWordPressベースのウェブサイトで、ほぼ必ずと言っていいほど使用する代表的なプラグインを紹介します。 Jetpack by WordPress.com Akismet WP Multibyte Patch Broken Link Checker WP Admin Basic Auth Limit Login Attempts Crazy Bone （狂骨） Google XML Sitemaps Contact Form 7 Advanced Custom Fields WP Social Bookma

WordPressの［ショートコード］は、基本的には投稿や固定ページの編集画面で埋め込んで使います。 しかし、簡単なコードを利用することで［header.php］や［sidebar.php］、または「page.php」などのテーマファイル内でも機能するようになります。 以下の書式でテーマファイルの任意の場所に記述すればOK。 <?php echo do_shortcode('[ショートコード]'); ?> このテクニック、けっこう知らない方が多いようです。 便利なのでぜひ覚えておいてください。

CSS3 から使えるようになった新しいプロパティ display:table; とdisplay:table-cell; は、これまで［float］を使って組んでいたレイアウトを、より直感的に、より簡単に実現できるので大変便利です。 しかし display:table-cell; で指定したボックスには［margin］が効かないというデメリットもあります。 ここで紹介するのは、［border-collapse］と［border-spacing］を使ってセルの間隔を調整する方法です。 基本的に display:table; で指定した要素は、所謂「table」として扱われるので、当然［border-collapse］と［border-spacing］も効くようになります。 ［border-collapse］はセルのボーダーを重ねるか間隔を空けるかを、［border-spacing］はどれぐら

セキュリティ対策のため、あるいは、主に１人で管理している WordPress サイトでは、パスワードの再発行機能が不要なことがあります。 そこで、この機能自体を無効にする方法をいくつか調べてみました。 単純に［wp-login.php］に手を加えれば解決しそうですが、WordPress のアップグレードの際、仕様が変更になりエラーが発生する可能性があります。そこで、「WordPress を構成するコアファイルには手を触れずに、なるべくテーマファイルの中だけで完結できること」を条件として設定します。 CSS で表示を消してみる。 とりあえずスタイルシートを使って表示を消してみましょう。 試しに下記コードを［functions.php］に追加します。 function login_css() { echo '#login #nav{display:none;}'."n"; } add_acti

リストマークや矢印として最適な三角形を、CSS だけで表示させる方法を紹介します。 キモとなるのは CSS の［border］プロパティ。この［border］の描画システムを覚えれば、三角形だけでなく様々な形を表現することができます。 まずは基本的な［border］の描画スタイルを見てみましょう。 通常、「width」と「height」の値が「0」のブロック要素に［border］プロパティを指定した場合、以下のようにレンダリングされます。 これを踏まえて、例えば右向きの三角形を作る場合。 CSS は以下のように記述します。 width:40px; height:40px; display:inline-block; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o