Webアイコンフォント【Font Awesome】の使い方を紹介したいと思います。 【Font Awesome】では、手軽にWebアイコンフォント利用でき、利用も無料(商用無料)で479個(2014/12/22)のアイコンフォントが利用できます。 また、アイコンフォントを利用すれば、Retina Displaysも気にすることがありませんし画像などを利用するよりも表示が軽く、CSSで簡単にアイコンフォントを装飾が可能です。 Webアイコンフォント利用するなら【Font Awesome】だよ、というぐらい素晴らしいです。 利用は、ファイルをダウンロードして利用する方法とCDNを利用して利用する方法があります。 基本的にどちらでもいいと思いますが、CDNの方が利用しやすいと思います。 Font Awesome Webアイコンフォント使い方 今回は、【CDN】での使い方を記載したいと思います。

今回は、CSSのみで画像をマウスオーバーすると、キャプションをスライド表示やフェードインで表示させる方法のご紹介です。 CSS3のtransformを利用しています。 一応デモサイトもありますので、ご参考下さい。 デモサイト HTML 今回のHTMLの構造は、下記のようになりますので、CSSも下記のHTMLに合わせています。 <div class="content"> <ul class="caption-box clearfix"> <li class="demo-1"> <img src="img/1.jpg"> <span class="caption caption-1"> <p>キャプション</p> </span> </li> <li class="demo-2"> <img src="img/2.jpg"> <span class="caption caption-2"> <h

今回は、画像や動画などをオーバーレイ表示出来るLightbox系jQueryプラグイン【Colorbox】の使い方のご紹介です。 こちらの【colorbox】は、画像だけではなく動画やinlineコンテンツなどのもオーバーレイで表示出来るので、大変便利なjQueryプラグインとなっています。 また、オーバーレイのスタイルも5種類ほど用意してあり対応したCSSを読み込めば対応しています。 実装のハードルも高くなく割と簡単に実装も出来ると思います。 実際に【Colorbox】を利用したデモサイトもありますので、ご参考下さい。 デモサイト 実装するのであれば、下記リンク先より必要ファイルをダウンロードして下さい。 Clorbox それでは、jQueryプラグイン【Colorbox】の使い方をご説明していきます。 実装するにあたりこちらより必要なファイルなどを事前にダウンロードしておいて下さい。

今回は、レスポンシブメニューの実装に使えるjQueryプラグイン【Sidr】の使い方のご紹介です。 こちらの【Sidr】が適応されると、メニューがサイドからスライド表示されるようになります。 便利な所が、既存メニューを利用してスマホなどの閲覧時にスライドメニューに対応出来るので、WordPressにも簡単に実装が出来ると思います。 また、メニューだけではなくコンテンツもスライド表示ができ、スライド時のテーマも2種類あり専用のCSSファイルを読み込むだけで、テーマが適応されるようになっています。 なので、今回はPCの通常閲覧時(768px以上)には、通常通りのメニューを表示させ、プレイク後(768px以下)には、【Sidr】が適応されたスライドメニューを表示させたいと思います。 言葉で言っても、あんまり伝えるの苦手なのでwww下記にデモサイトのようなメニューの表示方法です。 デモサイト 実際

今回は、javascriptを使わずCSSのみで作成できるドロワーメニュー【Pure Drawer】のご紹介です。 機能がjavascriptで作っているドロワーに劣るのでは？と思われますが、エフェクト効果・ドロワー位置の変更も簡単に行えます。 実際に【Pure Drawer】を使ったデモサイトもありますので、ご参考下さい。 デモサイト 実際に利用する場合は、下記サイトより必要ファイルをダウンロードして下さい。 Pure Drawer Pure Drawer 使い方 それでは、CSSだけで作る【Pure Drawer】の使い方のご紹介をしていきたいと思います。 必要ファイルの読み込み ダウンロードしたファルダ内にある【app.min.css】をhead内に読み込みます。 <link rel="stylesheet" href="css/app.min.css" type="text/css

今回は、スマホやタブレとのドロワーメニューなどに使えるjQueryプラグイン【Slidebars】の使い方のご紹介です。 ほとんどのサイトやブログのスマホサイトで見かける、横からメニューがスライドして表示されるのです。 横からヒュルと出てきますので、ちょっとかっこいいなーって思う方もいると思います。wwww こちらのプラグインは、ナビゲーションをアニメーションでスライド表示させてくれます。 また、ドロワーメニューだけではなく、コンテンツをサイドからスライドさせることも出来ますので、スマホのスペース確保などにも使える大変便利なプラグインです。 実装もHTMLさえ理解していれば、簡単に実装出来ますので、便利なプラグインです。 実際に【Slidebars】を利用したデモサイトも用意していますので、ご参考下さい。 デモサイトでは、メニューボタンをクリックすると左からドロワーメニューが表示されます。

作成：2014/04/21 更新：2014/10/24 Web制作 > 前回コーポレートサイト制作が捗るjQuery プラグインをまとめましたが、今回はCSS版ということで、使用頻度が高いものと、これから必要になりそうなものを、忘れないようにメモしておきます。コーポレートサイトやWeb サービスサイトでさりげなく使われているものや、今後増えそうなものなど。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 横並び １．今までの回り込み解除 ２．横並びや並び順 ３．均等に並べる／段組み ナビゲーションメニュー ４．多階層　ドロップダウン ５．amazon風　メガドロップダウン ６．ドロワーメニュー コンテンツメニュー ７．モーダルウィンドウ ８．アコーディオン ９．タブパネル テーブル １０．ストライプテーブル １１．レスポンシブ＋テーブル リスト １２．カウント

Image by:Design Inspiration サイトやブログの運営を長くやっていると、オリジナルのデザインに挑戦してみたくなったり、ちょっとだけカスタマイズしたくなったりと、興味が湧いてきませんか？ ちょっとしたデザインやCSSを変更したいときに、サイトのレイアウト構成を理解していないと、せっかく調べた装飾系コーディングも、どこに記述していいのか分かりませんよね。 今回は、レイアウトの理解のはじめの一歩として、基礎の基礎という感じになりますが、サイトのレイアウトを支える土台部分をメモっていきたいと思います。 デモについて（HTMLとCSSの注意点） HTMLのデモと説明のコーディングは、ほぼ同じになります。 強いて言えば、各セクションの中身の表記が違うだけです。 CSSの説明は、本当に必要な部分だけ説明しています。 説明を省略している部分やデモと違いのある部分は、装飾系のコーディ

Webサイトやアプリを訪れたユーザーに対して、ゴールまでの最適な道筋をつけるのがCTA（Call to Action：行動喚起）。このCTAを意識してボタンをデザインすることで、クリック率やコンバージョン率を大幅に改善できます。ボタンを実装するときにチェックしておきたい7つの法則を紹介します。 1.ユーザーの言葉を使う ネットで買い物しているところを想像してみましょう。以下の2つのボタンがあったら、どちらを押したくなるでしょうか。 ほとんどの方は、右の「注文する」を選んだはずです。デザインがまったく同じボタンがあったとしたら、自分が日ごろから使っている言葉のほうがピンときて押しやすい。企業側の言い回しと、ユーザー側の言い回しがずれているほど、ユーザーはアクションを起こしづらくなります。ボタンのラベルにはユーザーが普段使っている言葉を使いましょう。 Webサイトの制作ではつい企業目線の言葉を

ブログのメインは記事本文。どんなにタイトルで惹きつけて訪問者を増やしても、肝心の記事が読みづらければ最後まで読まれないうちに離脱してしまいます。当然、シェアもしてくれないしリンクもしてくれません。 では読みやすいブログとはどのようなものでしょうか。そのひとつは、「流し読みしやすい文章」です。 読みやすいブログ記事を書くための基本とライティングテクニック 文章の改善はいますぐできることではありませんが、読み疲れさせないデザインにするのはすぐに実行できるかもしれません。 本記事では、記事本文が表示されるメインコンテンツの幅と、周囲の余白設定に焦点を絞って解説していきます。 有名どころ 18 サイトを調べて、各サイトがどれくらいの幅で記事を表示し、どのくらい余白をとっているのか調べてみました。ぜひご参考に。 2014 年に調査・公開した数値のため、参考サイトの内容が変わっている場合があります。