サクサク読めて、アプリ限定の機能も多数！
トップへ戻る
CES 2025
www.studionh.net
本当にこのサイトを放置していましたが、一応生きています。 MT4移行計画も準備中です。ですが忙しくてなかなかできません。 さて、本題ですが、input要素のボタンをロールオーバーさせたい案件がありまして、いろいろと調べてみました。 はじめは、「jQueryだけで画像のロールオーバーを実装する方法」を参考にしていましたが、Image Rollover Codeに慣れた身に関しては、個別にファイル名を記載してプリロードさせるやり方はやはり面倒です。クラスを割り当てて、特定のファイル名を記述するとロールオーバーを勝手にやってくれる方が、制作する方としては非常に楽です。 そこで、Easy Image Rollover Script With jQuery ~ PEPS.caのロールオーバースクリプトが、input要素にも対応しています。 ただ、このままだとおもしろくないので、すこし改良してみまし
今日は、DreamWeaverのデザインビューで、clearfixのレイアウト崩れを防ぐ方法を紹介します。 DreamWeaverのデザインビューで、clearfixを指定したときに、デザインビューではレイアウトが崩れてしまいます。 私はデザインビューをあてにしないで作業していますが、たまにはあてにしたくなる時もあります。 そんなときには、clearfixを指定している部分に、「overflow:hidden;」「overflow:auto;」のどちらかを指定します。 これで、デザインビューでclearfixが原因でレイアウトが滅茶苦茶になる時はなくなるでしょう。 ただし、「overflow:hidden;」「overflow:auto;」は、諸刃の刀ですので、本番環境でのブラウザ確認はしっかりとやられたほうがいいでしょう。 これが原因で本番環境でレイアウトが変になっても責任は取れな
ひさしぶり〜なエントリーです。なにしろ仕事とか忙しくて更新している暇などありませんでしたが、ぼちぼち更新していこうと思います。（いちおうMT4で構築しだしているのですが、なかなか進んでいなかったりする訳で） Photoshopにも「スクリプト」なんてものがありますが、実は使ったことなどなかったのですが（汗）、「GridMaker Reboot」という変なものを見つけてしまいました。 これは、Photoshopのスクリプトメニューから読み込んで、黄金比のグリッド（ガイド）をひいた状態の新規ファイルをつくってくれるものです。 手順 GridMaker Reboot - Article - andrewingramから、スクリプトをダウンロードして、適当な場所におきます。 「ファイル」→「スクリプト」→「参照」を選択します。 ダウンロードした「GridMaker2.jsx」を読み込みます。 幅
前回からの続きです。今回はCSSの記述ルールとか管理とかについて考えてみたいと思います。ということで、今回のお題（笑）です。 サポートするブラウザの種類を決めておこう。 記述するパターンを統一しよう。 CSSハックがある場合、あとで取り除くことが容易にできるように考慮して書いてみよう。 CSSハックの組み合わせ一覧の例 そもそも、DreamWeaverって、CSSに書くのにまったく向いていないじゃないの!?じゃあ、どうしたらわかりやすく管理できるの!? サポートするブラウザの種類を決めておこう。 サポートするブラウザの種類を決めておくことで、制作の時間が大幅に違ってきます。 5バージョン（特にMacIEとやら）でも、フルCSSのポップアップメニューを使えるようにしてください、なんて言われた日には泣きます。実際にあった案件の話ですが、泣きながらなんとかしました。けど、そのメニューに4日くらい
前回からの続きです。よく使うコンポーネントを構成する要素 一覧の例をあげてみました。今回は、つくったクラスのネーミングについて考えてみたいと思います。 どのようなネーミングがいいのか 理想は、「文書中でどのような役割を持つのか」が一番です。しかし、ネーミングを考えるのは難しいのでそのあたりは少しずつかんがえていくといいでしょう。現実的に、「同じ内容なのに、クラス名だけ違う」のでは、コンポーネントの名前としては「分かりにくい」ので受け入れられないかもしれません。 ネーミングと CSS 3 Attribute Selectors 意外とネーミングを考えるときにキーになるのが「CSS 3 Attribute Selectors」です。 例えば、E[foo*="bar"] の指定を行い、foo 属性値が部分文字列 bar を含んでいる E 要素にマッチするようなクラス指定をおこなえる、というのが
あけまして、おめでとうございます（とてもそんな気分ではないが）。本年度もよろしくおねがいします。 去年の10月くらいから先日まで、すざましい仕事等の嵐でblogの更新もままなりませんでしたが、今年はテキトー[謎]に更新をがんばっていきたいとおもいます。 ほんとうは、blogのリニューアルとかもやってみたかったのですが、忙しいのと、時と場合によってコードが違うので、管理がややこしくなってきています。 仕事でも、他人の書いたコードを管理するときとかも、訳わからずに力技[謎]でケリつけていますが、自分のコードも進化しているので「訳わからん」状態になっています。 そこで今年は（去年の春から少しずつ実験しているのですが）、CSSのコンポーネント管理を本格的におこなってみることにしました。 コンポーネントを構成する要素 一覧 現在時点での、コンポーネントを分類してみました。これくらい用意すれば、8
転職してから仕事が忙しくて、blogもまともにやっていませんでしたので、久しぶりなエントリーです。今回は単なる備忘録ですが。Internet Explorer 7 が一応正式版になったので、ハックのまとめとかメモしてみました。以前に記事にしたネタとか、新しいネタとかありますが。 「Internet Explorer のハックのメモ」というタイトルで、「カニの人[誰]の雑誌の記事のネタ」にして、マイミクさんのヘルプネタとして終わる予定だったのですが、公開してみます。 一応、ブログのリニューアルも考えていて、新しいハックのルールにしています。もっとも、作業の方はまったくすすんでいませんが（笑）。 ハックの適用順位とか FirefoxとSafariには、まったくCSSハックを使用しません。できるだけ最小限のCSSコードを実装します。 Safariでバグとか出た場合（ほとんどない気がするけど）「
個人的な事情（転職準備などもろもろ[謎]）で、あまり更新していない状態でしたが（ほかにも秘密の計画[謎]もあり）、ぼちぼち更新していこうと思います。 今回のネタは、「ブラウザの墓場」についてです。 この業界にいると、たまにブラウザの古いバージョンが必要になるときがあります。特に、Netscape 4.x などという、たまにチェック案件に入ってくる「窓から投げ捨てたい」古いブラウザが入ってくるときがあります。えてして、そんなときに限って「どこからダウンロードするのだろうか」というものなので、メモしておきます。 evolt.org - Browser Archive 有名な「ブラウザの墓場」です。よくもしらべられるな〜、と思うくらいのブラウザが眠っています。Windows版 Internet Explorer のスタンドアローンバージョンもここから。 Opera archives Oper
少し時間があったので、Windows Internet Explorer 7のCSSバグを検証してみた。 IE7 を含むモダンブラウザ向けの CSS ハックまとめにうまくまとまっているが、いくつか誤りもあり、新しいCSSハックも発掘したので少し書いておきたい。 検証したのは、Window Internet ExplorerのV6/V7、Firefox 1.5、OperaのV8/V9、Safari 1.3 です。今回はサンプルを用意しないので自分で確かめてほしいのと、複雑な属性セレクタを使ったものは難しい人もいると思うのでシンプルなものに限定してみた。 また、W3C CSS validator でValidなもののみに限定しています。 Internet Explorer 7のハック 「*+html hack」（*+html bodyのハック）は、じつはOpera 8.0 以降にも適用され
このエントリーのトラックバックURL : http://www.studionh.net/mt/mt-tb.cgi/33 この一覧は、次のエントリーを参照しています。
Mac OS X 10.5（Leopard）には、Mac OS X 10.4（Tiger）スマートフォルダの仕様がすごく変わっています。 特定のフォルダの中のファイルを検索して保存したいときなど、検索条件を作る手順がものすごくわかりにくいのです。 いろいろと、試行錯誤をした結果、以下の方法で特定のフォルダ以下の検索ができるスマートフォルダを作成することができます。 検索したい特定のフォルダに、Finderで移動します。 Finderのツールバーの右上にある検索窓で検索を行います。 （例：拡張子を指定するなど） 「検索したい特定のフォルダ」以下に絞った検索結果が出てきます。 ＋ボタンで検索条件を追加します。 （例：「最後に開いた日が10日以内」、などの条件を追加するといいでしょう。） 「保存」ボタンを押して、検索条件を保存します。 しかし、わかりにくい仕様になったと思います。
XHTML+CSSでのWeb制作は以前よりは普及してきたといえるが、まだまだノウハウを持っている人は足りないのは現状です。よくWeb制作関連のセミナーとかに出ると、「XHTML+CSSでサイト構築ができる人材がいない」とよく聞きます。そこで、XHTML+CSSでの効率的な制作をおこなう上でのポイントをいくつか考えてみました。 予告しなかった第5回目です。今回は残りの部分を一気に行きたいと思います。すごく長くなるのでお覚悟を。 Web標準に準拠したブラウザを基準に制作する よく、Internet Explorer 5 or 6を基準にして作成してFirefoxやOperaやSafariでレイアウトが崩れるという話を聞きます。しかし、制作思想が根本的に間違えています。Internet Explorer 7が（いや、Microsoftが）、批判はともあれ、（曲がりなりとも）Web標準に準拠してい
XHTML+CSSでのWeb制作は以前よりは普及してきたといえるが、まだまだノウハウを持っている人は足りないのは現状です。よくWeb制作関連のセミナーとかに出ると、「XHTML+CSSでサイト構築ができる人材がいない」とよく聞きます。 そこで、XHTML+CSSでの効率的な制作をおこなう上でのポイントを何回かに分けて書いていきたいと思います。今回はPart4です。CSS編のPart 3です。前回は嘘みたいな話ばかりでしたが今回は普通の話(!?)です。短くしたいのですが、どうしても長くなってしまいます。 CSSの記述順序は明確にする CSSの記述順序は明確にすることは、メンテナンスにも関わる問題です。ある程度パターン化しておくことが重要です。記述例を以下に書きます。 初期化CSS レイアウト構成divタグなど 共通モジュール ヘッダー、フッダー、コンテンツエリア、ナビゲーションなど Mach
XHTML+CSS (r)evolutionに反応してなにか書いて見る記事のPart 1です。 「XHTML+CSSに足りないコト、ご意見募集」なんてネタに反応してみたりする（笑）。XHTMLには結構足りない要素があるとおもうので思うところを書いてみました。 サイト名に関するタグ Webサイトを見ていると、サイト名を必ずページの上部に示しています。サイト名がないWebサイトのページは見たことがありません。また、企業のブランドサイトでは、ブランドロゴと、企業名が両方入っている例（東京電力「Switch」など）もあります。 不思議なことに、XHTMLではサイト名に関するタグがありません。そこで、ある人は<h1>タグをサイト名に、ある人は<p>タグをサイト名にしています。そして、<h1>タグは、ページのもっとも重要なタグに付加しています。その基準は、人によってバラバラです。人によってばらばらな「
XHTML+CSSでのWeb制作は以前よりは普及してきたといえるが、まだまだノウハウを持っている人は足りないのは現状です。よくWeb制作関連のセミナーとかに出ると、「XHTML+CSSでサイト構築ができる人材がいない」とよく聞きます。 そこで、XHTML+CSSでの効率的な制作をおこなう上でのポイントを何回かに分けて書いていきたいと思います。今回はPart3です。CSS編のPart 2です。うそみたいな話が多いですが、すべて実話ですので世の中怖いです。 マージンの方向は原則的に下と左右に統一する フロートも絶対配置もされていないブロックの場合、マージンは相殺します（参考：「マージンの相殺 - CSS Dencitie」）。見出しや段落、リストなどレイアウトブロック内での要素のマージンは原則的に下と左右に設定するように統一しましょう。 上マージンを使うのは原則としてブロック内の最初の要素だ
XHTML+CSSでのWeb制作は以前よりは普及してきたといえるが、まだまだノウハウを持っている人は足りないのは現状です。よくWeb制作関連のセミナーとかに出ると、「XHTML+CSSでサイト構築ができる人材がいない」とよく聞きます。 そこで、XHTML+CSSでの効率的な制作をおこなう上でのポイントを何回かに分けて書いていきたいと思います。今回はPart2ということでCSS編です。長くなったので、今回はPart 1です。 最初は設計図を書くこと 慣れたら頭の中でできますが、最初はデザイン案を印刷して紙の上でどこにどのようなidやclassを振っていくか、幅や高さをどう指定するか書いておくといいでしょう。 当然ながら、1枚では書ききれないので複数に分けて書くといいと思います。また、デザイン案のPSDファイルの中に記録しておく手もあります。 CSSはブロックごとに設定する XHTMLの構成
XHTML+CSSでのWeb制作は以前よりは普及してきたといえるが、まだまだノウハウを持っている人は足りないのは現状です。よくWeb制作関連のセミナーとかに出ると、「XHTML+CSSでサイト構築ができる人材がいない」とよく聞きます。 そこで、XHTML+CSSでの効率的な制作をおこなう上でのポイントを何回かに分けて書いていきたいと思います。Part1はXHTML編です。 XHTML文書の構造化をしっかりとおこなう 見出し、段落、リストなどの文章を構造化するタグをうまく活用していき、divタグはレイアウトブロックとして使うようにしていけば、余計なidやclassの数が大幅に減り、ソースがシンプルになります。 XHTML文書の構造化とは、イメージ的には、見出し、段落、リストなどの文章を構造化するタグをdivタグで包んでいます。包んだdivタグがいくつもあるとわからなくなるので、idやclas
Webデザイナーに限らず、「配色」とは非常に重要で、それゆえになやんだりします。配色の「作成ツール」の話は良く聞きますが、配色の「ショーケース」をまとめた話はほとんど聞いたことがないので、3サイト紹介してみます。 URL : http://colourlovers.com/ 色好きな人の為のサイト。右側のメニューの「top colors」「new colors」「new palettes」のリンクから人気の色、新しい色、新しい配色をチェックすることができます。見ているだけでイメージが膨れ上がってくる感じです。 URL : http://www.colorblender.com/browse.asp オンライン配色ツール「Color Blender」サイト内のコンテンツ。上部ナビゲーションの「Browse blends」のリンクから見ることができます。「Color Blender」で作った配
このエントリーのトラックバックURL : http://www.studionh.net/mt/mt-tb.cgi/10 この一覧は、次のエントリーを参照しています。
Web Designningの記述から、Veerle's blogで使っているclear:bothをhrをうまく使ってやっている手法が気になったのでいろいろとやってみた。 hr要素にclear:both;を指定 はじめは。hr要素にclear:bothを指定しているものだと思ったのだが、実際のところ、やってみるとうまくいかなかったりする。ここで意外と問題になったのはNetscape7だった。ハックとかかけて書いてみても、Netcape7でうまくclear:bothが適用されなかったのでhr要素によるclear:both;は断念しました。 hr要素と「clear:both;」サンプル1 サンプルページへ div要素にclear:both;を指定してみる その1 Veerle's blogの記述を見てみると、「<div id="content-footer"><hr /></div>」という記
トラブルの多いli要素のナビゲーションとは Internet Explorer 5 and 6 に限らず、Mozilla FirefoxやSafariでも実はけっこうあるのがli要素をナビゲーションで使うとき、すきまが開いてしまうとかという問題だったりする。 li要素の中にa要素で「display:block;」を指定するとInternet Explorer（5、6、7 Beta2）ですきまが開いてしまう問題が比較的有名である。 意外と知られていないのが、li要素に「display:inline;」を指定すると、左側にわずかなすきまが開いてしまう問題だ。空いてしまう間隔は5pxほどになる。 FirefoxやSafarinなど、どのブラウザでもこのすきまができるので、きっと仕様なのだろう。 「float:left;」を指定すればこのすきまは消えるが、すべてにおいて「float:left;
Universal selector（*）の指定 font-size:100%;を指定しない。 これは、Windowsの「ユーザー補助」関連の機能を有効にしたときに、Internet Explorer 6で画面が乱れるバグがあるため Universal selectorにline-heightを指定しない。 Universal selectorにline-heightを指定すると、一部分のみに違うline-heightを指定することが困難になるので、指定しない事が無難。 その他の指定 a[name]:hover{text-decoration:none !important;outline:0 !important;} Mozilla Firefox、Netscape7などのGecko系のブラウザのバグ対策。 ul li,ol li 使う事がおおいタグなので、細かい指定は各エリアごとに指定
overflow:auto;と印刷用CSSの問題とは 「overflow:auto;」で印刷用CSSを作成時に痛い目にあったのでメモ Mozilla Gecko系のブラウザ、Mozilla Firefoxや、Netscape7.1などで痛い目にあいます。 具体的には、印刷時にoverflow:auto;を指定した部分が１枚に印刷できないときに改ページせずに消えてしまう現象があります。Internet ExplorerやOperaでは問題なかったので、明らかにMozilla Gecko系のブラウザでの問題／バグだと思われます、 印刷用CSSでの対策 幸い、印刷用のCSSのみのバグなので、印刷用のCSSを書くときに@media printで印刷用CSSには「overflow:visible !important;」と指定しています。 @media print{*>/**/.ClearFix{
いつも鷹野さん[誰]にネタを使われて（!?）います、CSS Niteに先日もいってきました。 そこであげられていたのも含め、今回のお題、Lightbox jsのネタをいくつかまとめてみました。 ちなみに、うちの倉庫[謎]には、当面ストックはありませんのであしからず。 Lightbox http://www.huddletogether.com/projects/lightbox/ 本家本元。すべてはこれがはじまり。 LightBox Plus http://serennz.cool.ne.jp/sb/sp/lightbox/ Lightbox 本家の改良版。拡大できたり閉じられたり。 Lightbox coolness http://mudabone.com/aietc/?p=383 Lightbox 1.0の亜流。 Leightbox http://www.e
このページを最初にブックマークしてみませんか？
『www.studionh.net』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
