C S S text & photo: Kaminogoya 2xUP http://2xup.boo.jp/ 1 2 3 106 +++ internet magazine 2004.03 +++
c s s CSS Technique 01.blogbody blockquote{ background-color: #CCCCCC; /* */ border-left: solid 5px #FF3300; /* */ margin-left: 1.5em; /* */ margin-right: 1.5em; /* */ padding: 0.9em; /* */ width: auto; /* */.quotetitle{ font-weight: bold; /* */ border-bottom: solid 1px #000000; /* */ <blockquote> <span class="quotetitle"> </span><br /> </blockquote> 4 1 h1{color: red; border:dotted 3px red; h1 { : ; div.blog { : ; div#top { : ;.blogbody, h1 { : ;.blogbody b { : ; +++ internet magazine 2004.03 +++ 107
2 <link rel="stylesheet" href="styles-site.css" type="text/css" /> 108 +++ internet magazine 2004.03 +++
c s s 3 http://members.at.infoseek.co.jp/cssbug/detail/ winie/b032.html http://blog.sfc.keio.ac.jp/blog/archives/000021. html +++ internet magazine 2004.03 +++ 109
CSS Technique 02 #content { margin-left: 225px; /* */ margin-right: 195px; /* */ border: 1px solid #000000; padding: 5px; /* */ #links { float: left; /* */ width: 210px; /* */ margin-right: 5px; / */ margin: 0px; border: 1px solid #000000; padding: 5px; #linksright { float: right; /* */ width: 180px; /* */ margin-left: 5px; /* */ margin: 0px; border: 1px solid #000000; padding: 5px; #footer { clear: both; /* */ margin-top: 5px; /* */ border: 1px solid #000000; padding: 5px; 30 <div id="links">divcontent</div> <div id="linksright">div</div> <div id="content"></div> <div id="footer"> div</div> 110 +++ internet magazine 2004.03 +++
c s s 4 /* */ A {text-decoration: none; background: none; /* */ A:link {color: #FF0000; /* */ A:link:hover {color: #FF3300; text-decoration: underline; /* */ A:link:active {color: #999999; text-decoration: none; /* */ A:visited {color: #66CC00; A:visited:hover { color: #FF3300; text-decoration: underline; A:visited:active { color: #999999; margin: 0px 5px 0px 5px; margin-right: 10px; padding-bottom: 20px; +++ internet magazine 2004.03 +++ 111
CSS Technique 03 body{ background-image: url("http://www.example.com/body_back.png"); background-position: right top; background-repeat: no-repeat; background-attachment: fixed; 5 3.sidetitle{background-color:#000000; body{background-image: url("archives/site/body_back.png"); body{ background-image: url("archives/body_back.png"); background-repeat: no-repeat; background-position: right bottom; background-position: 20% 40%; background-position: 100px 200px; 112 +++ internet magazine 2004.03 +++
c s s CSS Technique 04 sidetitle{ font-size:1em; font-weight:bold; letter-spacing:0em;.side{ font-size:0.8em; line-height:1.6em; 12 6 +++ internet magazine 2004.03 +++ 113
CSS Technique 05.title { font-family:"hirakakustd-w8", Impact, "MS UI Gothic", sans-serif; font-size: 2em; font-weight: bold; color: #666; 17 114 +++ internet magazine 2004.03 +++
c s s CSS Technique 06 http://artifact-jp.com/mt/archives/200304/styleseet_rebuild.html 1 http://internet.impress.co.jp/im/200403mt/ http://www.kanzaki.com/docs/htminfo.html http://www.hotwired.co.jp/webmonkey/reference/stylesheet_guide/ http://web-graphics.com/ http://www.web-source.net/216_color_chart.htm http://color.twysted.net/ http://2xup.boo.jp/css/defaultstyles/ +++ internet magazine 2004.03 +++ 115
[インターネットマガジン バックナンバーアーカイブ] ご 利 用 上 の 注 意 この PDF ファイルは 株 式 会 社 インプレス R&D( 株 式 会 社 インプレスから 分 割 )が 1994 年 ~2006 年 まで 発 行 した 月 刊 誌 インターネットマガジン の 誌 面 を PDF 化 し インターネットマガジン バックナンバー アーカイブ として 以 下 のウェブサイト All-in-One INTERNET magazine 2.0 で 公 開 しているものです http://i.impressrd.jp/bn このファイルをご 利 用 いただくにあたり 下 記 の 注 意 事 項 を 必 ずお 読 みください 記 載 されている 内 容 ( 技 術 解 説 URL 団 体 企 業 名 商 品 名 価 格 プレゼント 募 集 アンケートなど)は 発 行 当 時 のものです 収 録 されている 内 容 は 著 作 権 法 上 の 保 護 を 受 けています 著 作 権 はそれぞれの 記 事 の 著 作 者 ( 執 筆 者 写 真 の 撮 影 者 イラストの 作 成 者 編 集 部 など)が 保 持 しています 著 作 者 から 許 諾 が 得 られなかった 著 作 物 は 収 録 されていない 場 合 があります このファイルやその 内 容 を 改 変 したり 商 用 を 目 的 として 再 利 用 することはできません あくまで 個 人 や 企 業 の 非 商 用 利 用 での 閲 覧 複 製 送 信 に 限 られます 収 録 されている 内 容 を 何 らかの 媒 体 に 引 用 としてご 利 用 する 際 は 出 典 として 媒 体 名 および 月 号 該 当 ページ 番 号 発 行 元 ( 株 式 会 社 インプレス R&D) コピーライトなどの 情 報 をご 明 記 ください オリジナルの 雑 誌 の 発 行 時 点 では 株 式 会 社 インプレス R&D( 当 時 は 株 式 会 社 インプレス)と 著 作 権 者 は 内 容 が 正 確 なものであるように 最 大 限 に 努 めましたが すべての 情 報 が 完 全 に 正 確 であることは 保 証 できません こ のファイルの 内 容 に 起 因 する 直 接 的 および 間 接 的 な 損 害 に 対 して 一 切 の 責 任 を 負 いません お 客 様 個 人 の 責 任 においてご 利 用 ください このファイルに 関 するお 問 い 合 わせ 先 All-in-One INTERNET magazine 編 集 部 im-info@impress.co.jp Copyright 1994-2007 Impress R&D, an Impress Group company. All rights reserved.