- 【CSS3】斜めのストライプ状の背景をCSSだけで実装する方法 スタイルシートだけでウェブページの背景にストライプ状の模様を施すテクニック[CSS3 Background Stripes]を紹介します。 まずは実際のサンプルをご覧ください。 CSS3 Background Stripes : https… 【CSS3】斜めのストライプ状の背景をCSSだけで実装する方法続きを読む →
- WordPressプラグイン[Attendance Manager]を使っていたときに起きた不具合を解決。 登録ユーザーが200名を超える大規模なサイトで、WordPress プラグイン[Attendance Manager]を設置するという案件に携わりました。 最初は問題なく運営できていたのですが、数週間後に先方からエラーの報告がありました。 … WordPressプラグイン[Attendance Manager]を使っていたときに起きた不具合を解決。続きを読む →
- 【jQuery】シンプルなLightbox系プラグイン[Darkbox jQuery Gallery]の使い方 今日ご紹介する[Darkbox jQuery Gallery]は、有名な[Lighbox]系のミニマルなjQueryプラグインです。 サンプル : https://on-ze.com/demo/jquery-darkbox-gallery/… 【jQuery】シンプルなLightbox系プラグイン[Darkbox jQuery Gallery]の使い方続きを読む →
- 【iOS 11】iPhoneのコントロールセンターからナイトシフトを有効化する方法 iPhoneには、ディスプレイの色味を暖色系にして暗所での利用時に最適な『Night Shift』という機能があります。 iOS 10 まではコントロールセンターからスグに有効化できましたが、最新の iOS 11 からはその項目が無くなって… 【iOS 11】iPhoneのコントロールセンターからナイトシフトを有効化する方法続きを読む →
- 【JavaScript】超便利「Masonry」の簡易版[MiniMasonry.js]の使い方 [MiniMasonry.js]は有名なMasonryの機能を制限した簡易版のライブラリです。 データ容量も軽く、jQueryなどに依存せず単体で動くので便利です。 使い方は以下より。 Sample : https://projects.s… 【JavaScript】超便利「Masonry」の簡易版[MiniMasonry.js]の使い方続きを読む →
- 【WordPress】ユーザーのアバターのURLを取得する方法 WordPressで任意の記事の投稿者アバターのURLを取り出す方法。備忘録です。 ループ内で以下のコードを記述すればOKです。 簡単でしたね。 <?php $author = get_the_author_meta(‘id’); $… 【WordPress】ユーザーのアバターのURLを取得する方法続きを読む →
- お手軽にインスタグラム風の写真を再現できる[Instagram.css]フィルターを実装 いま若者を中心に流行中のインスタグラムですが、投稿する写真を美しく際立たせるフィルター機能は、人気の秘訣でもあり大きな特徴の1つになっています。 今日ご紹介する[Instagram.css]は、ウェブサイトで使用している画像にインスタグラム… お手軽にインスタグラム風の写真を再現できる[Instagram.css]フィルターを実装続きを読む →
- 【JavaScript】美しい泡が漂う[Beautiful bubbly backgrounds]の使い方 ウェブページの背景に動きのある美しい泡を表現できるJavaScriptライブラリ[Beautiful bubbly backgrounds]を紹介します。 ↓サンプルはこちら。 サンプル : https://on-ze.com/demo/j… 【JavaScript】美しい泡が漂う[Beautiful bubbly backgrounds]の使い方続きを読む →
- 失われし「marquee」タグを再現する[hMarquee]でテキストの横スクロールを実装! 新参のウェブデザイナーの方々には馴染みがないかもしれませんが、過去、HTMLの「marquee」タグが流行した時代がありました。 既に廃止されたこのタグは、テキストを横スクロールさせるために用いられていました。 いま、これと同じ挙動を実現す… 失われし「marquee」タグを再現する[hMarquee]でテキストの横スクロールを実装!続きを読む →
- コーディングガイドライン 要素の分類 コンポーネント コンポーネントとは 機能的に独立した再利用可能なUIのパーツです。コンポーネントは入れ子にすることができます。(例:.menu-listの中に.menu-item) コンポーネントのクラ… 続きを読む →
- Joe Harrison氏が提案する[Responsive Logos]が面白い! デザイナーの Joe Harrison 氏が提案している[Responsive Logos](レスポンシブ・ロゴ)のアイディアが面白いので紹介します。 Responsive Logos 現在サイトで紹介されているのは以下の16企業。 目次C… Joe Harrison氏が提案する[Responsive Logos]が面白い!続きを読む →
- 【JavaScript】超簡単にパララックス効果を実装できる[simpleParallax.js]の使い方 今日はウェブサイトにお手軽にパララックス効果の画像を設置できるJavaScriptプラグイン[simpleParallax.js]の使い方を紹介します。 本体を読み込んで画像に任意のクラス名を指定すればスグに実装できます。 [simpleP… 【JavaScript】超簡単にパララックス効果を実装できる[simpleParallax.js]の使い方続きを読む →
- 2017年度に買って良かったモノ × 11選 2017年。今年の買い物で、特に重宝している、または買ってヨカッタな〜と思っているモノを厳選して11個、紹介します! 目次ダイソン 掃除機 コードレス V8NOLTY 手帳 ベルノ B5 バーチカルプラス ホッチキス フラットかるヒット新訳… 2017年度に買って良かったモノ × 11選続きを読む →
- 【CSS】ボックス要素をCSSだけでクリッピングできるのか? Q 質問:ボックス要素をCSSだけでクリッピングできるのか? A 回答:できます! ……というワケで、スタイルシートの記述だけでボックス要素をクリッピング(切り抜き表示)する方法を紹介します。 使用するのは「clip-path」プロパティ。… 【CSS】ボックス要素をCSSだけでクリッピングできるのか?続きを読む →
- 【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる[Macy.js]の使い方 Masonry風のグリッドレイアウト採用時に、ぜひ導入したいJavaScriptのライブラリ[Macy.js]を紹介します。 まずは動作サンプルをご覧ください。 Macy.js : 動作サンプル ウィンドウサイズの変えると、その横幅に応じて… 【JavaScript】簡単にMasonry風グリッドレイアウトを実装できる[Macy.js]の使い方続きを読む →
- 【CSS】特定の職業の方には透明に見えてしまう背景をスタイルシートで実装してみた。 さてさて。タイトルのとおり、そのまんまです。 まずはデモをご覧ください。 DEMO : https://on-ze.com/demo/css-bg-transparent/ 背景全面を覆うと目がチカチカしてしまいますが、特定の職業の方には透… 【CSS】特定の職業の方には透明に見えてしまう背景をスタイルシートで実装してみた。続きを読む →