どうも、すんです。 例えばECサイト(ネットショップ)のデザインをするときに、「新商品」や「おすすめ！」など、商品にラベルや見出しをつけたくなることがあると思います。 こんな感じのシンプルなデザインだと物足りないというか、ちょっとさびしいですよね。 でも、色々な種類のラベルをつけたいけど全種類画像にして切り出してサイトに当てるのもめんどくさいな〜なんて思ってしまったり… 今回は、そんな時にcssのみで簡単に実装できちゃうラベルデザインを紹介していきたいと思います。 三角形のラベル /* 商品に見立てた枠 */ .triangle { background: #fafafa; width: 250px; height: 250px; border: #eee 1px solid; margin: 0 auto; position: relative; } /* ラベル部分 左上に表示 */

ページいっぱいの背景、コンテナいっぱいの背景、要素の背景などを垂直水平方向にパララックスさせるスクリプトを紹介します。 モバイルにも完全対応しており、全体をパララックスさせたり、カード型コンポーネントをずらしながら表示させたりできます。

こんにちは、フロントエンドエンジニアのいなばです。 最近何件かフォームのバリデーションの実装について相談される機会が続いたので、 社内勉強会の資料を作ったついでに記事にもしてみました。 今回は、大きく分けて下記2点を満たすフォームを作ってみたいと思います。 不正な入力値のとき、エラー内容がリアルタイムに表示される 各項目の入力内容により、送信ボタンの非活性化 / 活性化が切り替わる 最近では当たり前になりつつある、エラーの内容がその場で確認できて、項目のバリデーションがすべて通らないと送信ボタンが押せないフォームです。 基本方針 HTML/CSSでできることはHTML/CSSでやる HTMLでできないことをJavaScriptでカバーする HTML5からフォームのバリデーションに関する機能が拡張されたため、使えるものは使ってなるべく楽に実装することを目指します。 フォームを構成する要素 ざ

Easily find the best Material color for your projects. Here is 30 color combination based on material design color palette. By clicking color sample bar, You can check usage example in material design UI. Each of color combinations consists of following three kinds of colors. (1) Main (2) Optional (3) Accent For details, see Google Guideline. Contents

.btn-square { display: inline-block; padding: 0.5em 1em; text-decoration: none; background: #668ad8;/*ボタン色*/ color: #FFF; border-bottom: solid 4px #627295; border-radius: 3px; } .btn-square:active { /*ボタンを押したとき*/ -webkit-transform: translateY(4px); transform: translateY(4px);/*下に動く*/ border-bottom: none;/*線を消す*/ }

通常これまでは、1px のボーダーのグラデーションを実現する際、背景画像を用意して［background-image］プロパティを利用するのが一般的な方法でした。 しかしレスポンシヴ・デザインやスマートフォン対応のWebサイトの構築などにより、この方法では相応しくないケースが多くなってきました。 何か他の方法を探して代替しなければなりません。 さて。ここでブレイクスルー。 今回は［CSS3］のテクニックの１つとして、ボーダーのグラデーションを、画像を使わずに CSS のみで表現する方法をご紹介します。 まずはサンプルをご覧ください。 綺麗なグラデーションになっていますね。 ボーダー・グラデーション：サンプル HTML の記述は以下のように。 <div id="sample"> <p>このボックスの枠（border）を、CSS3 のテクニックを使ってグラデーション化させます。</p> </d

モバイルアプリケーションやウェブサイトのデザインは、画面が小さいゆえにどのようなデザインが好ましいか、常に議論されています。 文字のサイズ、画像の解像度、効果的なアイコンの使い方、アニメーションやカルーセルまで、小さな画面で効率よくブラウジングできるように、デスクトップアプリケーションやパソコンで見るWebサイトと異なる考え方で設計することが大切です。 その中でも比較的よく使われるのが、ハンバーガーメニューです。 ハンバーガーメニューは、3本の横線が並んだアイコンをタップすることでメニューを表示させる仕組みのUIで、ファーストビューでメニューを表示するスペースを節約できるので、多くのデザイナーが好んで使っていました。 実際、レスポンシブデザインを採用していても、画面サイズが大きければ通常のメニューを採用し、画面サイズが狭くなればハンバーガーメニューに切り替えるといったデザインが採用されるこ

ホームページを運営する上で、何かと非常に便利なワードプレスですが、様々なTipsを知っていればより深く自分好みのサイトにカスタマイズしていくことが可能です。 個人的には、PHPはまだまだ勉強が必要な状態ですが、先駆者様たちの情報を参考にさせて頂きながら、日々精進を続けている次第でございます。 ということで、今回は、ワードプレスの中でもカテゴリー・タグを出力する時に、覚えておきたいコードをまとめました。 また、カスタム投稿では、通常の書き方では（当たり前ですが）うまく動いてくれませんので、そちらも併せて掲載します。 カテゴリー取得カテゴリーをリンク付きで出力する<?php the_category(); ?>カテゴリーをリンク無しで出力する<?php $cat = get_the_category(); ?> <?php $cat = $cat[0]; ?> <?php echo get_c

「このデザインはシンプルだね」 と言われて、ピンとくる人はどれくらいいるでしょうか。 Appleのホームページのように、シンプルで洗練されたホームページをデザインしたいと思っている人はたくさんいるでしょう。 しかし、いくらワンポイントアドバイス集を見てもなんだかシンプルとはかけ離れていたり、どこかごちゃごちゃしていたりするのは、そもそもシンプルとはいかなるものか、その定義がはっきりしていないからです。 今回は、特にシンプルだと思われる洗練されたデザインのホームページを集めました。 シンプルさを表現したホームページを見て、「シンプルとはどういうことなのか」を突き詰めて考えてみましょう。 ※ホームページのキャプチャは掲載当時のものです。現在のホームページとは異なることがあります。 シンプルすぎるデザインのホームページ 1. Spencer Nelson http://spencenelson.

「HTML5」と並びよく目にする*「CSS3」*では、従来のCSS(スタイルシート)にはない様々なプロパティが実装されています。 本来であればJavaScriptで実装するような*「アニメーション(animation)」をはじめ、floatを使わなくても段組ができる「フレックスボックス(flexbox)」、文字やボックスに影をつける「シャドウ(shadow)」*など、ダイナミックな動きから複雑な装飾まで、あらゆることが短いコードで実装可能になりました。 しかし、ひとくちに「CSS3」と言っても様々なプロパティがありすぎて、実際蓋を開けてみると普段から使い慣れているプロパティしか実装していない方も多いのではないでしょうか。 そこで今回は、あまり知られていない(かもしれない)けれども、案外便利なCSSプロパティをまとめて19個ご紹介します。 「なるほど！」というものがあれば、実作業でも活用して

ホームページを製作する際、何度も繰り返し使うコードはスニペットとしてまとめておくと便利です。 スニペットとは「切れ端」「断片」という意味で、プログラミング言語の中で簡単に切り貼りして再利用できる部分のことです。 とりわけCSSは、HTMLやJavaScript以上に、繰り返して使うコードが多いので、そうしたコードをまとめておくとよいでしょう。 今回は、何度も打ち込まなくてもコピペで使える、保存しておくと便利なCSSスニペットをまとめてみました。 スニペットとしてテンプレート化することで、一部分を変えるだけで再利用することができます。 保存しておくと便利なCSSスニペット 1. CSSリセット さまざまなブラウザでデフォルトの表示方法がありますが、それらを同じように表示させるCSSリセットと呼ばれるテクニックがあります。 CSSのリセット化コードはさまざまありますが、画像のレスポンシブ化とm

css3でアニメーションを使用するサイトが近頃増えてきました。背景としては、css3アニメーションのプロパティにほぼ対応しているスマホ端末の普及や、animationプロパティ未対応のIE9（IE6～IE8を含む）のシェアが低下してきていることが挙げられると思います。 つまり、css3アニメーションの対応ブラウザは「増加中」ということに他ならず、実装するサイトは更に増えていくのではないでしょうか。 今回は、そんなcss3アニメーションの実装時に参考できる22サイトを集めてみました！ 1：丸型オブジェクトにピッタリのアニメーションギャラリー 丸型オブジェクトに対して、様々なホバーエフェクトを実装しています。 何気なくマウスオーバーした時にこんな動きがあれば、注意を引きつけられそうですね！ http://tympanus.net/codrops/2013/05/30/simple-icon-h

If you are like me, when you see an impressive demo of a new CSS3 feature, you can't wait to start using it in websites. Of course, then you see that it is available in only one or two of the major browsers (and this never includes IE), so ultimately you decide to wait. I have good news for you - with the latest browser releases, there are a few awesome features that are finally supported everywhe

ここ2, 3年、CSSアニメーションの進化がすごいですね！ 次のプロジェクトにさっそく使ってみたくなるようなものから、こんなことも出来るのか！という驚きのテクニックまで、CSSアニメーションのスゴ技・小技を紹介します。 Animated Gameboy in CSSのデモのアニメーションGIF まずは、CSSで作られたゲームボーイ。 上はデモをアニメーションGIFにしたものですが、下は生HTMLと生CSSです。 そのままのアニメーションでも驚きですが、ホバー時にはスケルトンになります。

CSSレイアウトが捗るFlexbox、もう使っていますか？ ページ全体のレイアウトのような大掛かりなところよりも、今回紹介するフォームのような小さなところから試してみると便利さを実感できるかもしれません。 HTMLフォーム作成はWeb開発において避けては通れないものですが、その作業が楽しいことはまれなことです。幸いなことに、CSSのFlexboxを使えばこれまで困難だったことでも解決できることがあります。 Flexboxを使用せずに、フォームの一般的なコーディング方法を考えてみます。次のようなフィールドをHTMLでどのようにマークアップしますか？ たいてい次のようにマークアップしますね。 <div> <label for="name">name</label> <input id="name" name="name" type="text" /> </div> <div> <label f

お陰様で当サイト「クレジットカードの読みもの」における、2016年9月の月間PV数*1は283万を記録することが出来ました（2016年8月のPV数はこちら）。 目標としていた月間300万PVも、この調子でいけば月間の日数が31日間になる10月には達成できそうな勢い。ほんともうちょっと…というところです。 1月：140万PV 2月：156万PV 3月：173万PV 4月：166万PV 5月：184万PV 6月：249万PV 7月：222万PV 8月：233万PV 9月：283万PV 10月：300万を狙えるかも？ しかし、そこで満足をしてしまってはあとはPV数が落ちていくだけ。これから先はもっと上のPV数を目指した動きをしていくべきだと思うので、今回は次の目標値である月間500万PVを目指すための追加戦略について記事を書いてみたいと思います。 私同様、ブログやメディアを運営されているという方

夜中たわしです。ついにこの日がやってきました。 昨日の朝、このようなメールが来ていることに気づいたのです。 あっ…！ 見たことあるこれ…！！ アドセンス審査関連の記事でたまに見かける、3つのオブジェクトの関連性がよくわからない画像！ 真ん中の人はなぜテレビのようなものから這い出ようとしているんでしょう？ 貞子さんの真似事ですかね？？ http://www.tawashix.com/entry/AdSenseOK ともかく、ようやくGoogle AdSenseの審査を完全通過し、晴れて広告が配信される運びとなりました！ これで、いままで審査を不安に思い、暴力的／アダルティな単語を超過剰に抑圧した記事運用をしてきましたが、開放されます！（実際ほぼ我慢してなかったけど。後述） このメールを見た時、最高に気持ちよかったです。ああ、Google様、もしやこの喜びのために苦難をお与えくださったのですか

更新日: 2017年3月14日公開日: 2015年10月22日Webの動画デザインに役立つJQueryプラグイン10選 JavaScriptとCSSの活用することで、Webで動画をオシャレに再生させることができます。イチからコーディングしていく方法もありますが、今回は手っ取り早くオシャレな機能を搭載できるjQueryの動画系プラグインについてフォーカスしてみたいと思います。ニーズの高い動画背景に役立つプラグインから動画コンテンツに役立つプラグインまで幅広くピックアップしてみました。 気になるプラグインを比較して、Webデザインにご活用頂ければ幸いです。 Webの動画デザインに役立つ！jQueryプラグイン10選利用者の多い「BIGVIDEO.JS」 BIGVIDEO.JS フルスクリーンで動画背景や動画の再生リストを作成できるプラグインになります。国内外でユーザーが多く、数多くの実験例を拝