画像は使用せずに、ラインやサークルや八角形や波線などのさまざまなパターンのテクスチャがSVGで描けるスクリプトを紹介します。 SVGで、テクスチャも作成できるようになってしまいました。
WordPressの管理画面へのログイン時のURL(wp-login.php)を簡単に変更できる国産プラグインを紹介します。 管理画面に総当たり攻撃をされて困っている人は是非お試しください。 当ブログはこのプラグインを使用して解決しました、作者様に感謝! Login rebuilder -Plugin Directory Login rebuilder公式ページ(日本語) Login rebuilderのインストール Login rebuilderの設定 Login rebuilderのインストール WordPress公式のPlugin Directoryから通常のプラグインと同様にインストールできます。 管理画面の「プラグイン」から「新規追加」を選択。 「プラグインの検索」に「Login rebuilder」を入力して検索。 「Login rebuilder」の「いますぐインストール」を
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex
僕は、プログラムをする上で変数や関数に良い名前を付けるのはとても重要と考えています。 というのも、良い名前を付ければ、それだけでそのコードがしたいことの説明になり、コメントと同等の働きをすることもあるからです。 自分がちゃんとそれをできているのかはさておき、僕は普段から、できれば読みやすくて分かりやすい名前を付けたいと思っています。他の人も読むコードであれば、できればプログラムでよく使われるような単語を利用して書いた方がより分かりやすいです。 ただ、よい名前を考えるのって、ちょっと面倒くさいんですよね。僕はこれまで、英語の辞書を利用して、考えたりしていたのですが、「何か、プログラムでよく使われる単語をまとめたものはないか?」と探したら、ドンピシャのものがいくつかあったので、それらをまとめて以下で紹介します。 photo by Michael Coté codic codic – デベロッパ
WordPressには数多くのテーマファイルがありますが、それらとは少し違ったアプローチのテーマ「Layers」を紹介します。 ページ作成にはHTML/CSSの知識は不要で、レイアウトやウィジェットを組み合わせてかっこいいページを直感的に作成できます。 Layers Layers -GitHub ライセンスはGPL 2.0 Licenseで、商用利用、修正、配布などが無料で行えます。 通常のテーマファイルはデザインが完成していて、画像やテキストを配置しますが、Layersはベースとなるレイアウトが数種類あり、そこにコンポーネントやウィジェットを自由に組み合わせてページを作成します。 ページのデザインを見ながらカスタマイズできるテーマという感じです。 組み合わせるのは簡単で、下記ページで動画で公開されています。
企業サイトやブログなどで使われるシンプルなグリッドをはじめ、オフセットのカラム、ネストのグリッド、左・右・天地揃えと中央揃え、逆順配置など、柔軟なグリッドが簡単に実装できるスタイルシートを紹介します。 Flaxboxを勉強したい初心者から、簡単に使いたいと考えてるベテランまで、勉強にも実装にも役立つ便利なスタイルシートです。 Flexbox Grid Flexbox Grid -GitHub Flexboxの各プロパティの解説は、下記ページをご覧ください。 最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説 Flexbox Gridで実装された柔軟なグリッド Flexbox Gridの使い方 Flexbox Gridで実装された柔軟なグリッド Webデザインで使うさまざまなグリッドをclassをちょちょいと加えるだけで実装できます。
最近のUIの傾向として、ユーザーが操作して楽しくなるようなアニメーションは大切なポイントです。そんな気持ちいいCSS3のアニメーションでモーダルウインドウをページ全体に表示するjQueryのプラグインを紹介します。 横からアニメみたいにひゅっとスライドさせたり、ぼい~んとバウンドさせたり、気持ちよくて面白いものが簡単に実装できます。 animatedModal.js animatedModal.js -GitHub animatedModal.jsのデモ animatedModal.jsの使い方 animatedModal.jsのデモ デモでは、3種類のアニメーションを使ったモーダルウインドウを試せます。 アニメーションはanimate.cssを利用しているので、80種類以上のエフェクトが利用できます。 デモページ:Demo 3 In: bounceIn, Out: bounceOut a
iOS/Androidなど、モバイル向けのWebサイト、Webアプリ、ネイティブアプリでの利用に最適化されたタッチデバイス対応のスライダーを実装できるスクリプトを紹介します。 キーボード操作やマウスのホイール・ドラッグ操作にも対応しているので、デスクトップでもOK! Swiper Swiper -GitHub Swiperの特徴 Swiperのデモ Swiperの使い方 Swiperの特徴 ライブラリに依存しない Swiperは他のスクリプトのライブラリに依存せず、軽量で速く動作するスクリプトです。 jQuery, Zetro, jQuery Mibileなどの他のライブラリと一緒に使う時も安全です。 タッチの動きをそのまま デフォルトの設定でタッチの動きを「1:1」でインタラクションとして提供できます。 豊富なオプション ページネーション・ナビゲーションボタン・パララックスエフェクトなど
3.デザイン費用、サーバサイド費用 人件費と製作期間で費用が決まりますが、主に月間80万円から100万円ほどが相場となります。 システム開発会社に依頼する場合、アプリデザインは制作会社にお願いする場合があります。 アプリの場合、どのような場所にボタンや画像を配置してユーザーの満足度を向上させるのか、UI/UXを考慮する必要があります。そのため、デザインの全体戦略から入ってデザインに落とし込む作業が発生します。 単独で動作するスタンドアローンのアプリを開発する場合は上記で述べた費用となりますが、データベースを活用して情報を掲載したい場合、サーバサイドの開発が必要になります。費用は最低でもアプリ開発費用の2倍から3倍以上が相場です。 4.公開後の保守費用 アプリを維持するための平均コストの相場は、年間開発コストの約20%と言われています。 アプリ公開後には、メンテナンス(保守)をする必要があり
ブログやWebサイトのパフォーマンスの改善やSEO、セキュリティの向上に役立つ.htaccessの設定を紹介します。 ドメインをwww有り・無しに統一、新ドメインに引っ越した時のリダイレクト、URLをクリーンなものにしたり、共有サーバーでのPHPのバージョンを指定したりなど、すぐに利用できるものばかりです。 .htaccess Snippets -GitHub 元記事には有用な.htaccessのスニペットがPublic Domainでまとめられおり、それら全部に加えて.htaccessファイルの作成と使い方を加えました。 .htaccessファイルの作成と使い方 リライトとリダイレクトの設定 セキュリティの設定 パフォーマンスの設定 その他のいろいろ有用な設定 .htaccessファイルの作成と使い方 「.htaccess」ファイルを作成することは非常に簡単です。 テキストベースのアプリ
Webページを見る時、ブラウザはどのくらいのサイズにしていますか? フルスクリーン? 小さいサイズ? 縦長or横長? ページを制作する際、レイアウトで重要なポイントはその幅ですが、高さを見落としてしまうと表示されないコンテンツに気がつかなかったなどクリティカルな問題になることもあります。 そんなブラウザの高さをみんながどのくらいにしているか統計をとっているサイトを紹介します。 I am The Fold I am The Foldでは、ページが表示された際のビューポートの高さを記録し、その統計を表示しています。 現時点でビューポートの高さで集中しているポイントは、504px, 568px, 667px, 775px, 798px, 1392px, 1522px、という感じです。 800px, 1000pxあたりが特に集中してますね。
インフォグラフィックやプレゼンテーション用の画像、名刺、フライヤー、ブログ用の画像、バナー、FacebookやTwitter用の画像など、魅力ある画像が簡単に作成できる無料のオンラインサービスを紹介します。 作成した画像は個人でも商用でも、Webでも紙でもプロダクトでも利用できます。 Canva ※ログインした状態 画像作成用の素材は豊富に用意されていますが、自分で作成したり、自前のファイルをアップロードして利用することもできます。 ※用意されている素材の一部は有料です。 Canvaのサインアップ方法 Canvaの使い方 Canvaで作成した画像の保存方法 インフォグラフィックやプレゼンテーション用のテンプレート Canvaのサインアップ方法 Canvaへのサインアップは無料で、簡単にできます。 Facebookアカウント(またはメールアドレス)を用意して、下記ページへアクセスします。
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは
スクロールをトリガーに要素をアニメーションで表示したり、ページを表示した時にちょっとしたエフェクトを加えたり、ボタンのホバー時に気持ちいいアニメーションを加えたり、CSS3のアニメーションを簡単に加えることができるリソースを紹介します。 Story Box Story Box -GitHub スクロールをトリガーに54種類のアニメーションを簡単に実装できるjQueryのプラグイン。アニメーションは非常に軽快で、デモ:ユニークの派手なアニメーションでも快適です。 ScrollMagic ScrollMagic -GitHub Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く