制作実績「有限会社 永大ホーム」さん

株式会社リンクネット様からお話をいただき、有限会社 永大ホーム様のデザイン・コーディングを担当させてもらいました。

クライアント様のご要望が比較的スタイリッシュなモノでしたので、画像や色使いを吟味し、シンプルかつ品良くまとめました。
ただし、ターゲットは、家を建てたりリフォームしようとしている一般の方々なので、冷たい印象にならないよう適度な柔らかさも持たせています。

また今回、いくつかのページはクライアント様がご自身で更新なさるというコトで、CMSツールを用いました。その際のプログラム的な部分は、株式会社リンクネット様に制作していただきました。

URL：http://www.eidaihome.com/

制作実績「石川被害者サポートセンター」さん

ひょんなコトからお話をいただき、今回リニューアルを担当させていただきました。

既存の内容を細かく見てみると、意外と内容が多く、ターゲットも支援を必要とする方、ボランティアで活動していただける方、賛助会員・寄付にご協力していただける方など幅も広い。
しっかり構成を決めて作らないとツギハギだらけで雑多な感じがしてしまうので、まずサイトの構成をスッキリとまとめる作業から始めました。

次にデザイン。
全体をアースカラーでまとめ、優しく見やすく分かりやすいサイトになるよう心がけました。
「文字を多くしたくない」という要望もあり、イラストや挿絵をなるべく多く使うようにし、瞬間的に内容が分かるページづくりを目指しました。

機能的にも、きっちり細部まで丁寧に仕上げましたので、どなたにでも分かりやすく親切なサイトになるよう心がけています。

URL：http://www.ishikawa-vsc.org/

Google Chartsのグラフを簡単に

jQuery Google Charts｜web creators 2009年6月

今回もweb creators 6月号の「Webデザイン スタイルアップ Tips」に紹介されているテクニックです。
「Google Chart API」は、簡単にグラフを作るコトができる便利なサービスですが、パラメータの記述がややこしい。そこで登場するのが、今回紹介する「jQuery Google Charts」です。

「jQuery Google Charts」にアクセスすると、ページの右側に「↓Download」というボタンがあるのでダウンロードして下さい。いろいろとファイルが入っていますが、とりあえず必要なのは、jgcharts.jsとjquery.jsです。

まずは、サンプルです。（このブログのアクセス数と訪問者数をグラフにしてみました）

↑このサンプルはこちらからダウンロードできます。

各種パラメーターの設定は、サンプルのHTMLの9〜23行目付近に記述していますが、詳しくは「jQuery Google Charts」を見てもらった方が分かると思います。
グラフの種類も変更できますし、他にもいろいろとパラメーターを設定するコトで、気に入ったようにカスタマイズするコトができると思いますよ！

※ただし、IE6では日本語表記ができないので、お気をつけ下さい。 どうしてもGoogle Chart APIを使って、日本語表記のグラフを作成したい！という方は、「moBlur.org - Google Charts GUI with jQuery」を試してみると良いかも知れません。その際は、下記のページを参照するコトをオススメします。

［参考ブログ］
→Google Chartsのグラフを日本語で作成できる簡単グラフ作成サービス - WEBマーケティング ブログ

最後の行だけ違うスタイルにするJavaScript

いろいろできるyuga.js｜web creators 2009年4月

若干古いですが、web creators 4月号の「Webデザイン スタイルアップ Tips」に紹介されていたKyosuke.jpさんの「yuga.js」は、小粒ですがなかなか痒いトコロに手が届くスクリプトが集まっています。

中でもcss3classは、CSS3からサポートされる予定の「:lastChild」や「:firstChild」という疑似要素を現状のブラウザでも指定できてしまう。
これを利用すれば、リストやテーブルの先頭の行や最後の行のスタイルを変えるコトが手軽になります。
HTMLで特定の行にclass定義してしまえばそれまでなんですが、更新や修正でいちいち直す必要がなくなるのは、正直非常にありがたいのでは…。
例えば、各行に下線をひくが、最後の行だけは下線なしにしたいとか云う場合にもってこいです。

というコトで、サンプルはこちら

↑このサンプルはこちらからダウンロードできます。

また、yuga.jsには他にもいろいろな機能が盛込まれています。
ロールオーバー、
現在のページをハイライト表示、
外部リンクは別ウインドウを設定、
画像へ直リンクするとthickboxで表示、
ページ内リンクはするするスクロール、
簡易タブ機能、
奇数、偶数を自動追加などなど

ホントに至れり尽くせりと云う感じで、使いたい機能が凝縮されています。
また、jQueryを使うトコロもGood！入れておいて損はないと思いますよ。

→「yuga.js :: Kyosuke.jp」

jQueryのプラグインでツールチップ

jQuery「Beauty Tips」｜web creators 2009年6月

web creators 6月号の「Webデザイン スタイルアップ Tips」でも紹介されていますが、jQueryのプラグイン「Beauty Tips」は非常に使い勝手が良い。
スクリプトさえ組み込めば、手軽に見栄えの良いツールチップが表示できる。また、いろいろとカスタマイズできるので、サイトにあわせたツールチップを作成するコトができる。
これはとても重要なコトなので、かなりありがたい。

…という訳で、「Beauty Tips」のページからデータをダウンロードして、web creatorsに載っている通りに作ってみましたが、IEでは表示に不具合が出てしまった。何故？？？

まあ、サイトからダウンロードしたデモデータはきちんと表示できているので、ソースを調べてみると、IE用には他のスクリプトを読み込まないといけないようである。
その件については、コリスさんの「これ最強かものツールチップスクリプト -BeautyTips」というページを見ていただくと分かると思いますので、お読み下さい。

少し前置きが長くなりましたが、サンプルはこちら

↑このサンプルはこちらからダウンロードできます。

カスタマイズですが、サンプルのHTMLの16〜30行目付近を参考にしてみて下さい。
padding、widthは説明しなくても分かりますよね？
spikeLengthとspikeGirthは、吹き出しのくちばし部分の設定、
cornerRadiusは、角の丸さ、
fillは背景の設定で、RGBを0〜255で設定し、最後に不透明度を少数点で設定します。
strokeWidthとstrokeStyleは、枠線の太さと色、
cssStylesは、文字のスタイルを設定します。

ツールチップには、画像を入れたHTMLを表示させたり、いろいろな設定もありますので、是非「Beauty Tips」のページからデータをダウンロードして、色々試してみて下さい。

ちょっとリニューアル

ウチのサイトもリニューアルしてから２年が経ち、HTMLの構成的にもCSSの記述的にも少し改善してみました。（アッ、もちろんデザインも少し変えました）
…とは言っても、コンテンツ自体は全く同じなので新鮮味はありませんが。

本当は連休中にアップしたかったんですが、4/29から突然の歯痛に悩まされたり、ちょっと遊びに出かけたりでかなりズレ込んでしまい…。
まあ、今まで使っていたAjaxを無理矢理使っているトコロもあるので、もう少し調整が必要ですが。

とりあえず、ちょっとリニューアルというコトで。

続きを読む "ちょっとリニューアル"

テーブルの背景色を１行おきに変更してみる

今作成している案件で、結構ボリュームのある一覧表を載せるページがありまして…。
縦に長い表だと、視認性を上げるために１行おきに背景色を変更するなんてコトも常套手段となる訳です。

これまでは手作業で、tr要素にclass指定をして、CSSで背景色を変更したりしていたんですが、この方法だと表の途中で追加したり、削除したりという修正がとても手間…というか、ほとんどやり直しになってしまいます。
Javascriptを使えば、何か手軽な方法があるんだろうなぁとは思っていたモノの、なかなか必要に迫られずにサボっていました。

前置きが長くなりましたが、
調べた所、jQueryを使えばとても簡単だ！というコトが分かり、紹介してみます。
参考にしたのは、「sukechan.net」さんの「jQuery でテーブルの背景色を 1 行置きに変更する」というページです。

まず、jQueryから最新のスクリプトをダウンロードして下さい。
HTMLソースにスクリプトを読み込み、下記のように記述
（例）
<script type="text/javascript"><!--
$(function() {
    $(".stripe tr:even").addClass("even");
});
//--></script>

次に適用するtable要素にstripeとclass指定して、
CSSで例えば、
.stripe .even td {
    background-color: #FBF8EE;
}
と、定義してみて下さい。

これで勝手に偶数行のtd要素の背景色が変更できます。項目の並びが変更されようが、追加・削除されようが全然OKです。
さらに、table要素に限らず、li要素などにも応用できます！

…んっ！？
もしかして、プログラムから生成するようなtable要素にも応用できるかも？
今度実験してみます。

CGIのカレンダーを2ヶ月表示させる

cgi designさんのsche38.cgiをカスタマイズ

簡単に管理・更新できる営業日カレンダーをサイトに載せたいという案件があり、いろいろと調べてみました。
フリーのCGIでも結構使える物が多いんですが、シンプルな機能で良かったので、cgi designさんの「特定日を色付でき、カレンダーをインラインフレーム形式で表示するCGI（sche38.cgi）」を使ってみるコトに…。

まずは、仕様ページにダウンロードファイルと設置手順・使用方法が書かれているので、参照して下さい。

１ヶ月だけ表示させるのなら、このままでOKなんですが、今回３ヶ月表示させたいという要望があり、ネットで調べて、ネットショップ作成支援さんの「CGI営業日カレンダー2ヶ月表示の作り方 」というページを参考にしました。
ただ、この方法だと毎月カレンダーを手作業で更新しなければならず、クライアントは難色を示すだろうと考え、簡単な（…お粗末な、とも云う）JavaScriptをかまして自動的に更新できるようにしてみました。

とりあえず、サンプルです。

続きを読む "CGIのカレンダーを2ヶ月表示させる"

制作実績「九九夜話」さん

きものスタイリスト 秋月洋子さんと銀細工職人 山口緩奈さんが始められたブランド「九九」。「九九」では、お二人で作られた銀細工の帯留を取り扱っております。

「九九」の商品と秋月洋子さんの活動を紹介するサイトが、この「九九夜話」になります。非常にシンプルで品良くまとめたつもりです。…いかがでしょうか？
シンプルなデザインですが、機能的にはしっかりこだわって作っております。そのあたりの抜かりはございません。
秋月洋子さんのブログ『日々のこと。』もありますので、ぜひ訪れてみて下さい。

URL：http://www.ququyawa.com/

JavaScriptでスライド表示するサンプルギャラリー

noobslideによるスライド表現｜web creators 2008年8月

商品写真を数点、ギャラリー的に見せたいという案件があり、以前から気になっていた「noobslide」を 使ってみました。
少し古いですが、web creators 2008年8月号の「すぐに使えるCSSデザインテクニック」でも詳しく紹介されていますので、本格的に使いたい方は読んでみて下さい。

noobSlideのページを見ていただくと分かりますが、いろいろな演出ができます。その中で気に入ったモノがあれば、使ってみるのも良いでしょう。
ただし、カスタマイズは結構複雑でした。僕の場合は、web creators 2008年8月号のサンプルデータをカスタマイズしたんですが、多少分からないトコロもあり、CSSで無理矢理非表示にしたりしています。

とりあえず、サンプルです。

続きを読む "JavaScriptでスライド表示するサンプルギャラリー"