Max DesignWelcome to Max Design Design, development and accessibility training for web professionals
Stu Nicholls | CSS PLAY | An Active Photograph Gallery
Information Due to popular demand (Al and Jan) I have modified my original photgraph gallery to make it work a little differently. This one preloads the images so is ready to use as soon as the thumbnails are loaded and is intended for use at fast download speeds. The hover will just display the text information for the picture. When you want to see the full size image then click the thumbnail (wh
Ten reasons to learn and use web standards | 456 Berea Street
If you’re a web developer or designer new to the concept of web standards and are undecided on whether you should spend the time to learn all about them or not, here are some of the most important reasons for doing so. For web professionals who are already using web standards, this list may come in handy when you need good arguments. And feel free to add any additional benefits you can think of. 1
CSS For Bar Graphs
Having a working knowledge of XHTML and CSS when developing applications is a big help in knowing what can be done client-side and what should be generated server-side. Recently we’ve had to tackle some interesting visualizations which we coded in XHTML and CSS. The method we used, while fairly simple, was a big help to the engineer and created a very flexible and inexpensive solution. We thought
CSS Image Maps, Redux - Flickr-like Technique?
An updated CSS3 image map tutorial has been published. If you're looking for a more up-to-date version that makes use of some funky CSS3 features, you may want to check out CSS3 Image Maps I have received a number of emails after publishing my first take/experiment on CSS Image Maps. Feedback was both well received, as well as criticized. As you can imagine -- based on the "image sprite" method us
Lucky bag::blog: 維持しやすい CSS を考える
wg:Maintainable CSS CSS を維持・管理していく上で、保守性の高い CSS を作成するにはどういったことを意識して作成するだろうか。上記サイトでは個人的な好みと前置きし、いくつかアイデアを述べている。コメント欄なんかでもちょっと盛り上がってて、激しく同意できる部分もあったりそりゃ違うなとか思ったりと、色々と考えさせられた。 CSS を作成する際に自分が考えること 自分でも改めてまとめてみると何か新しい事が見えてくるかもしれないし、コメントで何かヒントやアイデアを教えてくれる人も居るかもしれないなぁとか思ったんで、ちょっとまとめてみた（上記サイトと被ってるのが多いけど）。 CSS ファイルの肥大化を抑えるよう、作成中にボツになったスタイルは必ず削除しておく。頻繁にスタイルを変えるような場合は、指定する必要のないスタイルが残っていないかチェックする。 どれだけ些細な事でも、
Web Style
The Purposes of E-commerce Website and Web format Since the importance of eCommerce internet site is growing bizarre and fantastic, the importance of e-commerce internet format also is growing. Before going to talk about more or less E-commerce internet format, everybody ought to necessarily notice more or less e-commerce internet site, and its services and products. Here are a few compulsory diff
CSSレイアウト最大の欠点 - WebStudio
もずはっく日記(2005年9月) 2005年9月24日 CSSレイアウト最大の欠点 初回投稿日時: 2005年09月24日07時44分39秒 最終更新日時: 2005年09月24日07時52分43秒 カテゴリ: CSS SNS: Tweet (list) 文書ソースの前後関係と、ボックスの位置関係に何の関連性も無いことがあるのがCSSレイアウトの最大の欠点だ。このため、キーボード等で、従来通りの設計のUA上で文書ソース順にフォーカスを移動させると、ユーザにはフォーカスの移動先の予測がつかないこともありうる。 もちろんこれはCSS仕様の欠点ではなく、CSS仕様に本当の意味で適合できていないUAに問題がある。UAの使命はユーザにとって使いやすいものを提供することなのだから。この問題に取り組んでいるのは、Mozillaの空間ナビゲーションしか知らないが、他の家電向けブラウザ等ではどうなのだろ
Safari に CSS を適用させない方法
And all that Malarkey で紹介されていた Apple 謹製 ブラウザ Safari に CSS を適用させないメソッド、Malarkey Safari Import Hack 略して MSIH 。果たして、使う機会があるのかが疑問だったりもするし、IE であればまだしも、Safari の場合はバグ修正されてしまうのも時間の問題だろうなぁとか思った。ま、とりあえず、メソッドとしては下記の通り。 /* これ以降、Safari は読み込まない */ @media all { @import url(hoge.css); /* ここに適用させたくないコードを */ } /* ここまで */ 不思議なことに、Safari は @media 内に @import を置くと、@media 内の指定を全て無視してしまうらしい。Safari 1.3.1 で確認してみたところ、確かに無視さ
訪問済みリンクを一工夫する - lucky bag
リンクの色によって、訪問済みなのか否かの判別を出来るようにするってのは、ユーザビリティ的には必要なことだとは思う。そう言った意味では、拙サイトなんかは全くもって許し難い設計な訳だけど、まぁそれは置いておく。んでもって、ただ色を変えるだけではなく、画像を使ってもうちっと視覚的に分かりやすくするのもありなんじゃないのかなぁって思ってみた。そして、サンプルを作ってみた。 visited_link_sample.html サンプル内のリンクが既に訪問済みであれば画像がチェックマークに変わるはず。CSS は下記のような感じで、a 要素に対してそれぞれ a:link、a:hover、a:visited で一つの背景画像の位置を変えることで見せ方を変えている。 li a { padding-left: 25px; line-height:180%; background:URL(mark.png) no
ジャケット画像のポップアップ #4
まだやってんのかという感じですが、まだやってます。今回は、段落の左肩にfloatさせた小さめの画像を配置するという、いわゆるアサマシ・エントリでありがちな形をまず想定し、その画像にマウスをあわせたら「ポップアップ！」というもの。全身全霊で「クリックしてくれ！」感を演出するメソッドです。 アサマシ・エントリ向けということで、以前書いたBloc Party / Silent Alarmというエントリの内容を利用して動作サンプルを作成してみました。 今回はコードの細かい説明は省きます。たいしたことはやってないので。ただ、Internet Explorerの場合、:hover擬似クラスでoverflowプロパティの値をscrollにセットしてやらないとうまいこと動きませんでした。なぜそうすると動くのかもわからないとかいう。 4つのエントリに渡っていろいろとやってみたわけですが、マウス・オーバーでポ
ジャケット画像のポップアップ #3
およそ9か月前とついこの間に書いたジャケット画像のポップアップをInternet Explorerに対応させてみました。対応させたといってもHTMLコードを書き直さなきゃならないので、CSSハックというわけではありません。Internet Explorerに対応させるための鍵になったのはoverflowプロパティとvisibilityプロパティでした。 Internet ExplorerとFirefoxそれぞれで動く(Operaでもそれなりですが怪しい)動作サンプル以外に語る術を持たない。というわけにもいかないので、もうひとつInternet Explorer向けのサンプルを作ってみました。このページのHTMLコードとCSSコードが基本になります。 HTMLの方は、 <p> <a href="https://www.amazon.co.jp/exec/obidos/ASIN/B0009AJ
ジャケット画像のポップアップ #2
昔書いたジャケット画像のポップアップは、今も愛用していたりするわけですが、デカイ画像をブラウザに拡大・縮小してもらってたりするので微妙に汚かったりとかします。:hover擬似クラスを適用する要素を工夫すると、小さい画像と大きい画像を切り替えてポップアップさせることが出来たりしました。 動作サンプルでマウスを画像に乗っけてやれば安定した画像(=Amazon提供のサムネイル・サイズと中サイズの画像)でポップアップしてくれるのがわかると思います。 元となるHTMLコードは、 <ul> <li> <ul> <li class="small"><img src="{小さい画像のURL}" ... /><li> <li class="medium"><img src="{大きな画像のURL}" ... /></li> </ul> </li> <li>...</li> <li>...</li> <li>
ポップアップウィンドウ用のスクリプト｜JavaScript::Bookmarklet Blog
ポップアップウィンドウ用のスクリプト 別ウィンドウでリンク先ページを開くときよく書くJavaScriptは以下のようなものです。 <a href="page.html" onclick="window.open(this.href)">リンク</a> でもこれだとメンテナンス性があまりよくありません。 そこでCSSを利用したページデザインのメンテナンスのような方法でこうしたリンク先を指定する方法です。ページのロードの終了時にJavaScriptでDOMを操作します。 まず、適当にpage1.htmlといったファイルを作っておいて、以下のHTMLを試して見てください。 <HTML><HEAD><TITLE>TEST</TITLE> <script language="JavaScript" type="text/JavaScript"> <!-- function doPopup() { i
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
