JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信

to-R

商品画像掲載のページ構成CSS

Check Tweet

ネタ元：商品画像掲載のページ構成css or table?

なかなか語られることのない、Web制作の問題点が議論されています。

この問題はheightLine.jsを使ったり、tableで組むことで解決できるのですが、なんかそれをやると負けた気がする人がいるのも理解できます。

ですので、私が最近使っている方法を紹介。

サンプル

コードに関してはサンプルから参照してください。

行ごとにブロックレベル要素で包み、その要素(サンプルではul要素)に対して、商品のリスト表示に使っている要素(サンプルではli要素)にかかっている物とおなじfloatプロパティを適応します。

副産物として、行ごとにブロックレベル要素で包んでいるのでclassを適応することにより背景色を変更することができます。

このマークアップも好みが分かれる所だと思いますが参考までに

関連エントリー

高さの異なるカラムをそろえるスタイルシート
CSSでロールオーバーもどき
CSSで実現するスマートなロールオーバー
BIR-もうひとつの画像置換
tableの膨張を防ぐ【css tips】

スポンサードリンク

• 日時: 2007年12月14日 09:13
• css

«Mac始めました-AirMacとAOSSを接続する方法- | メイン | ブックマーク数付きリンクが簡単に作れるブックマークレット»

このエントリーのトラックバックURL

http://blog.webcreativepark.net/cgi/mt/mt-bt.cgi/69

コメント

> このマークアップも好みが分かれる所だと思いますが参考までに

各liのなかにdlで、dtとddがワンセットしかない、
というマークアップは、構文的にはまったく問題なしですが、
マークアップポリシーとして違和感を覚える人がいるかもしれませんね。

dlはあくまで「リスト」であり、
複数の項目をマークアップするのにつかうのがスジだ、と考えれば、
dtとddは複数セット出てくるのが自然、という考え方ですね。

個人的には、各liのなかではシンプルにpで展開するのがよいかな、
と思っています。

投稿者:益子 | 2007年12月14日 12:03

>益子さん

コメントありがとうございます。

たしかに、この場合はpのほうが良さそうですね。サンプルという性質から考えても、中身がややこしいと良くないですね。

というわけで、pのほうに直しました。

また何かありましたら、よろしくお願いいたします。

投稿者:西畑一馬 | 2007年12月15日 01:44

CSSTIPS~アルファ画像を表示する
http://css.webcreativepark.net/tips3/

上のページでスターハックを使用した透過PNGの表示のさせ方が説明されていましたが、
指示通りに編集しても実装できませんでした。

IEと透過PNG
http://amenti.usamimi.info/ie6png.html

上のサイトで「画像のサイズ指定は必須」とありましたが、
CSSTIPSのページでは書かれていませんでした。
実際はどうなんですか？

まぁ、それでも実装できなかったのですが…
結局、透過GIFをつくり実装することになったのですが、
JPG、GIF、PNGの使い分けってどう判断していますか？
アドバイスをお願いします。

投稿者:通りすがり | 2007年12月15日 19:48

>通りすがりさん

ちなみにスタンドアローン版のIEなどのDirect Xなどのが動作しない環境では利用できません。

そうでないのでしたら、やり方を間違えているか、pngの作り方がおかしいのではないかなと思います。

背景画像を利用しているためボックスのサイズ指定は必要です。CSS　TIPSのほうでは最初のセレクタで指定しています。

JPG、GIF、PNGの使い分けですが写真などはjpg、画像はgif、アルファチャンネルを利用する場合はpngなどかなと思います。

参考になればと

投稿者:西畑一馬 | 2007年12月16日 16:45

コメントを投稿

現在不具合でコメントできません

名前:

メールアドレス:

URL:

この情報を登録しますか?

コメント:

認証:

検索

フィード

 RSSリーダーで購読する

Follow @KazumaNishihata

人気エントリー

• jQuery基礎文法最速マスター
• スマートフォンサイトをデザインする上で知っておくべき10のTIPS
• WEB製作者の為のSEOチートシート
• ユーザーがページのどこをクリックしたか解析するツール
• ブロックレベル要素の高さを揃えるheightLine.js
• SEO対策ツールまとめ

スポンサードリンク

著書

jQuery逆引きマニュアル

Web制作の現場で使う
jQueryデザイン入門

HTML+CSSコーディング
ベストプラクティス

JavaScriptコーディング
ベストプラクティス

現場のプロから学ぶXHTML+CSS

Movable Type 5.1
プロの現場の仕事術

カテゴリー

• Facebook [5]
• Windows Phone [0]
• ajax [7]
• amazon [3]
• android [18]
• books [69]
• cms [4]
• css [63]
• design [24]
• dialy [71]
• direction [5]
• firefox [22]
• flash [5]
• freelance [5]
• google [15]
• html [17]
• iphone [8]
• jQuery [13]
• javascript [78]
• mac [5]
• movable type [71]
• php [34]
• sem [11]
• seminar [72]
• seo [62]
• server [14]
• spry [19]
• sql [9]
• tools [48]
• wordpress [9]
• writer [80]

アーカイブ

• 2011年12月 [3]
• 2011年11月 [11]
• 2011年10月 [6]
• 2011年9月 [2]
• 2011年8月 [7]
• 2011年7月 [10]
• 2011年6月 [13]
• 2011年5月 [11]
• 2011年4月 [10]
• 2011年3月 [10]
• 2011年2月 [6]
• 2011年1月 [7]
• 2010年12月 [5]
• 2010年11月 [3]
• 2010年10月 [7]
• 2010年9月 [12]
• 2010年8月 [6]
• 2010年7月 [8]
• 2010年6月 [11]
• 2010年5月 [4]
• 2010年4月 [8]
• 2010年3月 [6]
• 2010年2月 [10]
• 2010年1月 [5]
• 2009年12月 [8]
• 2009年11月 [5]
• 2009年10月 [8]
• 2009年9月 [8]
• 2009年8月 [7]
• 2009年7月 [6]
• 2009年6月 [14]
• 2009年5月 [6]
• 2009年4月 [8]
• 2009年3月 [10]
• 2009年2月 [11]
• 2009年1月 [5]
• 2008年12月 [11]
• 2008年11月 [7]
• 2008年10月 [9]
• 2008年9月 [8]
• 2008年8月 [9]
• 2008年7月 [12]
• 2008年6月 [10]
• 2008年5月 [18]
• 2008年4月 [16]
• 2008年3月 [18]
• 2008年2月 [17]
• 2008年1月 [14]
• 2007年12月 [23]
• 2007年11月 [25]
• 2007年10月 [26]
• 2007年9月 [28]
• 2007年8月 [14]
• 2007年7月 [11]
• 2007年6月 [16]
• 2007年5月 [14]
• 2007年4月 [15]
• 2007年3月 [11]
• 2007年2月 [19]
• 2007年1月 [11]
• 2006年12月 [15]
• 2006年11月 [15]
• 2006年10月 [12]
• 2006年9月 [7]
• 2006年8月 [11]
• 2006年7月 [12]
• 2006年6月 [18]
• 2006年5月 [19]
• 2006年4月 [9]
• 2006年3月 [12]
• 2006年2月 [9]
• 2006年1月 [4]
• 2005年12月 [8]
• 2005年11月 [13]
• 2005年10月 [5]
• 2005年9月 [1]
• 2005年8月 [13]
• 2005年7月 [26]

最近のエントリー

• Facebookの新プラグイン「フィード購読ボタン(Subscribe Button)」
• jQueryデザイン入門がAmazonの2011年Best Booksで11位に！
• スマートフォンとposition:fixedのバグ
• WiMAXのホームルータ（URoad-Home）を試してみた
• 67WS で集中特訓！スマートフォンサイト制作術を開催
• SwapSkillsでFacebookのOGPについてお話しします。
• jQuery逆引きマニュアルの増刷が決定(4刷)
• 続:Xcode4.2インストール後にiPhone4以下のiOSシミュレータを利用する
• Xcode4.2インストール後にiPhone4以下のiOSシミュレータを利用する
• display:noneの要素にGoogle Mapsを貼り付ける

コンテンツ

• 当サイトについて
• ブックマーク
• お問い合わせ

リンク

• WEBクリエイターSOHP
• twitter

このblogを書いてる人

西畑一馬(to-R代表)
Kazuma Nishihata
Webクリエイター

photo by
s-style-arts

items

タグクラウド

(x)html .htaccess a a-blog CMS adobe AdSense Ajax alphafilter.js Android ASCII.jp blog book CakePHP CentOS CGIPath cms CMS Designer CSRF CSS CSS3 cssnite csv Delicious dell display dl dom Dreamweaver dt ESET Smart Security Facebook Fastladder favicon feed Feedburner FFFTP firebug firefox Fireworks flash float Google google Google Analytics Google Chrome Google Chrome Extension Google Maps API Greasemonkey heightLine.js Html Validator HTML+CSSコーディング　ベストプラクティス HTML5 ie IE6 IE7 IE8 IE9 imedio iPad iPhone JavaScript javascript JavaScriptコーディングベストプラクティス jQuery jQuery Mobile jQuery逆引きマニュアル JSON JSONP jsライブラリ li LightBox Livedoor Reader livedoorクリップ lpo mac Mac People margin max-height max-width meta microdata min-height min-width mixi Movable Type Movable Type 5.1 プロの現場の仕事術 MT MTDDC ol onload Opera pagerank pc photo PHP position Prototype.js qrコード RCMS RDFa Re:Creator's Party Kansai rss SaCSS Safari sbm sbo script.aculo.us Scuttle sem SEO SEO対策 smarty smo SOY CMS SpamLookup spry SQLインジェクション Subversion SwapSkills table target-densitydpi Thunderbird tool TortoiseSVN transition Twitter ul urlエンコード URL短縮 vertical-align vi viewport Virtual PC VMware Player VMware Server VMWare Tools WDF Web creators Web Designing WebRelease 2 Webridge Kagawa webSig24/7 webクリエイター Webディレクション Webディレクター Webデザイン・フォーラム Web制作の現場で使う jQueryデザイン入門 Web制作の現場で使うjQueryデザイン入門 web標準 Web標準の日々 Wordpress xhtml XML XSS yahoo Yahoo!ブログ検索 YUI あわせて読みたい お問い合わせフォーム はてな アップデート アドオン アルファ画像 イメディオ インクルーシブデザインワークショップ カスタムフィールド カラム キーワードアドバイスツール キーワード出現頻度解析 クリエイティブ・コモンズ クリック クリップボード グローバル・タグ・アトリビュート コンテスト コード サイバーガーデンbiz スタイルシート スマートフォン セキュリティー セミナー タグクラウド ツールチップ トラックバック バグ ヒューマンアカデミー ビジネスエクスプレス フィード フリーランス ブックマークレット プラグイン マクロ マークアップエンジニア モバイル ユーザビリティ ライブラリ ロクナナ ロールオーバー 一言いっとくか 再構築 勉強会 動画 執筆 拡張機能 書評 検索エンジン 検証 独立 現場のプロから学ぶXHTML＋CSS 画像置換 百度 確定申告 秀丸 経度緯度検索 翻訳 解析 透過png 重複コンテンツ 開業届け 青色申告

Movable Type

© 2005-2011 to-R[西畑一馬] some Rights Reserved.