はてなブックマーク

必読！デザインの新トレンド「ロングシャドウデザイン」 その他2013年7月5日 マイクロソフトやAppleのiOS7で採用された「フラットデザイン」は巷で話題となっていますが、これに続くデザインの新トレンドとして「ロングシャドウデザイン」が注目されています。 ロングシャドウデザインとは？ 45度で表現されるシャドウ部分を強調した、朝日や夕日でよく見られる長い影が印象的なデザインのことです。 アプリアイコンやロゴなどでそのデザインが流行となりつつありますが、今後サイトを構成するパーツとしても目にすることが多くなるかもしれません。 ロングシャドウデザインの例 こういったデザインをCSS3で表現するのは難しいため、ボックスなどの背景に使われることは少なそうですが、アイコンやロゴでは目にするケースが増えてくるのではないでしょうか。

CSS3でborder（ボーダー）のグラデーションを実現 CSS2013年2月26日 今までは1pxのボーダーのグラデーションを表現する際、背景画像を使用して実装しなければなりませんでしたが、レスポンシブWebデザインやスマホ専用サイトの構築などにより、CSS3を実際に使用するシーンも多くなってきました。 今回はCSS3のテクニックの一つとして、ボーダーのグラデーションを、画像を使わずにCSSのみで表現する方法をご紹介いたします。 実際のサンプル HTML <div class="box-bordered-01"> <div class="box-bordered-01-inner"> <p>ほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげほげ

超便利！jQueryでJSONデータを解析し、HTMLに表示する／後編 jQuery2013年7月31日 前の記事でご紹介したJSONについて、以下の3パターンの実装例を元に解説していきます。 js中に記述されたJSONデータからHTMLに表示 外部ファイルのJSONデータからHTMLに表示 JSONPで外部ファイルのJSONデータからHTMLに表示 1.js中に記述されたJSONデータからHTMLに表示 まずJSON+jsの全体図をつかめるよう、活用する場面はあまりありませんが、jsの中にJSONデータを記述した例を紹介します。 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width="15%" /> <col width="15%" /> <col width="70%

第1回／Webアプリが作れるjsライブラリ「Sencha Touch」の使い方 Javascript2012年12月16日 そろそろWebアプリのひとつも作れるようにならなければいけないと一念発起し、習得を試みることにしました。 しかしいかんせん自分はフロントエンドの人間なので、HTMLやJavascriptは理解できても、iPhoneアプリ開発の標準言語であるobject-Cなどはまったくわかりません。 そこで今回はHTMLコーダーでも容易にWebアプリの開発ができるライブラリ「Sencha Touch」を使ってWebアプリの開発に片足を突っ込んでみることにしました。 Sencha Touchとは 米国のSencha社が開発した、HTML5ベースのWebアプリ開発フレームワークです。 Sencha Touchの特徴 Windows環境でもiOS、Androidどちらでも動作するアプリが作

ニュースティッカーをjQueryで実装する／bxslider編 jQuery2013年2月14日 お知らせを省スペース化するためのニュースティッカーをjQueryで実装いたしましたので、手順をご紹介いたします。今回はjQueryのプラグイン、「bxslider」を使用して作成いたしました。 本来画像のスライドショーなどによく使われるプラグインですが、テキストコンテンツをリッチに見せる用途としても使用できます。実装も容易だったため、今回はこちらを活用いたしました。 jQuery本体に加え、プラグイン「bxslider」とイージングのプラグイン「jQuery easing」が必要となります。 まずは下記のURLより必要なファイルをダウンロードし、読み込みを行ってください。 jQueryはこちらからダウンロード jQuery Easing bxslider 実際のサンプル よく見るニュースティッ

XAMPP（ザンプ）で複数ドメインをローカルサーバで管理する（for Windows） その他2012年3月29日 XAMPP（ザンプ）のダウンロードとインストール（for Windows）ではXAMPPのインストールからローカルサーバの構築までを設定しました。 しかしこのままではひとつのサイトしかローカルサーバで確認することができません。 ここでは複数のサイトをローカルサーバで閲覧できるようにする方法をご紹介します。 ApacheのVirtualhostを利用・設定する 「Virtualhost＝バーチャルホスト」とは、ひとつのサーバで複数のサイトを閲覧可能にする機能です。 この機能がデフォルトではOFFになっているため、まずはこの機能を使えるように設定します。 Cドライブの直下にXAMPPをインストールしている場合、「C：/xampp/apache/conf/httpd.conf」ファ

フロントエンド・エンジニアという肩書 その他2011年12月14日 最近、フロントエンド・エンジニアという肩書が一部の制作会社で使われるようになってきました。 実は私の名刺にも、以前は「Webデザイナー」だったのですが、1年～1年半ほど前から「フロントエンド・エンジニア」に変わっています。 本記事では、「フロントエンド・エンジニア」という肩書について少しお話しさせていただきたいと思います。 一般的に「Webデザイナー」と呼ばれる方々の業務内容は実に幅広く、サイトのビジュアルを「デザインすること」だけではなく、情報の構造を整理・ラべリングし、適切な個所に情報を配置する「情報アーキテクチャ」も担当することもあれば、当然コーディングも行います。デザインを行うには、少なからずCSS・HTMLの知識が必要になってきます。一口に「Webデザイナー」といっても、非常に多種多様なスキルが求められます。 し

jQueryでローテーションバナーを実装 jQuery2011年12月14日 少し前はローテーションバナーはFlashで作成する場合が多かったと思いますが、最近ではJavascriptで制作する案件も増えてきています。 今回は、jQueryを使用してローテーションバナーを実装してみましたので、どうぞご参考にしてみてください。 jQueryはこちらからダウンロード jQuery Easing 実際のサンプル 仕様 最大個数に規定はなし 自動スクロールはなし リピート機能はなし 左右に移動ボタンを配置 一番右に移動した際、右ボタンをグレーアウト 一番左に移動した際、左ボタンをグレーアウト バナーが3個以下の場合、左右の移動ボタンは非表示 HTML <div class="rotate-banner"> <p id="btn-left"><img src="images/btn-left.gif

XAMPP（ザンプ）のセキュリティ設定（for windows） その他2012年3月28日 XAMPP（ザンプ）のインストールが完了したら、次にセキュリティ設定を行いましょう。 XAMPP（ザンプ）をまだインストールされていない方は、下記のページをご参考にまずはXAMPP（ザンプ）のインストールを行ってください。 XAMPP（ザンプ）のダウンロードとインストール（for Windows） XAMPPのセキュリティ XAMPPの初期状態はセキュリティが低く、不正なアクセスをされる可能性があります。インストール後は、不正なアクセスを防ぐためにセキュリティ設定を行うことをお勧めします。 XAMPPの管理画面で「セキュリティ」を選択すると、現在のセキュリティ状態が確認できます。 「要注意」が4つも表示されています（バージョンによっては3つかもしれません） これらのセキュリティの脆弱性を解消するた

Photoshop(CS5以降)の新機能「境界線を調整」で髪の毛の細部まで切り抜き Photoshop2012年4月24日 Photoshop CS5以降、人物写真の切り抜きが非常にやりやすくなりました。 本記事でははCS5の新機能「境界線を調整」を利用して髪の毛の細部まできれいに切り取る方法をご紹介します。 初めて写真を切り取る方は、まずは下記のページで写真の切り取り方の基本を学びましょう。 Photoshopのクリッピングパスによる写真切り抜き 1.まずは素材写真を用意 今回はこちらの写真を使います。この女性、風で髪がチリチリになっているので、切り取るのが大変そうです。 がしかし！CS5の力をもってすれば何のことはありません。一つずつ手順に沿って作業してみましょう。 2.クイックツールを選択する 3.おおまかに切り取る範囲を選択する 素材写真のサイズにもよりますが、ブラシサイズは10p

ナビゲーションのカテゴリを自動でアクティブにする（テキスト版） jQuery2010年11月12日 以前こちらの記事でナビゲーションを自動でアクティブ化する、という記事を書きました。 前回は画像で実装しておりましたが、先日設計する際にテキストで自動アクティブ化する必要性を迫られたため、実際の案件で実装してみました。 せっかくなのでご紹介したいと思います。ソースは下記の様になります。 HTML <ul id="nav"> <li><a href="/category1/">メニュー1</a></li> <li><a href="/category2/">メニュー2</a></li> <li><a href="/category3/">メニュー3</a></li> </ul> Javascript $(document).ready(function() { if(location.pathn

画像／テキストレイアウトにて、画像の横サイズ可変に対応したCSS CSS2011年8月15日 画像をCSSで右や左に寄せ、テキストは画像の隣にレイアウトする、といった見栄えは大抵のサイトで発生しうるパーツです。基本的には画像とテキストの幅をそれぞれCSSで指定するのが一般的なコーディングです。 しかし、大規模サイトなどにおいては、画像を寄せるとはいっても、そのカテゴリやページ毎に画像の横サイズは可変するでしょう。その都度その画像のサイズに合わせたCSSを用意するのはコードが肥大化する原因にもなりますし、HTML側に記述も煩雑になります。そこで、本記事ではどんな横サイズの可変にも対応した画像／テキストのレイアウトを実現するCSSを紹介いたします。 実際のサンプルはこちら HTML <p class="module-title">画像左レイアウト（回り込みあり）</p> <div class=

jQueryで外部ファイル（XMLデータ）を解析し、HTMLに表示する jQuery2011年9月29日 MovableTypeやWordPressなどのCMSツールを使用せず、ニュースリリースなどが静的HTMLで構築されているサイトの場合、HTMLを直接修正して更新する必要があります。 そこで、ニュースリリースなどの情報をひとつのXMLファイルで管理し、HTMLを触らずともあたかもデータベースのようにXMLを扱うことで、XMLファイルの更新のみでサイトの管理が可能になり、メンテナンス性が向上します。 jQueryを使用すると実装が比較的容易なので、今回サンプルを作成してみました。 jQueryはこちらからダウンロード 実際のサンプル HTML <table cellpadding="0" cellspacing="0" border="0" class="tbl"> <col width

Dreamweaverでの正規表現 HTML2011年5月5日 Dreamweaverの正規表現による検索・置換は非常に便利です。ほんの少しの表記を覚えるだけで大規模サイトの作業が非常に楽になります。個人的によく使う正規表現をまとめてみました。 「わざわざ正規表現使わなくてもできるじゃん」というものもあるかもしれませんが、特定のタグとか使うのが何か個人的にアレなんです、すいません。 imgタグの書式をHTML4.01からXHTMLに変更 急な仕様変更でこんなことをした事がありました。 検索パターン <img(.*)"> 置換パターン <img$1" /> (.*)は任意の一文字+0回以上の繰り返し+中の正規表現パターンを記憶します。 +（プラス）は1回以上の繰り返しです。 $nは記憶したパターンを出力します。 半角カタカナを検索 たまにPCサイトでも半角カタカナが紛れ込んでることがあります

jQueryでアクセシブルなプルダウンメニューを実装 jQuery2011年5月21日 プルダウンメニューはjQueryをはじめ、多くの実装方法が紹介されていますが、キーボード操作に対応したプルダウンメニューを実装しているスクリプトは少ないです。 しかしながら昨今、ますますアクセシビリティ対応が求められるようになってきています。 そこで、グローバルメニューのプルダウンメニューもキーボード操作に対応する（アクセシビリティ対応をする）ことで、サイトの品質を向上させられればと思い、実装してみました。 方法としては、jQueryのプラグイン「Droppy」を改良することで、実現してみました。その方法をご紹介いたします。 jQueryはこちらからダウンロード プラグイン「Droppy」 実際のサンプル HTML <div id="nav-global"> <ul> <li><a href="#">親

jQueryでタブメニューを実装（テキストメニュー版） jQuery2010年8月11日 よく見かけるタブメニューによるコンテンツ切り替えのテクニックをご紹介します。jQueryで実装すればパフォーマンスもよく、使いどころを間違えなければユーザーに対しストレスなくわかりやすいコンテンツを提供することができます。プラグインを使用したサンプルもよく見かけますが、実はこのくらいの機能はjQuery単体で容易に実装できます。 実装サンプルおよびコード例を下記に記しましたので、どうぞご自由にお使いください。 jQueryはこちらからダウンロード 実際のサンプル HTML <div class="tab-box"> <ul class="nav clearFix"> <li><a href="#tab-01">メニュー1</a></li> <li><a href="#tab-02">メニュー2</a>

jQueryで印刷用ページを展開する jQuery2011年5月4日 印刷用のページをJavascriptで展開することで、現在見ているページをそのまま印刷するか、もしくは余分な要素を省いた内容を印刷するか、といった2つの選択肢をユーザーに持たせることができます。 ここではjQueryで印刷用ページを立ち上げるスクリプトをご紹介します。 jQueryはこちらからダウンロード 実際のサンプル（印刷用ページが立ち上がります） HTML <ul class="list-link-01"> <li><a href="#" id="print-trigger">実際のサンプル（印刷用ページが立ち上がります）</a></li> </ul> Javascript 'jQuery' in window && (function($) { $(function() { $('#print-trigger')

Javascriptの読み込みをひとつのファイルにまとめる「import.js」 Javascript2011年1月9日 Javascriptファイルも読み込む数が多くなるとHTMLが煩雑になってきます。そんな時、JavascriptファイルもCSSファイルと同じようにひとつのファイルにまとめることでHTMLソースをきれいにする事ができます。また、サイトで使用しているJavascriptを管理しやすくなります。 HTML <script type="text/javascript" src="/shared/js/import.js"></script> Javascript document.write('<script type="text/javascript" src="/shared/js/jquery.js"></script>'); document.write('<scri

チェックボックスの一括チェック（全選択）／一括解除（全解除） jQuery2010年12月22日 親のチェックボックスを選択→子供のチェックボックスを一括チェック・一括解除するスクリプトを作成しましたのでご紹介いたします。 jQueryはこちらからダウンロード 実際のサンプル よく不動産のサイトでみかけるやつですね。Home'sとかYahoo不動産とかで路線を選択する時とかもこの機能を実装しています。色々なところで紹介されていますが、よくある一括チェック・一括解除機能に加え下記も実装しています。 子供をひとつずつチェック→全部チェック→親も自動チェック 複数のグループが同ページ内で出てきても対応可能 inputにクラスつけるだけ といった機能をつけてみました。ソースは下記のようになります。 HTML <div class="parent"> <h3><label for="parent-0

jQueryでブロックレベルの高さを揃える jQuery2011年1月12日 ブロックレベルの高さを揃えるJavascriptは多く紹介されていますが、jQueryで容易に実現することが可能です。 以下の3通りの条件で高さを揃えたサンプルを作成してみました。 クラスを付与した要素の中にあるdiv全ての高さを揃える クラスを付与した要素同士の高さのみ揃える カンマで区切った要素同士の高さを揃える 実際のサンプル HTML <div class="hoge-01"> <div>カラム1カラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラムカラム</div> <div>カラム2カラム2カラム2カラム2カラム2カラム2</div> <div>カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3カラム3</div> </d

グローバルナビゲーションのカテゴリを自動でアクティブにする jQuery2010年8月3日 グローバルナビゲーションのカテゴリを自動でハイライトするスクリプトをご紹介します。jQueryで容易に実装することが可能です。 下記、実装サンプルのスクリプトになります。 HTML <ul id="nav"> <li class="about"><a href="/about/"><img src="nav-01.gif" alt="" /></a></li> <li class="company"><a href="/company/"><img src="nav-02.gif" alt="" /></a></li> <li class="product"><a href="/product/"><img src="nav-03.gif" alt="" /></a></li> <li class=

jQueryでタブメニューを実装（画像メニュー版） jQuery2010年8月12日 こちらの記事で、メニュー部分をテキストにて実装するjQueryのスクリプトを紹介させて頂きました。 私も業務でタブメニューを実装する場合はjQueryを使用することが多いのですが、テキストではなくなにかと画像で実装するパターンのほうが多かったりします。実はその場合のスクリプトはまったく違ったものになるので、こちらの記事ではメニューを画像で実装した場合のスクリプトをご紹介します。 jQueryはこちらからダウンロード 実際のサンプル HTML <div id="tab-box"> <ul id="nav" class="clearFix"> <li><a href="#tab-01"><img src="img/nav-01.gif" alt="" width="80" height="30"/></a><

強制的にCSSを適用させる!importantハック CSS2008年10月5日 新規構築サイトであれば使うことはほぼ無いでしょうが、大規模サイトの運用作業などに関わるとどうしても既存のCSSが邪魔で、うまくコーディングできない場面に遭遇することがあります。そんなどうしようもない時は、下記のCSSハックが使えます。 CSS #sample{ margin-left:10px!important; } 上記のように「!important」をCSSの値に記述することで、このスタイルが最優先で適用されます。既存のCSSスタイルを無視して、自分の思い通りにスタイルが適用できるようになります。 ただし、便利な反面、あまり多用しすぎると、後々カオスなCSSになりかねないので、ここぞという時だけ使用するようにしましょう。

はじめてのjQuery jQuery2008年12月7日 現在の会社に転職してから、jQueryに触ることが極端に増えました。 （というより前の会社では全くというほど触っていない） 自分自身の勉強もかねて、実務・プライベート問わず、jQueryについてここでどんどんメモ・テクニックをためていくことにします。 なるべく汎用性の高いテクニックを発信していければと思います。 jQueryとは jQueryはAjaxを開発する上で用いられるjavascriptライブラリのひとつです。他に同じような位置づけで、prototype.jsといったライブラリも存在します。このライブラリを使用することで、javascriptを簡単に書くことができます。（簡単といってもそれなりの勉強は必要ですが） CSSみたく、直感的に書くことができるので、プログラムをはじめて触る人でも、かなり敷居の低いものと言えると思いま

floatさせた要素を簡単にfloat解除させる「clearFix」 CSS2008年12月6日 floatした要素を解除する際、その都度floatを解除するための空divをソースにいれたり、CSSでcloar:bothを多用していたりしませんか？ （<br class="clear" />や<div class="clear"></div>等） 実は、「clearFix」を使うことで、簡単にfloatを解除させることができます。 HTML <div id="p52_parent" class="clearFix"> <div class="left">左に寄せた要素</div> <div class="right">右に寄せた要素</div> </div> （IE6,IE7,Firefox 2,Firefox 3,Safari3,Opera9.6で確認済） CSS .clearFix:a

PNG対応JSの決定版「DD_belatedPNG」 Javascript2010年12月7日 多くのサイトでIE6でいかにしてPNG対応を施すか、という方法が多く紹介されています。 私も実際の案件を通して、いくつかの方法を試してきました。 しかし色々試行錯誤した結果、結局のところ完璧なものはありませんでした。 その中でも「DD_belatedPNG」はかなり完成度の高いものと言えるでしょう。PNG対応をどうしてもしなければならないケースに出くわした場合、こちらの方法をおすすめします。 DD_belatedPNG IE6でPNGが使えないのは周知のことですが、その対応方法は様々です。 ざっとまとめたところ、下記のようなものが挙げられます。 IE7.js jQueryのプラグイン「pngFix.js」 AlphaImageLoader iepngfix.js IE PNG FIX v2.0