調ã¹ã‚‹ã€‚ 備忘録ã¨ã—ã¦webやデザインã«ã¤ã„ã¦èª¿ã¹ãŸã‚Š æ–°ã—ã知ã£ãŸã“ã¨ãªã©ã‚’書ã残ã—ã¦ã„ãカテゴリã§ã™ã€‚
知らãªã„ã¨ã„ã¤ã¾ã§ãŸã£ã¦ã‚‚HTMLã¨CSSãŒç†è§£ã§ããªã„æš—é»™ã®ä»•æ§˜4ã¤
調ã¹ã‚‹ã€‚ 備忘録ã¨ã—ã¦webやデザインã«ã¤ã„ã¦èª¿ã¹ãŸã‚Š æ–°ã—ã知ã£ãŸã“ã¨ãªã©ã‚’書ã残ã—ã¦ã„ãカテゴリã§ã™ã€‚
ã‚‚ã†ã€classåã‚„idåã§æ‚©ã¾ãªã„ã‚“ã ã‹ã‚‰ã£ï¼ï¼ï½œCSS HappyLife
classåã‚„idåã£ã¦ä»˜ã‘る時悩ã¿ã¾ã›ã‚“ã‹ï¼Ÿ 今ã§ã‚‚ボクã¯çµæ§‹æ‚©ã‚€ã‚“ã§ã™ãŒã€ãã‚“ãªæ‚©ã¿ã‚’解決ã™ã‚‹ç‚ºã«ã€äººã•ã¾ã®ã‚½ãƒ¼ã‚¹è¦—ãã¾ãã£ã¦ã‚ˆãã‚ã‚‹classåã¨idåを拾ã£ã¦ãã¾ã—ãŸã€‚ ã“ã‚Œã§ã€ãƒãƒ§ãƒƒãƒˆã ã‘作æ¥åŠ¹çŽ‡ã‚¢ãƒƒãƒ—ï¼ï¼Ÿ 2010å¹´6月10日追記： ã“ã®è¨˜äº‹è‡ªä½“ã€2007å¹´ 1月15æ—¥ã«æ›¸ã‹ã‚Œã¦ã‚‹ã‚“ã§ã‹ãªã‚Šå¤ã„ã§ã™ã€‚ ã‚ãã¾ã§ã‚‚å‚考程度ã«ç•™ã‚ã¦ã‚‚らã†ã®ãŒè‰¯ã„ã‹ã¨æ€ã„ã¾ã™ã€‚ 今ã ã£ãŸã‚‰ã€html5ã®è¦ç´ ã‚’å‚考ã«ã—ãŸã‚Šã—ã¦ä»˜ã‘ã‚‹ã®ãŒã€ä»Šå¾Œã®äº‹ã‚’考ãˆã‚‹ã¨è‰¯ã„ã®ã‹ãªãƒ¼ã¨æ€ã„ã¾ã™ã€‚ ã¾ãŸã€å–„ã—悪ã—ã®åˆ¤æ–ã¯ã›ãšã«å…¬é–‹ã—ã¦ã„ã‚‹ã‚‚ã®ã§ã™ãŒã€ä½ç½®ã«é–¢ã™ã‚‹ã®ã¯ä»•æ§˜å¤‰æ›´ã«å¼±ããªã‚‹ã®ã§ã‚ªã‚¹ã‚¹ãƒ¡ã¯ã—ã¾ã›ã‚“。 全体ã«ä½¿ãˆãã†ãªæ„Ÿã˜ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
ãƒã‚¤ãƒ‘ーテã‚ストリンクã®ã‚¹ã‚¿ã‚¤ãƒ«å¤§å…¨
ãƒã‚¤ãƒ‘ーテã‚ストリンクをデザインã™ã‚‹ä¸Šã§çŸ¥ã£ã¦ãŠããŸã„基礎知è˜ã‹ã‚‰ã€å®Ÿç”¨çš„ãªãƒãƒƒãƒ—スã€ã‚„ã£ã¦ã¯ã„ã‘ãªã„é–“é•ã„ãªã©ã€ã™ãã«å½¹ç«‹ã¤ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã‚’Smashing Magazineã‹ã‚‰ç´¹ä»‹ã—ã¾ã™ã€‚ The Definitive Guide To Styling Web Links 以下ã¯ã€å„ãƒã‚¤ãƒ³ãƒˆã‚’æ„訳ã—ãŸã‚‚ã®ã§ã™ã€‚ ã¯ã˜ã‚ã« ãƒã‚¤ãƒ‘ーテã‚ストリンク（リンク）ã¯ã‚¦ã‚§ãƒ–ページをã¤ãªãŽã¾ã™ã€‚Web Standardistasã«ã‚ˆã‚‹ã¨ã€Œãƒã‚¤ãƒ‘ーテã‚ストリンク無ã—ã§ã¯ã‚¦ã‚§ãƒ–ã¯ã‚¦ã‚§ãƒ–ã§ã¯ãªãã€ãã‚Œã¯ãŸã 別個ã®ã€ç„¡é–¢ä¿‚ãªãƒšãƒ¼ã‚¸ã®ã‚³ãƒ¬ã‚¯ã‚·ãƒ§ãƒ³ã§ã—ょã†ã€ã¨è¨€ã£ã¦ã„ã¾ã™ã€‚ 我々ã¯ãƒšãƒ¼ã‚¸ã«ãŸã©ã‚Šç€ã„ãŸã‚‰ã€ã‚る種ã®ãƒªãƒ³ã‚¯ã‚’クリックã™ã‚‹å¿…然性ãŒã‚ã‚Šã¾ã™ã€‚ 1. CSSã®ã‚»ãƒ¬ã‚¯ã‚¿ã¨æ“¬ä¼¼ã‚¯ãƒ©ã‚¹ リンクをスタイルã™ã‚‹æ™‚ã«ã¯ã€ãƒ¦ãƒ¼ã‚¶ãƒ¼ã¯ãƒšãƒ¼ã‚¸ã‚’æµã—èªã¿ã™ã‚‹ã“ã¨ã‚’忘れãªã„ã§ãã ã•ã„。ãã®ãŸã‚ã€ãƒªãƒ³ã‚¯ç®‡æ‰€ã¯ã—ã£ã‹ã‚Šã¨æ˜Žç¤ºã™ã¹ãã§ã™
IE6ã®ãƒã‚°ã‚„仕様ã®è§£æ±ºæ–¹æ³•ã®ã¾ã¨ã‚ -Ultimate IE6 Cheatsheet
IE6ã®CSSã‚„JavaScriptãªã©ã®ãƒã‚°ã‚„仕様ã§å›°ã£ãŸæ™‚ã®è§£æ±ºæ–¹æ³•ã‚’ã¾ã¨ã‚ãŸãƒãƒ¼ãƒˆã‚·ãƒ¼ãƒˆã‚’Virtuosi Mediaã‹ã‚‰ç´¹ä»‹ã—ã¾ã™ã€‚
ã„ã¾èµ·ãã¦ã„ã‚‹Web標準ã®é€²åŒ–ã€HTML5ã€CSS3ã€JavaScript 2.0
日本ãŒå¤§åž‹é€£ä¼‘ã«å…¥ã‚‹å°‘ã—å‰ã®4月23æ—¥ã€W3Cã¯HTML5ã®æ–°ã—ã„ドラフトを公開ã—ã¾ã—ãŸã€‚ã„ã¤ã‚‚最新ã®Web標準化動å‘ã‚’ä¼ãˆã¦ãれるWeb標準ブãƒã‚°ã®ã‚¨ãƒ³ãƒˆãƒªã€ŒLast Callã«å‘ã‘進むHTML5 | Web標準Blog | ミツエーリンクスã€ã«ã‚ˆã‚‹ã¨ã€ä»Šå›žã®ãƒ‰ãƒ©ãƒ•ãƒˆã‹ã‚‰ä»•æ§˜æ›¸ã«å¤§ãã手ãŒåŠ ã‚ã‚Šã€Webサイトを作る人å‘ã‘（制作者ã«é–¢ä¿‚ã™ã‚‹è¦ä»¶ï¼‰ã¨ã€Webブラウザを作る人å‘ã‘（実装è¦ä»¶ã«ã¤ã„ã¦ã®è¦ä»¶ï¼‰ã”ã¨ã«è¦‹ã‚„ã™ããªã‚‹ã‚ˆã†ãªã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆãŒç”¨æ„ã•ã‚ŒãŸã¨ã®ã“ã¨ã€‚ ã“ã‚Œã¾ã§ã‚‚何度ã‹ã“ã®ãƒ–ãƒã‚°ã§ã¯ã€HTML5ã‚„JavaScript 2.0ãªã©ã®Web標準ã®å‹•å‘を書ã„ã¦ãã¾ã—ãŸãŒã€ä»Šå›žã¯åˆ†ã‹ã‚Šã‚„ã™ã„よã†ã«ãã®å‹•ãã‚’ã¾ã¨ã‚ã¦ã¿ã¾ã—ãŸã€‚ HTMLã¯HTML4ã§ã„ã£ãŸã‚“進化ãŒçµ‚了ã—ã€ãれ以後ã¯XHTMLã§é€²åŒ–ã—ã¦ã„ãã“ã¨ã«ãªã£ã¦ã„ã¾ã—ãŸã€‚ã—ã‹ã—実際ã«ã¯XHTMLã¯æœŸå¾…ã•ã‚ŒãŸã»ã©æ™®åŠã›ãšã€XHTMLã«ã‚ˆã£
[CSS]クãƒã‚¹ãƒ–ラウザ対応ã€é«˜ã•ã®ç•°ãªã‚‹ã‚«ãƒ©ãƒ ã‚’æƒãˆã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆ | コリス
Matthew James Taylorã®ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã‹ã‚‰ã€é«˜ã•ã®ç•°ãªã‚‹divã§çµ„ã‚“ã カラムã®é«˜ã•ã‚’æƒãˆã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’紹介ã—ã¾ã™ã€‚ Equal Height Columns with Cross-Browser CSS & No Hacks demo: 2カラムdemo: 3カラム以å‰ã€ç´¹ä»‹ã—ãŸã€Œé«˜ã•ã®ç•°ãªã‚‹ã‚«ãƒ©ãƒ ã‚’æƒãˆã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã€ã§ã¯ã€ãƒšãƒ¼ã‚¸å†…アンカーã§è¦ç´ ãŒæ¶ˆå¤±ã—ãŸã‚Šã€IEã§å°åˆ·ã§ããªã„ãªã©ã®ä¸å…·åˆãŒã‚ã‚Šã¾ã—ãŸãŒã€ä»Šå›žç´¹ä»‹ã™ã‚‹ã‚‚ã®ã¯ã€ãã®ï¼’ã¤ã®ä¸å…·åˆãŒç„¡ã„ã‚‚ã®ã¨ãªã£ã¦ã„ã¾ã™ï¼ˆIE7調ã¹ï¼‰ã€‚ 対応ブラウザã¯ã€IE5.5, 6, 7, Fx1.5, 2, 3, Op8, 9, Safari, Google Chromeãªã©ã»ã¨ã‚“ã©ã®ã‚‚ã®ã«å¯¾å¿œã—ã¦ã„ã¾ã™ã€‚ 仕組ã¿ã¯ã‚«ãƒ©ãƒ ã”ã¨ã«divを用æ„ã—ã€ãã‚Œãžã‚Œã‚’ãšã‚‰ã—ã¦é…ç½®ã—ã¾ã™ã€‚ 下記ã¯ã€ãã®ã‚¤ãƒ¡ãƒ¼ã‚¸ã§ã™ã€‚
Web制作 W3G
セルラン上ä½ã‚¢ãƒ—リã®å£²ä¸Šãƒ»ãƒ©ãƒ³ã‚ング推移・ユーザー数ãªã©ã®çµ±è¨ˆæƒ…å ±ã‚’ã¾ã¨ã‚ã¦ã„ã¾ã™ã€‚複数ã®èª¿æŸ»ãƒ¡ãƒ‡ã‚£ã‚¢ãŒç™ºè¡¨ã—ã¦ã„るデータを比較å‚ç…§ã—ã¦ã€ã‚ˆã‚Šç¢ºåº¦ã®é«˜ã„æƒ…å ±ã‚’ç¢ºèªã§ãã¾ã™ã€‚
クãƒã‚¹ãƒ–ラウザã®ãŸã‚ã®HTML/CSSã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯é›† | コリス
anthonyshortã®ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã‹ã‚‰ã€ã‚¯ãƒã‚¹ãƒ–ラウザã®ãŸã‚ã®HTMLã¨CSSã®ãƒ†ã‚¯ãƒ‹ãƒƒã‚¯ã®ç´¹ä»‹ã§ã™ã€‚ How to get Cross Browser Compatibility Every Time ç°¡å˜ãªæ„訳ãªã®ã§ã€è©³ç´°ã‚„ã‚ャプãƒãƒ£ã¯ä¸Šè¨˜ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã‚’å‚考ãã ã•ã„。 サマリー doctypeã¯strictを使用ã—ã€æ£ã—ã„HTML/CSSを使用ã—ã¦ãã ã•ã„。 スタイルをリセットã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã‚’使用ã—ã¦ãã ã•ã„。 Firefoxã§ã®ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã®ãŸã‚ã«ã€ãƒ†ã‚ストã®ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã«ã€Œ-moz-opacity:0.99ã€ã‚’指定ã—ã¦ãã ã•ã„。 Safari用ã«ã¯ã€Œtext-shadow:#000 0 0 0ã€ã‚’使用ã—ã¦ãã ã•ã„。 ç”»åƒã®ãƒªã‚µã‚¤ã‚ºã‚’CSS/HTMLã§è¡Œã‚ãªã„ã§ãã ã•ã„。 å…¨ã¦ã®ãƒ–ラウザã§ãƒ•ã‚©ãƒ³ãƒˆã®ãƒ¬ãƒ³ãƒ€ãƒªãƒ³ã‚°ã‚’確èªã—ã¦ãã ã•ã„。 「Lucidaã€ã¯ä½¿ç”¨ã—ãªã„ã§ãã ã•ã„。 テã‚
[CSS]HTMLを診æ–ã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆ -CSS Diagnostics
NealGrosskopf.comã®ã‚¨ãƒ³ãƒˆãƒªãƒ¼ã‹ã‚‰ã€HTML 4.01ã§éžæŽ¨å¥¨ã¨ã•ã‚Œã‚‹è¦ç´ や空ã®è¦ç´ ã€ç©ºã®å±žæ€§ãªã©ã‚’ピックアップã™ã‚‹ã‚¹ã‚¿ã‚¤ãƒ«ã‚·ãƒ¼ãƒˆã®ç´¹ä»‹ã§ã™ã€‚ CSS Diagnostics - Find Depreciated Elements Using CSS CSS Diagnosticsã¯ã€meyerweb.comã®CSS Tools: Diagnostic CSSã®å½±éŸ¿ã‚’å—ã‘ã¦ä½œæˆã•ã‚ŒãŸã‚‚ã®ã§ã€éžæŽ¨å¥¨ã®è¦ç´ ・属性ã€è¦ç´ ・属性ãŒç©ºã®ç®‡æ‰€ãªã©ã«ãƒœãƒ¼ãƒ€ãƒ¼ã‚’表示ã—ã¾ã™ã€‚ Depreciated Elements：éžæŽ¨å¥¨ã®è¦ç´ <textarea name="code" class="css" cols="60" rows="5"> applet, basefont, center, dir, font, isindex, menu, s, strike, u { border: 5px
1
リリースã€éšœå®³æƒ…å ±ãªã©ã®ã‚µãƒ¼ãƒ“スã®ãŠçŸ¥ã‚‰ã›
最新ã®äººæ°—エントリーã®é…ä¿¡
j次ã®ãƒ–ックマーク
kå‰ã®ãƒ–ックマーク
lã‚ã¨ã§èªã‚€
eコメント一覧を開ã
oページを開ã
http://cssglobe.com/post/1960/css-dos-and-donts-part-2-markup/
{{#tags}}- {{label}}
{{/tags}}