今さらながら「ヱヴァンゲリヲン新劇場版：破」を DVD で見まして、 ヱヴァ：Q 見るまでこりゃ死ねないな、と思った sakai です。序破急だから急かと思いきや Q ってところが意味深ですよね… CSS で margin にマイナスの値を指定する、通称ネガティブマージンの使いどころについて、何回かにわけてご紹介します。（先日の CSS Nite でデモをした内容の再紹介です） 今回は「パンくずリスト」のコーディングでのネガティブマージンの使いどころです。 1. パンくずリストでネガティブマージンを使う まず HTML で普通にパンくずリストを組んでみます。 <div id="topiPath"> <ol> <li><a href="/">ホーム</a></li> <li><a href="/wear/">ウェア</a></li> <li><a href="/wear/tops/">トップ

こんばんは、ishidaです。急に肌寒くなってきましたね。 弊社シーブレインは馬車道から目と鼻の先にありますが、その馬車道にて今年も恒例の馬車道まつりが開催されています。１１月１日（日）～１１月４日（水）まで開催されておりますので、馬車道付近にお越しの際は是非お立ち寄りくださいね。 それはさておき、フォントサイズを指定するときにまずはベースとなる基準のフォントサイズをbody等に指定しますが、サイトによって基準を12pxにしたり、13pxにしたり、たまぁ～に10pxにしたりしてます。 そうなってくると相対指定で20px相当って何％だっけ？ってことがよくあるのと、毎回毎回電卓をたたくのが面倒になったので、ここに基準としてよく使いそうなフォントサイズをメモします。 基準文字サイズ 10px 基準文字サイズ 11px 基準文字サイズ 12px 基準文字サイズ 13px 10px

今週の木曜日はやはり早く寝て夜中に起き出すかないか！toyama です。金曜日は結構な割合で寝不足な人が多そうですね。 大きな写真イメージの上にキャッチコピーを書いてサイトの目立つところに表示、というデザインは割と多いパターンですが、画像の書き出し圧縮率は毎度悩ましいです。 写真の書き出しは jpg がセオリーですが、キャッチコピーの文字がひどく劣化してしまうことがあります。かといって gif で書き出すには色数が多くてディザでもちょっと辛いし重い！ そんなときは Fireworks さんにおまかせです。さすが web 制作の申し子！ 1. こんな感じの画像があるとします。 写真の上にテキストで文字が置かれています。 2. jpg で書き出してみます。普段はこんなに低画質で書き出すことはないですが、分かりやすく圧縮の品質を 50 にしてみます。 背景の画像はともかく、もう文字のまわりがグニ

こんにちは、inoueです。GWが終わったばかりなのに今週末は母の日ですよ。みなさんカーネーション用意しました？ さて、この春からプログラミングを始められたかたもスタートから1カ月が経過しましたね。 プログラミングに慣れてきましたか？できることは順調に増えてきましたか？ そんな方にぜひ気にしていただきたい、プログラミングのちょっとしたポイントを7つ今日はお話したいと思います。 1. 何を作るのか、を把握する 作業指示や仕様書をしっかりと理解する、というのがまずやるべきことになります。 「こうだと『思っていました』」で作業を進めてしまっては、手痛いしっぺ返しを食う可能性大です。 指示されたもの以外にも確認できる資料があれば、積極的に読みましょう。 それによって、これから作るものが含まれるシステム全体の理解が深まり、よりよいプログラムを作ることができます。 2. わからないことは、すぐ聞く 不

Webサイト制作において、クリックできる部品にマウスポインタを乗せたときなどに、表示を切り替えるエフェクトを「ロールオーバー」と呼びます。バシャログの左サイドバーの「ホーム」「はじめての方へ」にマウスをのせるとハイライトしますが、これもロールオーバーです。今回はjQueryを使ったロールオーバーの実装を解説いたします。 デモ 今回作成したロールオーバーは次のようなものです。 ロールオーバー サンプル HTMLソース <ul id="first" class="nav clearfix"> <li><a href="/"><img src="img/btn_home.gif" alt="HOME" width="160" height="40" /></a></li> <li><a href="#"><img src="img/btn_news.gif" alt="HOME" width="

仕事を手早くこなす時にショートカットキーを知ってると便利ですよね。 よく使うショートカットキーをいくつかご紹介。 デフォルトショートカットキー ファイル(F) 新規作成　[Ctrl + N] 保存　[Ctrl + S] 名前を付けて保存　[Ctrl + Shift + S] 開く　[Ctrl + O] 閉じる　[Ctrl + W] 書き出し　[Ctrl + Shift + R] イメージプレビュー　[Ctrl + Shift + X] 編集 取り消し　[Ctrl + Z] やり直し　[Ctrl + Y]・[Ctrl + Shift + Z] カット(T)　[Ctrl + X] コピー(C)　[Ctrl + C] 属性をペースト(A)　[Ctrl + Alt + Shift + V] 表示倍率(M) 50%　[Ctrl + 5], [Ctrl + Num 5] 100%　[Ctrl + 1]

以前、画像の傾きを直すカンタンな方法を「画像の傾きを直してくれる「ものさしツール」」でご紹介しましたが、これはあくまで photoshop での方法でした。今回は Fireworks でのご紹介です。 この画像微妙に傾いてやがるでもここだけを直すのに photoshop 起動するのは正直ダリー…いや効率悪い、という私に朗報です。 [1]エクステンション「Level Horizon」をインストールします。 Level Horizon はラインツールだけで傾きを修正してくれるスグレモノです。 [2]画像の傾きにあわせて「ラインツール」で直線パスを書きます。 [3]コマンド→ドキュメント→ Level Horizon を実行します。 [4]画像が直線の傾きにあわせて修正されます。 先ほど引いた直線は、自動的に削除されます。 Level Horizon は1オブジェクトに対してではなく、開いたpn

2008年9月9日にリリースされた WordPress 2.6.2。 Version 2.6 以降では新たに、編集履歴を管理できるようになりました。 編集履歴が使えるとなると、企業サイトでの導入も検討してみてもいいかもと思い、ローカル環境に WordPress 2.6.2。をインストール。 Version 2.5 までは使えていたプラグインが Version 2.6 で使えないものが多かったので、 今回はVersion 2.6.2 で動作確認がとれたプラグインをご紹介します。 1. Category Order カテゴリの並び替えプラグイン ページ下部の「WordPress Plugins」からダウンロード 上下の矢印で並び順を変更、左右の矢印でインデントの調整ができます。 あくまでインデント、入れ子の関係ではありません。 2. Contact Form 7 日本語を送受信可能な送信フォー

日中でも涼しくなってラップトップPCが発熱しても気になることが少なくなったtanakaです。今日はMac アプリケーション撰 その 0の続きとして、日頃使っているアプリケーションを紹介いたします。 さて、前回、開発マシンとして使えるかをテーマにする、といいました。結論を言えば使えるのですが、その場合、個人的にはMacPortsを利用してApache、PHP、MySQL、Vim、Zsh、GNU Screenといったツールを揃えることになるので、Linuxを利用した場合とあまり変わらないことになります。そこで勝手ですがあまりそこにこだわらずにソフトを紹介することにいたします。 Growl - アプリケーションからの通知を一元的に表示 まずご紹介するのは、通知アプリです。日頃ソフトウェアを利用する際にアプリケーションから通知を受け取る機会というのは意外に多いと思います。Firefoxでダウンロー

Firefox のアドオンの中でも人気の高い Greasemonkey。これは、Javascript を登録することで、ユーザ側で見るページをカスタマイズできる拡張機能です。 そして、その Javascript も様々なものが公開されています。 その一つに、AutoPagerize という、とても便利なスクリプトがあります。 例えばこれをインストールした状態でGoogle検索を行うと、2ページ目、3ページ目のリンクをクリックしなくても、次のページがどんどんと表示されます。これは想像以上に便利ですので、未体験の方は是非試してみてください。 Greasemonkey がインストールされた状態で、このページの「Install this script」をクリックすれば、インストールできます。 インストールされたら、とりあえず Google で検索してみてください。その快適さを理解してもらえると思い

階層構造を持つ WEB サイトの場合、垂直方向のナビゲーションとして「パンくずリスト」が有効です。 「採用情報 ＞ 中途採用 ＞ 募集要項」のように表現するのが一般的で、閲覧中のページが階層構造上のどの位置なのかを確認したり、上位のページを辿っていくことができるようになります。 今のところ「パンくずリスト」のマークアップ方法に正解といえる決定的なものはありません。「パンくずリスト」というくらいなのでリストだという解釈はできます。いくつか妥当と思われる例を挙げてみます。 ケース 1） パンくずリストは階層構造のリストだからマークアップも階層を意識したい…… <ul> <li><a href="/recruit/">採用情報</a> <ul> <li><a href="/recruit/career/">中途採用</a> <ul> <li>募集要項</li> </ul> </li> </ul>

Dreamweaver のデザインビューを使って素早く HTML のコーディングをする方法です。 まずは、原稿をプレーンなテキストデータに落として、秀丸等のテキストエディタを使って整形します。 ブロック毎に改行を二つ入れていきます。文中の改行箇所は改行を一つ入れます。 こんな感じです タイトルタイトルタイトル サブタイトルサブタイトル 本文本文本文本文本文本文本文本文本文本文本文 本文本文本文本文本文本文本文本文 見出し見出し 本文本文本文本文本文本文 見出し見出し 順不同リスト 順不同リスト 本文本文本文本文 見出し見出し 番号順リスト 番号順リスト 見出し見出し 定義リストタイトル 定義リスト内容定義リスト内容 定義リストタイトル 定義リスト内容定義リスト内容 Dreamweaver を立ち上げて、新規作成ファイルの中に段落（p）を一つだけ入れます。 そして先ほどのプレーンなテキストを

猫も杓子も Web 2.0 的な表現がもてはやされた頃、 ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。 質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。 時間もスキルも足りない！ [1] まずフリー写真を探します。 アイコン作るのに何故写真が必要なの？とお思いかもしれませんが何故ならすこしズルいからです。 今回はこの本の写真を、アイコンっぽくしてみます。 [2] 必要なサイズにぎゅっと縮小し、背景を切り落とします。 [フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。 さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。 写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。 [3] ここまでくればあとは簡単。 輪郭線を書き足したり、グラデーションを上か

HTML をシンプルに保ったままブロック要素を段組みする方法です。 ↑のように写真を横並びで表示したい、というケースはよくあると思います。 まず、上記の HTML ソースがこちら。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サンプル3" width="160" height="120" /></li> </ul> </div><!-- /#photo --> 今回のサンプルでは、ボックスと余白が以下になっています。 全体の横幅（500px）が決まっていて

「HTML をシンプルに保ったままブロック要素を段組みする方法」のパート 2 です。 前回の記事では、float と position の合わせ技により、全体の横幅ピッタリに要素を段組みしました。 今回は、position を使わない方法をご紹介します。 ボックスと余白の幅の値は前回と同じく以下です。 HTML ソースも前回と同じくこちら。無駄な ID や class のないシンプルなソースになっています。 <div id="photo"> <ul> <li><img src="hoge1.jpg" alt="サンプル1" width="160" height="120" /></li> <li><img src="hoge2.jpg" alt="サンプル2" width="160" height="120" /></li> <li><img src="hoge3.jpg" alt="サン

今回紹介するのは、4 ステップで簡単に写真を絵画のようにできる Photoshop チュートリアルです。 STEP 1 まず写真を一枚用意します。 STEP 2 メニューの　[イメージ]　→　[色調補正]　→　[シャドウ・ハイライト] シャドウを 100％ にします。 STEP 3 次に [フィルタ]　→　[表現手法]　→　[輪郭検出]を選択します。 STEP 4 [編集]　→　[フェード]を選択。描画モードを「輝度」にし「不透明度」を微調整します。 コレで完成です。たった 4 ステップで簡単にできるので興味のある方は是非お試しあれ。 参照サイト http://www.photoshopcafe.com/tutorials/sketch/sketch.htm